smig/responsive-layouts
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: challenge 4

Browse source
This commit is contained in:
mike 2025-01-09 23:04:55 -05:00
parent 55c08a75f4
commit 77fed38846
2 changed files with 215 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

79
challenge4/index.html Normal file
View file

@ -0,0 +1,79 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Responsive Layouts Challenge</title>
<link href="style.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="container container-color">
<div class="hero">
<h1 class="tagline">Responsive layouts don't have to be a struggle</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat
culpa vitae rerum laboriosam hic ipsam, distinctio blanditiis rem
deserunt voluptatibus non obcaecati unde explicabo quod saepe
voluptates magnam aut accusantium.
</p>
<button type="">I WANT TO LEARN</button>
</div>
</div>
<div class="cards">
<div class="card">
<h2 class="card-heading">Good</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
pariatur enim totam excepturi consequatur, ipsa voluptate blanditiis
provident, in, laboriosam quibusdam sapiente aliquam! Nostrum, rem
aliquam quas officiis alias iste?
</p>
</div>
<div class="card">
<h2 class="card-heading">Better</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
pariatur enim totam excepturi consequatur, ipsa voluptate blanditiis
provident, in, laboriosam quibusdam sapiente aliquam! Nostrum, rem
aliquam quas officiis alias iste?
</p>
</div>
<div class="card">
<h2 class="card-heading">Best</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
pariatur enim totam excepturi consequatur, ipsa voluptate blanditiis
provident, in, laboriosam quibusdam sapiente aliquam! Nostrum, rem
aliquam quas officiis alias iste?
</p>
</div>
</div>
<div class="cards footer">
<div class="card">
<h2 class="card-heading">Better</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
pariatur enim totam excepturi consequatur, ipsa voluptate blanditiis
provident, in, laboriosam quibusdam sapiente aliquam! Nostrum, rem
aliquam quas officiis alias iste?
</p>
</div>
<div class="card">
<h2 class="card-heading">Best</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
pariatur enim totam excepturi consequatur, ipsa voluptate blanditiis
provident, in, laboriosam quibusdam sapiente aliquam! Nostrum, rem
aliquam quas officiis alias iste?
</p>
</div>
</div>
</body>
</html>