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

second challenge completed

Browse source
This commit is contained in:
Mike 2025-01-04 15:05:58 -05:00
parent 90442d6a85
commit bf026f903e
2 changed files with 97 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
challenge2/index.html Normal file
View file

@ -0,0 +1,55 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Day 01</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="intro-content">
<h1>Lorem ipsum dolor sit.</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Exercitationem aspernatur distinctio laudantium dolores. Nulla
quibusdam reprehenderit eum sit minus aliquid!
</p>
</div>
</div>
<div class="container section">
<div class="next-content">
<h2>more content D:</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis,
mollitia adipisci magnam voluptatibus repellendus fuga ut repellat
exercitationem eaque amet, omnis aliquam fugiat laudantium id dicta
at? Consectetur iure porro illum laudantium excepturi a laborum!
</p>
<p>
Sit magni soluta porro fugit placeat eius itaque, accusamus quisquam
voluptates reiciendis pariatur, vitae molestiae. Minima, quos
reprehenderit autem animi, nisi necessitatibus eligendi quis modi,
facilis ipsam nihil odit quaerat! Nisi doloribus harum culpa ipsam!
</p>
<p>
Sint corporis animi repudiandae. Aliquid illum, tenetur magnam
provident molestiae rem doloremque aspernatur quia reiciendis est
facilis enim praesentium officia sequi qui debitis exercitationem
quaerat hic quos recusandae. Architecto repudiandae aperiam tempora
iste saepe error.
</p>
<p>
Provident aut suscipit aspernatur doloribus illum assumenda cupiditate
perferendis dolores! Obcaecati omnis magnam ipsam voluptas ipsa eos
explicabo quisquam architecto similique, sunt repellendus animi a
doloribus ab deserunt. Dicta neque nostrum modi, illum debitis
dolorem.
</p>
</div>
</div>
</body>
</html>

42
challenge2/style.css Normal file
View file

@ -0,0 +1,42 @@
/* INSTRUCTIONS
*
* 1) Keep the text inside .intro-content
* in the same place, but have the background
* extend from one side of the viewport
* to the other, no matter how wide or narrow
* the browser is.
*
* 2) Limit the maximum width of the text in the
* bottom area.
*
* You may modify the HTML if needed
* (you probably should for this challenge)
*
*/
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
}
.container {
width: 80%;
max-width: 750px;
margin: 0 auto;
background: #23424a;
color: white;
padding: 50px 1em;
}
.intro-content {
width: 50%;
}
.section {
background: white;
color: black;
}