Why is the div "about-long" going on top of my home page not under? Should't divs be block level elements and go under not over each other? I tried basically everything chaning "about-long" div to block, inline, block-inline, tried clear:both and nothing works..Been stuck on this for the past few days..
This is the code (html/css)
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: auto;
height: 100%;
}
body {
background-image: url('https://images.unsplash.com/photo-1527153818091-1a9638521e2a?ixlib=rb-1.2.1&auto=format&fit=crop&w=858&q=80');
background-size: cover;
height: 100vh;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: transparent;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: 60px;
transform: translateX(+250px);
transition: transform 250ms ease-in-out;
background: transparent;
}
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.6s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
right: 25px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
input[type=checkbox]:checked~.sidebarIconToggle~a>.logo-header {
left: 0%;
transition: all 0.3s;
}
/* Top menu */
.topMenu{
list-style:none;
float:right;
color:#fff;
margin-right: -270px;
transform: translateX(+550px);
transition: transform 250ms ease-in-out;
z-index: 105;
}
.topMenu li{
display:inline;
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~.topMenu {
transform: translateX(0);
}
input[type=checkbox]:checked~.sidebarIconToggle~.topMenu {
margin-right: 70px;
transition: all 0.3s;
}
.logo-header {
transition: all 0.3s;
width: 50px;
position: absolute;
left: 40%;
top: 5px;
z-index: 100;
}
.form-1 {
position:absolute;
right:10%;
top:38%;
}
#offer {
width:100%;
background-color:white;
height:768px;
clear:both;
}
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label><a href=""><span class="logo-header">
<img src="http://pomma89.altervista.org/troschuetz.random/logo-128.png"> </span> </a>
<ul class="topMenu">
<li><a href="" target="">Strategy</a></li>
<li><a href="" target="">Web Design</a></li>
<li><a href="" target="">UX</a></li>
<li><a href="" target="">Marketing</a></li>
<li><a href="" target="">About</a></li>
<li><a href="" target="">Contact</a></li>
</ul>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li><a href="" target="">Facebook</a></li>
<li><a href="" target="">Twitter</a></li>
<li><a href="" target="">Instagram</a></li>
<li>Blog<span>Follow us on Socials</span></li>
</ul>
</div>
<div class="form-1">
<form class="contact100-form validate-form">
<span class="contact100-form-title">
Start getting results
</span>
<div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
<input class="input100" type="text" name="name" placeholder="Enter your name">
</div>
<div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate = "Name is required">
<input class="input100" type="text" name="email" placeholder="Company name">
</div>
<div class="wrap-input100" data-validate = "Valid email is required: ex@abc.hyz">
<input class="input100" type="text" name="email" placeholder="Email">
</div>
<div class="container-contact100-form-btn">
<div class="wrap-contact100-form-btn">
<div class="contact100-form-bgbtn"></div>
<button class="contact100-form-btn">
Submit
</button>
</div>
</div>
</form>
</div>
<!--About-->
<div class="about-long">
<div id="offer">
<h2>Dunno What to <span>put here</span></h2>
<div class="grid">
<div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per, his ad regione singulis scriptorem. Sit an erroribus adipiscing. No amet ridens pri, duo persecuti adolescens no. 1</div>
<div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per, his ad regione singulis scriptorem. Sit an erroribus adipiscing. No amet ridens pri, duo persecuti adolescens no. 2</div>
<div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per, his ad regione singulis scriptorem. Sit an erroribus adipiscing. No amet ridens pri, duo persecuti adolescens no. 3</div>
<div>Lorem ipsum dolor sit amet, idque mollis consetetur at vis, eam at sale atqui. Sapientem qualisque reprehendunt eu his, ne sit oratio accusam. In has ocurreret vulputate, etiam sadipscing ut per, his ad regione singulis scriptorem. Sit an erroribus adipiscing. No amet ridens pri, duo persecuti adolescens no. 4</div>
</div>
</div>
</div>
</body>
Thank you in advance!
Aucun commentaire:
Enregistrer un commentaire