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
Show stats 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>

136
challenge4/style.css Normal file
View file

@ -0,0 +1,136 @@
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 2. Remove default margin */
* {
margin: 0;
}
body {
/* 3. Add accessible line-height */
line-height: 1.5;
/* 4. Improve text rendering */
-webkit-font-smoothing: antialiased;
height: 100vh;
font-family: "Roboto", serif;
}
/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
font: inherit;
}
/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/* 8. Improve line wrapping */
p {
text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
}
/*
9. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}
.container {
min-height: 55vh;
padding: 8em;
}
.container-color {
background: #23424a;
color: white;
}
.hero {
color: white;
}
.hero h1 {
font-family: "Roboto", serif;
font-weight: 900;
font-style: normal;
font-size: 48px;
width: 55%;
}
.hero p {
width: 55%;
margin-top: 2em;
font-family: "Roboto", serif;
font-weight: 400;
font-style: normal;
font-size: 21px;
}
.hero button {
font-weight: 500;
font-size: 21px;
margin-top: 2em;
padding: 0.75em 2em;
border: none;
border-radius: 2em;
background: #38cfd9;
}
.cards {
padding: 5em;
display: flex;
gap: 1em;
}
.card {
text-align: center;
padding: 1em;
}
.card h2 {
margin: 1em;
font-size: 36px;
color: #87629a;
}
.footer {
background: #136c72;
color: white;
}
.footer > .card > h2 {
color: white;
}