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

challenge 5

Browse source
This commit is contained in:
mike 2025-02-04 19:41:15 -05:00
parent 77fed38846
commit c095201479
4 changed files with 216 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
challenge5/img/hero-img.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 132 KiB

79
challenge5/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.0" />
<title>Conquering Rsponsive Layouts</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="hero">
<div class="container row">
<div class="hero__text">
<h1>Responsive layouts don’t have to be a struggle</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam.
</p>
<a href="#" class="btn">I want to learn</a>
</div>
<div class="hero__image">
<img src="img/hero-img.jpg" alt="" />
</div>
</div>
</div>
<div class="content container row">
<div class="container content_text">
<h2 class="content__subheading">
Quality designs made custom, on demand, just for you
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempora
ipsa consequatur nisi nemo mollitia dignissimos, commodi maiores
aperiam beatae sed esse? Tempora, voluptas magni! Repudiandae sapiente
maxime minima dignissimos.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempora
ipsa consequatur nisi nemo mollitia dignissimos, commodi maiores
aperiam beatae sed esse? Tempora, voluptas magni! Repudiandae sapiente
maxime minima dignissimos.
</p>
</div>
<div class="container cards">
<div class="card">
<h2>Quality</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo
enim nemo voluptatibus quas, ab cumque iste! Officia dolores fugit
vel! Doloribus labore facilis ea omnis id rerum amet repellendus.
</p>
</div>
<div class="card">
<h2>Quirky</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo
enim nemo voluptatibus quas, ab cumque iste! Officia dolores fugit
vel! Doloribus labore facilis ea omnis id rerum amet repellendus.
</p>
</div>
<div class="card">
<h2>Quick</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo
enim nemo voluptatibus quas, ab cumque iste! Officia dolores fugit
vel! Doloribus labore facilis ea omnis id rerum amet repellendus.
</p>
</div>
</div>
</div>
</body>
</html>

123
challenge5/style.css Normal file
View file

@ -0,0 +1,123 @@
/*
////// For this challenge ///////
- All text is in the text.md file
// Requirements
1. Refer to the design specs for the
overall layout
2. The image should line up with
the sidebar in the section
below
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Roboto", sans-serif;
font-size: 1.3rem;
}
img {
max-width: 100%;
}
h1 {
font-size: 3rem;
margin-top: 0;
}
.container {
width: 80%;
max-width: 1100px;
margin: 0 auto;
}
.row {
/* display: flex => flex container */
display: flex;
justify-content: space-between;
/* can't use yet */
/* gap: 100px; */
}
.col {
/* these are now flex items */
width: 100%;
}
.col + .col {
margin-left: 30px;
}
.hero {
padding: 100px 0;
background-color: #23424a;
color: #fff;
}
.hero__text {
width: 62%;
}
.hero__img {
width: 32%;
align-self: flex-start;
}
.hero p {
margin-bottom: 3em;
}
.btn {
display: inline-block;
text-decoration: none;
text-transform: uppercase;
color: #23424a;
font-weight: 900;
background-color: #38cfd9;
padding: 0.75em 2em;
border-radius: 100px;
}
.btn:hover,
.btn:focus {
opacity: 0.75;
}
.content.container.row {
margin-top: 2em;
}
.content_text {
padding: 1em;
}
.content__subheading {
color: #136c72;
}
.container.cards {
margin-left: 1em;
background: #136c72;
padding: 1em;
text-align: center;
}
.card {
color: white;
}
@media only screen and (max-width: 550px) {
.content.container.row {
flex-wrap: wrap;
}
}

14
challenge5/text.md Normal file
View file

@ -0,0 +1,14 @@
## Quality designs made custom, on demand, just for you
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
## Cheap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
## Quick
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
## Quality
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.