I'm having issues with the switching of images for a website I'm making. The intended outcome is that when you click the different colored circles, it changes the image (displaying the product with the corresponding image), however, for some reason nothing happens when clicking the circles. Any help would be appreciated.
Codepen link: https://codepen.io/StuartGroom/pen/ZExoJKw
HTML
<main>
<div class = "productCustomiseContainer">
<!--left column/ image-->
<div class ="leftColumn">
<img data-image="black" src="images/blackProduct1.png" alt="">
<img data-image="white" src="images/whiteProduct2.png" alt="">
<img data-image="green" src="images/greenProduct1.png" alt="">
<img data-image="pink" class="active" src="images/pinkProduct1.png" alt="">
</div>
<!--right column-->
<div class ="rightColumn">
<div class= "productDescription">
<span>Personal Safety Alarm</span>
<h1>WatchU</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus magni veritatis dolorem blanditiis unde tenetur aperiam tempore pariatur, nesciunt neque molestiae quo sunt culpa hic ipsum ex dolor accusamus nobis!</p>
</div>
<!-- product configuartion-->
<div class="productConfig">
<!-- product colour-->
<div class="productColour">
<span>Select Colour</span>
<div class="colourChoose">
<div>
<input data-image="pink" type="radio" id="pink" name="color" value="pink" checked>
<label for="pink"><span></span></label>
</div>
<div>
<input data-image="green" type="radio" id="green" name="color" value="green">
<label for="green"><span></span></label>
</div>
<div>
<input data-image="white" type="radio" id="white" name="color" value="white">
<label for="white"><span></span></label>
</div>
<div>
<input data-image="black" type="radio" id="black" name="color" value="black">
<label for="black"><span></span></label>
</div>
</div>
</div>
</div>
<div class="productPrice">
<span>£10</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script src="product.js" charset="utf-8"></script>
</div>
</div>
</main>
CSS
main .productCustomise {
width: 100vw;
height: 100vh;
background-color: blue;
}
.productCustomiseContainer{
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
height: 700px;
}
.leftColumn{
width: 65%;
position: relative;
}
.rightColumn{
width: 35%;
margin-top: 50px;
}
/* left column */
.leftColumn img{
width:100%;
position:absolute;
left: 0;
top:0;
opacity: 0;
transition: all 0.3s ease;
}
.leftColumn img{
opacity: 1;
}
/* right column */
.rightColumn .productDescription{
border-bottom: 1px solid red;
margin-bottom: 20px;
}
.rightColumn .productDescription span{
font-size: 18px;
color: black;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.rightColumn .productDescription h1{
font-weight: 300;
font-size: 52px;
color: grey;
line-height: 2px;
}
.rightColumn .productDescription p{
font-weight: 300;
font-size: 16px;
color: grey;
line-height: 24px;
}
/* prodcut configuration*/
.productColour span{
font-weight: 300;
font-size: 16px;
color: grey;
margin-bottom: 20px;
display: inline-block;
}
/* product colour */
.productColour{
margin-bottom: 30px;
}
.colourChoose div{
display: inline-block;
}
.colourChoose input[type="radio"]{
display:none;
}
.colourChoose input[type="radio"] + label span{
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.colourChoose input[type="radio"] + label span{
border: 2px solid #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);
}
.colourChoose input[type="radio"]#pink + label span {
background-color: pink;
}
.colourChoose input[type="radio"]#green + label span {
background-color: green;
}
.colourChoose input[type="radio"]#white + label span {
background-color: white;
}
.colourChoose input[type="radio"]#black + label span {
background-color: black;
}
.colourChoose input[type="radio"]:checked + label span{
background-image: url(images/check-solid.svg);
background-repeat: no-repeat;
background-position: center;
}
/* product price*/
.productPrice{
display: flex;
align-items: center;
}
.productPrice span{
font-size: 26px;
font-weight: 300;
color: black;
margin-right: 20px;
}
/* responsive*/
#media (max-width: 940px){
.productCustomiseContainer{
flex-direction: column;
margin-top: 60px;
}
.leftColumn, .rightColumn{
width: 100%;
}
.leftColumn img {
width: 300px;
right: 0;
top:-65px;
left:initial;
}
}
#media (max-width: 535px){
.leftColumn img{
width: 220px;
top: -85px;
}
}
Javascript
$(document).ready(function() {
$('.colourChoose input').on('click', function() {
var productColour = $(this).attr('data-image');
$('.active').removeClass('active');
$('.leftColumn img[data-image = ' + productColour + ']').addClass('active');
$(this).addClass('active');
});
});
added some styles because of the images are not shown. add active class to following css like.
.leftColumn img.active{
opacity: 1;
}
$(document).ready(function() {
$('.colourChoose input').on('click', function() {
var productColour = $(this).attr('data-image');
$('.active').removeClass('active');
$('.leftColumn img[data-image=' + productColour + ']').addClass('active');
$(this).addClass('active');
});
});
main .productCustomise {
width: 100vw;
height: 100vh;
background-color: blue;
}
.productCustomiseContainer {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
height: 700px;
}
.leftColumn {
width: 65%;
position: relative;
}
.rightColumn {
width: 35%;
margin-top: 50px;
}
/* left column */
.leftColumn img {
width: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 0.3s ease;
}
.leftColumn img.active {
opacity: 1;
}
/* right column */
.rightColumn .productDescription {
border-bottom: 1px solid red;
margin-bottom: 20px;
}
.rightColumn .productDescription span {
font-size: 18px;
color: black;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.rightColumn .productDescription h1 {
font-weight: 300;
font-size: 52px;
color: grey;
line-height: 2px;
}
.rightColumn .productDescription p {
font-weight: 300;
font-size: 16px;
color: grey;
line-height: 24px;
}
/* prodcut configuration*/
.productColour span {
font-weight: 300;
font-size: 16px;
color: grey;
margin-bottom: 20px;
display: inline-block;
}
/* product colour */
.productColour {
margin-bottom: 30px;
}
.colourChoose div {
display: inline-block;
}
.colourChoose input[type="radio"] {
display: none;
}
.colourChoose input[type="radio"]+label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.colourChoose input[type="radio"]+label span {
border: 2px solid #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
}
.colourChoose input[type="radio"]#pink+label span {
background-color: pink;
}
.colourChoose input[type="radio"]#green+label span {
background-color: green;
}
.colourChoose input[type="radio"]#white+label span {
background-color: white;
}
.colourChoose input[type="radio"]#black+label span {
background-color: black;
}
.colourChoose input[type="radio"]:checked+label span {
background-image: url(images/check-solid.svg);
background-repeat: no-repeat;
background-position: center;
}
/* product price*/
.productPrice {
display: flex;
align-items: center;
}
.productPrice span {
font-size: 26px;
font-weight: 300;
color: black;
margin-right: 20px;
}
/* responsive*/
#media (max-width: 940px) {
.productCustomiseContainer {
flex-direction: column;
margin-top: 60px;
}
.leftColumn,
.rightColumn {
width: 100%;
}
.leftColumn img {
width: 300px;
right: 0;
top: -65px;
left: initial;
}
}
#media (max-width: 535px) {
.leftColumn img {
width: 220px;
top: -85px;
}
}
<main>
<div class="productCustomiseContainer">
<!--left column/ image-->
<div class="leftColumn">
<img data-image="black" src="images/blackProduct1.png" alt="" style="background:black;height:300px">
<img data-image="white" src="images/whiteProduct2.png" alt="" style="background:whitesmoke;height:300px">
<img data-image="green" src="images/greenProduct1.png" alt="" style="background:green;height:300px">
<img data-image="pink" class="active" src="images/pinkProduct1.png" alt="" style="background:pink;height:300px">
</div>
<!--right column-->
<div class="rightColumn">
<div class="productDescription">
<span>Personal Safety Alarm</span>
<h1>WatchU</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus magni veritatis dolorem blanditiis unde tenetur aperiam tempore pariatur, nesciunt neque molestiae quo sunt culpa hic ipsum ex dolor accusamus nobis!</p>
</div>
<!-- product configuartion-->
<div class="productConfig">
<!-- product colour-->
<div class="productColour">
<span>Select Colour</span>
<div class="colourChoose">
<div>
<input data-image="pink" type="radio" id="pink" name="color" value="pink" checked>
<label for="pink"><span></span></label>
</div>
<div>
<input data-image="green" type="radio" id="green" name="color" value="green">
<label for="green"><span></span></label>
</div>
<div>
<input data-image="white" type="radio" id="white" name="color" value="white">
<label for="white"><span></span></label>
</div>
<div>
<input data-image="black" type="radio" id="black" name="color" value="black">
<label for="black"><span></span></label>
</div>
</div>
</div>
</div>
<div class="productPrice">
<span>£10</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script src="product.js" charset="utf-8"></script>
</div>
</div>
</main>
Related
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'm trying to make a portfolio page, using HTML, CSS & JS.
Encountered a weird error. The CSS styling that I have performed on one div is somehow also getting on another div. And the weird part is that, the second div responds to its own styling along with the first ones....It will be more clear from the code
$(document).ready(function () {
$(window).scroll(function() { // of scroll function of windows
if (this.scrollY > 20) { //if scroll on Y axis is more than 50 units
$('.navbar').addClass("sticky"); // add sticky class 2 navbar
} else {
$('.navbar').removeClass("sticky"); // when it insn't scrolled remove sticky
}
});
//toggle menu/navbar script
$('.menu-btn').click(function(){ // this activates the inbuilt click function of js on the menu button
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap');
*{
user-select: text;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
width: 100%;
z-index: 999;
position:fixed;
padding: 30px 0;
width: 100%;
font-family: 'Ubuntu', sans-serif;
transition: all 0.55s ease;
}
.navbar.sticky{
transition: background-color 0.55s ease;
padding: 15px 0;
background-color: crimson;
}
.max-width{
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.navbar .max-width{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
font-size: 35px;
font-weight: 600;
color: cyan;
}
.navbar .logo a span{
color: cyan
}
.navbar.sticky .logo a span{
color: white;
transition: all 0.3s ease;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover{
color: crimson;
}
.navbar.sticky .menu li a:hover{
color: white;
}
/* menu button styling */
.menu-btn{
color: white;
font-size: 23px;
cursor: pointer;
display: none;
}
/*home section styling */
.home{
cursor: default;
display: flex;
background: url("./Images/wallpapertip_fantasy-art-wallpaper_1940256.jpg") no-repeat center;/* Enter the background image location */
height: 100vh;
background-size: cover;
background-attachment: fixed;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', sans-serif;
background-color: black;
}
.home .max-width{
margin: auto 0 auto 40px;
}
.home .home-content .text-1{
font-size: 27px;
}
.home .home-content .text-2{
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3{
font-size: 40px;
margin: 5px, 0 ;
}
.home .home-content .text-3 span{
color: crimson;
font-weight: 500;
}
/* .home .home-content a{
display: inline-block;
background: crimson;
color: white;
font-size: white;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
} HIRE ME BUTTON STYLE*
.home .home-content a:hover{
color: crimson;
background: none; */
/* ABOUT SECTION STYLING */
section{
padding: 100px 0;
}
.about{
font-family: "Poppins", sans-serif;
user-select: text;
}
.about .title{
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: 'Ubuntu', sans-serif;
color: black;
}
.about .title::before{
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: black;
transform: translateX(-50%);
}
.about .title::after{
content: "who i am";
position: absolute;
padding: 5px;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
color: crimson;
background: white;
}
.about .about-content{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.about .about-content .left {
width: 45%;
}
.about .about-content .left img{
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
color: black;
}
.about .about-content .right .text span{
color: white;
}
.about .about-content .right .lorem{
color: black;
background: none;
}
.about .about-content .column a{
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover{
background: none;
color: crimson;
}
/* -----------------------------------------------------------------------------*/
/*start media query :start*/
#media(max-width: 1104px){
.home .max-width{
margin-left: 0px;
}
}
#media(max-width: 991px){
.max-width{
padding: 0 50px;
}
}
#media(max-width: 947px){
.menu-btn{
position: fixed;
display: block;
z-index: 999;
color: white;
}
.navbar .menu{
position: fixed;
height:100vh;
width: 100%;
left: -100%;
top: 0;
text-align: center;
padding-top: 80px;
background: black;
transition: all 0.3s ease;
}
.menu-btn i.active:before{
content: "\f00d";
}
.navbar .menu.active{
left: 0;
}
.navbar .menu li{
display: block;
}
.navbar .menu li a{
display: inline-block;
margin:20px 0;
font-size: 25px;
}
.home .home-content .text-2{
font-size: 70px;
}
.home .home-content .text-3{
font-size: 35px;
}
}
#media(max-width: 690px){
.max-width{
padding: 0 23px;
}
.home .home-content .text-2{
font-size: 70px;
}
.home .home-content .text-3{
font-size: 32px;
}
}
#media(max-width: 500px){
.home .home-content .text-2{
font-size: 50px;
}
.home .home-content .text-3{
font-size: 32px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale = 1.0">
<title> Personal Portfolio Website </title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Portfo<span>lio.</span></div>
<ul class="menu">
<li><a href="#">Home</li>
<!--navbar -->
<li><a href="#">About</li>
<li><a href="#">Skills</li>
<li><a href=#>Projects</li>
<li><a href=#>Experience</li>
<li><a href="#">Contact</li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Merlin</div>
<div class="text-3">And I'm an <span class="typing">Undergrad</span></div>
</div>
</div>
</section>
<!-- ABOUT SECTION STARTS-->
<section class="about" id="about">
<!-- Start Section-->
<div class="max-width">
<h2 class="title">About Me</h2>
<div class="about-content">
<div class="column left">
<img src="./Images/653438.jpg" alt="Image">
</div>
<div class="column right">
<div class="text">I'm Merlin and I'm an <span class="typing-2">Undergrad</span></div>
<div class="lorem">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, illum quaerat dolores
cumque
doloribus atque rerum molestiae laborum repudiandae expedita, unde quo, exercitationem
consequatur. Hic quas amet, aliquam nihil voluptatem, porro culpa doloremque qui numquam
atque
rerum. Impedit quisquam animi repellat officia! Expedita officia architecto sed veniam,
adipisci
cumque molestiae doloribus dolor tenetur maiores nihil explicabo eveniet accusantium quos!
Perferendis? </p>
</div>
Download Resume
</div>
</div>
</div>
</section>
<script src="./script.js"></script>
</body>
</html>
In the About section only the Resume Button is to be highlted but the entire colum right div is somehow affected. When I ran just the About section part, everything worked well. But when I run the whole file the same error pops up. I've tried removing the lorem part from div and put in and try, still the same error pops up. The same part is somehow referenced to the above the navbar as well, cause when clicked upon it shifts to the navbar. Please look into this.
The error is occurring because you did not close the anchor tags in your menu,
change it to this
<ul class="menu">
<li>Home</li>
<!--navbar -->
<li>About</li>
<li>Skills</li>
<li><a href=#>Projects</a></li>
<li><a href=#>Experience</a></li>
<li>Contact</li>
</ul>
You have this styling in the about section:
.about .about-content .column a{
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover{
background: none;
color: crimson;
}
That is, every anchor link in the about right part is styled that way - with a crimson background (which changes to crimson text and no background on hover).
Because the anchor tags are not closed in your menu you have anchor tags open (nested anchor tags aren't legal HTML BTW) and it seems the browser is doing its best to understand these open anchor tags. By the time you get to the about section right hand side it still thinks there's an anchor tag (at least, in my Edge on Windows 10 that's what it had put there when I used the dev tools inspect facility to check the actual HTML it's trying to interpret). So it picks up the crimson styling.
Here's the snippet with the anchor tags in the menu closed and the text part of the resume does not have that crimson background:
$(document).ready(function() {
$(window).scroll(function() { // of scroll function of windows
if (this.scrollY > 20) { //if scroll on Y axis is more than 50 units
$('.navbar').addClass("sticky"); // add sticky class 2 navbar
} else {
$('.navbar').removeClass("sticky"); // when it insn't scrolled remove sticky
}
});
//toggle menu/navbar script
$('.menu-btn').click(function() { // this activates the inbuilt click function of js on the menu button
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap');
* {
user-select: text;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar {
width: 100%;
z-index: 999;
position: fixed;
padding: 30px 0;
width: 100%;
font-family: 'Ubuntu', sans-serif;
transition: all 0.55s ease;
}
.navbar.sticky {
transition: background-color 0.55s ease;
padding: 15px 0;
background-color: crimson;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
color: cyan;
}
.navbar .logo a span {
color: cyan
}
.navbar.sticky .logo a span {
color: white;
transition: all 0.3s ease;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: crimson;
}
.navbar.sticky .menu li a:hover {
color: white;
}
/* menu button styling */
.menu-btn {
color: white;
font-size: 23px;
cursor: pointer;
display: none;
}
/*home section styling */
.home {
cursor: default;
display: flex;
background: url("./Images/wallpapertip_fantasy-art-wallpaper_1940256.jpg") no-repeat center;
/* Enter the background image location */
height: 100vh;
background-size: cover;
background-attachment: fixed;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', sans-serif;
background-color: black;
}
.home .max-width {
margin: auto 0 auto 40px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px, 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
/* .home .home-content a{
display: inline-block;
background: crimson;
color: white;
font-size: white;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
} HIRE ME BUTTON STYLE*
.home .home-content a:hover{
color: crimson;
background: none; */
/* ABOUT SECTION STYLING */
section {
padding: 100px 0;
}
.about {
font-family: "Poppins", sans-serif;
user-select: text;
}
.about .title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: 'Ubuntu', sans-serif;
color: black;
}
.about .title::before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: black;
transform: translateX(-50%);
}
.about .title::after {
content: "who i am";
position: absolute;
padding: 5px;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
color: crimson;
background: white;
}
.about .about-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.about .about-content .left {
width: 45%;
}
.about .about-content .left img {
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
color: black;
}
.about .about-content .right .text span {
color: white;
}
.about .about-content .right .lorem {
color: black;
background: none;
}
.about .about-content .column a {
display: inline-block;
background: crimson;
color: white;
font-size: 20px;
padding: 12px 36px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover {
background: none;
color: crimson;
}
/* -----------------------------------------------------------------------------*/
/*start media query :start*/
#media(max-width: 1104px) {
.home .max-width {
margin-left: 0px;
}
}
#media(max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media(max-width: 947px) {
.menu-btn {
position: fixed;
display: block;
z-index: 999;
color: white;
}
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
text-align: center;
padding-top: 80px;
background: black;
transition: all 0.3s ease;
}
.menu-btn i.active:before {
content: "\f00d";
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
.home .home-content .text-2 {
font-size: 70px;
}
.home .home-content .text-3 {
font-size: 35px;
}
}
#media(max-width: 690px) {
.max-width {
padding: 0 23px;
}
.home .home-content .text-2 {
font-size: 70px;
}
.home .home-content .text-3 {
font-size: 32px;
}
}
#media(max-width: 500px) {
.home .home-content .text-2 {
font-size: 50px;
}
.home .home-content .text-3 {
font-size: 32px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale = 1.0">
<title> Personal Portfolio Website </title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Portfo<span>lio.</span></div>
<ul class="menu">
<li><a href="#">Home</li>
<!--navbar -->
<li>About</li>
<li>Skills</li>
<li><a href=#>Projects</a></li>
<li><a href=#>Experience</a></li>
<li>Contact</li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Merlin</div>
<div class="text-3">And I'm an <span class="typing">Undergrad</span></div>
</div>
</div>
</section>
<!-- ABOUT SECTION STARTS-->
<section class="about" id="about">
<!-- Start Section-->
<div class="max-width">
<h2 class="title">About Me</h2>
<div class="about-content">
<div class="column left">
<img src="./Images/653438.jpg" alt="Image">
</div>
<div class="column right">
<div class="text">I'm Merlin and I'm an <span class="typing-2">Undergrad</span></div>
<div class="lorem">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, illum quaerat dolores cumque doloribus atque rerum molestiae laborum repudiandae expedita, unde quo, exercitationem consequatur. Hic quas amet, aliquam nihil voluptatem, porro
culpa doloremque qui numquam atque rerum. Impedit quisquam animi repellat officia! Expedita officia architecto sed veniam, adipisci cumque molestiae doloribus dolor tenetur maiores nihil explicabo eveniet accusantium quos! Perferendis? </p>
</div>
Download Resume
</div>
</div>
</div>
</section>
<script src="./script.js"></script>
</body>
</html>
HTML Code
I made some changes to CSS code so that my sidebar can be fixed to the left, however even if I add margin-left to main content, it still extends beyond the view width
I want the page to be responsive with sidebar fixed to left and doesn't cover the main content while maintaining responsiveness
/** #format */
#import url("https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Dosis:wght#300;400;500;700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");
* {
outline: 0;
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
body {
margin: auto;
font-family: "Quicksand", sans-serif;
height: 100vh;
/* overflow-x: hidden; */
/* max-width: 1000px; */
}
.content-wrap {
/* .header-container, */
/* .sidebar-container,
.main-content-wrap, */
/* .footer-wrap */
border: 1px solid red;
}
.container {
padding: 2rem 2.4rem;
margin: 0 auto;
}
.content-wrap {
position: relative;
display: grid;
grid-auto-columns: repeat(8, min-max(200px, 1fr));
/* grid-template-rows: repeat(4, 20rem); */
grid-template-areas: "hd hd hd hd hd " "sd sd main main main " "sd sd nl nl nl " "ft ft ft ft ft ";
width: 100%;
}
ul {
list-style-type: none;
}
/* HEADER */
.header-container {
grid-area: hd;
background-color: #7c6447;
height: 3.72rem;
-moz-box-shadow: 0 0.05rem 2rem 1rem #000000;
box-shadow: 0 0.05rem 2rem 0.01rem #000000;
z-index: 5;
}
.header-content {
display: flex;
justify-content: space-around;
align-items: center;
flex-flow: row wrap;
}
.nav-bar {
padding: 20px 36px;
background-color: #7c6447;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.3rem;
}
.nav-bar ul {
list-style-type: none;
}
.nav-bar li {
display: inline;
}
.nav-bar a {
color: #fff;
text-decoration: none;
font-size: 1rem;
line-height: 1rem;
padding-right: 15px;
padding: 20px;
}
.nav-bar a:hover {
background-color: #ece2d5;
color: #763200;
font-size: 1.1rem;
font-weight: 700;
}
.site-logo {
color: #ece2d5;
text-align: center;
width: 300px;
}
.site-logo h1 {
display: inline;
text-transform: uppercase;
font-size: 1.1rem;
border: 4px solid #ece2d5;
padding: 0.5rem;
width: 300px;
letter-spacing: 0.2rem;
font-weight: 600;
}
.search-btn {
color: #1d1409;
background: #ece2d5;
padding: 0.4rem;
border-radius: 3px;
box-sizing: border-box;
}
.search-btn .search-input {
padding: 4px;
background-color: #ece2d5;
border: none;
color: #1d1409;
}
/* FIXED SIDEBAR */
.sidebar-container {
grid-area: sd;
background-color: #ece2d5;
display: flex;
align-items: center;
position: fixed;
top: 0;
height: 100%;
z-index: 1;
width: 220px;
left: 0;
/* height: 200vh; */
}
.left-sidebar {
font-weight: 600;
text-shadow: 0 1px 20px #9b9b9b;
color: #1d1409;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
text-align: center;
transition: linear 2s;
opacity: 0.9;
}
.action-button {
font-size: 1.2em;
text-transform: uppercase;
letter-spacing: 0.24em;
padding: 10px 25px;
border: 4px solid #1d1409;
border-radius: 4px;
color: #1d1409;
background-color: #ffffff;
}
.action-button:hover {
background-color: #763200;
color: #ffffff;
cursor: pointer;
border-color: #763200;
}
.social-media-menu {
margin: 40px auto;
}
.social-links {
text-decoration-style: none;
color: inherit;
}
.social-links:hover {
cursor: pointer;
}
.social-media-menu .fa {
font-size: 1.6rem;
padding: 0.4rem;
}
.social-media-menu .fa:hover {
font-size: 2rem;
padding: 0.5rem;
}
/* MAIN CONTENT */
.main-content-wrap {
grid-area: main;
margin-left: 284px;
}
.showcase {
padding: 0;
display: inline-flex;
align-items: center;
width: 100%;
margin: auto;
text-align: center;
}
.showcase-image {
max-width: 100%;
margin: auto;
z-index: -10;
position: static;
max-height: 80%;
}
.showcase-heading {
position: absolute;
padding: 1rem 4rem;
text-align: center;
text-shadow: 0px 1px 20px #000000;
color: #ffffff;
margin: auto;
font-size: 2.4rem;
font-family: "Indie Flower", cursive;
}
.posts-navigation {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
text-transform: capitalize;
margin-bottom: 2rem;
}
.posts-navigation a {
color: inherit;
font-size: 1.12rem;
text-decoration: none;
}
.posts-navigation .all-posts:hover {
color: #7c6447;
font-size: 1.15rem;
text-decoration: underline;
}
.posts-navigation .fa {
margin-left: 0.4rem;
}
.posts-navigation .latest {
text-decoration: none;
color: #7c6447;
font-weight: 600;
}
.latest-posts-wrap {
display: grid;
/* grid-gap: 2rem; */
box-sizing: border-box;
margin: auto;
justify-content: center;
padding: 3rem;
}
.post-card {
width: 200px;
/* border: 4px solid #000000; */
}
.card-image {
height: 240px;
width: 180px;
object-fit: cover;
}
.more-btn {
font-size: 0.8rem;
padding: 0.2rem 0.4rem;
border-radius: 0;
margin-top: 1rem;
}
.first-selected-post {
display: flex;
align-items: center;
margin-top: 8rem;
}
.first-selected-post:first-child {
margin-top: 0;
}
.selected-posts-theme {
min-width: 200px;
margin-right: 40px;
}
.card-wrap {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(100px, 1fr));
grid-auto-rows: 1fr;
gap: 3rem 2rem;
}
.first-selected-post:first-child .selected-posts-theme {
margin-left: 40px;
margin-right: 0;
}
/* .post-card {
} */
.post-card:first-child {
grid-area: 1 / 1 / span 1 / span 2;
}
.post-card:nth-child(2) {
grid-area: 1 / 3 / span 2;
}
.post-card:last-child {
grid-area: 2 / 2 / span 1 / span 2;
}
.back-to-top {
position: absolute;
background-color: #ffffff;
padding: 1rem 0.2rem;
text-transform: uppercase;
color: #1d1409;
font-weight: 600;
font-size: xx-large;
text-align: center;
display: block;
width: 3.6rem;
height: 2.4rem;
letter-spacing: 0.3rem;
line-height: 1.4rem;
bottom: 60rem;
left: 0;
word-wrap: break-word;
border-radius: 0 0.4rem 0.4rem 0;
/* pointer-events: none; */
}
.back-to-top .link {
/* position: fixed;
position: sticky;
pointer-events: all; */
/* top: calc(180vh - 0rem); */
}
.link {
text-decoration: none;
color: inherit;
cursor: pointer;
}
.back-to-top:hover {
background-color: #1d1409;
color: #ece2d5;
}
/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
/* #media screen and (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
} */
/* NEWSLETTER */
.newsletter-signup {
grid-area: nl;
background-color: #ece2d5;
padding: 4rem 2rem;
margin: auto;
width: 100%;
box-sizing: border-box;
display: flex;
flex-flow: column wrap;
align-content: center;
align-self: center;
z-index: 2;
}
.newsletter-heading {
text-align: center;
text-transform: uppercase;
font-size: 1.6rem;
color: #1d1409;
letter-spacing: 0.16rem;
}
.newsletter-tagline {
flex-grow: 2;
margin: 2rem auto;
font-size: 1rem;
color: #7c6447;
/* text-transform: capitalize; */
}
.newsletter-input {
display: inline-flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: center;
background: #1d1409;
padding: 4rem 2rem;
border-radius: 24px;
width: 70%;
margin: auto;
}
.newsletter-input input:first-child {
margin-right: 10px;
}
.newsletter-input>input {
margin-bottom: 1.2rem;
}
.username,
.user-email,
.newsletter-form-submit {
padding: 1rem 2rem;
width: 300px;
border: none;
border-radius: 24px;
font-weight: 500;
font-size: 0.85rem;
color: #7c6447;
}
.newsletter-form-submit {
background: #7c6447;
color: #ece2d5;
margin-top: 2.4rem;
font-weight: 700;
}
.newsletter-form-submit:hover {
background: #763200;
color: #1d1409;
}
/* FOOTER */
.footer-wrap {
grid-area: ft;
background: #000000;
color: #efe;
padding: 1rem 2.4rem;
z-index: 2;
}
#media (max-width: 980px) {
.newsletter-input {
width: 50%;
}
}
#media (max-width: 893px) {
.header-container {
height: 8rem;
}
.header-content {
justify-content: space-between;
align-items: baseline;
}
.first-selected-post {
flex-wrap: wrap;
}
.selected-posts-theme {
margin-bottom: 4rem;
}
.first-selected-post:first-child .selected-posts-theme {
margin-top: 4rem;
}
.username,
.user-email {
width: 200px;
}
.newsletter-form-submit {
width: 260px;
margin-top: 1rem;
}
/* .showcase-image {
max-width: 80%;
} */
}
/* MOBILE DESIGN */
#media (max-width: 820px) {
.header-content {
flex-wrap: wrap;
flex-basis: 100%;
}
.header-container {
height: 12rem;
}
.sidebar-container {
display: none;
}
.main-content-wrap {
margin-left: 0;
}
}
#media (max-width: 600px) {
.content-wrap {
display: inline-block;
}
.showcase-heading{
font-size: 1rem;
}
}
<!-- #format -->
<!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>Minimalist Decór</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/sidebar.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/newsletter.css" />
<link rel="stylesheet" href="css/footer.css" />
</head>
<body>
<div class="content-wrap">
<div class="header-container">
<!-- HEADER -->
<header class="header-content" id="header">
<!-- NAVIGATION- -->
<div class="nav-bar-wrap">
<nav class="nav-bar">
<ul>
<li>home</li>
<li>blog</li>
<li>about</li>
</ul>
</nav>
</div>
<div class="site-logo">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=350&w=494" alt="logo-icon" />
<h1>minimalist decór</h1>
</div>
<div class="search-btn">
<i class="fa fa-search" aria-hidden="true"></i>
<input class="search-input" type="text" placeholder="search here..." />
</div>
</header>
</div>
<!-- FIXED SIDEBAR -->
<div class="sidebar-container container">
<aside class="left-sidebar">
<div class="subscribe-button">
<a href="#subscribe"><button type="menu" class="action-button">subscribe</button></a
>
</div>
<div class="social-media-menu">
<ul>
<li>
<a href="#" class="social-links"
><i class="fa fa-instagram" aria-hidden="true"></i
></a>
</li>
<li>
<a href="#" class="social-links"><i class="fa fa-facebook" aria-hidden="true"></i
></a>
</li>
<li>
<a href="#" class="social-links"><i class="fa fa-youtube-play" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
minimalist decór
</aside>
</div>
<!-- MAIN CONTENT -->
<div class="main-content-wrap">
<main class="main-content">
<!-- SHOWCASE -->
<section class="showcase">
<img src="ihttps://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="A couch portraying minimalist decor" class="showcase-image" />
<!-- <img src="images/blob1.webp" /> -->
<h2 class="showcase-heading">
Helping you to navigate through your aesthetics with a minimalism touch!
</h2>
</section>
<div class="blog-posts container">
<nav>
<div class="posts-navigation">
<!-- add arrow icons to all posts -->
<div class="latest">latest posts</div>
<div class="all-posts">
<a href="#">all posts<i
class="fa fa-long-arrow-right"
aria-hidden="true"
></i
></a>
</div>
</div>
</nav>
<div class="latest-posts-wrap">
<div class="first-selected-post">
<div class="card-wrap cardf-wrap">
<div class="post-card">
<div class="card-image-wrap">
<img src="images/throw-pillow.jpg" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
</div>
<div class="selected-posts-theme">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea totam nemo dolore eius deserunt aut aperiam amet voluptatem doloremque iste eos officiis minima, delectus,
</p>
</div>
</div>
<div class="first-selected-post">
<div class="selected-posts-theme">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea totam nemo dolore eius deserunt aut aperiam amet voluptatem doloremque iste eos officiis minima, delectus,
</p>
</div>
<div class="card-wrap">
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
<div class="post-card">
<div class="card-image-wrap">
<img src="https://images.pexels.com/photos/7005461/pexels-photo-7005461.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="some" class="card-image" />
</div>
<button type="submit" class="action-button more-btn">
read more
</button>
</div>
</div>
</div>
</div>
</div>
<span class="back-to-top"><a href="#header" class="link"
><i class="fa fa-angle-up" aria-hidden="true"></i> </a
></span>
</main>
</div>
<!-- NEWSLETTER -->
<div class="newsletter-signup">
<h4 class="newsletter-heading">subscribe to our newsletter</h4>
<span class="newsletter-tagline">for tips to spice up your minimalism lifestyle and add a fine touch
to it regularly.
<!-- TODO: down arrow --></span
>
<form class="newsletter-input">
<input type="text" class="username" placeholder="name" />
<input
type="email"
class="user-email"
placeholder="enter email address"
/>
<button type="submit" class="newsletter-form-submit">submit</button>
</form>
</div>
<!-- FOOTER -->
<div class="footer-wrap">
<footer class="footer-content">
<small
>made with love by
mariam adekola</small
>
</footer>
</div>
</div>
</body>
</html>
It's the combination of border and width 100% on .content-wrap that's causing the problem. You're effectively making it 100% plus 1 pixel wide.
.content-wrap {
border: 1px solid red;
}
.content-wrap {
width: 100%;
}
either take off the border or remove width:100% from .content-wrap
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
I'm trying to stop the .background image from overlapping skills div when viewport gets taller or wider. I'v tried many different things and i have no luck. Please help me! I'm fairly new to this so please don't be surprised if its something simple stupid thing that I did that's causing this problem. Thanks!
$(document).ready(function(){
//MENU
$('.menu-icon').click(function(){
$('.menu-nav').animate({
height: 'toggle'
}, 200
);
});
//SKILLS
flagScroll = true;
$(window).scroll(function() {
if ($(this).scrollTop() > 40 && flagScroll) {
// apply effects and animations
flagScroll= false;
$('.html').animate({
marginRight: 0,
width: 100
}, 2200
);
$('.css').animate({
marginRight: 0,
width: 90
}, 2200
);
$('.javascript').animate({
marginRight: 0,
width: 40
}, 2200
);
}
});
});
/*$mat-black: #37474F;*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: #rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
/*background:transparent;*/
}
body {
line-height: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
nav ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
* h1 {
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
}
header {
background-color: black;
height: 420px;
}
header .background {
opacity: 0.2;
background-image: url(http://lorempixel.com/400/200/sports/1);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
height: 74%;
position: absolute;
overflow: hidden;
}
header nav {
width: 100%;
z-index: 2;
}
header .menu-icon {
padding: 5px 0 5px 10px;
cursor: pointer;
width: 50px;
}
header .menu-icon img {
width: 50px;
height: 50px;
}
header .menu {
width: 100%;
border-top: solid #18FFFF 1px;
border-width: 70%;
height: 0;
}
header .menu:before {
content: " ";
display: block;
width: 90%;
height: 5px;
margin: 0 auto;
left: 0;
right: 0;
background-color: #18FFFF;
opacity: 1;
}
header .menu .menu-nav {
z-index: 2;
position: absolute;
background-color: #18FFFF;
width: 90%;
margin: 0 auto;
left: 0;
right: 0;
border-bottom-radius: 5px;
display: none;
}
header .menu .menu-nav ul {
margin-top: 20px;
}
header .menu .menu-nav ul li {
text-align: center;
padding: 10px;
list-style: none;
border-radius: 5x;
font-size: 2em;
cursor: pointer;
}
header .menu .menu-nav ul li:hover {
/*background-color: #607D8B;*/
background-color: black;
color: #18FFFF;
}
header .menu h1 {
text-align: center;
}
header .menu .menu-social {
width: 155px;
margin: 30px auto;
}
header .menu .menu-social img {
cursor: pointer;
margin: 0 1px 0 1px;
float: left;
padding-top: 20px;
padding-bottom: 20px;
}
header .menu .menu-social img:hover {
position: relative;
top: -5px;
}
header .bio {
width: 70%;
margin: 0 auto;
margin-bottom: 0;
position: relative;
}
header .bio .hello h1 {
font-size: 3.4em;
color: #18FFFF;
text-align: center;
padding-bottom: 20px;
padding-top: 45px;
font-family: 'Bowlby One SC', cursive;
}
header .bio .desc p {
color: white;
text-align: center;
line-height: 25px;
padding-bottom: 80px;
}
header img {
display: block;
margin: 0 auto;
padding-bottom: 3px;
cursor: pointer;
position: relative;
}
.skills-2 {
width: 90%;
margin: 15px auto;
background-color: white;
overflow: hidden;
border: solid black 1px;
border-radius: 5px;
}
.skills-2 h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 20px;
padding-bottom: 20px;
}
.skills-2 .my-skills {
width: 50%;
padding-top: 20px;
float: left;
padding-bottom: 20px;
}
.skills-2 .my-skills ul li {
text-align: center;
padding-bottom: 10px;
}
.skills-2 .graph {
float: left;
width: 50%;
padding-top: 20px;
}
.skills-2 .graph .html {
width: 1px;
}
.skills-2 .graph .css {
width: 1px;
}
.skills-2 .graph .javascript {
width: 1px;
}
.skills-2 .graph .bar {
height: 10px;
background-color: #2962FF;
margin-bottom: 18px;
}
.work {
width: 100%;
background-color: white;
color: black;
}
.work:before {
/*#include divider;*/
}
.work h1 {
text-align: center;
font-size: 3em;
padding-top: 40px;
padding-bottom: 20px;
color: black;
}
.work p {
text-align: center;
display: block;
width: 70%;
margin: 0 auto;
padding-bottom: 60px;
line-height: 20px;
padding-top: 30px;
}
.work p span {
display: block;
padding-top: 10px;
font-size: 0.8em;
line-height: 15px;
}
.work h2 {
text-align: center;
padding-top: 50px;
padding-bottom: 20px;
font-size: 1.3em;
}
.work .site1 {
width: 100%;
}
.work .site1 img {
display: block;
width: 90%;
margin: 0 auto;
padding-bottom: 5px;
box-shadow: 8px 10px 35px black;
}
.work .site2 {
width: 100%;
}
.work .site2 img {
display: block;
width: 90%;
margin: 0 auto;
padding-bottom: 5px;
box-shadow: 8px 10px 35px black;
}
.contact {
background-color: black;
overflow: hidden;
color: white;
}
.contact h1 {
text-align: center;
font-size: 3em;
padding-top: 40px;
padding-bottom: 20px;
}
.contact form {
padding-top: 50px;
text-align: left;
width: 85%;
margin: 0 auto;
}
.contact form label p {
float: left;
width: 100%;
padding-bottom: 15px;
}
.contact form input {
width: 100%;
float: left;
margin-bottom: 20px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 2px solid #18FFFF;
height: 30px;
font-size: 18px;
background-color: black;
color: white;
}
.contact form input:focus {
outline: none;
}
.contact form textarea {
width: 100%;
border: #18FFFF solid 2px;
background-color: black;
font-size: 18px;
margin-top: 20px;
color: white;
}
.contact form input[type=submit] {
width: 30%;
padding: 5px;
margin: 20px auto;
border-bottom: none;
border: #18FFFF solid 1px;
background-color: black;
color: white;
}
.contact form input[type=submit]:hover {
color: black;
background-color: #18FFFF;
-webkit-transition: background-color 100ms linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 100ms linear;
-ms-transition: background-color 100ms linear;
transition: background-color 100ms linear;
}
<title>Ivan B</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<!--FONTS-->
<link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<img src="images/Menu-64.png">
</div><!--menu-icon-->
</nav>
<div class="menu">
<div class="menu-nav">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
</ul>
<div class="menu-social">
<img src="images/Instagram.png" alt="instagram" />
<img src="images/Twitter.png" alt="twitter" />
<img src="images/LinkedIn.png" alt="linkedin" />
</div>
</div><!--menu-nav-->
</div>
<div class="background">
</div><!--BACKGROUND-->
<div class="bio">
<div class="hello">
<h1>Hello...</h>
</div><!--Hello-->
<div class="desc">
<p>Lorem ipsum dolor sit amet, ut movet persius fierent vis, nominavi deseruisse eu vis. Pri eruditi apeirian periculis at, summo scriptorem has in.</p>
</div><!--desc-->
</div><!--Bio-->
<img src="images/arrow-down.png">
</header>
<div class="skills-2">
<h1>Skills</h1>
<div class="my-skills">
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</div><!--My SKills-->
<div class="graph">
<div class="html bar">
</div>
<div class="css bar">
</div>
<div class="javascript bar">
</div>
</div><!--Graph-->
</div><!--SKills 2-->
<div class="work">
<h1>Work</h1>
<div class="site1">
<h2>A very clear statement <br/>of your offer</h2>
<img src=images/site1.png>
<p>Lorem ipsum dolor sit amet, ut movet persius fierent vis, <br/><span>*Lorem ipsum dolor sit amet, ut movet persius fierent vis,</span></p>
</div><!--Site 1-->
<div class="site2">
<h2>The Yalow</h2>
<img src="images/site2.png">
<p>Lorem ipsum dolor sit amet, ut movet persius fierent vis,<br/><span>Lorem ipsum dolor sit amet, ut movet persius fierent vis,</span></p>
</div><!--Site 2-->
</div><!--Work-->
<div class="contact">
<h1>Contact</h1>
<form action="contact.php" method="post">
<label>
<p>Name *</p>
<input type="text" name="name">
</label>
<label>
<p>Your E-mail *</p>
<input type="text" name="email">
</label>
<label>
<p>Your message *</p>
<textarea name="message" rows="8" cols="40"></textarea>
</label>
<div id="button">
<input type="submit" name="name" value="Send">
</div><!--button-->
</form>
</div>
to fix your image overlapping issue, add below changes to your css -
header {
background-color: black;
height: 420px;
position: relative; /* Added */
}
header .background {
opacity: 0.2;
background-image: url(http://lorempixel.com/400/200/sports/1);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
height: 100%; /* editied */
top: 0px; /* added */
position: absolute;
overflow: hidden;
}
In your css file :
height:78% change it to 38% and it should resize it for you. Always check your css when it comes to positioning and resizing.
Give this property
backface-visibility:hidden;
to your background image element.