I am trying to layout a website using flexbox layout. The main goal is to have a header, a footer and a navigation to the left. The main and aside parts are to be placed in the middle and to the right. So far i got it to work using the following:
html {
font-family: sans-serif;
font-size: 1rem;
}
* {
box-sizing: border-box;
padding: 0;
border: 0;
margin: 0;
}
html * {
/* debugging */
border: 1px dotted hotpink;
}
body {
display: flex;
flex-flow: row wrap;
/* height: 100vh; */
}
nav {
width: 10%;
}
main {
width: 75%;
}
aside {
width: 15%;
}
header, footer {
width: 100%;
text-align: center;
background-color: hotpink;
}
main {
flex: 1 1 auto;
}
nav {
background-color: lightblue;
}
nav ul {
display: flex;
flex-flow: column nowrap;
list-style-type: none;
}
nav ul li:hover {
background-color: royalblue;
}
nav ul li a {
display: block;
text-decoration: none;
padding: 0.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<header>
<h1>THIS IS THE REALLY BIG HEADER</h1>
</header>
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</nav>
<main>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga unde consequatur laborum cupiditate odio ipsa
cumque, dolorem temporibus aut ipsam commodi autem maiores delectus non vitae recusandae magni consequuntur ab!
</main>
<aside>aside</aside>
<footer>(c) by me</footer>
</body>
</html>
However: When using the line
/* height: 100vh; */
all components are stretched to use the whole screen-height. My intent is to just make the navigation, main and aside stretch, but let the header and footer use only the space they need. How can i accomplish this?
You can do the following:
1) Set for <body> tag property
flex-flow: column;
min-height: 100vh;
2) Add wrapper for tags <nav>, <main>, <aside>and set for this properties
flex-grow: 1;
display: flex;
Result
html {
font-family: sans-serif;
font-size: 1rem;
}
* {
box-sizing: border-box;
padding: 0;
border: 0;
margin: 0;
}
html * {
/* debugging */
border: 1px dotted hotpink;
}
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
nav {
width: 10%;
}
main {
width: 75%;
}
aside {
width: 15%;
}
header,
footer {
width: 100%;
text-align: center;
background-color: hotpink;
}
main {
flex: 1 1 auto;
}
nav {
background-color: lightblue;
}
nav ul {
display: flex;
flex-flow: column nowrap;
list-style-type: none;
}
nav ul li:hover {
background-color: royalblue;
}
nav ul li a {
display: block;
text-decoration: none;
padding: 0.5em;
}
.page {
flex-grow: 1;
display: flex;
}
<header>
<h1>THIS IS THE REALLY BIG HEADER</h1>
</header>
<div class="page">
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</nav>
<main>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga unde consequatur laborum cupiditate odio ipsa cumque, dolorem temporibus aut ipsam commodi autem maiores delectus non vitae recusandae magni consequuntur ab!
</main>
<aside>aside</aside>
</div>
<footer>(c) by me</footer>
And same code on CodePen
Do this:
body {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
}
Related
I made a page using HTML and CSS only. Tried to make it responsive. I say, I managed that, but there are some issues. First is, my navigation is not sticky. I wanted it to stick to the top when I scroll, but it does not work. Second thing is, when I resize the screen for mobile device, div with class "kid desni" goes over div with class="kid levi". Why is that happening? Also, on bigger screen, div with class="kid levi" and div with class="kid desni" should be aligned next to each other, but div with class "desni" is a bit higher than it should be. And the img does not take full space of its parent div. Third thing is, do you know how to make that blue part "why adventure travel" look like that? And fourth, those small images bellow are cut on the bottom, if you can see, a little bit. How do I do that? I hope you understand what I am trying to achieve here. :) Here is part of HTML code that I want to fix:
<div class="container">
<header class="" >
<div style="height: 30px;">
<nav>
<div class=logo>
<img src="images/logoicon.png" alt="sunce">
<img src="images/logotext.png" alt="outdoors" id="logotext"></a>
</div>
<ul class="nav-ul">
<li>Destinations</li>
<li>Travel style</li>
<li>Trabel deals</li>
<li>Gear</li>
</ul>
<div class="forma">
<input type="search" placeholder="search" class="pretraga">
<i class="fa fa-search"></i>
</div>
</nav>
</div>
</header>
<main>
<h1 style="text-align: center; margin-top: 70px;">CONNECT TO THE WORLD</h1>
<div class="content">
<div class="kid levi">
<div>
<h3>Our worls deservs more you</h3>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit tempore
velit impedit praesentium corporis sunt iure eaque, laudantium mollitia dicta eos eum
assumenda inventore itaque qui harum repudiandae error repellat.
</div>
<div>
<h3>Whatever your style see it your way</h3>
Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Quisquam nihil, maiores soluta eos modi dolor error. Accusamus saepe mollitia
eaque, possimus fuga libero voluptatum consectetur asperiores vitae porro voluptatibus velit?
</div>
</div>
<div class="kid desni"> <!-- this is the div with and img that needs to be aligned and overlaps div above on small screen -->
<div>
<img src="images/img-connect.jpg" alt="conn" id="conn"
style="max-width: 80%; max-height: auto; margin-top: 50px;" >
</div>
</div>
</div><br>
And here is CSS:
nav {
background-color: steelblue;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
position: sticky;
top: 0;
}
.nav-ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
/* background-color: #333; */
}
.nav-ul li {
display: inline;
float: left;
}
.nav-ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-ul li:last-child {
float: right;
}
.nav-ul li a:hover:not(.active) {
background-color: #111;
}
#logotext {
margin-bottom: 10px;
margin-left: 10px;
}
main {
width: 95%;
margin: auto;
}
.content {
display: flex;
margin-bottom: 70px;
}
.levi {
display: flex;
flex-direction: column;
}
.kid {
display: flex;
width: 100%;
height: 200px;
align-items: center;
margin: 0;
}
And this is for smaller screen:
#media screen and (max-width: 768px) {
nav {
display: block;
text-align: center;
}
.nav-ul,
.nav-ul li {
float: none;
}
.nav-ul li:last-child {
float: none;
}
.container {
width: 100%;
}
.content {
/* display: block; */
flex-direction: column;
}
.kid {
/* display: block; */
}
.levi {
/* display: block; */
}
.desni {
display: none;
}
This is how it's suppose to look:
This is how I made it. Big and small screen are shown.
I am doing a side project about a movie website. I designed an RWD navbar as following. When I downsize the screen to the break point which is 576px, the mobile-version navbar would pop up automatically then hide. The result can be seen if running the snippet then expand and collapse the window. I guess the checkbox causes this issue but not really sure. Could someone help me with this issue, please? Thank you!
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
.wrap {
width: 100%;
}
header {
height: 100px;
background: #000;
padding: 0 10px;
color: #fff;
display: flex;
align-items: center;
position: relative;
}
#checked {
visibility: hidden;
z-index: -9999;
position: absolute;
}
#checked:checked ~.navbar {
right: 0;
}
.logo {
height: 60%;
vertical-align: middle;
}
.navbar{
margin-left: auto;
font-size: 0;
position: fixed;
width: 100%;
height: 100vh;
background: #000;
right: -100%;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: .5s;
z-index: 999;
}
.navbar a {
display: block;
margin: 20px 0;
transition: .4s;
}
.navbar a:hover, .hideBtn:hover {
color: #3498db;
}
.navbar a,
.hideBtn, .showBtn {
font-size: 20px;
padding: 0 10px;
text-decoration: none;
color: #fff;
}
.showBtn {
position: absolute;
top: 37px;
right: 10px;
}
.showcase {
position: relative;
background: url("./image/photo-1517604931442-7e0c8ed2963c.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.showcase .mask {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1;
opacity: 0.5;
}
.showcase .txt,
.showcase .slogan {
position: absolute;
color: #fff;
z-index: 2;
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 3em;
}
.showcase .slogan {
font-size: 1.2em;
bottom: 35%;
}
.service {
display: grid;
grid-template-rows: repeat(3, 1fr);
background-color: #000;
grid-gap:20px;
padding: 30px 50px;
}
.service a {
display: flex;
width: auto;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
}
.service a img {
width: 30%;
}
.service a p {
color: #fff;
font-size: 1.5em;
font-weight: bolder;
margin: 10px;
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr;
grid-gap: 0px;
}
.content div {
width: 100%;
text-align: center;
font-size: 1.5em;
}
.content div:nth-child(even) {
background-color: #000;
color: #fff;
}
.content div img {
width: 100%;
}
.content div p {
padding: 10px;
}
footer {
display: flex;
flex-direction: column;
width: 100%;
}
.contact-info {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #000;
}
.contact-txt {
display: flex;
flex-flow: column nowrap;
width: 50%;
color: #fff;
}
footer #social-media img{
width: 30px;
margin: 0 5px;
}
.copyright {
text-align: center;
}
#media screen and (min-width: 576px) {
.showBtn, .navbar .hideBtn {
display: none;
}
.navbar{
margin-left: auto;
font-size: 0;
position: relative;
width: auto;
height: 100%;
background: #000;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
transition: none;
z-index: 0;
}
.showcase .txt {
font-size: 4em;
}
.showcase .slogan {
font-size: 2em;
}
.service {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.content div {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie List</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#600&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<img class="logo" src="./image/media.svg" />
<input type="checkbox" id="checked">
<label for="checked" class="showBtn">
<i class="fas fa-bars"></i>
</label>
<nav class="navbar">
About
Explore
Contact us
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
</header>
<div class="showcase">
<div class="mask"></div>
<h1 class="txt">HOME CINEMA</h1>
<h2 class="slogan">Experience Cinema at home</h2>
</div>
<div class="service">
<a href="#subscribe-info">
<img src="./image/communications.svg" alt="">
<p>$99 / month</p>
</a>
<a href="#vr-info">
<img src="./image/electronics.svg" alt="">
<p>Virtual Reality</p>
</a>
<a href="#unlimited-info">
<img src="./image/arrows.svg" alt="">
<p>Unlimited Watch</p>
</a>
</div>
<div class="content">
<div id="subscribe-info">
<img src="./image/photo-1543536448-d209d2d13a1c.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis necessitatibus ratione, ut sunt
voluptatibus totam a repudiandae enim nihil beatae ducimus aliquid! Et, beatae reprehenderit aspernatur est
hic commodi expedita.</p>
</div>
<div id="vr-info">
<img src="./image/pexels-photo-3391378.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque possimus facere ipsum unde saepe maxime
voluptatem tempora sint pariatur at, nobis ipsam necessitatibus similique maiores, reiciendis repudiandae
voluptatum, cumque repellat.</p>
</div>
<div id="unlimited-info">
<img src="./image/pexels-photo-3912397.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, nesciunt veniam, reprehenderit, fugiat nemo
fugit natus dicta maxime delectus ut quos et mollitia obcaecati pariatur. Rerum minima delectus sint ex?</p>
</div>
</div>
<footer>
<div class="contact-info">
<div class="contact-txt">
<p>hola#jamondetaiwan.com</p>
<p>+886 2771 5412</p>
<p>2F., No. 2, Ln. 179, Kanghu Rd., Neihu Dist., Taipei City 114, Taiwan (R.O.C.)</p>
</div>
<div id="social-media">
<img src="./image/fb.svg" alt="">
<img src="./image/ig.svg" alt="">
<img src="./image/youtube.svg" alt="">
</div>
</div>
<div class="copyright">
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</body>
</html>
This arises due to the CSS transition: .5s; in .navbar; when you reach the breakpoint, you are changing the right position and CSS is animating it. To avoid this, specify the properties you want to animate or add the transition property using JavaScript before you show the menu. For example, using jQuery:
$(".navbar").css("transition", ".5s");
Edit: I missed the CSS selector that is causing the animation and so assumed it was jQuery.
To address the issue with just HTML/CSS, you can create a copy of the navbar and use display: none;. The following snippet should work; I have added a copy of the navbar and added the classes .navbar-big and .navbar-small. This allow us to use the display property to hide the navbar we don't want to show based on the breakpoint, and set transition: right .5s; for .navbar-small.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
.wrap {
width: 100%;
}
header {
height: 100px;
background: #000;
padding: 0 10px;
color: #fff;
display: flex;
align-items: center;
position: relative;
}
#checked {
visibility: hidden;
z-index: -9999;
position: absolute;
}
#checked:checked ~.navbar {
right: 0;
transition: .5s;
}
.logo {
height: 60%;
vertical-align: middle;
}
.navbar {
margin-left: auto;
font-size: 0;
position: fixed;
width: 100%;
height: 100vh;
background: #000;
right: -100%;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 999;
}
.navbar-small {
transition: right .5s;
}
.navbar-big {
display: none;
}
.navbar a {
display: block;
margin: 20px 0;
transition: .4s;
}
.navbar a:hover, .hideBtn:hover {
color: #3498db;
}
.navbar a,
.hideBtn, .showBtn {
font-size: 20px;
padding: 0 10px;
text-decoration: none;
color: #fff;
}
.showBtn {
position: absolute;
top: 37px;
right: 10px;
}
.showcase {
position: relative;
background: url("./image/photo-1517604931442-7e0c8ed2963c.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.showcase .mask {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1;
opacity: 0.5;
}
.showcase .txt,
.showcase .slogan {
position: absolute;
color: #fff;
z-index: 2;
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 3em;
}
.showcase .slogan {
font-size: 1.2em;
bottom: 35%;
}
.service {
display: grid;
grid-template-rows: repeat(3, 1fr);
background-color: #000;
grid-gap:20px;
padding: 30px 50px;
}
.service a {
display: flex;
width: auto;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
}
.service a img {
width: 30%;
}
.service a p {
color: #fff;
font-size: 1.5em;
font-weight: bolder;
margin: 10px;
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr;
grid-gap: 0px;
}
.content div {
width: 100%;
text-align: center;
font-size: 1.5em;
}
.content div:nth-child(even) {
background-color: #000;
color: #fff;
}
.content div img {
width: 100%;
}
.content div p {
padding: 10px;
}
footer {
display: flex;
flex-direction: column;
width: 100%;
}
.contact-info {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #000;
}
.contact-txt {
display: flex;
flex-flow: column nowrap;
width: 50%;
color: #fff;
}
footer #social-media img{
width: 30px;
margin: 0 5px;
}
.copyright {
text-align: center;
}
#media screen and (min-width: 576px) {
.showBtn, .navbar .hideBtn {
display: none;
}
.navbar {
margin-left: auto;
font-size: 0;
position: relative;
width: auto;
height: 100%;
background: #000;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
transition: none;
z-index: 0;
}
.navbar-small {
display: none;
}
.showcase .txt {
font-size: 4em;
}
.showcase .slogan {
font-size: 2em;
}
.service {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.content div {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie List</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#600&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<img class="logo" src="./image/media.svg" />
<input type="checkbox" id="checked">
<label for="checked" class="showBtn">
<i class="fas fa-bars"></i>
</label>
<nav class="navbar navbar-big">
About
Explore
Contact us
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
<nav class="navbar navbar-small">
About
Explore
Contact us
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
</header>
<div class="showcase">
<div class="mask"></div>
<h1 class="txt">HOME CINEMA</h1>
<h2 class="slogan">Experience Cinema at home</h2>
</div>
<div class="service">
<a href="#subscribe-info">
<img src="./image/communications.svg" alt="">
<p>$99 / month</p>
</a>
<a href="#vr-info">
<img src="./image/electronics.svg" alt="">
<p>Virtual Reality</p>
</a>
<a href="#unlimited-info">
<img src="./image/arrows.svg" alt="">
<p>Unlimited Watch</p>
</a>
</div>
<div class="content">
<div id="subscribe-info">
<img src="./image/photo-1543536448-d209d2d13a1c.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis necessitatibus ratione, ut sunt
voluptatibus totam a repudiandae enim nihil beatae ducimus aliquid! Et, beatae reprehenderit aspernatur est
hic commodi expedita.</p>
</div>
<div id="vr-info">
<img src="./image/pexels-photo-3391378.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque possimus facere ipsum unde saepe maxime
voluptatem tempora sint pariatur at, nobis ipsam necessitatibus similique maiores, reiciendis repudiandae
voluptatum, cumque repellat.</p>
</div>
<div id="unlimited-info">
<img src="./image/pexels-photo-3912397.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, nesciunt veniam, reprehenderit, fugiat nemo
fugit natus dicta maxime delectus ut quos et mollitia obcaecati pariatur. Rerum minima delectus sint ex?</p>
</div>
</div>
<footer>
<div class="contact-info">
<div class="contact-txt">
<p>hola#jamondetaiwan.com</p>
<p>+886 2771 5412</p>
<p>2F., No. 2, Ln. 179, Kanghu Rd., Neihu Dist., Taipei City 114, Taiwan (R.O.C.)</p>
</div>
<div id="social-media">
<img src="./image/fb.svg" alt="">
<img src="./image/ig.svg" alt="">
<img src="./image/youtube.svg" alt="">
</div>
</div>
<div class="copyright">
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</body>
</html>
Forgive my if my html and css is bad this is my first page im doing alone. I have been working on this issue for atleast 3 hours I have my index page complete looks halfway decent but when I commit it to github and view it on my sons iphone the images look squished and the aspect ratio is off. If I can have any help thanks in advance!!
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/stylesheet.css" />
<title>RealtorsRUs</title>
</head>
<body>
<!-- Begin Navbar -->
<header class="hero">
<div id="navbar" class="navbar">
<h1 class="logo">
MReality
</h1>
<nav>
<ul>
<li>
<a class="current" href="index.html">Home</a></li>
<li>
About Us</li>
<li>
Contact Us</li>
</ul>
</nav>
</div>
<!-- End Navbar -->
<div class="content">
<h1>Welcome Home</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque vero
excepturi dolore sequi quibusdam nostrum aperiam voluptatum nihil
deserunt explicabo!
</p>
Read More
</div>
</header>
<main>
<!-- Begin Featured Listings -->
<section class="featuredlistings">
<h2>Featured Listings</h2>
<div class="flex-row">
<div class="item1">
<img
src="images/evelyn-paris-XJnP4L958ds-unsplash.jpg"
alt="Home"
/>
</div>
<div class="item2">
<img
src="images/jesse-roberts-561igiTyvSk-unsplash.jpg"
alt="Home"
/>
</div>
<div class="item3">
<img
src="images/daniel-barnes-RKdLlTyjm5g-unsplash.jpg"
alt="Home"
/>
</div>
</section>
<article id="section-1" class="flex-row-article">
<div class="article-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore mollitia, ipsa neque aliquid quod similique consequatur accusantium harum facere natus. Omnis blanditiis incidunt nobis similique reprehenderit illo quaerat, sed ad reiciendis fugit sequi molestias, inventore, exercitationem consectetur soluta. Quibusdam quod laborum eaque, perferendis fugit similique dolorem ipsum mollitia sunt incidunt?
</p>
</div>
<div class="article-2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam ut dignissimos vitae voluptatum, obcaecati quidem, eaque, amet cum illo eos numquam iste officiis quia aspernatur animi dicta consectetur nulla eligendi! Laboriosam quas sunt dolor dignissimos illo at porro asperiores, earum, cum sapiente voluptates nemo animi dolore repellat libero cupiditate nulla?
</p>
</div>
</article>
</main>
<footer id="mainfooter">
<p>MReality © 2020, All Rights Reserved</p>
</footer>
</body>
</html>
enter code here
css
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
cursor: pointer;
display: inline-block;
padding: 10px 60px;
color: #fff;
border: none;
border-radius: 5px;
background-color: #333;
font-size: 20px;
opacity: .95;
}
.flex-row {
display: flex;
text-align: center;
justify-content: center;
}
.flex-row div{
margin: 5px;
display: flex;
}
.flex-row h3{
font-size: 3rem;
}
.flex-row-article {
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
body {
background: #f9f9f9;
color: #333;
line-height: 1.6;
}
ul {
list-style: none;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: #fff;
height: 50px;
width: 100%;
padding: 5px;
position: fixed;
top: 0px;
opacity: 0.9;
z-index: 2;
}
.navbar a {
color: #fff;
padding: 10px 10px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: #fff 2px solid;
}
.navbar ul {
display: flex;
position: sticky;
top: 0;
}
img {
max-width: 100%;
}
.logo{
font-size: 1.5rem;
}
a {
text-decoration: none;
color: #333;
}
.hero-aboutus {
background: url("../images/roger-starnes-sr-BNY7m7BhS2o-unsplash.jpg") no-repeat center
center/cover;
height: 100vh;
text-align: center;
}
.hero-contactus {
background: url("../images/bailey-anselme-Bkp3gLygyeA-unsplash\ \(2\).jpg")
no-repeat center center/cover;
height: 100vh;
text-align: center;
background-position-y: 40%;
}
.hero {
background: url("../images/francesca-tosolini-XAHSexPxSus-unsplash\ \(1\).jpg")
no-repeat center center/cover;
height: 100vh;
text-align: center;
position: relative;
width: 100%;
overflow: hidden;
}
.hero .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
color: #fff;
}
.hero .content h1 {
font-size: 3rem;
z-index: 1;
}
.hero .content p {
font-size: 1.5rem;
width: 100%;
margin: 10px 30px;
padding: 0 20px;
z-index: 1;
}
.hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
}
.featuredlistings h2{
text-align: center;
font-size: 2rem;
margin: 5px;
padding: 10px;
}
.article-1 p, .article-2 p{
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 50%;
}
#mainfooter p{
text-align: center;
background: #333;
color: #fff;
padding: 20px;
}
#media(max-width: 768px) {
.navbar {
flex-direction: column;
height: 80px;
padding: 20px;
z-index: 100;
align-items: center;
justify-content: center;
}
.navbar a {
padding: 10px 10px;
margin: 0 3px;
}
.flex-row{
flex-wrap: wrap;
}
.featuredlistings h2{
text-align: center;
font-size: 2rem;
}
.article-1 p, .article-2 p{
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 100%;
}
img{
flex: 1;
}
.flex-row .item1 .item2 .item3{
Your problem may be fairly easy to solve. May be, as I am not on Safari, but IE11 seems to have the same problem.
Solution
img: { max-width: 100% } should be img: { width: 100% }. Because element width and height are CSS default auto, which means that the browser will try to fill all the space available with the image, fully disregarding its ratio (it stretches in every direction). width: 100% (OR height: 100%, not both!) will make sure that images fill the full width (OR height) of the available space and size its height (OR width) to ratio.
#media screen and (max-width: 768px) { .... img { flex: 1 } .... } should become #media screen and (max-width: 768px) { .... img { flex-grow: 1 } .... }. Especially IE11 cannot handle the shorthand property flex very well, so you need the individual properties instead CSS flex Property. I am not sure, but Safari may have the same problem (may need the vendor prefix -webkit-).
Before, IE11 did not show the images at all with a browser window smaller than 768px and did not preserve the image ratios when resizing, but with my changes everything works as expected. Hopefully, Safari too!
BTW Chrome, Edge and Firefox did not show the problem on W10.
The snippet (code copied from your Github site) with the two changes.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
cursor: pointer;
display: inline-block;
padding: 10px 60px;
color: #fff;
border: none;
border-radius: 5px;
background-color: #333;
font-size: 20px;
opacity: 0.95;
}
.flex-row {
display: flex;
text-align: center;
justify-content: center;
}
.flex-row div {
margin: 5px;
display: flex;
}
.flex-row h3 {
font-size: 3rem;
}
.flex-row-article {
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
body {
background: #f9f9f9;
color: #333;
line-height: 1.6;
}
ul {
list-style: none;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: #fff;
height: 50px;
width: 100%;
padding: 5px;
position: fixed;
top: 0px;
opacity: 0.9;
z-index: 2;
}
.navbar a {
color: #fff;
padding: 10px 10px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: #fff 2px solid;
}
.navbar ul {
display: flex;
position: sticky;
top: 0;
}
.navbar h1 {}
img {
/* max-width: 100%;/* REMOVED */
width: 100%;
}
.logo {
font-size: 1.5rem;
position: relative;
}
a {
text-decoration: none;
color: #333;
}
.hero-aboutus {
background: url("https://amolina0116.github.io/MyProjects/realtorsite/images/roger-starnes-sr-BNY7m7BhS2o-unsplash.jpg") no-repeat center center/cover;
height: 100vh;
text-align: center;
}
.hero-contactus {
background: url("https://amolina0116.github.io/MyProjects/realtorsite/images/bailey-anselme-Bkp3gLygyeA-unsplash\ \(2\).jpg") no-repeat center center/cover;
height: 100vh;
text-align: center;
background-position-y: 40%;
}
.hero {
background: url("https://amolina0116.github.io/MyProjects/realtorsite/images/francesca-tosolini-XAHSexPxSus-unsplash\ \(1\).jpg") no-repeat center center/cover;
height: 100vh;
text-align: center;
position: relative;
width: 100%;
overflow: hidden;
}
.hero .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
color: #fff;
}
.hero .content h1 {
font-size: 3rem;
z-index: 1;
}
.hero .content p {
font-size: 1.5rem;
width: 100%;
margin: 10px 30px;
padding: 0 20px;
z-index: 1;
}
.hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
}
.featuredlistings h2 {
text-align: center;
font-size: 2rem;
margin: 5px;
padding: 10px;
}
.article-1 p,
.article-2 p {
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 50%;
}
#mainfooter {
height: 50px;
background: #333;
text-align: center;
color: #fff;
width: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
#mainfooter p {}
.ourteam {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #fff;
}
.fred {
background: #333;
opacity: 0.9;
margin: 5px;
padding: 10px;
/* height: ; /**/
}
.fred img {
height: 200px;
border-radius: 50%;
}
.sammy {
background: #333;
opacity: 0.9;
margin: 5px;
padding: 10px;
}
.sammy img {
border-radius: 50%;
}
.box {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
align-content: center;
height: 100%;
background: #333;
color: #fff;
padding: 10px;
}
.box1 {
border-right: black solid 1px;
width: 33.3%;
}
.box2 {
width: 33.3%;
}
.box3 {
border-left: black solid 1px;
width: 33.3%;
}
input[type="text"],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type="submit"] {
background-color: #4caf50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
position: relative;
top: 30%;
opacity: 0.85;
margin: 0 30%;
}
.contactform {
height: 60vh;
}
#subject {
height: 100px;
}
#media screen and (max-width: 768px) {
#icons {
display: none;
}
.contactform {
width: 100%;
line-height: 0.5;
}
.container {
margin: 0 auto;
top: 80px;
}
.fred {
position: relative;
top: 40px;
}
.navbar {
flex-direction: column;
height: 80px;
padding: 20px;
z-index: 100;
align-items: center;
justify-content: center;
}
.flex-row {
flex-wrap: wrap;
}
.featuredlistings h2 {
text-align: center;
font-size: 2rem;
}
.article-1 p,
.article-2 p {
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 100%;
}
img {
flex-grow: 1;
/* MODDED, was flex: 1 */
}
.fred img {
height: 80px;
}
}
.sammy img {}
<!-- Begin Navbar -->
<header class="hero">
<div id="navbar" class="navbar">
<h1 class="logo">
MReality
</h1>
<nav>
<ul>
<li>
<a class="current" href="index.html">Home</a>
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<!-- End Navbar -->
<div class="content">
<h1>Welcome Home</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque vero excepturi dolore sequi quibusdam nostrum aperiam voluptatum nihil deserunt explicabo!
</p>
Read More
</div>
</header>
<main>
<!-- Begin Featured Listings -->
<section class="featuredlistings">
<h2>Featured Listings</h2>
<div class="flex-row">
<div class="item1">
<img src="https://amolina0116.github.io/MyProjects/realtorsite/images/evelyn-paris-XJnP4L958ds-unsplash.jpg" alt="Home" />
</div>
<div class="item2">
<img src="https://amolina0116.github.io/MyProjects/realtorsite/images/jesse-roberts-561igiTyvSk-unsplash.jpg" alt="Home" />
</div>
<div class="item3">
<img src="https://amolina0116.github.io/MyProjects/realtorsite/images/daniel-barnes-RKdLlTyjm5g-unsplash.jpg" alt="Home" />
</div>
</div>
</section>
<article id="section-1" class="flex-row-article">
<div class="article-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore mollitia, ipsa neque aliquid quod similique consequatur accusantium harum facere natus. Omnis blanditiis incidunt nobis similique reprehenderit illo quaerat, sed ad reiciendis fugit sequi
molestias, inventore, exercitationem consectetur soluta. Quibusdam quod laborum eaque, perferendis fugit similique dolorem ipsum mollitia sunt incidunt?
</p>
</div>
<div class="article-2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam ut dignissimos vitae voluptatum, obcaecati quidem, eaque, amet cum illo eos numquam iste officiis quia aspernatur animi dicta consectetur nulla eligendi! Laboriosam quas sunt dolor dignissimos
illo at porro asperiores, earum, cum sapiente voluptates nemo animi dolore repellat libero cupiditate nulla?
</p>
</div>
</article>
</main>
<footer id="mainfooter">
<p>MReality © 2020, All Rights Reserved</p>
</footer>
I'm not really sure how to word this question but I'll try.
So, I'm trying to get an overlay over the top of a background image, the header itself is taking up 100vh, but when I place the overlay with the image included, some padding from the nav is pushing the background colour down below the viewport it seems. I've tried to take margin off the nav elements and it brings the background up a little but not all the way. Maybe I'm missing something very simple here but I just can't seem to get my head around it.
Here's a link to the codepen (I know the code is a bit of a mess, it's just a test): https://codepen.io/Jmp93/pen/BMJwov
<nav id="main-nav">
<h3>TEST|Web</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<header>
<h1>Test Text Sample</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt dolores, dolorum minima id beatae aperiam saepe
sapiente animi quas earum?</p>
</header>
<section id="start-section">
<div class="container">
<h1 class="m-heading">Some Text</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta possimus dolore temporibus aut,
reiciendis voluptatum voluptate consequatur ducimus. Sunt minus nihil nulla in commodi. In officiis, harum amet
eos nesciunt illum rerum aliquam quasi modi natus quis laudantium qui quae?</p>
</div>
</section>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #333;
color: #fff;
margin: 0;
line-height: 1.5;
}
.m-heading {
font-size: 2rem;
margin-bottom: .75rem;
}
.lead {
font-size: 1.2rem;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
height: 100vh;
text-align: center;
}
header:before {
content: '';
background: url('https://source.unsplash.com/1600x900/?nature,water') no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
}
header h1 {
font-size: 4rem;
margin: 1rem;
}
#main-nav {
display: flex;
position: sticky;
top: 0;
left: 0;
justify-content: space-between;
}
#main-nav h3 {
font-size: 2rem;
margin: 2rem;
}
#main-nav ul {
display: flex;
justify-items: center;
font-size: 1.2rem;
margin: 2rem;
}
#main-nav ul li {
list-style: none;
}
#main-nav ul li a {
color: #fff;
text-decoration: none;
padding: 1rem;
}
#main-nav ul li a:hover {
background: #444;
border-radius: 25px;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 2rem;
}
#start-section {
background: #fff;
color: #000;
text-align: center;
}
Any help would be appreciated, thanks.
Just try to apply a position relative to the header itself :) usually if you use a position absolute, the main element containing it should be relative. That is the correct way of making the absolute element be positioned at 100% of its parent's width and height and not floating without reference.
My main h1 and p tags for this page refuses to center. I'm a new and learning and it's probably something simple I've overlooked; however I cant put my finger on it!
I've tried multiple ways to center this (.content and .header, even *) all set to text-align: center; but nothing works. Even *! So there has to be something "blocking" this?
Thank you in advance for any tips you can give!
*{
box-sizing: border-box;
text-align: center;
}
body {
margin: 0;
font-family: sans-serif;
font-size: 20px;
line-height: 1.5;
color: #333;
overflow-x: hidden;
}
.v-header{
height: 100vh;
display: flex;
align-items: center;
color: #fff;
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.video-wrap video {
min-width: 100%;
min-height: 100%;
}
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #225470;
z-index: 1;
opacity: 0.55;
}
.content {
z-index: 2;
}
.content h1 {
font-size: 50px;
margin-bottom: 0px;
}
.content p {
font-size: 25px;
display: block;
padding-bottom: 20px;
}
.btn {
background: #34b3a0;
color: #fff;
font-size: 15px;
padding: 15px 20px;
text-decoration: none;
}
.section {
padding: 20px 0px;
}
.section-b {
background: #34b3a0;
color: #fff;
}
#media(max-width: 960px) {
.container {
padding-right: 30px;
padding-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!-- Container section will contain the entire landing page -->
<header class= "v-header container">
<!-- Video-Wrap section will contain the video -->
<div class= "video-wrap">
<video src="images/media2.mp4" autoplay="true" loop="true"></video>
</div>
<!-- Overlay section will be over the video, styled with CSS -->
<div class= "overlay"> </div>
<!-- Content will contain the actual content on the landing page with links to other pages -->
<div class="content">
<h1>Coffee R Us</h1>
<p>If you like coffee, you'll love us!</p>
About us
Our Menu
</div>
</header>
<!-- Sections will appear BELOW the wrapper video -->
<section class="section-a">
<div>
<h1>Section A - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
<section class="section-b">
<div>
<h1>Section B - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
</body>
</html>
Add margin: 0 auto; to .content to center it - that's the element in which all these texts are wrapped, and it doesn't span the whole window width, so you have to center it.
*{
box-sizing: border-box;
text-align: center;
}
body {
margin: 0;
font-family: sans-serif;
font-size: 20px;
line-height: 1.5;
color: #333;
overflow-x: hidden;
}
.v-header{
height: 100vh;
display: flex;
align-items: center;
color: #fff;
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.video-wrap video {
min-width: 100%;
min-height: 100%;
}
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #225470;
z-index: 1;
opacity: 0.55;
}
.content {
z-index: 2;
margin: 0 auto;
}
.content h1 {
font-size: 50px;
margin-bottom: 0px;
}
.content p {
font-size: 25px;
display: block;
padding-bottom: 20px;
}
.btn {
background: #34b3a0;
color: #fff;
font-size: 15px;
padding: 15px 20px;
text-decoration: none;
}
.section {
padding: 20px 0px;
}
.section-b {
background: #34b3a0;
color: #fff;
}
#media(max-width: 960px) {
.container {
padding-right: 30px;
padding-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!-- Container section will contain the entire landing page -->
<header class= "v-header container">
<!-- Video-Wrap section will contain the video -->
<div class= "video-wrap">
<video src="images/media2.mp4" autoplay="true" loop="true"></video>
</div>
<!-- Overlay section will be over the video, styled with CSS -->
<div class= "overlay"> </div>
<!-- Content will contain the actual content on the landing page with links to other pages -->
<div class="content">
<h1>Coffee R Us</h1>
<p>If you like coffee, you'll love us!</p>
About us
Our Menu
</div>
</header>
<!-- Sections will appear BELOW the wrapper video -->
<section class="section-a">
<div>
<h1>Section A - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
<section class="section-b">
<div>
<h1>Section B - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
</body>
</html>
.content{ width:100%} add width 100% on .content class
Your problem is that even if your text is centered in your div, your div itself doesn't use all the width available so you end up having a centered text in a misplaced container.
From there, your have 2 solutions to fix your .content CSS:
Center it with a margin: auto;
Expand it so it'll use all the width and you'll be able to align your element in it correctly: width: 100%;
The problem is that you have made the container of the .content element (the .v-header) to be display:flex. This makes the .content element only occupy the space required by its contents (it no longer expands to 100% of container).
So now you need to add justify-content:center to align the whole box to the center.
*{
box-sizing: border-box;
text-align: center;
}
body {
margin: 0;
font-family: sans-serif;
font-size: 20px;
line-height: 1.5;
color: #333;
overflow-x: hidden;
}
.v-header{
height: 100vh;
display: flex;
align-items: center;
color: #fff;
justify-content:center;
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.video-wrap video {
min-width: 100%;
min-height: 100%;
}
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #225470;
z-index: 1;
opacity: 0.55;
}
.content {
z-index: 2;
}
.content h1 {
font-size: 50px;
margin-bottom: 0px;
}
.content p {
font-size: 25px;
display: block;
padding-bottom: 20px;
}
.btn {
background: #34b3a0;
color: #fff;
font-size: 15px;
padding: 15px 20px;
text-decoration: none;
}
.section {
padding: 20px 0px;
}
.section-b {
background: #34b3a0;
color: #fff;
}
#media(max-width: 960px) {
.container {
padding-right: 30px;
padding-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!-- Container section will contain the entire landing page -->
<header class= "v-header container">
<!-- Video-Wrap section will contain the video -->
<div class= "video-wrap">
<video src="images/media2.mp4" autoplay="true" loop="true"></video>
</div>
<!-- Overlay section will be over the video, styled with CSS -->
<div class= "overlay"> </div>
<!-- Content will contain the actual content on the landing page with links to other pages -->
<div class="content">
<h1>Coffee R Us</h1>
<p>If you like coffee, you'll love us!</p>
About us
Our Menu
</div>
</header>
<!-- Sections will appear BELOW the wrapper video -->
<section class="section-a">
<div>
<h1>Section A - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
<section class="section-b">
<div>
<h1>Section B - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
</body>
</html>