Remove nesting
This commit is contained in:
parent
5d5cc6a6a4
commit
d9df9406ef
2 changed files with 111 additions and 113 deletions
23
index.html
23
index.html
|
@ -15,9 +15,8 @@
|
|||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container center">
|
||||
<div class="card">
|
||||
<div class="image center">
|
||||
<main class="card">
|
||||
<div class="image-container">
|
||||
<img
|
||||
src="/images/illustration-article.svg"
|
||||
alt="Article illustration"
|
||||
|
@ -29,19 +28,23 @@
|
|||
|
||||
<p class="date">Published 21 Dec 2023</p>
|
||||
|
||||
<h1>HTML & CSS foundations</h1>
|
||||
<h1 class="heading">HTML & CSS foundations</h1>
|
||||
|
||||
<p class="description">
|
||||
These languages are the backbone of every website, defining
|
||||
structure, content, and presentation.
|
||||
These languages are the backbone of every website, defining structure,
|
||||
content, and presentation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<img width="32px" height="32px" src="/images/image-avatar.webp" alt="Author avatar">
|
||||
<div class="author">
|
||||
<img
|
||||
width="32px"
|
||||
height="32px"
|
||||
src="/images/image-avatar.webp"
|
||||
alt="Greg Hooper"
|
||||
/>
|
||||
<p>Greg Hooper</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
37
styles.css
37
styles.css
|
@ -14,23 +14,20 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f4d04e;
|
||||
font-family: "Figtree";
|
||||
}
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.container {
|
||||
background-color: #f4d04e;
|
||||
padding: 24px;
|
||||
min-height: 100dvh;
|
||||
font-family: "Figtree";
|
||||
}
|
||||
|
||||
.card {
|
||||
|
@ -46,8 +43,13 @@ body {
|
|||
|
||||
padding: 24px;
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.image {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
|
@ -61,6 +63,7 @@ body {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.learning {
|
||||
border-radius: 4px;
|
||||
|
@ -79,7 +82,7 @@ body {
|
|||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h1 {
|
||||
.heading {
|
||||
font-weight: 800;
|
||||
font-size: 24px;
|
||||
line-height: 1.5;
|
||||
|
@ -92,7 +95,7 @@ body {
|
|||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
@media (max-width: 576px) {
|
||||
.learning {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
@ -109,9 +112,8 @@ body {
|
|||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
.author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
@ -122,10 +124,3 @@ body {
|
|||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
Reference in a new issue