Rework the styling to make it pretty
This commit is contained in:
parent
9ea447c447
commit
6caa872c8b
|
@ -6,7 +6,6 @@
|
|||
<link rel="stylesheet" href="style.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrap">
|
||||
<header>
|
||||
<p>Welcome to</p>
|
||||
<h1>Emi's Homepage</h1>
|
||||
|
@ -111,6 +110,5 @@
|
|||
</a></p>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
51
style.css
51
style.css
|
@ -1,8 +1,57 @@
|
|||
/* Basic styling */
|
||||
body {
|
||||
background-color: #2A1A35;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: Comic Mono;
|
||||
}
|
||||
|
||||
/* Setting up the centered content */
|
||||
section {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
|
||||
padding: 50px 0;
|
||||
}
|
||||
section > * {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
/* Styles for the header */
|
||||
header p:first-of-type {
|
||||
font-size: 2em;
|
||||
}
|
||||
h1 {
|
||||
font-size: 5em;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
background-color: #2A1A35;
|
||||
}
|
||||
|
||||
/* Color Scheme */
|
||||
h1, a {
|
||||
color: #AA89FD;
|
||||
}
|
||||
h2 {
|
||||
color: #B50085;
|
||||
}
|
||||
section:nth-child(1) {
|
||||
background-color: #26182F;
|
||||
}
|
||||
section:nth-child(2) {
|
||||
background-color: #211629;
|
||||
}
|
||||
section:nth-child(3) {
|
||||
background-color: #1D1422;
|
||||
}
|
||||
section:nth-child(4) {
|
||||
background-color: #18121C;
|
||||
}
|
||||
section:nth-child(5) {
|
||||
background-color: #141016;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue