I have this code:
new WOW().init();
/* AUTHOR LINK */
$('.about-me-img img, .authorWindowWrapper').hover(function() {
$('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
//$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});
body {
font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 13px;
background-color: #000000 !important;
background-size: cover;
margin: 0;
height: 100%;
background-image: url("https://media.istockphoto.com/photos/programming-source-code-on-digital-screen-software-developer-and-picture-id1336271758?b=1&k=20&m=1336271758&s=170667a&w=0&h=HoJqtqo1r54eZf9G4OqBXRHXLsYoD0X9wMR-vXFBiTE=");
}
.overlayE {
position: absolute;
width: 100%;
height: 100% !important;
margin: 0;
padding: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.886);
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
font-size: 13px;
direction: ltr;
}
.sectionClass1 {
padding: 80px 0px 50px 0px;
position: relative;
display: block;
}
.row {
width: 980px;
height: 100%;
max-width: 100%;
margin: 0 auto;
}
.row:before,
.row:after {
content: "";
display: table;
}
.sectiontitle {
background-position: center;
text-align: center;
min-height: 20px;
}
.sectiontitle h2 {
font-size: 30px;
color: #222;
margin-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
}
.headerLine {
width: 160px;
height: 2px;
display: inline-block;
background: #101F2E;
}
.fullWidth {
width: 100%;
display: table;
float: none;
padding: 0;
min-height: 1px;
height: 100%;
position: relative;
}
/********************************/
/* SECTION WORK EXPERIENCE
********************************/
#work-experience .sectiontitle .headerLine {
width: 280px;
}
#work-experience .headerline {
width: 280px;
}
.cbp_tmtimeline {
margin: 60px 30px 0 0;
padding: 0;
list-style: none;
position: relative;
}
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 3%;
bottom: 0;
width: 10px;
background: #324454;
left: 13%;
height: 100%;
}
.cbp_tmtimeline li:last-child:before {
content: initial;
}
.cbp_tmtimeline>li .cbp_tmtime {
display: block;
width: 25%;
padding-right: 100px;
position: absolute;
}
.cbp_tmtimeline>li .cbp_tmtime span {
display: block;
text-align: right;
}
.cbp_tmtimeline>li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 2.9em;
color: #3594cb;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
color: #6cbfee;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 0 0 15px 25%;
background: rgba(50, 68, 84, 1);
color: #FFF;
padding: 30px;
font-size: 1.2em;
font-weight: 300;
line-height: 1.4;
font-family: 'Open Sans';
position: relative;
border-radius: 5px;
min-height: 150px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
background: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmlabel h3 {
margin-top: 0px;
color: white;
font-size: 20px;
margin-bottom: 5px;
padding: 0 0 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 {
opacity: 0.7;
color: rgba(255, 255, 255, 1);
letter-spacing: 0px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
line-height: 1.2em;
font-weight: 600;
padding: 0;
padding-bottom: 10px;
margin: 0;
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 i {
margin-right: 5px;
vertical-align: middle;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: rgba(50, 68, 84, 1);
border-width: 10px;
top: 70px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmicon {
width: 150px;
height: 150px;
top: 3%;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1.4em;
line-height: 40px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #151515;
background: #324454;
border-radius: 50%;
text-align: center;
left: 8%;
margin: 0 0 0 -25px;
}
.cbp_tmtimeline li {
margin-bottom: 70px;
position: relative;
}
.sectionClassProject {
position: relative;
display: block;
/* background: #f7f7f7; */
margin: 0 auto;
padding: 80px 1.875em 3.125em;
}
.projectParagraph {
font-size: 18px;
margin: 0.5em 0 0;
font-family: 'Source Sans Pro', serif;
}
.projectParagraphLink {
font-size: 15px !important;
font-weight: 500 !important;
margin-top: 50px !important;
margin-bottom: 0px;
text-align: right;
}
.projectParagraphLink a {
color: white;
text-decoration: underline;
}
.cbp_tmicon img {
width: 100%;
}
.faPra {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 70px;
vertical-align: middle;
color: white;
line-height: 150px;
}
.label {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3px;
color: #FFFFFF;
display: inline;
font-size: 12px;
font-weight: bold;
margin-right: 10px;
padding: 5px 15px;
}
.date {
color: #BFC3C7;
display: block;
font-size: 14px;
font-weight: 600;
position: absolute;
top: 30px;
right: 20px;
}
.date i {
margin-right: 8px;
vertical-align: top;
font-size: 18px;
line-height: 20px;
}
#media (max-width: 1024px) {
.cbp_tmtimeline:before {
display: none;
}
.cbp_tmtimeline>li .cbp_tmtime {
width: 100%;
position: relative;
padding: 0 0 20px 0;
}
.cbp_tmtimeline>li .cbp_tmtime span {
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 30px 0 70px 0;
padding: 50px 30px 30px 30px;
font-weight: 400;
font-size: 95%;
float: left;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: auto;
border-right-color: transparent;
border-bottom-color: rgb(50, 68, 84);
top: -20px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: transparent;
border-bottom-color: rgb(43, 58, 72);
left: 65px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmlabel:after {
right: 65px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmicon {
position: relative;
float: left;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmicon {
position: relative;
float: right;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 1.5em;
}
}
#media (max-width: 32em) {
.cbp-ntaccordion {
font-size: 70%;
}
}
<link rel="stylesheet" href="experience.css">
<script src="experience.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<div class="overlayE"></div>
<div id="workexperience">
<div class="row ">
<div class="sectiontitle">
<h2>Work experience</h2>
<span class="headerLine"></span>
</div>
<ul class="cbp_tmtimeline">
<li>
<div class="cbp_tmicon cbp_tmicon-phone">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web developer</h3>
<div class="date">
<i class="fa fa-calendar"></i>April 2014 - Current
</div>
<h4><i class="fa fa-flag"></i>Davic Company, Bratislava</h4>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-screen">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Fannous Company, Prague</h4>
<div class="date"><i class="fa fa-calendar"></i>June 2012 - April 2014</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-mail">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Techixs Company, London</h4>
<div class="date"><i class="fa fa-calendar"></i>November 2009 - June 2012</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-phone">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Freelancer</h3>
<div class="date"><i class="fa fa-calendar"></i>Januar 2006 - November 2009</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse iusto, possimus hic at quisquam, incidunt illo asperiores et nobis, qui nulla consequatur molestiae quibusdam expedita dignissimos? Iste eum velit quos.</p>
</div>
</li>
</ul>
</div>
</div>
If you run the code, and open it on new page, there is a different background at the end of the page, I would like to remove that and merge it with the dark background I have. How can I extend the dar background to the full page? I would just like the blueish background near the end of the page to be removed.
Edit: enter image description here
You can set the overflow-y on the body to scroll and still use the fixed background
new WOW().init();
/* AUTHOR LINK */
$('.about-me-img img, .authorWindowWrapper').hover(function() {
$('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
//$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 13px;
background-color: #000000 !important;
background-size: cover;
margin: 0;
height: 100%;
overflow-y: scroll;
background-image: url("https://media.istockphoto.com/photos/programming-source-code-on-digital-screen-software-developer-and-picture-id1336271758?b=1&k=20&m=1336271758&s=170667a&w=0&h=HoJqtqo1r54eZf9G4OqBXRHXLsYoD0X9wMR-vXFBiTE=");
}
.overlayE {
position: fixed;
width: 100%;
height: 100% !important;
margin: 0;
padding: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.886);
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
font-size: 13px;
direction: ltr;
}
.sectionClass1 {
padding: 80px 0px 50px 0px;
position: relative;
display: block;
}
.row {
width: 980px;
height: 100%;
max-width: 100%;
margin: 0 auto;
}
.row:before,
.row:after {
content: "";
display: table;
}
.sectiontitle {
background-position: center;
text-align: center;
min-height: 20px;
}
.sectiontitle h2 {
font-size: 30px;
color: #222;
margin-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
}
.headerLine {
width: 160px;
height: 2px;
display: inline-block;
background: #101F2E;
}
.fullWidth {
width: 100%;
display: table;
float: none;
padding: 0;
min-height: 1px;
height: 100%;
position: relative;
}
/********************************/
/* SECTION WORK EXPERIENCE
********************************/
#work-experience .sectiontitle .headerLine {
width: 280px;
}
#work-experience .headerline {
width: 280px;
}
.cbp_tmtimeline {
margin: 60px 30px 0 0;
padding: 0;
list-style: none;
position: relative;
}
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 3%;
bottom: 0;
width: 10px;
background: #324454;
left: 13%;
height: 100%;
}
.cbp_tmtimeline li:last-child:before {
content: initial;
}
.cbp_tmtimeline>li .cbp_tmtime {
display: block;
width: 25%;
padding-right: 100px;
position: absolute;
}
.cbp_tmtimeline>li .cbp_tmtime span {
display: block;
text-align: right;
}
.cbp_tmtimeline>li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 2.9em;
color: #3594cb;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
color: #6cbfee;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 0 0 15px 25%;
background: rgba(50, 68, 84, 1);
color: #FFF;
padding: 30px;
font-size: 1.2em;
font-weight: 300;
line-height: 1.4;
font-family: 'Open Sans';
position: relative;
border-radius: 5px;
min-height: 150px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
background: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmlabel h3 {
margin-top: 0px;
color: white;
font-size: 20px;
margin-bottom: 5px;
padding: 0 0 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 {
opacity: 0.7;
color: rgba(255, 255, 255, 1);
letter-spacing: 0px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
line-height: 1.2em;
font-weight: 600;
padding: 0;
padding-bottom: 10px;
margin: 0;
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel h4 i {
margin-right: 5px;
vertical-align: middle;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: rgba(50, 68, 84, 1);
border-width: 10px;
top: 70px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: #2B3A48;
}
.cbp_tmtimeline>li .cbp_tmicon {
width: 150px;
height: 150px;
top: 3%;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 1.4em;
line-height: 40px;
-webkit-font-smoothing: antialiased;
position: absolute;
color: #151515;
background: #324454;
border-radius: 50%;
text-align: center;
left: 8%;
margin: 0 0 0 -25px;
}
.cbp_tmtimeline li {
margin-bottom: 70px;
position: relative;
}
.sectionClassProject {
position: relative;
display: block;
/* background: #f7f7f7; */
margin: 0 auto;
padding: 80px 1.875em 3.125em;
}
.projectParagraph {
font-size: 18px;
margin: 0.5em 0 0;
font-family: 'Source Sans Pro', serif;
}
.projectParagraphLink {
font-size: 15px !important;
font-weight: 500 !important;
margin-top: 50px !important;
margin-bottom: 0px;
text-align: right;
}
.projectParagraphLink a {
color: white;
text-decoration: underline;
}
.cbp_tmicon img {
width: 100%;
}
.faPra {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 70px;
vertical-align: middle;
color: white;
line-height: 150px;
}
.label {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3px;
color: #FFFFFF;
display: inline;
font-size: 12px;
font-weight: bold;
margin-right: 10px;
padding: 5px 15px;
}
.date {
color: #BFC3C7;
display: block;
font-size: 14px;
font-weight: 600;
position: absolute;
top: 30px;
right: 20px;
}
.date i {
margin-right: 8px;
vertical-align: top;
font-size: 18px;
line-height: 20px;
}
#media (max-width: 1024px) {
.cbp_tmtimeline:before {
display: none;
}
.cbp_tmtimeline>li .cbp_tmtime {
width: 100%;
position: relative;
padding: 0 0 20px 0;
}
.cbp_tmtimeline>li .cbp_tmtime span {
text-align: left;
}
.cbp_tmtimeline>li .cbp_tmlabel {
margin: 30px 0 70px 0;
padding: 50px 30px 30px 30px;
font-weight: 400;
font-size: 95%;
float: left;
}
.cbp_tmtimeline>li .cbp_tmlabel:after {
right: auto;
border-right-color: transparent;
border-bottom-color: rgb(50, 68, 84);
top: -20px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: transparent;
border-bottom-color: rgb(43, 58, 72);
left: 65px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmlabel:after {
right: 65px;
}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmicon {
position: relative;
float: left;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li:nth-child(even) .cbp_tmicon {
position: relative;
float: right;
left: auto;
margin: 0px 5px 0 0px;
}
.cbp_tmtimeline>li .cbp_tmtime span:last-child {
font-size: 1.5em;
}
}
#media (max-width: 32em) {
.cbp-ntaccordion {
font-size: 70%;
}
}
<link rel="stylesheet" href="experience.css">
<script src="experience.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<body>
<div class="overlayE"></div>
<div id="workexperience">
<div class="row ">
<div class="sectiontitle">
<h2>Work experience</h2>
<span class="headerLine"></span>
</div>
<ul class="cbp_tmtimeline">
<li>
<div class="cbp_tmicon cbp_tmicon-phone">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web developer</h3>
<div class="date">
<i class="fa fa-calendar"></i>April 2014 - Current
</div>
<h4><i class="fa fa-flag"></i>Davic Company, Bratislava</h4>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-screen">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Fannous Company, Prague</h4>
<div class="date"><i class="fa fa-calendar"></i>June 2012 - April 2014</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
</div>
</li>
<li>
<div class="cbp_tmicon cbp_tmicon-mail">
<i class="faPra fa-briefcase"></i>
</div>
<div class="cbp_tmlabel wow fadeInRight animated">
<h3>Web designer</h3>
<h4><i class="fa fa-flag"></i>Techixs Company, London</h4>
<div class="date"><i class="fa fa-calendar"></i>November 2009 - June 2012</div>
<p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>
</div>
</li>
</ul>
</div>
</div>
</body>
Related
i have been following someone on youtube about making simple website with only using html,css and javascript. i'm doing some modification myself, and i've been trying to get rid of padding on my flex. there's little bit padding below that i don't know how to remove.
here's the pict
already review the video i watch and still can't find the solution, can you guys help me? please explain it in most newbie ways...
below is my HTML
<!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>Proj Hotel</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,300;0,400;0,700;1,200&display=swap"
rel="stylesheet"
/>
<!-- Fonts end -->
<!-- Feather icons -->
<script src="https://unpkg.com/feather-icons"></script>
<!-- Icons end -->
<link rel="stylesheet" href="css/Style.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
Hotel <span>Proj</span>
<div class="navbar-nav">
home
About us
Rooms
Contact
</div>
<div class="navbar-extra">
<i data-feather="search"></i>
<a href="#" id="shopping-cart">
<i data-feather="shopping-cart"></i>
</a>
<i data-feather="menu"></i>
</div>
</nav>
<!-- Navbar end -->
<!--Hero section -->
<section class="hero" id="home">
<main class="content">
<h1>Get Some Nice <span>Sleep!</span></h1>
<div class="inpad">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, fuga.
</p>
book now!
</div>
</main>
</section>
<!-- Hero section end -->
<!-- about sextion -->
<section id="about" class="about">
<h2><span>About</span> us</h2>
<div class="row">
<div class="about-img">
<img src="img/aboutfix.jpg" alt="About us" />
</div>
<div class="content">
<h3>Why Choose us?</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit sit,
in voluptatem adipisci minima eligendi dolor unde quis aliquid
itaque ut quas pariatur iste neque? Aut labore voluptatibus
laboriosam sapiente.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique
in esse recusandae quis architecto ad deleniti voluptatum pariatur
facere aliquam impedit nesciunt fugiat animi dolorum officiis rerum,
praesentium molestiae eum!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Recusandae, vel? Quasi error quas officiis esse mollitia doloremque
saepe dolorem magnam ad excepturi temporibus, illo possimus quis,
</p>
</div>
</div>
</section>
<!-- about section end -->
<!-- feather icons -->
<script>
feather.replace();
</script>
<!-- javascript my -->
<script src="js/script.js"></script>
<!-- Feather icons -->
</body>
</html>
my CSS
:root {
--bg: #fffbeb;
--Primary: #745b36;
}
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Poppins", sans-serif;
background-color: var(--bg);
color: #fff;
min-height: 5000px;
}
/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 7%;
background-color: #f2deba;
border-bottom: 0.5px solid #f8cba6;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
.navbar .navbar-logo {
font-size: 2rem;
font-weight: 700;
color: #bb8d64;
font-style: italic;
}
.navbar .navbar-logo span {
color: var(--Primary);
}
.navbar .navbar-nav a {
display: inline-block;
font-size: 1.3rem;
margin: 0 1rem;
color: var(--Primary);
}
.navbar .navbar-nav a:hover {
color: #0c0c0c;
}
.navbar .navbar-nav a::after {
content: "";
display: block;
padding-bottom: 0.5rem;
border-bottom: 0.1rem solid #0a0a0a;
transform: scaleX(0);
transition: 0.2s linear;
}
.navbar .navbar-nav a:hover::after {
transform: scaleX(0.5);
}
.navbar .navbar-extra a {
color: var(--Primary);
margin: 0 0.5rem;
}
.navbar .navbar-extra a:hover {
color: #fff;
}
#hamburger-menu {
display: none;
}
/* Navbar end */
/* hero section style start */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
background-image: url("../img/1.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
}
/* below is gradient section */
.hero::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 30%;
bottom: 0;
background: linear-gradient(
0deg,
rgba(255, 251, 235, 1) 8%,
rgba(255, 255, 255, 0) 50%
);
}
/* gradient section end */
.hero .content {
padding: 1.4rem 7%;
max-width: 70rem;
}
.hero .content h1 {
font-size: 5rem;
color: #fff;
text-shadow: 1px 1px 3px rgba(1, 1, 3, 0.5);
line-height: 1;
}
.hero .content p {
font-size: 1.6rem;
margin-top: 1rem;
line-height: 1.4;
color: #fff;
font-weight: 100;
text-shadow: 1px 1px 3px rgba(1, 1, 3, 0.5);
}
.hero .content span {
color: rgba(241, 213, 162, 2);
}
.hero .content .cta {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 2rem;
font-size: 1.4rem;
color: #fff;
background-color: #f1d5a2a9;
border-radius: 0.5rem;
box-shadow: 1px 1px 3px rgba(1, 1, 3, 0.3);
margin-bottom: 0.5rem;
}
.hero .content .inpad a:hover {
background-color: #d3ba8d65;
}
.hero .content .inpad {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1rem;
font-size: 1rem;
color: #fff;
background-color: rgba(116, 91, 54, 0.7);
border-radius: 0.5rem;
}
/* Hero section styles ends */
/* about start */
.about {
padding: 8rem 20%;
}
.about h2 {
text-align: center;
font-size: 2.4rem;
margin-bottom: 3rem;
color: rgba(116, 91, 54, 0.7);
}
.about .row .content p {
color: rgba(116, 91, 54, 0.5);
margin-bottom: 0.8rem;
font-size: 1rem;
font-weight: 700;
line-height: 1.7rem;
margin-left: 1rem;
}
.about .row {
display: flex;
background-color: rgba(116, 91, 54, 0.2);
}
.about .row .about-img {
flex: 1 1 25rem;
}
.about .row .about-img img {
width: 100%;
}
.about .row .content {
flex: 1 1 20rem;
}
.about .row .content h3 {
font-size: 1.5rem;
color: rgba(116, 91, 54, 0.5);
padding-left: 1rem;
}
/* about end */
/* media queries */
/* laptop */
#media (max-width: 1366px) {
html {
font-size: 75%;
}
}
/* end */
/* Tablet */
#media (max-width: 768px) {
html {
font-size: 62.5%;
}
#hamburger-menu {
display: inline-block;
}
.navbar .navbar-nav {
position: absolute;
top: 100%;
right: -100%;
background-color: #fff;
width: 25rem;
height: 100vh;
transition: 0.5s;
}
.navbar .navbar-nav.active {
right: 0;
}
.navbar .navbar-nav a {
color: var(--Primary);
display: block;
margin: 1.5rem;
padding: 0.5rem;
font-size: 2rem;
}
.navbar .navbar-nav a::after {
transform-origin: 0 0;
}
.navbar .navbar-nav a:hover::after {
transform: scaleX(0.3);
}
.about .row {
flex-wrap: wrap;
}
.about .row .about-img img {
height: 25rem;
object-fit: cover;
object-position: center;
}
.about .row .content {
padding: 0;
}
.about .row .content h3 {
margin-top: 1rem;
font-size: 2rem;
}
.about .row .content p {
font-size: 1.6rem;
}
}
/* end */
/* mobile */
#media (max-width: 450px) {
html {
font-size: 55%;
}
}
/* end */
/* Media queries end */
and my Javascript
// toggle class active
const navbarNav = document.querySelector(".navbar-nav");
//ketika hamburger menu di klik
document.querySelector("#hamburger-menu").onclick = () => {
navbarNav.classList.toggle("active");
};
// outside click to close sidebar
const hamburger = document.querySelector("#hamburger-menu");
document.addEventListener("click", function (e) {
if (!hamburger.contains(e.target) && !navbarNav.contains(e.target)) {
navbarNav.classList.remove("active");
}
});
i'm sorry about the messy codes i made, thanks in advance.
Are you referring to this space?
This is not padding, but rather this is caused by the height of the image on the left. This is because the image is set to take up the same width as the text on the right (due to flex: 1), and so the height of the image causes the height of the content on the right to also increase, which is why you see this blank space at the bottom.
A simple option could be to apply align-items: center to the flex-container which will give equal space on the top or bottom. But this will not remove the spacing altogether.
Remove min-height: 5000px from inside the body tag in css
There is a problem with my code when I click on an item buy a popup appears but when I click on add product the buy button does not work and does not show popup
html code
<body id="body" class="light ">
<h5 class="dark-button">dark mode</h5>
<h4 class="add-pro"> add proudct</h4>
<div class="continer">
<div class="coninar-box">
<img src="product1.jpg" alt="">
<div class="text">
<h4>product1</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing quae temporibus numquam vero unde consequuntur </p>
<button class="btn">buy</button>
</div>
</div>
<div class="coninar-box">
<img src="product1.jpg" alt="">
<div class="text">
<h4>product2</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing quae temporibus numquam vero unde consequuntur </p>
<button class="btn" >buy</button>
</div>
</div>
<div class="coninar-box">
<img src="product1.jpg" alt="">
<div class="text">
<h4>product3</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing quae temporibus numquam vero unde consequuntur </p>
<button class="btn" >buy</button>
</div>
</div>
<div class="coninar-box">
<img src="product1.jpg" alt="">
<div class="text">
<h4>product4</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing quae temporibus numquam vero unde consequuntur </p>
<button class="btn" >buy</button>
</div>
</div>
<div class="coninar-box">
<img src="product1.jpg" alt="">
<div class="text">
<h4>product5</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing quae temporibus numquam vero unde consequuntur </p>
<button class="btn" >buy</button>
</div>
</div>
<div class="pop-one">
<div class="overlay">
<h3 id="dd" >you need to buy</h3>
<div class="nflex">
<input id="input" type="number" name="" id="">
<button class="yes">yes</button>
</div>
</div>
<div class="pop-tow">
<div class="overlay1">
<h3 class="last-masseg">you need to buy</h3>
<div class="nflex">
</div>
</div>
</div>
</div>
</div>
</body>
css code
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
font-family: 'Open Sans', sans-serif;
}
.continer{
padding-left: 10px;
padding-right: 10px;
margin-left: auto;
margin-right: auto;
}
#media (min-width: 768px){
.continer{
width: 750px;
}
}
/* medium */
#media (min-width: 992px){
.continer{
width: 970px;
}
}
/* large */
#media (min-width:1200px){
.continer{
width: 1170px;
}
}
/* start */
body .continer {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.coninar-box{
width: 260px;
box-shadow: 0 0 10px rgb(168, 168, 168);
border-radius: 10px;
margin: 13px;
}
.coninar-box img{
border-radius: 5px 5px 0 0;
width: 260px;
height: 150px;
}
.coninar-box h4 {
font-weight: 600;
padding: 5px 10px;
}
.coninar-box p {
margin-bottom: 15px;
font-size: 14px;
padding: 2px 10px;
line-height: 1.6;
}
.coninar-box button {
padding: 8px;
cursor: pointer;
border-radius: 4px;
margin-left: 10px;
margin-bottom: 9px;
color: white;
background-color: rgb(8, 79, 212);
border: transparent;
}
#media (max-width:767px){
.coninar-box{
width: 100%;
}
.coninar-box img{
width: 100%;
}
}
/* start pop one */
.continer .pop-one {
position: fixed;
background-color: burlywood;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index:1;
flex-wrap: nowrap;
display: none;
}
.continer .pop-tow h3{
text-align: center;
}
.continer .pop-one h3{
color: rebeccapurple;
margin-bottom: 15px;
text-align: center;
}
.continer .pop-one input {
height: 30px;
width: 250px;
border-radius: 5px;
border: 1px solid rgb(51, 255, 0);
outline: none;
}
.continer .pop-one .overlay {
background-color: rgb(149, 182, 164);
padding: 30px;
display: inline-block;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
display: none;
/* to nonn 1 */
}
.continer .pop-tow .overlay1{
background-color: rgb(149, 182, 164);
padding: 30px;
display: inline-block;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
z-index: 1;
margin-top: 50px;
display: none;
}
.continer .pop-one .yes {
padding: 5px;
border-radius: 5px;
background-color: rgb(8, 79, 212);
color: white;
border: 1px solid rgb(8, 79, 212) ;
cursor: pointer;
}
.continer .pop-one .btn1:hover{
background-color: rgb(10, 92, 244);
}
.dark-button{
background-color: aqua;
display: inline-block;
position: absolute;
right: 20px;
top: 10px;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 2s;
}
.dark-button:hover{
background-color: rgb(42, 195, 195);
}
.light{
transition: all 2s;
}
.dark {
background-color: #0f0f0f;
color: white;
transition: all 2s;
}
.light .dark-button{
color: white;
background-color: rgb(195, 116, 20);
}
.dark .dark-button {
color: #ffffff;
background-color: #030303;
}
.dark-text{
display: none;
}
.dark .continer .pop-one {
background-color: #030303da;
}
.dark .continer .overlay {
background-color: #272727;
}
.dark .continer .overlay h3 {
color: white;
}
.dark #input {
background-color: rgb(94, 81, 81);
border: 1px solid rgb(88, 79, 79);
box-shadow: 0 0 6px rgb(166, 163, 163);
color: white;
}
.dark .yes{
background-color: #030303 !important;
border: 1px solid #030303 !important ;
}
.dark .overlay1 {
background-color: #272727 !important;
}
.dark .last-masseg{
color: white !important;
}
.no-scroll{
overflow: hidden;
}
.add-pro{
background-color: orange;
color: white;
border: 1px solid orange;
border-radius: 5px;
padding: 5px;
margin: 5px;
cursor: pointer;
font-size: 14px;
display: inline-block;
}
.add-pro:hover{
background-color: rgb(242, 160, 7);
color: white;
}
.add-pro:active{
background-color: rgb(7, 242, 42);
border: 1px solid rgb(7, 242, 42);
}
javascript code
const overlaymain = document.getElementsByClassName("overlay")[0]
const poupcontinar = document.getElementsByClassName("pop-one")[0]
const ovlaySup = document.getElementsByClassName("overlay1")[0]
const input = document.getElementById("input")
const body = document.getElementById("body")
const adpro = document.getElementsByClassName("add-pro")[0]
const continar = document.getElementsByClassName("continer")[0]
const yes = document.querySelector(".yes")
continar.style.border = "2px solid red"
adpro.addEventListener("click", (eo) => {
const newpro = `
<div class="coninar-box">
<img src="product1.jpg" alt="">
<div class="text">
<h4>product5</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing quae temporibus numquam vero unde consequuntur </p>
<button class="btn">buy</button>
</div>
</div>
`
continar.innerHTML += newpro
})
continar.addEventListener("click", (eo) => {
if (eo.target.className == "btn") {
ovlaySup.style.display = "none"
poupcontinar.style.display = "flex"
overlaymain.style.display = "block"
input.value = ''
}
});
const darkModeButton = document.getElementsByClassName("dark-button")[0]
const light = document.getElementsByClassName("light")[0]
const darkText = document.getElementsByClassName("dark-text")
darkModeButton.addEventListener("click", (eo) => {
light.classList.toggle("dark")
})
yes.addEventListener("click" , (eo) => {
overlaymain.style.display = "none"
ovlaySup.style.display = "flex"
setTimeout(() => {
poupcontinar.style.display = "none"
body.classList.remove("no-scroll")
}, 1000);
})
There is a problem with my code when I click on an item buy a popup appears but when I click on add product the purchase button does not work and does not show popup
Do you want that when you click on buy the product, it is removed from the screen?
I have created a DropDown navigation menu in CSS. when i click on it, it hides the page contents altogether. I want want that instead of hiding the page content, either it pushes page content down or drop down menu should be on front end of the page content.
<script type="text/javascript">
$(".menu-toggle-btn").click(function () {
$(this).toggleClass("fa-times");
$(".navigation-menu").toggleClass("active");
});
</script>
body{
/*font-family:Calibri !important;*/
font-family:ProximaNova,Arial,Sans-serif;
margin: 0 2px;
padding: 0;
text-decoration: none;
font-size:12px;
/*max-width: 100%;*/
overflow-x: hidden;
}
header{
height: 45px;
background: #008269;
margin-bottom:2px;
}
.inner-width{
max-width: 100%;
/*padding: 0 10px;*/
margin: auto;
}
.navigation-menu{
float: left;
display: flex;
align-items: center;
min-height: 45px;
}
.navigation-menu a{
/*margin-left: 10px;*/
color: #fff;
text-transform: uppercase;
font-size: 14px;
padding: 1% 10%;
border-radius: 4px;
transition: .3s linear;
font-weight:700;
text-decoration: none;
}
.navigation-menu a:hover{
background: #fff;
color: #2f3640;
transform: scale(1.1);
text-decoration: none;
}
.navigation-menu i{
margin-right: 8px;
font-size: 16px;
}
.menu-toggle-btn{
float: right;
height: 20px;
line-height: 20px !important;
color: #fff;
font-size: 26px;
display: none !important;
cursor: pointer;
}
#media screen and (max-width:1500px) {
.menu-toggle-btn{
display: block !important;
margin-top:13px;
margin-right:13px;
}
.navigation-menu{
position:center;
width: 100%;
height:100%;
/*max-width: 100%;*/
background:#008269;
top: 45px;
right: 0;
display: none;
/*padding: 20px 40px;*/
box-sizing: border-box;
}
.navigation-menu::before{
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #172b4d;
position: absolute;
top: -10px;
right: 10px;
}
.navigation-menu a{
display: block;
margin: 10px 0;
}
.navigation-menu.active{
display: block;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<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>Responsive Drop-down Navigation</title>
<link href="css/MasterPage-CSS.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form2" runat="server">
<header>
<div class="inner-width">
<i class="menu-toggle-btn fas fa-bars"></i>
<nav class="navigation-menu">
Products
Customers
Sales
Installments
Financial
Stock
payroll
Expensis
</nav>
</div>
</header>
<asp:ContentPlaceHolder id="contentBody" runat="server">
<div style="overflow-x:auto;"></div>
</asp:ContentPlaceHolder>
</form>
<script type="text/javascript">
$(".menu-toggle-btn").click(function () {
$(this).toggleClass("fa-times");
$(".navigation-menu").toggleClass("active");
});
</script>
</body>
</html>
I added float: left; on wrap content div element
$(".menu-toggle-btn").click(function () {
$(this).toggleClass("fa-times");
$(".navigation-menu").toggleClass("active");
});
body {
/*font-family:Calibri !important;*/
font-family: ProximaNova, Arial, Sans-serif;
margin: 0 2px;
padding: 0;
text-decoration: none;
font-size: 12px;
/*max-width: 100%;*/
overflow-x: hidden;
}
header {
height: 45px;
background: #008269;
margin-bottom: 2px;
}
.inner-width {
max-width: 100%;
/*padding: 0 10px;*/
margin: auto;
}
.navigation-menu {
float: left;
display: flex;
align-items: center;
min-height: 45px;
}
.navigation-menu a {
/*margin-left: 10px;*/
color: #fff;
text-transform: uppercase;
font-size: 14px;
padding: 1% 10%;
border-radius: 4px;
transition: .3s linear;
font-weight: 700;
text-decoration: none;
}
.navigation-menu a:hover {
background: #fff;
color: #2f3640;
transform: scale(1.1);
text-decoration: none;
}
.navigation-menu i {
margin-right: 8px;
font-size: 16px;
}
.menu-toggle-btn {
float: right;
height: 20px;
line-height: 20px !important;
color: #fff;
font-size: 26px;
display: none !important;
cursor: pointer;
}
#media screen and (max-width:1500px) {
.menu-toggle-btn {
display: block !important;
margin-top: 13px;
margin-right: 13px;
}
.navigation-menu {
position: center;
width: 100%;
height: 100%;
/*max-width: 100%;*/
background: #008269;
top: 45px;
right: 0;
display: none;
/*padding: 20px 40px;*/
box-sizing: border-box;
}
.navigation-menu::before {
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #172b4d;
position: absolute;
top: -10px;
right: 10px;
}
.navigation-menu a {
display: block;
margin: 10px 0;
}
.navigation-menu.active {
display: block;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form id="form2" runat="server">
<header>
<div class="inner-width">
<i class="menu-toggle-btn fas fa-bars"></i>
<nav class="navigation-menu">
Products
Customers
Sales
Installments
Financial
Stock
payroll
Expensis
</nav>
</div>
</header>
<asp:ContentPlaceHolder id="contentBody" runat="server">
<div style="overflow-x:auto; float: left;">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem totam delectus aspernatur veritatis deleniti repellat dignissimos recusandae alias odio necessitatibus cupiditate tempora, soluta voluptatum fuga non possimus officiis maiores culpa?
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic voluptas repellat deleniti laudantium rem nobis magni labore. Libero dolore fuga facere, beatae commodi voluptate assumenda repellendus, aperiam magnam voluptates consectetur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil voluptate blanditiis illo corrupti sunt pariatur soluta, laborum voluptates veniam facilis. Neque possimus natus assumenda enim magnam reprehenderit quas omnis voluptas?
</div>
</asp:ContentPlaceHolder>
</form>
When I open a div with a class "small" he gets a new class - "big". I want to click on "X" image and remove "big" class to make this div again "small". But when i am clicking on "X" nothing can happen because"X" is "small" class too i think...
Any ideas?
const small = document.getElementsByClassName('small');
const information = document.getElementsByClassName('information');
const big = document.getElementsByClassName('big');
const zamknij = document.getElementsByClassName('zamknij');
for (let i = 0; i < small.length; i++) {
small[i].addEventListener('click', function() {
small[i].classList.add("big");
information[i].classList.add("widoczne");
zamknij[i].style.display = "inherit ";
});
}
* {
padding: 0;
margin: 0;
}
html {
width: 100%;
height: 100%;
}
body {
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
line-height: 1.5;
font-weight: 400;
color: #F9F9F9;
position: relative;
min-height: 100vh;
background-color: #7f8c8d;
}
#container {
display: flex;
flex-wrap: wrap;
padding-left: 30px;
padding-right: 30px;
}
.zamknij {
position: absolute;
right: 10px;
top: 10px;
width: 20px;
height: auto;
display: none;
opacity: 0.5;
transition: 0.4s;
}
.zamknij:hover {
position: absolute;
right: 10px;
top: 10px;
width: 20px;
height: auto;
display: none;
cursor: pointer;
opacity: 1;
transition: 0.4s;
transform: scale(1.2);
}
.small {
max-width: 100px;
min-width: 100px;
max-height: 100px;
min-height: 100px;
background: linear-gradient(to bottom left, #3498db 50%, #2980b9 50%);
margin: 20px;
border-radius: 10px;
transition: 0.3s;
position: relative;
}
.small:hover {
max-width: 100px;
max-height: 100px;
background: linear-gradient(to bottom left, #3498db 50%, #2980b9 50%);
margin: 20px;
border-radius: 10px;
transform: scale(1.07);
box-shadow: 4px 4px 13px 1px rgba(0, 0, 0, 0.65);
}
.medium {
width: 300px;
height: 100px;
background: linear-gradient(to bottom left, #2ecc71 50%, #27ae60 50%);
margin: 20px;
border-radius: 10px;
transition: 0.3s;
}
.medium:hover {
width: 300px;
height: 100px;
background: linear-gradient(to bottom left, #2ecc71 50%, #27ae60 50%);
margin: 20px;
border-radius: 10px;
transform: scale(1.07);
box-shadow: 4px 4px 13px 1px rgba(0, 0, 0, 0.65);
}
.big {
max-width: 1000px;
max-height: 1000px;
background: linear-gradient(to bottom left, #1abc9c 50%, #16a085 50%);
margin: 20px;
border-radius: 10px;
transition: 0.3s;
position: relative;
}
.big:hover {
max-width: 1000px;
max-height: 1000px;
background: linear-gradient(to bottom left, #1abc9c 50%, #16a085 50%);
margin: 20px;
border-radius: 10px;
transform: scale(1.07);
box-shadow: 4px 4px 13px 1px rgba(0, 0, 0, 0.65);
transition: 0.3s;
}
h2 {
text-align: center;
margin: 0 auto;
font-size: 13px;
}
#lvl {
position: relative;
left: 20px;
margin-top: 10px;
margin-bottom: 8px;
width: 60px;
}
h3 {
margin: 10px;
font-size: 12px;
visibility: hidden;
}
.widoczne {
visibility: visible;
}
.niewidoczne {
visibility: hidden;
}
<div id="container">
<div class=small>
<div><img src="/ICONS/close.png" class="zamknij"></div>
<img id="lvl" src="/ICONS/level-up.png">
<h2>ROZBUDOWA</h2>
<h3 class="information niewiodczne">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis aut neque animi unde nostrum voluptatibus ipsa quos. Adipisci odit laborum quis sapiente tempore ullam placeat dolorum et accusamus voluptates? Exercitationem.
</h3>
</div>
<div class=small>
<div><img src="/ICONS/close.png" class="zamknij"></div>
<h2>CENY</h2>
<h3 class="information niewiodczne">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit repellat ratione maxime corrupti atque quos amet, tempora quisquam deleniti optio corporis exercitationem neque.</h3>
</div>
<div class=small>PROGRAMY NAPRAWCZE</div>
<div class=small>Polecane dyski</div>
<div class=small>ZAproponuj klientowi</div>
<div class=small>częste usterki</div>
<div class=small>Zwróć uwagę!</div>
</div>
I have created a slide in/out side navigation for my website. It works fine as it is just now, but I was hoping to get the site to move over with the sidebar (similar to this: http://demo.agnidesigns.com/fortune/demo15/). Currently it just moves out over the site.
I thought maybe I could add a toggle classList function which would move the sections left to the same width as the sidebar (left: 280px), but can't quite understand how to include that in the JS. However I am certain it will be a similar method to my existing JS for the side navigation toggle.
<nav>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<div id="navBar">
<div id="navBtn">
<img id="navLogo" src="resources/img/logo-white.svg">
</div>
<div id="navText">
<h2>Menu</h2>
</div>
<ul class="social-links">
<li><i class="icon ion-logo-facebook"></i></li>
<li><i class="icon ion-logo-twitter"></i></li>
<li><i class="icon ion-logo-instagram"></i></li>
</ul>
</div>
</div>
<ul>
<li><h2>Who Are We</h2></li>
<li><h2>Services</h2></li>
<li><h2>UAV</h2></li>
</ul>
</div>
</nav>
<section class="section-overview new-section__whitetwothird" id="overview">
<div class="row">
<h2>Some Text</h2>
</div>
</section>
CSS
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
color: #555;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 7px;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h2 {
font-weight: 400;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 180%;
word-spacing: 2px;
margin-bottom: 15px;
letter-spacing: 1px;
}
.new-section__whitetwothird {
padding: 5%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
background-color: #fff;
min-height: 66.66vh;
width: calc(100vw - 80px);
left: 80px;
}
#sidebar {
position: fixed;
width: 200px;
height: 100vh;
background: #000;
left: -200px;
transition: 0.4s;
z-index: 1;
}
#sidebar.active {
left: 0;
z-index: 1;
}
#sidebar a {
list-style: none;
color: #fff;
font-size: 100%;
text-decoration: none;
color: #fff;
}
#navText h2:first-of-type{
padding: 0;
}
#sidebar h2 {
padding: 20px;
}
#navBar .icon {
font-size: 17px;
padding: 0;
}
.social-links {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 14px 0;
text-align: center;
color: #fff;
}
.social-links li {
display: block;
font-size: 15px;
color: #fff;
margin: 15% 0 0 0;
}
#sidebar .toggle-btn {
position: absolute;
left: 200px;
}
#navBar {
width: 80px;
background-color: #000;
height: 100vh;
top: 0;
z-index: 2000;
}
#navBar #navLogo {
margin: 25%;
}
img {
border: 0;
vertical-align: middle;
display: inline-block;
}
#navText {
position: absolute;
top: 45%;
left: 0;
right: 0;
bottom: 45%;
margin: 40% 0;
text-align: center;
transform: rotate(-90deg);
color: #fff;
}
JS
function toggleSidebar() {
document.getElementById('sidebar').classList.toggle('active');
}
https://codepen.io/caitlinmooneyx/pen/BEpBzZ
I was curious if I would have to create a new function or can I extend my toggleSidebar with an else if?
I have tried adding a toggleSection() to the section but as the sidebar is already hooked up to another function it just stops working altogether, as well as trying to add a .section.active class (as I was trying to recreate the same thing as #sidebar.active:
.section.active {
left: 280px;
}
Essentially the left: 280px is what I'm trying to make happen when the sidebar is opened/active.
Please excuse me if this looks silly, I am new to JS and still learning how things work, and cannot find anything online regarding what I'm trying to achieve.
You can simply add onto the existing toggleSidebar() function offsetting the content by adding a left property to the new .new-section__whitetwothird--active class ( you can amend the class name to better fit your project)
Update: I have added a querySelectorAll and a loop to add the class in the event where there are multiple classes with the same name on one page ( my previous answer was just querySelector) there are endless ways to add a loop I chose the older way rather than a newer version for better browser support.
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("active");
var sections = document.querySelectorAll(".new-section__whitetwothird"),i;
for (i = 0; i < sections.length; ++i) {
sections[i].classList.toggle("new-section__whitetwothird--active");
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
color: #555;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 7px;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h2 {
font-weight: 400;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 180%;
word-spacing: 2px;
margin-bottom: 15px;
letter-spacing: 1px;
}
.new-section__whitetwothird {
padding: 5%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
background-color: #fff;
min-height: 66.66vh;
width: calc(100vw - 80px);
left: 80px;
transition:.5s ease;
}
.new-section__whitetwothird--active {
left:280px;
}
#sidebar {
position: fixed;
width: 200px;
height: 100vh;
background: #000;
left: -200px;
transition: 0.4s;
z-index: 1;
}
#sidebar.active {
left: 0;
z-index: 1;
}
#sidebar a {
list-style: none;
color: #fff;
font-size: 100%;
text-decoration: none;
color: #fff;
}
#navText h2:first-of-type{
padding: 0;
}
#sidebar h2 {
padding: 20px;
}
#navBar .icon {
font-size: 17px;
padding: 0;
}
.social-links {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 14px 0;
text-align: center;
color: #fff;
}
.social-links li {
display: block;
font-size: 15px;
color: #fff;
margin: 15% 0 0 0;
}
#sidebar .toggle-btn {
position: absolute;
left: 200px;
}
#navBar {
width: 80px;
background-color: #000;
height: 100vh;
top: 0;
z-index: 2000;
}
#navBar #navLogo {
margin: 25%;
}
img {
border: 0;
vertical-align: middle;
display: inline-block;
}
#navText {
position: absolute;
top: 45%;
left: 0;
right: 0;
bottom: 45%;
margin: 40% 0;
text-align: center;
transform: rotate(-90deg);
color: #fff;
}
<nav>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<div id="navBar">
<div id="navBtn">
<img id="navLogo" src="resources/img/logo-white.svg">
</div>
<div id="navText">
<h2>Menu</h2>
</div>
<ul class="social-links">
<li><i class="icon ion-logo-facebook"></i></li>
<li><i class="icon ion-logo-twitter"></i></li>
<li><i class="icon ion-logo-instagram"></i></li>
</ul>
</div>
</div>
<ul>
<li><h2>Who Are We</h2></li>
<li><h2>Services</h2></li>
<li><h2>UAV</h2></li>
<li><h2>About Us</h2></li>
<li><h2>Studio Hire</h2></li>
<li><h2>Contact Us</h2></li>
</ul>
</div>
</nav>
<section class="section-overview new-section__whitetwothird" id="overview">
<div class="row">
<h2>Some Text</h2>
</div>
</section>
By just re-arranging some of your html and adding some new lines, this is what I got.
This is how I changed your html
<!--I created a main content wrapper and its height and width is the viewport-->
<main>
<nav>
<!--I placed the toggle btn here -->
<div class="toggle-btn" onclick="toggleSidebar()">
<div id="navBar">
<div id="navBtn">
<img id="navLogo" src="resources/img/logo-white.svg">
</div>
<div id="navText">
<h2>Menu</h2>
</div>
<ul class="social-links">
<li><i class="icon ion-logo-facebook"></i></li>
<li><i class="icon ion-logo-twitter"></i></li>
<li><i class="icon ion-logo-instagram"></i></li>
</ul>
</div>
</div>
<div id="sidebar">
<!--This is where the toggle button before -->
<ul>
<li><h2>Who Are We</h2></li>
<li><h2>Services</h2></li>
<li><h2>UAV</h2></li>
<li><h2>About Us</h2></li>
<li><h2>Studio Hire</h2></li>
<li><h2>Contact Us</h2></li>
</ul>
</div>
</nav>
<!-- I created this main section wrapper that will hold all the sections-->
<div class="section-wrapper">
<section class="section-overview" id="overview">
<div class="row">
<h2>Section 1</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem tenetur error at ut, dolorem laborum dicta iste repellendus eaque! </p>
</div>
</section>
</div>
</main>
And these are the changes to the css
.section-wrapper {
position: relative;
overflow-y: scroll; // will create the scrollbar if it overflows
transition: transform .5s ease;
margin-left: 80px;
}
// instead of targeting the #sidebar, I targeted the nav
nav.active {
width: 360px;
}
nav.active+.section-wrapper {
transform: translateX(280px); // this will push the sections to the right
}
All in all, I just replace some padding and margin properties to your css.
And in your javascript, I simply replaced the targeted element to nav
And the result will be this
function toggleSidebar() {
document.querySelector('nav').classList.toggle('active');
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
color: #555;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 16px;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h2 {
font-weight: 400;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 180%;
word-spacing: 2px;
margin-bottom: 15px;
letter-spacing: 1px;
}
main {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
}
.section-wrapper {
position: relative;
overflow-y: scroll;
transition: transform .5s ease;
margin-left: 80px;
}
section {
padding: 5%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
background-color: #fff;
}
nav {
width: 80px;
background: #000;
overflow:hidden;
transition: all .5s ease;
position: absolute;
left: 0;
}
nav.active {
width: 360px;
}
nav.active+.section-wrapper {
transform: translateX(280px);
}
#sidebar {
position: relative;
width: 180px;
height: 100vh;
left: -200px;
transition: 0.4s;
z-index: 2;
margin-right: 80px;
padding: 20px;
}
nav.active #sidebar {
left: 0;
}
#sidebar a {
list-style: none;
color: #fff;
font-size: 100%;
text-decoration: none;
color: #fff;
}
#sidebar li {
list-style: none;
}
#navText h2:first-of-type{
padding: 0;
}
#sidebar h2 {
padding: 10px;
font-size: 14px;
}
#navBar .icon {
font-size: 17px;
padding: 0;
}
.social-links {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 14px 0;
text-align: center;
color: #fff;
}
.social-links li {
display: block;
font-size: 15px;
color: #fff;
margin: 15% 0 0 0;
}
.toggle-btn {
width: 80px;
position: absolute;
right: 0;
z-index: 1;
border-left: 1px solid #1a1a1a;
}
#navBar {
width: 80px;
background-color: #000;
height: 100vh;
top: 0;
z-index: 2000;
}
#navBar #navLogo {
margin: 25%;
}
img {
border: 0;
vertical-align: middle;
display: inline-block;
}
#navText {
position: absolute;
top: 45%;
left: 0;
right: 0;
bottom: 45%;
margin: 40% 0;
text-align: center;
transform: rotate(-90deg);
font-size: 7px;;
color: #fff;
}
<main>
<nav>
<div class="toggle-btn" onclick="toggleSidebar()">
<div id="navBar">
<div id="navBtn">
<img id="navLogo" src="resources/img/logo-white.svg">
</div>
<div id="navText">
<h2>Menu</h2>
</div>
<ul class="social-links">
<li><i class="icon ion-logo-facebook"></i></li>
<li><i class="icon ion-logo-twitter"></i></li>
<li><i class="icon ion-logo-instagram"></i></li>
</ul>
</div>
</div>
<div id="sidebar">
<ul>
<li><h2>Who Are We</h2></li>
<li><h2>Services</h2></li>
<li><h2>UAV</h2></li>
<li><h2>About Us</h2></li>
<li><h2>Studio Hire</h2></li>
<li><h2>Contact Us</h2></li>
</ul>
</div>
</nav>
<div class="section-wrapper">
<section class="section-overview" id="overview">
<div class="row">
<h2>Section 1</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem tenetur error at ut, dolorem laborum dicta iste repellendus eaque! </p>
</div>
</section>
<section class="section-overview" id="overview">
<div class="row">
<h2>Section 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem tenetur error at ut, dolorem laborum dicta iste repellendus eaque! </p>
</div>
</section>
<section class="section-overview" id="overview">
<div class="row">
<h2>Section 3</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem tenetur error at ut, dolorem laborum dicta iste repellendus eaque! </p>
</div>
</section>
<section class="section-overview" id="overview">
<div class="row">
<h2>Section 4</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil inventore porro illum, numquam expedita debitis veritatis quod? Inventore, optio. Vitae nihil consequatur error provident in, maxime earum dolores rerum aliquam sed magnam quibusdam harum nam. Modi rem eligendi saepe, atque sequi similique itaque voluptas a illum, placeat mollitia obcaecati praesentium? </p>
</div>
</section>
</div>
</main>
By the way this is the pen I forked. I hope it helps https://codepen.io/anon/pen/JVEYQM