Skip to content

using grid template #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: starter-files
Choose a base branch
from
Open

using grid template #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion 2 - multi-column/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,23 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="grid-container">
<article class="feature">
<img src="img/1.png" alt="">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sint numquam, nesciunt explicabo velit odio odit beatae necessitatibus obcaecati exercitationem, nulla iure dolor minima aliquid hic tempore! Quibusdam, culpa. A ipsa laborum in beatae tempora sapiente voluptates voluptatibus aperiam nulla, reiciendis, assumenda velit fugiat iusto explicabo illum quidem architecto sint?</div>
</article>
<article>
<img src="img/1.png" alt="">
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt perspiciatis est autem aliquam? Eum voluptas nulla doloribus aspernatur quis maxime veniam distinctio, dolorum a ullam inventore, iure harum ratione facere eaque incidunt quidem. Nulla non, saepe itaque ex deleniti accusamus asperiores excepturi nam sequi, ullam doloribus alias officiis quia temporibus!</div>
</article>
<article>
<img src="img/2.png" alt="">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos soluta maxime porro sint, optio nulla dicta unde nostrum? Dolorem error molestias aliquid distinctio voluptas suscipit sit nobis. Excepturi voluptatibus, iusto asperiores deleniti voluptatem omnis veniam facilis, doloremque temporibus, autem voluptate quibusdam nihil odio deserunt doloribus modi incidunt suscipit beatae saepe.</div>
</article>
<article>
<img src="img/3.png" alt="">
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt officiis nemo doloribus blanditiis, dolore exercitationem itaque nihil enim suscipit, dicta quisquam corrupti explicabo voluptas in natus assumenda dolorem dolor est, fugit harum similique saepe. Ipsum excepturi voluptatum, repellat error nisi delectus beatae soluta nihil magni laboriosam adipisci neque doloribus laudantium!</div>
</article>
</div>
</body>
</html>
39 changes: 39 additions & 0 deletions 2 - multi-column/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;800&family=VT323&display=swap');

body {
font-size: 16px;
margin: 20px;
font-family: "Poppins";
background: #d1dedd;
Expand All @@ -14,4 +15,42 @@ h1,h2,h3 {
}
p {
color: #828b8a;
}
.grid-container{
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 20px;

}
.feature{
grid-column: span 3;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: center;
}
img{
width: 100%;
border: 5px solid #fff;
border-radius: 10px;
}

@media screen and (max-width:760px) {
article{
grid-column: span 3;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
font-size: 0.8rem;
}
}
@media screen and (max-width:550px) {
article{
display: grid;
grid-template-columns: 1fr;
}
.feature{
grid-template-columns: 1fr;
}

}