So I'm trying to design a website for my organization from scratch using Bootstrap and with parallax elements. And I found this demo online and all I want to do is add a navigation bar with one of the buttons having a hovering dropdown menu. I followed the instructions on the Bootstrap website and gettting the bar on the page is easy but the hovering drop down does not appear or if i do get the bar up the dropdown menu is messed up, putting it to the right. It seems that there is a Z-axis problem? Or the container for the nav bar isnt letting me have a nice dropdown menu. Below is what I have so far:
<!DOCTYPE html>
<!-- saved from url=(0060)https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm -->
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
body,
html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.nav {
background-color: #333;
font-family: Arial;
}
.nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
position: relative;
z-index: 9999999;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
display: block;
}
.dropdown-content a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:last-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:first-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a {
width: 210px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.parallax-header {
/* The image used / background-image: url("header.jpg"); / Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("vsa2017.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("culturedance.png");
min-height: 400px;
}
.bgimg-3 {
background-image: url("culturedance.png");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Turn off parallax scrolling for tablets and phones */
#media only screen and (max-device-width: 1024px) {
.bgimg-1,
.bgimg-2,
.bgimg-3 {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="nav">
About
<div class="dropdown">
Pillars
<div class="dropdown-content">
Family
Culture
Diversity
Philanthropy
</div>
</div>
Officers
Sponsors
Contact
<i class="fa fa-facebook-square"></i>
<i class="fa fa-instagram"></i>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">SCROLL DOWN</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Parallax Demo</h3>
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero
ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque
non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">COOL!</span>
</div>
</div>
</body>
</html>
I'm fairly new and need to learn, any help will be appreciated/
Here solution:
Just put 2 style in class name .dropdown-content css:
top: 100%;
background: #333;
New update style is ".dropdown"
Replace style:display:inline-block; to float:left;
<!DOCTYPE html>
<!-- saved from url=(0060)https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm -->
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
body,
html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.nav {
background-color: #333;
font-family: Arial;
}
.nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float:left;
position: relative;
z-index: 9999999;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
background: #333;
}
.dropdown-content a {
display: block;
}
.dropdown-content a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:last-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:first-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a {
width: 210px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.parallax-header {
/* The image used / background-image: url("header.jpg"); / Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("vsa2017.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("culturedance.png");
min-height: 400px;
}
.bgimg-3 {
background-image: url("culturedance.png");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Turn off parallax scrolling for tablets and phones */
#media only screen and (max-device-width: 1024px) {
.bgimg-1,
.bgimg-2,
.bgimg-3 {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="nav">
About
<div class="dropdown">
Pillars
<div class="dropdown-content">
Family
Culture
Diversity
Philanthropy
</div>
</div>
Officers
Sponsors
Contact
<i class="fa fa-facebook-square"></i>
<i class="fa fa-instagram"></i>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">SCROLL DOWN</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Parallax Demo</h3>
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero
ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque
non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">COOL!</span>
</div>
</div>
</body>
</html>
Here you go... I have done some changes to your code try to understand if you don't get anything don't mind to comment it I haven't done any more changes so made it clear
<!DOCTYPE html>
<!-- saved from url=(0060)https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm -->
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
body,
html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.nav {
background-color: #333;
font-family: Arial;
}
.nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
position: relative;
z-index: 9999999;
}
.dropdown-content {
display: none;
position: absolute;
background: #333;
z-index: -1;
}
.dropdown-content a {
display: block;
}
.dropdown-content a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:last-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:first-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a {
width: 210px;
color: #fff;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.parallax-header {
/* The image used / background-image: url("header.jpg"); / Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("vsa2017.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("culturedance.png");
min-height: 400px;
}
.bgimg-3 {
background-image: url("culturedance.png");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Turn off parallax scrolling for tablets and phones */
#media only screen and (max-device-width: 1024px) {
.bgimg-1,
.bgimg-2,
.bgimg-3 {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="nav">
About
<div class="dropdown">
<a href="#">Pillars
<div class="dropdown-content">
Family
Culture
Diversity
Philanthropy
</div>
</a>
</div>
Officers
Sponsors
Contact
<i class="fa fa-facebook-square"></i>
<i class="fa fa-instagram"></i>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">SCROLL DOWN</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Parallax Demo</h3>
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero
ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque
non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">COOL!</span>
</div>
</div>
</body>
</html>
Related
Well, there are two sections in my HTML code, and those sections have too much space between them, I mean if the screen is fully stretched out and the height is large, it has a dozen of spaces between them. Also for some reason, the second section's text is a bit further from the image.
I've also tried to set display: flex; align-items: flex-start; justify-content:center;, but it hasn't worked. So if you have any idea about this problem, please help.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
body {
background: #343131;
}
nav {
height: 80px;
width: 100%;
background-color: #2b2d2e;
background-image: linear-gradient(62deg, #46484a 0%, #2e2e30 100%);
}
nav i {
color: #d35858;
cursor: pointer;
font-size: 40px;
padding-top: 20px;
padding-right: 20px;
float: right;
}
.nav-link {
height: 100vh;
position: fixed;
width: 100%;
background-color: rgb(42, 43, 43);
left: -100%;
top: 10%;
transition: 0.5s;
display: flex;
align-items: flex-start;
justify-content: center;
}
.nav-link a {
text-decoration: none;
color: #fff;
font-size: 30px;
display: block;
text-align: center;
font-weight: bold;
padding: -100px;
}
a:hover,
a.active {
transition: .5s;
color: rgb(239, 122, 122);
}
.nav-link ul li {
padding: 18px;
}
.nav-link ul {
list-style: none;
margin-top: 50px;
}
.nav-bar-top ul {
padding-top: 32px;
float: right;
padding-right: 80px;
}
.nav-bar-top ul li {
display: inline-block;
padding-left: 15px;
}
.nav-bar-top ul li a {
color: #d5c9c9;
text-decoration: none;
}
.nav-bar-top ul li a.active {
color: #fa9e9e;
}
.nav-bar-top ul li a:hover {
color: #d35858;
}
#about-szabi {
width: 100%;
height: 100vh;
background: #343131;
display: flex;
align-items: flex-start;
justify-content: center;
}
#about-szabi .content img {
height: auto;
width: 320px;
max-width: 100%;
}
section .content img:hover {
transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
transition: 0.5s;
}
.text {
width: 550px;
max-width: 100%;
padding: 10px 30px;
display: grid;
place-items: center;
text-align: center;
}
.text h1 {
color: #d35858;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.text h5 {
font-size: 20px;
color: rgb(193, 183, 183);
text-align: center;
}
.text p {
color: #e6d6d6;
padding-top: 10px;
font-size: 20px;
}
.content {
width: 1280px;
max-width: 95%;
margin: 0px auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
#media(min-width: 601px) {
#nav-bar-icon {
display: none;
}
}
#media(max-width: 601px) {
.nav-bar-top ul {
display: none;
}
}
<nav>
<label id="nav-bar-icon">
<i class="fa-solid fa-bars"></i>
</label>
<div class="nav-bar-top">
<ul>
<li>HOME</li>
<li><a class="active" href="info.html">ABOUT US</a></li>
<li>CONTACT</li>
<li>SERVICES</li>
<li>FEEDBACK</li>
</ul>
</div>
</nav>
<div class="nav-link">
<ul>
<li>HOME</li>
<li><a class="active" href="/">ABOUT US</a></li>
<li>CONTACT</li>
<li>SERVICES</li>
<li>FEEDBACK</li>
</ul>
</div>
<section id="about-szabi">
<div class="content">
<img draggable="false" src="../img/person.png">
<div class="text">
<h1>About Szabolcs</h1>
<h5>Programmer & Web Designer</h5>
<p>
IAliquam lobortis posuere felis, sit amet ultrices turpis suscipit in. Mauris
egestas aliquam lacus, non lobortis mi sollicitudin ut. Donec vitae est
malesuada, dapibus nisi ac, placerat felis. Cras tincidunt vehicula lorem eget
efficitur. Integer vestibulum nulla justo. Mauris efficitur viverra est, sit
amet semper orci tristique eget. Nam condimentum accumsan lectus, a efficitur
orci vestibulum a. Nulla quis dui congue leo ultricies convallis id.
</p>
</div>
</div>
</section>
<section id="about-milan">
<div class="content">
<img draggable="false" src="../img/person2.png">
<div class="text">
<h1>About Milán</h1>
<h5>Programmer & Web Designer</h5>
<p>
Donec velit ipsum, accumsan ut lectus eu, sodales hendrerit enim. Fusce ut
sapien sit amet ligula volutpat condimentum vitae in neque. In sit amet erat
et nisi interdum vestibulum. Nunc vestibulum, dolor id pellentesque dictum,
est nulla hendrerit lacus, vitae ultricies mauris ante vitae tellus. Vivamus
ac nisi at justo tempus imperdiet sed faucibus ex. Curabitur ut lectus leo. In
odio magna, aliquet id lectus in, pretium fermentum massa. Fusce eget
condimentum felis. Morbi quis diam massa.
</p>
</div>
</div>
</section>
#about-szabi {
width: 100%;
height: 100%;
background:#343131;
display: flex;
align-items: flex-start;
justify-content: center;
}
In this part, I used 100% instead of 100vh,
And I got the about-milan css in the html field with the same name as the first part.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
body {
background:#343131;
}
nav {
height: 80px;
width: 100%;
background-color: #2b2d2e;
background-image: linear-gradient(62deg, #46484a 0%, #2e2e30 100%);
}
nav i {
color: #d35858;
cursor: pointer;
font-size: 40px;
padding-top: 20px;
padding-right: 20px;
float: right;
}
.nav-link {
height: 100vh;
position: fixed;
width: 100%;
background-color: rgb(42, 43, 43);
left: -100%;
top: 10%;
transition: 0.5s;
display: flex;
align-items: flex-start;
justify-content: center;
}
.nav-link a {
text-decoration: none;
color: #fff;
font-size: 30px;
display: block;
text-align: center;
font-weight: bold;
padding: -100px;
}
a:hover, a.active{
transition: .5s;
color: rgb(239, 122, 122);
}
.nav-link ul li {
padding: 18px;
}
.nav-link ul {
list-style: none;
margin-top: 50px;
}
.nav-bar-top ul {
padding-top: 32px;
float: right;
padding-right: 80px;
}
.nav-bar-top ul li {
display: inline-block;
padding-left: 15px;
}
.nav-bar-top ul li a {
color: #d5c9c9;
text-decoration: none;
}
.nav-bar-top ul li a.active {
color: #fa9e9e;
}
.nav-bar-top ul li a:hover {
color: #d35858;
}
/* Not default code */
#about-szabi {
width: 100%;
height: 100%;
background:#343131;
display: flex;
align-items: flex-start;
justify-content: center;
}
#about-szabi .content img {
height: auto;
width: 320px;
max-width: 100%;
}
.section .content img:hover {
transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
transition: 0.5s;
}
.text {
width: 550px;
max-width: 100%;
padding: 10px 30px;
display: grid;
place-items: center;
text-align: center;
}
.text h1 {
color: #d35858;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.text h5 {
font-size: 20px;
color:rgb(193, 183, 183);
text-align: center;
}
.text p {
color: #e6d6d6;
padding-top: 10px;
font-size: 20px;
}
.content {
width: 1280px;
max-width: 95%;
margin: 0px auto;
display: flex;
/* sets whether flex items are forced onto one line or can wrap onto multiple lines.
If wrapping is allowed, it sets the direction that lines are stacked */
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
#media(min-width: 601px) {
#nav-bar-icon {
display: none;
}
}
#media(max-width: 601px) {
.nav-bar-top ul {
display: none;
}
}
<!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>About Us</title>
<link rel="stylesheet" href="../css/info.css">
<script src="https://kit.fontawesome.com/f2665b7baf.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<label id="nav-bar-icon">
<i class="fa-solid fa-bars"></i>
</label>
<div class="nav-bar-top">
<ul>
<li>HOME</li>
<li><a class="active" href="info.html">ABOUT US</a></li>
<li>CONTACT</li>
<li>SERVICES</li>
<li>FEEDBACK</li>
</ul>
</div>
</nav>
<div class="nav-link">
<ul>
<li>HOME</li>
<li><a class="active" href="/">ABOUT US</a></li>
<li>CONTACT</li>
<li>SERVICES</li>
<li>FEEDBACK</li>
</ul>
</div>
<section id="about-szabi">
<div class="content">
<img draggable="false" src="../img/person.png">
<div class="text">
<h1>About Szabolcs</h1>
<h5>Programmer & Web Designer</h5>
<p>
IAliquam lobortis posuere felis, sit amet ultrices turpis suscipit in. Mauris
egestas aliquam lacus, non lobortis mi sollicitudin ut. Donec vitae est
malesuada, dapibus nisi ac, placerat felis. Cras tincidunt vehicula lorem eget
efficitur. Integer vestibulum nulla justo. Mauris efficitur viverra est, sit
amet semper orci tristique eget. Nam condimentum accumsan lectus, a efficitur
orci vestibulum a. Nulla quis dui congue leo ultricies convallis id.
</p>
</div>
</div>
</section>
<section id="about-szabi">
<div class="content">
<img draggable="false" src="../img/person2.png">
<div class="text">
<h1>About Milán</h1>
<h5>Programmer & Web Designer</h5>
<p>
Donec velit ipsum, accumsan ut lectus eu, sodales hendrerit enim. Fusce ut
sapien sit amet ligula volutpat condimentum vitae in neque. In sit amet erat
et nisi interdum vestibulum. Nunc vestibulum, dolor id pellentesque dictum,
est nulla hendrerit lacus, vitae ultricies mauris ante vitae tellus. Vivamus
ac nisi at justo tempus imperdiet sed faucibus ex. Curabitur ut lectus leo. In
odio magna, aliquet id lectus in, pretium fermentum massa. Fusce eget
condimentum felis. Morbi quis diam massa.
</p>
</div>
</div>
</section>
<script src="../js/index.js"></script>
Hello, I have a solution for two problems,
You just have to take a look at a .section .content img:hover field for the image to be responsive.
HTML nested list won't work for me, below is the screenshot of the result but it's aligned to the main bullet. I've seen the tutorials and just did what they did but still the result on my code is not the same as seen on the screenshot. I'm wondering if any of you have encountered this problem. Hoping for some answers. Thank you!
Below is my HTML and CSS code:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
font-weight: 300;
color: rgb(48, 48, 48);
line-height: 1.9;
background-color: #f3f3f3;
}
.logo {
color: black;
text-transform: uppercase;
letter-spacing: 10px;
padding-right: 150px;
padding-top: 12px;
}
.logo img {
width: 170px;
height: 75px;
padding-top: 8px;
/* padding-right: ; */
/* border: 2px solid black; */
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #f3f3f3;
width: 100%;
z-index: 100;
height: 80px;
/* position: relative; */
/* border-bottom: 1px solid black; */
/* padding: 0 5rem; */
}
.nav-links {
display: flex;
/* justify-content: space-around; */
width: 30%;
}
.nav-links li {
list-style: none;
padding: 26px 40px;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 2px;
font-size: 15px;
}
nav li:hover {
background-color: rgb(6, 168, 106);
}
nav li:hover a {
color: white;
}
/* Section */
.section {
padding: 5rem 25rem;
border-bottom: 1px solid rgb(187, 185, 185);
/* display: flex; */
}
.section-header {
display: flex;
}
.section1img {
width: 300px;
height: 400px;
/* margin: 60px 150px; */
}
.section1Desc {
padding: 20px 20px;
margin-left: 50px;
text-align: justify;
}
.btnLearnMore {
background-color: rgb(12, 201, 160);
border: none;
border-radius: 5px;
padding: 10px;
margin-top: 30px;
font-size: 20px;
color: white;
}
.bamboo-section {
display: flex;
}
.imgBamboo {
width: 300px;
height: 400px;
}
.bamboo-description {
/* margin-left: 125px; */
margin-top: 50px;
}
.bamboo-description h3 {
color: rgb(16, 143, 16);
}
.btnKalma {
border: none;
border-radius: 5px;
background-color: rgb(25, 179, 145);
color: white;
padding: 5px;
font-size: 17px;
margin-top: 25px;
}
.btnKalma:hover {
background-color: rgb(3, 143, 112);
}
.bamboo-description p {
margin-top: 25px;
text-align: justify;
margin-right: 100px;
}
.lavender-section {
display: flex;
margin-top: 75px;
}
.lavender-description {
margin-left: 100px;
margin-top: 50px;
}
.lavender-description h3 {
color: rgb(202, 0, 158);
}
.lavender-description p {
text-align: justify;
margin-top: 25px;
}
.imgLavender {
width: 300px;
height: 400px;
}
.btnHimbing {
text-decoration: none;
border: none;
border-radius: 5px;
background-color: rgb(165, 50, 180);
color: white;
padding: 5px;
font-size: 17px;
margin-top: 25px;
}
.btnHimbing:hover {
background-color: rgb(122, 4, 138);
}
.benefits-header {
text-align: center;
}
.benefits-body {
display: flex;
justify-content: space-around;
}
.benefits-body div {
/* border: 1px solid black; */
/* height: 60px;
width: 550px; */
}
<!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" />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./src/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="./css/style.css" />
<title>Deux Citronella Trading</title>
<script defer src="./js/script.js"></script>
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="./rsc/logo2.png" alt="" />
<!-- <img src="./rsc/DeuxLogo.png" alt="Deux Logo" class="imgLogo" /> -->
</div>
<ul class="nav-links">
<li class="nav-link">Home</li>
<li class="nav-link">About</li>
<li class="nav-link">Contact</li>
<li class="nav-link">Products</li>
</ul>
</nav>
</header>
<section class="section" id="section-1">
<div class="section-header">
<img src="./rsc/room&linen.jpg" alt="" class="section1img" />
<div class="section1Desc">
<h3>ROOM & LINEN SPRAY</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec rhoncus elit at auctor pellentesque. Suspendisse luctus egestas vestibulum. Suspendisse finibus turpis eget orci fringilla,
in pretium mauris facilisis. Fusce efficitur quam non odio tristique porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec lobortis ullamcorper eros quis vehicula. Pellentesque et neque a velit bibendum volutpat.
</p>
<button class="btnLearnMore">Learn More</button>
</div>
</div>
</section>
<section class="section" id="section-2">
<div class="bamboo-section">
<div class="bamboo-description">
<h3>Room & Linen Spray: KALMA</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec rhoncus elit at auctor pellentesque. Suspendisse luctus egestas vestibulum. Suspendisse finibus turpis eget orci fringilla,
in pretium mauris facilisis. Fusce efficitur quam non odio tristique porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec lobortis ullamcorper eros quis vehicula. Pellentesque et neque a velit bibendum volutpat.
</p>
<button class="btnKalma">About Kalma ↓</button>
</div>
<img src="./rsc/bamboo.jpg" alt="Bamboo Spray" class="imgBamboo" />
</div>
<div class="lavender-section">
<img src="./rsc/lavender.jpg" alt="" class="imgLavender" />
<div class="lavender-description">
<h3>Room & Linen Spray: HIMBING</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec rhoncus elit at auctor pellentesque. Suspendisse luctus egestas vestibulum. Suspendisse finibus turpis eget orci fringilla,
in pretium mauris facilisis. Fusce efficitur quam non odio tristique porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec lobortis ullamcorper eros quis vehicula. Pellentesque et neque a velit bibendum volutpat.
</p>
<button class="btnHimbing">About Himbing ↓</button>
</div>
</div>
</section>
<section class="section" id="section-3">
<div class="benefits-header">
<h2>Benefits</h2>
</div>
<div class="benefits-body">
<div class="first-box">
<ul>
<li>Room freshener</li>
<ul>
<li>Leaving your rooms smelling fresh and relaxing</li>
</ul>
<li>Insect Repellant</li>
<li>Toilet Deodorizer</li>
<li>Sanitizer</li>
</ul>
</div>
<div class="second-box">
<ul>
<li>Car Humidifier</li>
<li>Air Purifier</li>
<li>Disinfectant Spray</li>
<li>Workspace Cleaner</li>
</ul>
</div>
</div>
</section>
</body>
</html>
It's because you do a 'reset' of the margin and padding of all elements with * (universal selector, matches all types) and its declarations.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
If you remove that, it's showing as you want it to be. Read more about * at MDN. You can also make only adjustments to ul's margin and padding as you wish.
body {
font-family: 'Poppins', sans-serif;
font-weight: 300;
color: rgb(48, 48, 48);
line-height: 1.9;
background-color: #f3f3f3;
}
.benefits-body {
display: flex;
justify-content: space-around;
}
<div class="benefits-body">
<div class="first-box">
<ul>
<li>Room freshener</li>
<ul>
<li>Leaving your rooms smelling fresh and relaxing</li>
</ul>
<li>Insect Repellant</li>
<li>Toilet Deodorizer</li>
<li>Sanitizer</li>
</ul>
</div>
<div class="second-box">
<ul>
<li>Car Humidifier</li>
<li>Air Purifier</li>
<li>Disinfectant Spray</li>
<li>Workspace Cleaner</li>
</ul>
</div>
</div>
I'm creating a dating site to learn web dev and I don't know how to make background-color work, it just doesn't on specific divs. What should I change? I tried a lot of things but nothing happened.
Adding lorem ipsum so I can ask this question... just skip this
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut felis magna. Cras lectus sapien, porttitor quis elit id, lacinia pellentesque urna. Fusce gravida felis sit amet purus mattis, sed faucibus turpis hendrerit. Integer convallis sagittis pulvinar. Curabitur tristique faucibus lorem iaculis egestas. Vivamus vitae lacus placerat, efficitur diam et, volutpat augue. Cras at purus vitae neque ultricies iaculis. Maecenas pellentesque ipsum nisi.
My code:
* {
padding: 0;
margin: 0;
color: black;
}
body {
overflow: hidden;
}
.container {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 95%;
height: 750px;
}
nav {
display: flex;
justify-content: space-between;
font-family: 'Pattaya', sans-serif;
font-size: 39px;
}
.logo {
cursor: pointer;
margin-top: auto;
margin-bottom: auto;
}
.menu {
margin-top: auto;
margin-bottom: auto;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 30px;
display: inline-block;
}
nav ul li a {
text-decoration: none;
}
nav ul li a:hover {
background-color: #ede;
border-radius: 10px;
}
.circle {
z-index: -2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ede;
clip-path: circle(600px at right 800px);
}
.circlebig {
z-index: -2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ede;
clip-path: circle(940px at left);
}
.content {
display: flex;
justify-content: space-between;
font-family: 'Rubik', sans-serif;
font-size: 56px;
}
.text {
transform: translateY(25%);
}
.love {
font-size: 70px;
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: move 400s linear infinite;
}
#keyframes move {
to {
background-position: 4500vh;
}
.freeplan {
z-index: 3;
display: block;
background-color: #666 !important;
}
.paidplan {
z-index: 3;
display: block;
background-color: #35f !important;
}
<link href="https://fonts.googleapis.com/css2?family=Pattaya&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#1,300&display=swap" rel="stylesheet">
<main>
<div class="container">
<nav>
<div class="logo">
<img src="img/logo.png">
</div>
<div class="menu">
<ul>
<li> ⁣ ⁣ Plans ⁣ ⁣ </li>
<li> ⁣ ⁣ About ⁣ ⁣ </li>
<li> ⁣ ⁣ Login ⁣ ⁣ </li>
</ul>
</div>
</nav>
<section class="content">
<div class="freeplan">
Freeplan
<img src="img/kiss.png">
</div>
<div class="paidplan">
Paidplan
<img src="img/kiss.png">
</div>
<img src="img/kiss.png">
</section>
<div class="circle"></div>
<div class="circlebig"></div>
</div>
</main>
You didn't close the curly brackets:
#keyframes move {
to {
background-position: 4500vh;
} // <==
}
I think you may miss the '#keyframes' curly bracket. please replace the #keyframes' as like my code.
#keyframes move {
to {
background-position: 4500vh;
}
}
When hover over .card I want the .video to appear but it is not working. What do I need to change?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html {
scroll-behavior: smooth;
}
#media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* header */
header {
height: 509px;
}
header h1 {
color: #fff;
font-size: 60px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 20px;
line-height: 1.7;
padding-bottom: 20px;
}
header a i {
font-size: 60px;
color: #ffffff87;
transition: all .2s ease-in;
}
header a i:hover {
font-size: 60px;
color: #ffffff;
}
/* header */
/* media query for header section */
#media (max-width:767px) {
header video {
display: none;
}
header {
background: url(images/banner.jpg);
}
header h1 {
color: #fff;
font-size: 40px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 18px;
line-height: 1.7;
padding-bottom: 20px;
}
}
/* media query for header section */
/* cards */
.cards {
background-color: #202024;
overflow: hidden;
padding-bottom: 30px;
}
.cards .video {
position: fixed;
top: 15%;
left: 20%;
display: none;
}
.cards .video .card:hover {
position: fixed;
top: 15%;
left: 20%;
display: block;
}
.cards .card {
width: 30.3333%;
background-color: #2C2C32;
overflow: hidden;
margin-right: 3%;
margin-bottom: 3%;
border-radius: 5px;
}
.cards .card .image {
width: 100%;
}
.cards .card .image img {
width: 100%;
cursor: pointer;
}
.cards .card h2 {
color: #fff;
font-size: 19px;
padding: 23px;
}
.cards .card p {
padding: 0 15px 30px;
color: #ffffffa8;
line-height: 1.3;
font-size: 17px;
}
.cards .card .btn {
padding-bottom: 25px;
}
.cards .card .btn button {
padding: 10px 0;
color: #fff;
background-color: #82CEC6;
border: none;
border-radius: 5px;
font-size: 15px;
width: 75%;
}
/* media query for cards section */
#media (max-width:767px) {
.cards {
padding: 30px;
}
.cards .card {
width: 100%;
margin-bottom: 35px;
}
}
/* media query for cards section */
/* footer */
footer {
background-color: #1B1B1F;
color: #fff;
}
footer .container .upper h2 {
font-size: 25px;
padding-bottom: 30px;
}
footer .container .upper p{
font-size: 15px;
padding-bottom: 30px;
line-height: 1.4;
color: #a5a7a7;
}
footer .container .lower .icons i {
color: #605d5da8;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
cursor: pointer;
transition: all .2s ease-in;
}
footer .container .lower .icons i:hover {
color: #fff;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
}
footer .container .lower .icons i:first-of-type {
padding: 13px 16px;
}
footer .container .lower .icons i:not(:first-of-type){
padding: 13px 13px; }
footer .container .lower .copyright {
color: #a7a7a7a7;
}
/* footer */
/* media query for footer section */
#media (max-width:767px) {
footer {
padding: 20px 0;
}
}
/* media query for footer section */
/*my frame work */
.flex-row {
display: flex;
justify-content: space-around;
align-items: center;
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text-center {
text-align: center;
}
.float-l {
float: left;
}
.container {
padding: 5% 8% 5% 8%;
}
/*my frame work */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Motion</title>
<script src="https://kit.fontawesome.com/11e8366046.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="motion.css">
</head>
<body>
<!--Header-->
<header class="flex-col" >
<video src="images/banner.mp4" autoplay="true" loop="true" style="width: 100%; z-index: -1000; position: fixed; top: 0; left: 0; "></video>
<div class="container">
<div class="text-center">
<h1>Full Motion</h1>
<p>A responsive video gallery template with a functional lightbox <br>
designed by Templated and released under the Creative Commons License</p>
</div>
<div class="text-center">
</i>
</div>
</div>
</header>
<!--Header-->
<!--cards-->
<div class="cards text-center" id="cards">
<div class="container">
<div class="video"><iframe width="800" height="467" src="https://www.youtube.com/embed/s6zR2T9vn2c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="card float-l">
<div class="image">
<img src="images/pic01.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic02.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic03.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic04.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic05.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic06.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
</div>
</div>
<!--cards-->
<!--footer-->
<footer class="text-center">
<div class="container">
<div class="upper ">
<h2>Etiam veroeros lorem</h2>
<p>Pellentesque eleifend malesuada efficitur. Curabitur volutpat dui mi, ac imperdiet dolor tinciduntnec. Ut <br> erat lectus, dictum sit amet lectus a, aliquet rutrum mauris. Etiam nec lectus hendrerit , consectetur<br> risus viverra, iaculis orci. Phasellus eu nibh ut mi luctus auctor. Donec sit amet dolor in diam feugiat <br> venenatis. </p>
</div>
<div class="lower ">
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">©<span>Untitled. Design: TEMPLATED. Images: Unsplash. Videos: Coverr.</span></div>
</div>
</div>
</footer>
<!--footer-->
</body>
</html>
First of: if you want to show any element (as well as a video) when hovering a card, then you need to put that element inside the HTML of the card. You failed to do that.
Also: you need to have the correct order of 'CSS selectors' to make that element visible when the .card gets hovered. Your original code .cards .video .card:hover fails to do that as it means: when from .cards and .video a .card:hover then show video.
What you need is: if from .cards a card:hover then show .video.
Also: when you want to position an element inside a parent you have to make .parent { position: relative } and its child .child { position: absolute }. Currently you use .child { position: fixed }. And without making the parent relative, the video is positioned somewhere on the screen (viewport) instead of the card (when all was working well, that is).
Lastly: the <iframe> you use is a child of <div> .video, so if you want to be able to size .video to your needs, you will need to make the <iframe> fully fill its parent (.video).
Plus: I changed the default background-color of the <header> to 'black' to make its content visible when there is no image.
To top it off: I added a <a> to the 'Watch'-button to open the movie on YouTube.
The below snippet has both the corrected HTML and proper CSS to show a video when the first card is hovered.
Note on SO the video in the card is still not visible, so I created a Fiddle to show that it works (the first card only, I leave the rest up to you).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html {
scroll-behavior: smooth;
}
#media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* header */
header {
height: 509px;
background-color: black;
}
header h1 {
color: #fff;
font-size: 60px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 20px;
line-height: 1.7;
padding-bottom: 20px;
}
header a i {
font-size: 60px;
color: #ffffff87;
transition: all .2s ease-in;
}
header a i:hover {
font-size: 60px;
color: #ffffff;
}
/* header */
/* media query for header section */
#media (max-width:767px) {
header video {
display: none;
}
header {
background-image: url(images/banner.jpg); /* MOD from 'background' */
background-color: black;
}
header h1 {
color: #fff;
font-size: 40px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 18px;
line-height: 1.7;
padding-bottom: 20px;
}
}
/* media query for header section */
/* cards */
.cards {
background-color: #202024;
overflow: hidden;
padding-bottom: 30px;
}
/* REMOVE THIS CODE
.cards .video {
position: fixed;
top: 15%;
left: 20%;
display: none;
}
.cards .video .card:hover {
position: fixed;
top: 15%;
left: 20%;
display: block;
}
END REMOVE */
/* And ADD */
iframe {
border: none; /* remove default border */
width: 100%; /* stretch to fill parent container */
height: 100%;
}
.cards .card {
position: relative; /* child content must be positioned inside this */
/* => a new 'stacking context' */
}
.cards .card .video {
display: none; /* hidden by default */
}
.cards .card:hover .video { /* when a card is hovered then show video */
position: absolute; /* position this element within a 'relative' parent */
top : 0; /* fully occupy the parent space */
right : 0;
left : 0;
bottom: 5rem; /* up to some position above `watch` button */
display: block; /* make it visible */
}
.cards .card .btn a {
text-decoration: none;
color: currentColor
}
/* End ADD */
.cards .card {
width: 30.3333%;
background-color: #2C2C32;
overflow: hidden;
margin-right: 3%;
margin-bottom: 3%;
border-radius: 5px;
}
.cards .card .image {
width: 100%;
}
.cards .card .image img {
width: 100%;
cursor: pointer;
}
.cards .card h2 {
color: #fff;
font-size: 19px;
padding: 23px;
}
.cards .card p {
padding: 0 15px 30px;
color: #ffffffa8;
line-height: 1.3;
font-size: 17px;
}
.cards .card .btn {
padding-bottom: 25px;
}
.cards .card .btn button {
padding: 10px 0;
color: #fff;
background-color: #82CEC6;
border: none;
border-radius: 5px;
font-size: 15px;
width: 75%;
}
/* media query for cards section */
#media (max-width:767px) {
.cards {
padding: 30px;
}
.cards .card {
width: 100%;
margin-bottom: 35px;
}
}
/* media query for cards section */
/* footer */
footer {
background-color: #1B1B1F;
color: #fff;
}
footer .container .upper h2 {
font-size: 25px;
padding-bottom: 30px;
}
footer .container .upper p{
font-size: 15px;
padding-bottom: 30px;
line-height: 1.4;
color: #a5a7a7;
}
footer .container .lower .icons i {
color: #605d5da8;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
cursor: pointer;
transition: all .2s ease-in;
}
footer .container .lower .icons i:hover {
color: #fff;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
}
footer .container .lower .icons i:first-of-type {
padding: 13px 16px;
}
footer .container .lower .icons i:not(:first-of-type){
padding: 13px 13px; }
footer .container .lower .copyright {
color: #a7a7a7a7;
}
/* footer */
/* media query for footer section */
#media (max-width:767px) {
footer {
padding: 20px 0;
}
}
/* media query for footer section */
/*my frame work */
.flex-row {
display: flex;
justify-content: space-around;
align-items: center;
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text-center {
text-align: center;
}
.float-l {
float: left;
}
.container {
padding: 5% 8% 5% 8%;
}
<html>
<head>
<meta charset="UTF-8">
<title>Motion</title>
<script src="https://kit.fontawesome.com/11e8366046.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="motion.css">
</head>
<body>
<!--Header-->
<header class="flex-col" >
<video src="images/banner.mp4" autoplay="true" loop="true" style="width: 100%; z-index: -1000; position: fixed; top: 0; left: 0; "></video>
<div class="container">
<div class="text-center">
<h1>Full Motion</h1>
<p>A responsive video gallery template with a functional lightbox <br>
designed by Templated and released under the Creative Commons License</p>
</div>
<div class="text-center">
</i>
</div>
</div>
</header>
<!--Header-->
<!--cards-->
<div class="cards text-center" id="cards">
<div class="container">
<div class="card float-l">
<div class="video"><iframe src="https://www.youtube.com/embed/s6zR2T9vn2c" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="image">
<img src="images/pic01.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button><a rel="noopener" target="_blank" href="https://www.youtube.com/watch?v=s6zR2T9vn2c">Watch</a></button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic02.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic03.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic04.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic05.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic06.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
</div>
</div>
<!--cards-->
<!--footer-->
<footer class="text-center">
<div class="container">
<div class="upper ">
<h2>Etiam veroeros lorem</h2>
<p>Pellentesque eleifend malesuada efficitur. Curabitur volutpat dui mi, ac imperdiet dolor tinciduntnec. Ut <br> erat lectus, dictum sit amet lectus a, aliquet rutrum mauris. Etiam nec lectus hendrerit , consectetur<br> risus viverra, iaculis orci. Phasellus eu nibh ut mi luctus auctor. Donec sit amet dolor in diam feugiat <br> venenatis. </p>
</div>
<div class="lower ">
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">©<span>Untitled. Design: TEMPLATED. Images: Unsplash. Videos: Coverr.</span></div>
</div>
</div>
</footer>
<!--footer-->
</body>
</html>
I'm trying to make Iphone 6/7/8 version for my site.
Unfortuantely I do not know how to move my main menu to right corner so it would look like this in web site:
Right now the site looks like this:
Could you tell me how to move this menu?
What is more, I do not know how to move this 6 squares down to the text. I'm trying to usse marigin-bottom etc on SquaresDOWN div or UP but nothing is happening.
I'd really appreciate if you could help me with these two things.
css
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
.left h1{
font-size: 20px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
}
.left {
float: left;
width: 50%;
margin-right: 500px;
}
#ourteam
{
margin-top: 300px;
margin-left: 100px;
font-size: 60px;
font-weight: bold;
color:rgb(24, 188, 253);
}
#squaresUP div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#squaresDOWN div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#tytul
{
font: Bold 20px/23px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 33px;
margin-top: 60px;
}
#tytul1
{
font: Regular 14px/30px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 28px;
margin-top: 100px;
}
.square1 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square2 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square3 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square4 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square5 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square6 { background: #7FC4FD 0% 0% no-repeat padding-box;}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
background-size:100% 3000px;
}
#ourteam
{
margin-top: 300px;
margin-left: 700px;
font-size: 80px;
font-weight: bold;
width: 400px;
color:rgb(24, 188, 253);
}
.left h1{
font-size: 27px;
width: 1500px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
margin-top: 50px;
}
.left {
float: left;
margin-right: 500px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
width: 1150px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 35px/15px Arial;
padding: 5px;
width: 50px;
}
}
html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-authors.css" >
</head>
<body>
<header>
<div class="row">
<ul id ="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
<section>
<article>
<p id="ourteam">Our Team.</p>
<div class="left">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. I</h1>
</div>
<div class="row2">
<div id="squaresUP">
<div class="square1" style='position:absolute;left:1100px; top:292px;'></div>
<div class="square2"style='position:absolute;left:1350px; top:292px;background: #F1F9FF 0% 0% no-repeat padding-box;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'>Name Surname</h1>
<h1 id="tytul1" style='position:absolute;left:0px; top:0px;'>Co-Founder & CTO</h1>
</div>
<div class="square3"style='position:absolute;left:1600px; top:292px;'></div>
</div>
<div id="squaresDOWN">
<div class="square4"style='position:absolute;left:1100px; top:560px;'></div>
<div class="square5"style='position:absolute;left:1350px; top:560px;'></div>
<div class="square6"style='position:absolute;left:1600px; top:560px;'></div>
</div>
</div>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>
//edit
the squares should be right there. They should be centered under the text.
I have cleaned up your code a little bit and here you can find an example for how to create a header menu inside a css grid looks decent for iphone 7/8 view.
you can change the percentage based on your request to get it a bit bigger if you don't want to create more buttons,
if it doesn't helped you totally at least it could be a reference.
<!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">
<title>Document</title>
<style>
.row{
display: grid;
grid-template-columns: 20% 80%;
}
.main-nav{
float: right;
display: inline-flex;
list-style: none;
font-size: 50%;
}
.main-nav li{
font-size: 50%;
}
</style>
</head>
<body>
<div class="row">
<div id ="logo"><img src="css-images/dingdog-logo.png"></div>
<div>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
</div>
<!-- create your html elements and divs below -->
<!-- make sure to arrange them in a decent way to be organzied with y our page -->
<!-- i would suggest you use css grid as i did for the menu and follow almost the same settings
which will make your view look more adjusted and responsive -->
</body>
</html>