Well, I want to understand why when I padded "header div" the content comes out of div, for example, if I apply 60% instead of applying 60% within div, 60% of the page applies, I believed that % was applied over the height/width of the parent Can anyone explain it to me? thank you :)
enter image description here
*{
margin: 0;
text-decoration: none;
list-style: none;
}
header{
background-image: url("../img/stock-1.jpeg");
background-position: 50% 25%;
min-height: 650px;
height: 60vh;
}
header nav{
display: flex;
justify-content: space-between;
height: 60px;
}
header nav a img{
width: 15rem;
}
header nav ul{
display: flex;
justify-content: center;
align-items: center;
}
header nav ul li:nth-child(n + 2){
margin-left: 20px;
}
header nav ul li a{
color: black;
}
header div{
background-color: aqua;
display: flex;
padding-top: 60%;
flex-direction: column;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
<nav>
<img src="assets/img/logo_black.png" alt="Logo">
<ul>
<li>Blog</li>
<li>Vídeos</li>
<li>Descubre</li>
</ul>
</nav>
<div>
<h1>Descubre nuevos lugares en los que aventurarte</h1>
<input type="text" placeholder="Buscar lugares...">
</div>
</header>
<main>
<section>
<h2>Últimos posts</h2>
<article>
<img src="assets/img/last-posts-1.jpeg" alt="">
<h3>Subiendo el Himalaya</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi earum neque libero officiis reprehenderit repudiandae placeat soluta deserunt harum qui. Fugit, in non repudiandae mollitia nemo tenetur explicabo a sequi?</p>
</article>
</section>
</main>
</body>
</html>
*fill text because it tells me that my pubication contains too much code *fill text because it tells me that my pubication contains too much code
If you want to just move the contents of a div down by 30% of the container's height, then you can use position: relative and top: 30% on a wrapper around the contents. Like so:
.container {
background-color: red;
height: 200px;
}
.contents {
background-color: yellow;
position: relative;
top: 30%;
}
<div class="container">
<div class="contents">
Blah blah blah
</div>
</div>
Related
Run the snippet below:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: min-content;
}
.container2 {
position: relative;
margin-left: 20px;
width: min-content;
}
.container2::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 30px red;
}
.inner {
width: 200px;
height: 100px;
background: yellow;
}
.text {
width: 200px;
height: 100px;
}
<div class="container">
<div class="container1">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
</div>
Is there a way to rewrite the code for the container1's red box shadow to be above the yellow background (or in general any background including a picture)?
One way to do it, which resolves the issue, is utilising pseudo-elements (so, the rendered container2 is how it intended to be), but I don't particularly like this solution and hope there is a way to do the same without introducing new dom elements (just utilising css).
As you mentioned container2 to show the intended structure, I removed that from my code. here is how I do this task with the help of position CSS property:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: 200px;
height: 200px;
position: relative;
}
.inner {
width: 200px;
height: 100px;
background: yellow;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.text {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="container1">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
<!--
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
-->
</div>
</body>
</html>
Without setting width and height:
If you don't want to set width and height you could use display:flex on .container1 element as follow:
.container {
display: flex;
}
.container1 {
box-shadow: inset 0 0 30px red;
width: 35%;
display: flex;
flex-direction: column;
}
.inner {
background: yellow;
width: 100%;
z-index: -1;
}
.inner img {
width: 100%;
}
.text {
color: #1415FF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="container1">
<div class="inner">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque id temporibus cumque, magnam blanditiis voluptate vel nisi. Fugit itaque quod inventore, optio dolor magnam ipsa, temporibus rerum qui error deserunt?
<!-- <img src="birthday.png" alt=""> -->
</div>
<div class="text">Some text some text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto quo assumenda veniam voluptatum beatae impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rerum ullam hic mollitia quia! impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rer</div>
</div>
<!--
<div class="container2">
<div class="inner"></div>
<div class="text">Some text</div>
</div>
-->
</div>
</body>
</html>
I used width: 35% in .container1 just because of we usually set a relative width for elements but you can remove it. You could also put img tag inside .inner class and I think that works correctly.
Goal:
When scrolling down through a website, an image will follow along and change depending on how far you have scrolled.
My Plan:
Place images on top of each other and let them be sticky. Run animation depending on scroll position.
My Problem:
I have three images that I needs to be sticky. However, they also need to be absolute to be placed on top of each other, which is obviously contradictory. Am I approaching the problem from the wrong direction?
Don't think too much about the animation stuff, I will figure that out. For now I just need help placing images on top of each other while also being sticky.
Current code: https://codepen.io/alsb/pen/oNwZYQw
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css"href="style.css">
<title>Document</title>
</head>
<body>
<h1>Hello to Sticky World</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Numquam et blanditiis repellendus voluptas iusto recusandae quis
quos iure quod eos possimus ad corrupti, nam asperiores,
minima quisquam praesentium neque ratione?
</p>
<div class="container">
<img class="item" src="https://picsum.photos/300/200" />
<img class="item" src="https://picsum.photos/300/200" />
<img class="item" src="https://picsum.photos/300/200" />
</div>
<p>...</p>
</body>
</html>
.sticky-container {
height: 100%;
}
img.sticky {
position: -webkit-sticky;
position: sticky;
top: 50px;
width: 200px;
}
.container {
display: flex;
justify-content: space-around;
align-items: flex-start;
border: 2px dashed rgba(114, 186, 94, 0.35);
height: 400px;
background: rgba(114, 186, 94, 0.05);
}
.item {
position: sticky;
top: 1rem;
}
The solution was to not use <img>. The inner-most div will be sticky, wrapped in an absolute div.
<div class="wrapper">
<div class="container">
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
</div>
</div>
.wrapper {
position: relative;
width: 50vw;
}
.container {
display: flex;
position: absolute;
justify-content: space-around;
align-items: flex-start;
border: 2px dashed rgba(114, 186, 94, 0.35);
height: 900px;
background: rgba(114, 186, 94, 0.05);
}
.item {
position: sticky;
top: 1rem;
background-image: url("https://picsum.photos/500/300");
}
I want to create a CSS-Card
On the left side should be a image and on the ride side a headline and paragraph.
Furthermore, in the lower section of the right side there should be a profile picture, name and date of the post.
So my question is
How can I prevent the content in the container-article from overlapping the container-card?
My Current State with the CSS-Card
----------
HTML
<!DOCTYPE html>
<html>
<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" />
<meta name="author" content="Ufuk Can Varol" />
<meta name="description" content="Article Card v3" />
<!-- CSS -->
<link rel="stylesheet" href="css/index.css" />
<!-- Font-Family [Manrope]-->
<link
href="https://fonts.googleapis.com/css2?family=Manrope:wght#500;700&display=swap"
rel="stylesheet"
/>
<!-- Favicon -->
<link
rel="shortcut icon"
type="image/png"
href="assets/images/favicon-32x32.png"
/>
<title>Article</title>
</head>
<body>
<div id="container">
<div class="container-card">
<div class="container-image"></div>
<div class="container-article">
<div class="article-header">
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatum, officia.
</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum,
vel suscipit impedit accusantium nihil minima asperiores,
exercitationem sapiente ad expedita fugiat. Veritatis sit
voluptatem qui est unde, aspernatur nemo impedit!
</p>
</div>
<div class="article-footer">
<div class="article-footer-author">
<div class="author-image"></div>
<p>
Savannah Garrett <br />
28 Jun 2020
</p>
</div>
<div></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
font-family: 'Manrope', sans-serif;
background-color: aliceblue;
}
#container {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: grid;
justify-content: center;
align-items: center;
justify-items: center;
align-items: center;
background-color: antiquewhite;
}
.container-card {
width: 800px;
height: 300px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 2fr 3fr;
background-color: aqua;
}
.container-image {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: azure;
}
.container-article {
width: 100%;
height: 100%;
margin: 0;
padding: 40px;
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
background-color: aquamarine;
}
.article-header {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: bisque;
}
.article-footer {
width: 100%;
height: 100%;
background-color: blueviolet;
}
Remove height: 300px from .container-card. If you set a fixed height it won't expand to fit its child elements.
Link to project
I've have finally managed to get the header layout I want but one thing I can't get done and that is the alignment of the text (h2 and h3) in the left sidebar. I have tried to do it with a fixed proportie but it get side-effects and I think it has something to do with the rotated text.
The main title should be in left bottom, on one line and the date should be on the right of the main title also on one line. Those combined must align at center of the side-main text aligned to the left.
Edit: Link to layout
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header {
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav {
position: fixed;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, .2);
}
.side-main {
display: flex;
flex-direction: column;
height: calc(100vh - 60px);
margin-top: 60px;
width: 70px;
border-right: 1px rgba(255, 255, 255, .2) solid;
}
.agenda-text {
width: 100%;
color: #FFF;
transform: rotate(-90deg);
text-transform: uppercase;
}
.header-main {
display: flex;
height: calc(100vh - 60px);
margin-top: 60px;
}
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>
Many thanks in advance!
Hope you can help me out.
Regards,
Jason
This doesn't look super polished as a whole yet, but I believe it does solve your issue with the rotation of the side-main.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main-wrapper">
<div class="side-main">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>
Css:
*{
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header{
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav{
position: fixed;
width: 100%;
height: 60px;
background: rgba(255,255,255,.2);
}
.side-main-wrapper {
transform: rotate(-90deg);
margin-top: 60px;
}
.side-main{
display: flex;
flex-direction: column;
height: 70px;
width: calc(100vh - 60px);
border-bottom: 1px rgba(255,255,255,.2) solid;
}
.agenda-text{
color: #FFF;
text-transform: uppercase;
}
.header-main{
height: calc(100vh - 60px);
margin-top: 60px;
}
Rather than rotating the entries of the flex column, I wrapped the side-main in a side-main-wrapper and rotated that. Then I just treated the side-main as a regular flex column, and it started behaving.
I added flex: 1; and some margin-left to .agenda-text and then opened up the .side-main width a bit. Hope this is something like what you are looking for, but just guessing since you didn't specify
Edit: Looks wack in preview and fullscreen... but works in the actual edit jsfiddle screen... maybe this is not a good answer
Edit Took out flex: 1 and margin-left. I've made it look how you described, but with an issue. I think a big step forward is adding a container around the .agenda-texts and then rotate that instead of the text. The problem with my approach is that the flex positioning is based on the width of the sidebar, before everything gets turned sideways. So with a left bar width like 300px it works but with a smaller width like you are looking for probably not. Can't imagine making this fully responsive without doing the whole thing over
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.wrapper-header {
display: flex;
background: linear-gradient(to right bottom, #F33C12, #F28BB8);
}
.top-nav {
position: fixed;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, .2);
}
.side-main {
height: calc(100vh - 60px);
margin-top: 60px;
width: 300px;
border-right: 1px rgba(255, 255, 255, .2) solid;
}
.side-main-title {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
transform: rotate(-90deg);
}
.agenda-text {
color: #FFF;
text-transform: uppercase;
}
.header-main {
display: flex;
height: calc(100vh - 60px);
margin-top: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>Rataplan Improvisatietheater</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="top-nav">
nav
</div>
<div class="wrapper-header">
<div class="side-main">
<div class="side-main-title">
<h2 class="agenda-text">Main Title Event</h2>
<h3 class="agenda-text">Event date 1 (month) 2018</h3>
</div>
</div>
<div class="header-main">
main
</div>
</div>
<div class="wrapper-content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit velit, natus dolores, exercitationem debitis praesentium. Ipsam, nesciunt, vero placeat repellendus hic ex, numquam eos iste earum cum dolores omnis maiores.</p>
</div>
</body>
</html>
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>