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

day1: removed height from container

Browse source
This commit is contained in:
Mike 2025-01-02 11:45:46 -05:00
parent c2bfa3dadf
commit 90442d6a85
2 changed files with 79 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
day1/index.html Normal file
View file

@ -0,0 +1,43 @@
<!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. Quod unde
rerum, deleniti ea obcaecati sint hic odit dicta tenetur qui ut
dolorum provident sit, atque, reprehenderit nulla voluptate! Officiis,
consectetur?
</p>
<p>
Iste ipsa enim delectus porro, ullam repellendus maiores quis rem
debitis cum, necessitatibus architecto dolor? Velit, ad quaerat
blanditiis veritatis expedita totam vel voluptatem officiis officia ab
modi voluptatibus obcaecati.
</p>
<p>
Accusantium minima iusto nobis fuga hic explicabo unde illum,
perferendis et animi aperiam quaerat, eaque deleniti alias blanditiis
exercitationem commodi repudiandae ullam consequatur incidunt
reiciendis repellat officia laboriosam. Esse, modi.
</p>
<p>
Expedita cupiditate iure odit, delectus placeat optio magnam assumenda
mollitia aspernatur at saepe nisi commodi natus excepturi voluptate.
Recusandae nisi dolorem, necessitatibus optio aliquam repellat.
Adipisci, incidunt. Consequuntur, natus nulla.
</p>
</div>
</div>
</body>
</html>

36
day1/style.css Normal file
View file

@ -0,0 +1,36 @@
/* INSTRUCTIONS
*
* 1) Limit the total width of
* the .intro-conent to about half
* of it's parent
*
* 2) Stop the text from overflowing
* out the bottom at small screen
* widths
*
* You may modify the HTML if needed
*
*/
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
}
.container {
background: #23424a;
color: white;
width: 80%;
margin: 0 auto;
padding: 2em;
}
.intro-content {
padding: 2em;
width: 50%;
}