I am using bootstrap's pill nav bar and for some reason once I add my code which contains tiles that give a netflix feel (on the STEMuli tab), the navbar will no longer remove the content when going to another tab. It actually will add the next tabs information directly below. I thought I was missing some div tags, but I took away some code and rebuilt it to double check, div tags checkout. I am not sure what could cause this? Because right when I remove the content in my "STEMuli" tab in the actual code and just add some plain text it works just fine, even if I add a row to it...I am stuck please help!
.popover-header{
color:#000000;
}
#row{
overflow: hidden;
}
.logo{
z-index:0;
}
.row {
overflow: scroll;
width: 100%;
z-index: 1;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 50px 0;
padding-bottom: 30px;
padding-bottom: 30px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
margin-right: 10px;
margin-left: 50px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:before {
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}
a:hover{
color: #F1D302;
}
.checkbox-wrapper {
height: 13px;
width: 13px;
}
.btn{
background-color: #F1D302;
}
body {
font-family: 'Rubik', sans-serif;
}
.card-img-top {
height: 300px;
width: 100%;
}
.btn-xlong {
padding: 10px 50px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.steps-form-3 {
width: 2px;
height: 470px;
position: relative; }
.steps-form-3 .steps-row-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.steps-form-3 .steps-row-3:before {
top: 14px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 100%;
background-color: #7283a7; }
.steps-form-3 .steps-row-3 .steps-step-3 {
height: 150px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative; }
.steps-form-3 .steps-row-3 .steps-step-3.no-height {
height: 50px; }
.steps-form-3 .steps-row-3 .steps-step-3 p {
margin-top: 0.5rem; }
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
width: 60px;
height: 60px;
border: 2px solid #59698D;
background-color: white !important;
color: #59698D !important;
border-radius: 50%;
padding: 18px 18px 15px 15px;
margin-top: -22px; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
border: 2px solid #4285F4;
color: #4285F4 !important;
background-color: white !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
font-size: 1.7rem; }
::-webkit-scrollbar{
width: 0px;
height:5px;
background-color: #161925;
}
::-webkit-scrollbar-thumb{
background-color: #F1D302;
border-radius:10px;
box-shadow: insert 0 0 6px rgba(0,0,0,.3);
}
.spacing{
padding: 6px;
}
/*This css file defines the color scheme and font of all of the webpages so import into every new webpage*/
body {
font-family: 'Rubik', sans-serif;
background-color: #9E2B25;
color:#FDFFFC;
}
h4{
color:#FDFFFC;
}
.button{
background-color:#0267C1;
}
.nav-pills .nav-link.active
{
background-color: #0267c1;
}
h3{
color: #ffffff;
}
#cardimg
{
height:300px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet">
<link href="/css/mastercss.css" rel="stylesheet">
<link rel="stylesheet" href="/css/profile.css" crossorigin="anonymous">
<script src="/js/moment.js"></script>
</head>
<script>
(function() {
('[data-toggle="popover"]').popover()
})
</script>
<body>
<!--This is where the logo is-->
<div id="row" class="row h-100 justify-content-center">
<img src="/img/tcb-logo.png" class="img-fluid" alt="Responsive image">
</a>
</div>
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-STEM" role="tab" aria-controls="pills-home" aria-selected="true"><h3>STEMuli</h3></a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-Community" role="tab" aria-controls="pills-profile" aria-selected="false"><h3>Community</h3></a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-aboutUs" role="tab" aria-controls="pills-contact" aria-selected="false"><h3>Who We Are</h3></a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-STEM" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row">
<h2>Credit</h2>
<div class="row__inner">
<a onclick="redirectbankon()">
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-html="true" title="Description" data-content="The Bank On It module provides an overview of banking services and is designed to help participants build a positive relationship with a financial institution.">
<div class="tile__media">
<img class="tile__img" src="/img/bankonit.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Bank On It</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/borrowing.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Borrowing Basics</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/keepitsafe.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Keep it Safe</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/checkitoutpt1.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Check It Out</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/yourownhome.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Your Own Home</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-Community" role="tabpanel" aria-labelledby="pills-profile-tab">How are you</div>
<div class="tab-pane fade" id="pills-aboutUs" role="tabpanel" aria-labelledby="pills-contact-tab">.</div>
</div>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/JavaScript" src="/js/redirect.js"></script>
<script type="text/JavaScript" src="/js/form.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
You have a lot of invalid HTML markup, somewhere unclosed tags and an unknown </main> tag in the end before the body, an unclosed <a href='#.' onclick="redirectbankon()"> which is wrapping the nested div.tile which is ok if you are using HTML5 but you still need to close it. A better way would be to provide an id to the anchor and then bind the click event to the anchor to call the function on click.
Remove the flaws in your HTML and it will work correctly by replacing the content rather than adding the tab underneath the first.
See a demo below of your code.
.popover-header {
color: #000000;
}
#row {
overflow: hidden;
}
.logo {
z-index: 0;
}
.row {
overflow: scroll;
width: 100%;
z-index: 1;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 50px 0;
padding-bottom: 30px;
padding-bottom: 30px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
margin-right: 10px;
margin-left: 50px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:before {
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover~.tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}
a:hover {
color: #F1D302;
}
.checkbox-wrapper {
height: 13px;
width: 13px;
}
.btn {
background-color: #F1D302;
}
body {
font-family: 'Rubik', sans-serif;
}
.card-img-top {
height: 300px;
width: 100%;
}
.btn-xlong {
padding: 10px 50px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.steps-form-3 {
width: 2px;
height: 470px;
position: relative;
}
.steps-form-3 .steps-row-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.steps-form-3 .steps-row-3:before {
top: 14px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 100%;
background-color: #7283a7;
}
.steps-form-3 .steps-row-3 .steps-step-3 {
height: 150px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative;
}
.steps-form-3 .steps-row-3 .steps-step-3.no-height {
height: 50px;
}
.steps-form-3 .steps-row-3 .steps-step-3 p {
margin-top: 0.5rem;
}
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
width: 60px;
height: 60px;
border: 2px solid #59698D;
background-color: white !important;
color: #59698D !important;
border-radius: 50%;
padding: 18px 18px 15px 15px;
margin-top: -22px;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
border: 2px solid #4285F4;
color: #4285F4 !important;
background-color: white !important;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
font-size: 1.7rem;
}
::-webkit-scrollbar {
width: 0px;
height: 5px;
background-color: #161925;
}
::-webkit-scrollbar-thumb {
background-color: #F1D302;
border-radius: 10px;
box-shadow: insert 0 0 6px rgba(0, 0, 0, .3);
}
.spacing {
padding: 6px;
}
/*This css file defines the color scheme and font of all of the webpages so import into every new webpage*/
body {
font-family: 'Rubik', sans-serif;
background-color: #9E2B25;
color: #FDFFFC;
}
h4 {
color: #FDFFFC;
}
.button {
background-color: #0267C1;
}
.nav-pills .nav-link.active {
background-color: #0267c1;
}
h3 {
color: #ffffff;
}
#cardimg {
height: 300px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet">
<link href="/css/mastercss.css" rel="stylesheet">
<link rel="stylesheet" href="/css/profile.css" crossorigin="anonymous">
<script src="/js/moment.js"></script>
</head>
<script>
(function () {
('[data-toggle="popover"]').popover()
})
</script>
<body>
<!--This is where the logo is-->
<div id="row" class="row h-100 justify-content-center">
<img src="/img/tcb-logo.png" class="img-fluid" alt="Responsive image">
</div>
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-STEM" role="tab" aria-controls="pills-home"
aria-selected="true">
<h3>STEMuli</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-Community" role="tab" aria-controls="pills-profile"
aria-selected="false">
<h3>Community</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-aboutUs" role="tab" aria-controls="pills-contact"
aria-selected="false">
<h3>Who We Are</h3>
</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-STEM" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row">
<h2>Credit</h2>
<div class="row__inner">
<a href='#.' onclick="redirectbankon()">
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-html="true" title="Description"
data-content="The Bank On It module provides an overview of banking services and is designed to help participants build a positive relationship with a financial institution.">
<div class="tile__media">
<img class="tile__img" src="/img/bankonit.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Bank On It</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/borrowing.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Borrowing Basics</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/keepitsafe.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Keep it Safe</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/checkitoutpt1.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Check It Out</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/yourownhome.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Your Own Home</h5>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-Community" role="tabpanel" aria-labelledby="pills-profile-tab">How are you</div>
<div class="tab-pane fade" id="pills-aboutUs" role="tabpanel" aria-labelledby="pills-contact-tab">.</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/JavaScript" src="/js/redirect.js"></script>
<script type="text/JavaScript" src="/js/form.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
Related
I made the header menu of my website become a sidebar with the screen width. Everything was working fine, the menu could be toggled by clicking the icon. But then i noticed the majority of websites had this property that the menu would close if the user clicks anywhere in the screen. I tryed everything i could but everythime i add the event listener to the code (to remove the class that makes the menu visible), the onclick event that adds the class stops working.
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>Portfolio.</title>
<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:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="Favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="Favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="Favicon/favicon-16x16.png">
<link rel="shortcut icon" href="Favicon/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="Favicon/site.webmanifest">
<link rel="stylesheet" href="https://unpkg.com/boxicons#latest/css/boxicons.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- Header -->
<header id="header">
<div id="container">
<nav id="nav-bar">
Portfolio.
<ul id="nav-menu">
<div id="nav"><li><a id="link" href="#about-me">Sobre mim</a></li></div>
<div id="nav"><li><a id="link" href="#experience">Experiência</a></li></div>
<div id="nav"><li><a id="link" href="#projects">Projetos</a></li></div>
<div id="nav"><li><a id="link" href="#habilities">Competências</a></li></div>
<div id="nav"><button id="resume-btn">Currículo</button></li></div>
</ul>
<div class="menu-icon">
<h3 onclick="handleMenuToggle()">☰</h3>
</div>
</nav>
</div>
</header>
<!-- Sections -->
<main>
<section id="hero"> <!-- Main section -->
<div id="hero-txt">
<h2>
Seja bem vindo, eu sou
</h2>
<h1>
Yan Calvo
</h1>
<p>
Estudante de Ciência da computação e desenvolvedor web
</p>
<div class="social">
<i class='bx bxl-linkedin' ></i>
<i class='bx bxl-github' ></i>
</div>
</div>
</section>
<section id="about-me"> <!-- About section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Sobre mim</h2>
<p>
Sou estudante de Ciência da computação, também
focado em aprender tecnologias de forma
independente. No momento me encontro dedicado a
aprimorar as minhas habilidades através da
experiência profissional e contato com outros
profissionais dedicados.<br><br>
O que mais me entusiasma em trabalhar com programação é poder projetar e criar coisas que tenham propósito e resolvam problemas reais.
Apoiar-se na pesquisa e percepção do cliente, encontrar as formas certas e dinâmicas de resolver determinados problemas, aprender com o processo e, em seguida, iterar e melhora-lo é a chave para um ótimo design.
</p>
</div>
<div class="container reveal fade-left">
<h4 id="quote">
“<br>
Knowledge has to be improved, challenged, and increased constantly, or it vanishes.<br>
”
</h4>
<h5>― Peter Drucker</h5>
</div>
</section>
<section id="experience"> <!-- Experience section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Onde trabalhei </h2>
<p>
Ainda em busca de oportunidades profissionais
</p>
</div>
</section>
<section id="projects"> <!-- Projects section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Projetos</h2>
<p>Trabalhos pessoais</p>
</div>
<div id="portfolio-content" class="container reveal fade-left">
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
</div>
</section>
<section id="habilities"> <!-- Contact section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Competências</h2>
<div id="habilities-container">
<div id="hability-icons-container"></div>
<img id="hability-icon" src="Img/icons8-javascript-144.png" alt="">
<img id="hability-icon" src="Img/icons8-html-5-144.png" alt="">
<img id="hability-icon" src="Img/icons8-css3-144.png" alt="">
<img id="hability-icon" src="Img/icons8-git-144.png" alt="">
<img id="hability-icon" src="Img/icons8-github-128.png" alt="">
<div id="habilities-description"></div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer id="footer">
<div id="footer-copyright">
<h6>Projetado por Yan Calvo</h6>
</div>
<div id="social">
<h6>Email para contato: yancalvo#gmail.com</h6>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 70px;
}
body {
position: relative;
background-color: #ece7e1;
}
html, body {
overflow-x: hidden;
}
/* Header */
header {
position: fixed;
top: 0;
width: 100%;
background-color: rgba(27,26,33,255);
z-index: 200;
}
#container {
width: 1800px;
margin: auto;
}
#nav-bar {
width: 95%;
margin: auto;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-brand {
color: white;
text-decoration: none;
font-size: 30px;
}
#nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
#nav {
margin: auto 30px;
}
.menu-icon {
display: none;
}
#link {
margin-right: 15px;
color: white;
text-decoration: none;
transition: color 0.15s;
}
#link:hover {
color: gray;
font-style: italic;
}
#resume-btn {
width: 100px;
font-weight: bold;
font-size: 15px;
color: rgba(27,26,33,255);
background-color: #ece7e1;
border-radius: 23.5px;
border-style: solid;
border-color: #ece7e1;
padding: 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, width 1.0s;
}
#resume-btn:hover {
width: 150px;
}
/* Sections */
main {
padding-top: 70px;
}
section {
padding: 0px 100px;
}
#hero {
position: relative;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
grid-gap: 4rem;
}
.social a {
color: white;
width: 35px;
height: 35px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(27,26,33,255);
font-size: 17px;
margin-right: 22px;
margin-bottom: 30px;
margin-top: 20px;
}
.social a:hover{
transform: scale(1.1);
transition: .5s;
}
#about-me {
background-color: #191919;
min-height: 500px;
padding-top: 40px;
margin-bottom: 100px;
display: grid;
grid-template-columns: repeat(2, 2fr);
grid-gap: 2rem;
white-space: normal;
}
#experience {
min-height: 300px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
justify-content: center;
text-align: center;
white-space: normal;
}
#projects {
background-color: #191919;
min-height: 800px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
grid-gap: 2rem;
}
#portfolio-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, auto));
grid-gap: 2rem;
align-items: center;
margin-top: 5rem;
text-align: center;
cursor: pointer;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 12px;
transition: all .40s;
}
.layer:hover{
background: linear-gradient(rgba(0,0,0,0.5) 0%, #191919);
}
.layer h3{
position: absolute;
width: 100%;
font-size: 25px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
margin-bottom: 7px;
}
.layer:hover h3{
bottom: 52%;
opacity: 1;
}
.layer h5{
position: absolute;
width: 100%;
font-size:17px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
}
.layer:hover h5{
bottom: 48%;
opacity: 1;
}
.col {
position: relative;
}
.col img {
max-width: 100%;
width: 550px;
height: auto;
object-fit: cover;
border-radius: 12px;
}
#habilities {
min-height: 500px;
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
text-align: center;
}
li {
list-style: none;
}
h1 {
font-size: 90px;
color: rgba(27,26,33,255);
margin: 10px 0px 25px;
}
h2 {
font-size: 30px;
margin-bottom: 60px;
}
#about-me h2,
#projects h2
{
color: #ece7e1;
}
#experience h2,
#habilities h2 {
color: #191919;
}
#habilities-container {
display: flex;
flex-direction: column;
align-items: ;
}
#hability-icon {
width: 144px;
height: 144px;
transition: all 0.8s;
}
#hability-icon:hover {
height: 155px;
width: 155px;
}
h6 {
font-size: 20px;
color: white;
}
h4 {
font-size: 40px;
color: #ece7e1;
font-style: italic;
}
h5 {
color: rgba(27,26,33,255);
}
p {
color: gray;
text-align: justify;
}
#footer {
background-color: #191919;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
}
.reveal {
position: relative;
opacity: 0;
}
.reveal.active {
opacity: 1;
}
.active.fade-left {
animation: fade-left 0.5s ease-in;
}
.active.fade-right {
animation: fade-right 0.5s ease-in;
}
#keyframes fade-left {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade-right {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#media(max-width:1800px) {
#container {
width: 100%;
}
}
#media only screen and (max-width: 1015px) {
#nav-menu {
position: fixed;
top: 70px;
right: -100%;
display: block;
background-color: rgba(27,26,33,255);
margin: 0;
height: 100%;
-webkit-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
-moz-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
width: 250px;
transition: all 0.3s ease;
}
#nav-menu.show-nav {
right: 0;
}
#nav {
text-align: center;
margin: 20px auto;
}
.menu-icon {
color: white;
display: block;
margin: auto 0;
padding: 0 20px;
font-size: 30px;
cursor: pointer;
}
#brush-img {
display: none;
}
#about-me {
display: flex;
flex-direction: column;
}
}
Javascript:
//Toggle sidebar
const navContainer = document.getElementById('nav-menu')
function handleMenuToggle() {
navContainer.classList.add('show-nav')
}
document.onclick = function(e) {
if (e.target.id !== 'nav-menu' && e.target.id !== 'show-nav') {
navContainer.classList.remove('show-nav')
}
}
//Scroll animation
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
I just cannot make it work, i'm probably missing something or making some ugly mistakes in the structure of the code.
By taking a look at : this question you could try to do it this way : create a navbar sublcass called like :
navbar.open , and assign it these css properties :
/* If you use an id use #id_name or .classname if you use a class
*/
#id_of_navbar.open {
right: 0;
}
/* OR
.classname.open {
right: 0;
}
*/
And then add to your javascript :
var yournavbar = document.getElementById("id_of_navbar")
//Close menu when document is clicked anywhere
document.onclick = function () {
yournavbar.classList.remove("open");
};
And if you want your navbar to close if you click a part of it, just add this function :
//stop propagation on the side nav element
yournavbar.onclick = function(e) {
e.stopPropagation()
}
I tried that solution and it worked for me so I really hope it helps! Let me know if you are still trying to make it work without success despite this solution.
I was creating a website and am stuck because I keep resizing the screen and trying to make it mobile friendly. However, there are two sections that I cannot seem to fix. I cannot remember how I got the first three sections to stop moving while I resized the screen. I was wondering if I could get some help.
My website is shivaniahuja.com
If you look at the contact me page and the footer and try to resize them you will see the problem. Please let me know if you can help and I can attach my code if needed.
*{
margin: 0;
padding: 0;
}
#main{
width: 100%;
height: 100vh;
background-image: url(../imgs/Background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
}
img{
width: 15%;
height: 100%;
}
#first-name{
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #2f3338;
padding-left: 2%;
font-size: 2vmin;
}
nav{
width: 100%;
height: 10vh;
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
nav ul li{
list-style-type: none;
display: inline-block;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li a{
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 2vmin;
color: #2f3338;
padding: 20px;
}
nav ul li a:hover{
color: #3377CC;
}
#main p{
position: absolute;
top: -1000px;
text-align: center;
color: white;
font-size: 50px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
section{
width: 100%;
text-align: center;
padding-top: 7%;
}
html{
scroll-behavior: smooth;
overflow-x: hidden;
}
section#about-me #p2{
width: 40%;
position: relative;
height: 40%;
float: right;
top: 40%;
margin-top: 3%;
right: 10%;
line-height: 200%;
font-family: 'Libre Franklin', sans-serif;
text-align: justify;
font-size: 2.2vmin;
}
section#about-me{
height: 60vh;
}
section#photography{
height: 110vh;
background-color: #F5F5F5;
}
section#experience{
height: 280vh;
background-color: #F5F5F5;
}
section#contact{
}
#contact-header{
font-size: 2.5vmin;
top: 20%;
}
section#about-me #pic{
width: 40%;
height: 40%;
position: absolute;
right: 55%;
margin-top: 2%
}
#contact-div{
position: relative;
top: 50%;
}
section#blog{
width: 100%;
padding-top: 8.5%;
}
.navs::before,
.navs::after {
display: inline-block;
content: "";
border-top: 2px solid black;
width: 5%;
margin: 0 1rem;
transform: translateY(-0.5rem);
}
h2{
position: relative;
top: -200;
}
#title{
position: absolute;
top: 50%;
font-size: 10vmin;
color: white;
left: 35%;
}
span{
position: absolute;
top: 60%;
font-size: 300%;
color: white;
left: 35%;
display: inline-block;
}
span:before{
content: 'HTML';
animation: animate infinite 8s;
position: relative;
left: 50%;
font-size: 6vmin;
}
#keyframes animate{
0%{
content: 'ENGINEER';
}
25%{
content: 'ENGINEER';
}
50%{
content: 'DEVELOPER';
}
75%{
content: 'DEVELOPER';
}
100%{
content: 'ANALYST';
}
}
.pic-and-text{
width: 18%;
height: 22%;
border-radius: 15%
}
section#experience #pic01{
left: -20%;
margin-top: 2%;
margin-bottom: 5%;
position: relative;
}
section#experience #berkeley-name{
position: relative;
font-size: 3vmin;
left: 5%;
top: 0%;
color: #3377CC;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-major{
position: relative;
font-size: 16px;
bottom: 200px;
left: 78px;
color: #5E9515;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-location{
position: relative;
font-size: 16px;
bottom: 195px;
right: 65px;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-description{
position: relative;
bottom: 180px;
height: 40px;
width: 600px;
right: -610px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
font-size: 2vmin;
}
section#blog #full-blog{
position: relative;
top: -40px;
}
section#blog .blog-description{
font-size: 20px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
}
#pic001{
width: 17.5%;
}
#pic002{
width: 17.5%;
}
#pic003{
width: 17.5%;
}
.header{
font-size: 3.5vmin;
}
.blog-pics{
margin-left: .5%;
margin-top: 1%
}
section#blog #blog-description01{
margin-top: 15px;
}
#photography-paragraph{
font-size: 2.5vmin;
font-family: 'Libre Franklin', sans-serif;
margin-bottom: 2vh;
margin-top: 2vh;
}
.polaroid {
cursor:pointer;
margin:10px;
border: 1px solid #cccccc78;
background-color: #ffffff;
padding: 7%;
box-shadow: 4px 6px 4px #00000012;
text-align: center;
font-family: 'Caveat','Arial', sans-serif;
}
.polaroid .square {
background:black;
}
.polaroid .picture {
width:100%;
padding-top: 100%;
background-position: center;
background-size:cover;
opacity:0;
}
.polaroid.developed .square {
animation: flash 1.5s;
background:black;
}
.polaroid.developed .picture {
animation: fade-in 3s;
opacity:1;
}
.polaroid .labelName {
text-align: center;
font-size: 24px;
line-height:26px;
}
.polaroid-gallery {
display:-ms-grid;
display:grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 23% 23% 23% 23%;
margin-left: 5%
}
/* Adjust CSS Grid for Microsoft Edge */
.polaroid:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column:1;
}
.polaroid:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column:2;
}
.polaroid:nth-child(3) {
-ms-grid-row: 1;
-ms-grid-column:3;
}
.polaroid:nth-child(4) {
-ms-grid-row: 1;
-ms-grid-column:4;
}
.polaroid:nth-child(5) {
-ms-grid-row: 2;
-ms-grid-column:1;
}
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes flash {
2% {
background:black;
opacity: 0.5;
}
5% {
background:white;
opacity:1;
}
50% {
background:white;
opacity:.5
}
}
#footer{
background-color: #000000;
width: 100%;
padding-top: 2vh;
color: white;
padding-left: 1%;
}
#footer-paragraph{
position: relative;
top: 60%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #000;
background-color: #FFF;
border: 1px solid #000;
padding-top: 12px;
border-radius: 22px;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
-o-border-radius: 22px;
}
.socialbtns .fa:hover {
color: #FFF;
background-color: #000;
border: 1px solid #000;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href ="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<h1 id="title"> SHIVANI AHUJA</h1>
<span></span>
<body>
<div class ="container">
<div id="main">
<nav>
<div id= "first-name"> SHIVANI AHUJA </div>
<ul>
<li> ABOUT ME </li>
<li> EXPERIENCE</li>
<li> BLOG POSTS</li>
<li> PHOTOGRAPHY</li>
<li> CONTACT </li>
</ul>
</nav>
</div>
<section id="about-me">
<h1 class="navs" class="header"> ABOUT ME</h1>
<img src="assets/imgs/paris-2017-home.jpeg" id="pic">
<div id="p2div">
<p id="p2"> Hey! My name is Shivani and I am an undergraduate student at UC Berkeley studying Computer Science. I'm super passionate about Artificial Intelligence and Natural Language Processing. Haha, I sound like a nerd right now, but I really love what I do! I've spent tons of hours curating images and watching HTML and CSS tutorials on Youtube to finally create this masterpiece that lies in front of you. The process of creating this website was fun, yet undeniably frustrating. After creating my first website from scratch, I plan to create many more and teach others how to recreate this process!</p>
</div>
</section>
<section id="experience">
<h1 class="navs"> HERE'S WHAT I'VE DONE SO FAR</h1>
<div class= "experience-squares" id="experience-square">
<img src="assets/imgs/coming.png" class="pic-and-text" id="pic01">
<p id="berkeley-name"> Creator and iOS Developer, Summer 2020</p>
<p id="berkeley-major"> IBS Application </p>
<p id="berkeley-location"> Hayward, CA</p>
<p id="berkeley-description"> Currently,</p>
</div>
</div>
</section>
<section id="blog">
<div id=full-blog>
<h1 class="navs" class="header">BLOG</h1>
<p class="blog-description" id= "blog-description01"> I write about women in tech, hiking, and some of my personal experiences.</p>
<p class="blog-description" id= "blog-description02"> Here are three of my recent posts:</p>
<div id="pictures">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic001" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic002" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic003" class="blog-pics">
</div>
</div>
</section>
<section id="photography">
<h1 class="navs" class="header">PHOTOGRAPHY</h1>
<p id="photography-paragraph"> Creating memorabilia is an art. An art that has allowed me to capture the emotions, smiles, and happiness of every individual depcited in this gallery.</p>
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sunflower.JPG')"></div>
</div>
<div class="labelName">SunFlowers</div>
<div class="labelText">Berkeley, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/pic-with-mom.png')"></div>
</div>
<div class="labelName">Mommy's Girl</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sailboat.jpg')"></div>
</div>
<div class="labelName">Sailboat</div>
<div class="labelText">Santa Cruz, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/glasses-aesthetic.JPG')"></div>
</div>
<div class="labelName">Foolin' Around</div>
<div class="labelText">Berkeley, CA</div>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/flowers.jpg')"></div>
</div>
<div class="labelName">Orchid Bush</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/graduation.jpg')"></div>
</div>
<div class="labelName"> Besties 4 Life!</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/background.jpg')"></div>
</div>
<div class="labelName">Pink Sky</div>
<div class="labelText">Lake Tahoe, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/cousins.PNG')"></div>
</div>
<div class="labelName">Three Idiots</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
</section>
<div id="wrap">
<section id="contact">
<h1 class="navs" class="contact-header">CONTACT</h1>
<p id="contact-paragraph">If you have any inquiries or questions, please feel free to contact me on these social media
sites. I look forward to hearing from you! </p>
<br/>
<div align="center" class="socialbtns">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
</body>
</html>
I found one inconsistency were you wrapped up your div tag...
This often leads to buggy layouts just for not closing tags properly.
<div id="wrap">
<section id="contact">
<!-- your HTML code -->
<div align="center" class="socialbtns">
<!-- your HTML code -->
</div>
</div><!-- REMOVE THIS! did you want to finish div#wrap here ? -->
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div><!-- or did you want to finish div#wrap here ? -->
To make the whole site responsive put a <meta> tag like the one below before and after the <body> tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Next, set out your HTML like this:
<div id="wrap">
<section id="contact">
<!-- Code here -->
<div align="center" class="socialbtns">
<!-- Your Code Here -->
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
And of course use the <meta> tags I mentioned
Add position relative to .polaroid-gallery
.polaroid-gallery {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 40% 40% 40% 36%;
margin-left: 5%;
position: absolute;
}
nav {
width: 100%;
/* height: 10vh; */ i remove this for the menu dont resize to much
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
section#contact {
margin-bottom: 2vh;
font-size: 2.5vmin;
border: 3px solid red; /* to test */
background: black; /* to test */
}
i recommend you check the structure of your html, and relative sizes to responsive design
Trying to put a menu together, and having some trouble with one behavior.
Have a set of sub-menu divs hidden behind the main menu divs. Upon click, the sub-menu is shown and animates into view.
I'm able to see the animation when the sub-menus are shown, but not when when they toggle back to hidden. I've tried a few different things to get it to behave the way I want, but no joy.
Here's the code:
$(document).ready(function() {
$(document).on('mouseenter mouseleave', '.circle.hover-effect', function (event) {
$(this).toggleClass("active", event.type === 'mouseenter');
});
$('.menu').hide();
$('.circle').on('mousedown touchstart', function() {
$('.circle').toggleClass('hover-effect');
$(this).toggleClass('selected');
$('.circle').not(this).removeClass('selected');
if ($(this).hasClass('selected')) {
$('.circle').not(this).addClass('behind');
$(this).prev().show('fast');
$(this).prev().find('.menu-item1').removeClass('menu-item-desel').addClass('menu-item1-sel');
$(this).prev().find('.menu-item2').removeClass('menu-item-desel').addClass('menu-item2-sel');
}
else {
$('.circle').removeClass('behind');
$('.circle').prev().hide('fast');
$(this).prev().find('.menu-item1').removeClass('menu-item1-sel').addClass('menu-item-desel');
$(this).prev().find('.menu-item2').removeClass('menu-item2-sel').addClass('menu-item-desel');
}
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
}
.grid {
display: flex;
flex-wrap: wrap;
width: 90%;
height: 450px;
margin: auto;
overflow: hidden;
padding: 10px 10px;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid transparent;
}
.cell::before {
padding-bottom: 100%;
display: block;
content: '';
}
.menu {
position: relative;
top: 100px;
left: 100px;
}
.menu-item {
width: 60px;
height: 60px;
background-color: dimGray;
border-radius: 50%;
position: absolute;
color: white;
text-align: center;
line-height: 70px;
z-index: 19;
}
.menu-item a {
color: white;
transition: 0.35s;
}
.menu-item a:hover { color: black; }
.menu-item1 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.menu1 .menu-item1-sel { transform: translate(0px, 125px); }
.menu1 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item2 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; }
.menu2 .menu-item1-sel { transform: translate(0px, 125px); }
.menu2 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item-desel { transform: none; }
.circle {
position: relative;
background: #ccc;
border-radius: 50%;
width: 200px;
height: 200px;
margin: 0 auto 1em;
transition: all 0.3s;
z-index: 20;
cursor: pointer;
opacity: 1;
}
.active { transform: scale(1.1); }
.selected {
background: red;
z-index: 20;
}
.behind {
opacity: 0.1;
z-index: 18;
cursor: default;
pointer-events: none;
}
.caption {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="grid">
<div class="cell col1">
<div class="inner">
<div class="menu menu1">
<div class="menu-item menu-item1"><i class="fa fa-user fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-graduation-cap fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 1</h2>
<h3>Subtitle 1</h3>
</div>
</div>
</div>
</div>
<div class="cell col1">
<div class="inner">
<div class="menu menu2">
<div class="menu-item menu-item1"><i class="fa fa-envelope-o fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-code fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 2</h2>
<h3>Subtitle 2</h3>
</div>
</div>
</div>
</div>
</div>
And here's the fiddle: JSfiddle
Any help would be greatly appreciated! Thanks, and have a great day!
Add delay when hiding the div. Div should perform the effect first before hiding use setTimeout
Executes a function, after waiting a specified number of milliseconds.
$(document).ready(function() {
$(document).on('mouseenter mouseleave', '.circle.hover-effect', function (event) {
$(this).toggleClass("active", event.type === 'mouseenter');
});
$('.menu').hide();
$('.circle').on('mousedown touchstart', function() {
$('.circle').toggleClass('hover-effect');
$(this).toggleClass('selected');
$('.circle').not(this).removeClass('selected');
if ($(this).hasClass('selected')) {
$('.circle').not(this).addClass('behind');
$(this).prev().show('fast');
$(this).prev().find('.menu-item1').removeClass('menu-item-desel').addClass('menu-item1-sel');
$(this).prev().find('.menu-item2').removeClass('menu-item-desel').addClass('menu-item2-sel');
}
else {
$('.circle').removeClass('behind');
$(this).prev().find('.menu-item1').removeClass('menu-item1-sel').addClass('menu-item-desel');
$(this).prev().find('.menu-item2').removeClass('menu-item2-sel').addClass('menu-item-desel');
setTimeout(function(){ $('.circle').prev().hide('fast'); }, 1000);
}
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
}
.grid {
display: flex;
flex-wrap: wrap;
width: 90%;
height: 450px;
margin: auto;
overflow: hidden;
padding: 10px 10px;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid transparent;
}
.cell::before {
padding-bottom: 100%;
display: block;
content: '';
}
.menu {
position: relative;
top: 100px;
left: 100px;
}
.menu-item {
width: 60px;
height: 60px;
background-color: dimGray;
border-radius: 50%;
position: absolute;
color: white;
text-align: center;
line-height: 70px;
z-index: 19;
}
.menu-item a {
color: white;
transition: 0.35s;
}
.menu-item a:hover { color: black; }
.menu-item1 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.menu1 .menu-item1-sel { transform: translate(0px, 125px); }
.menu1 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item2 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; }
.menu2 .menu-item1-sel { transform: translate(0px, 125px); }
.menu2 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item-desel { transform: none; }
.circle {
position: relative;
background: #ccc;
border-radius: 50%;
width: 200px;
height: 200px;
margin: 0 auto 1em;
transition: all 0.3s;
z-index: 20;
cursor: pointer;
opacity: 1;
}
.active { transform: scale(1.1); }
.selected {
background: red;
z-index: 20;
}
.behind {
opacity: 0.1;
z-index: 18;
cursor: default;
pointer-events: none;
}
.caption {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="grid">
<div class="cell col1">
<div class="inner">
<div class="menu menu1">
<div class="menu-item menu-item1"><i class="fa fa-user fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-graduation-cap fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 1</h2>
<h3>Subtitle 1</h3>
</div>
</div>
</div>
</div>
<div class="cell col1">
<div class="inner">
<div class="menu menu2">
<div class="menu-item menu-item1"><i class="fa fa-envelope-o fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-code fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 2</h2>
<h3>Subtitle 2</h3>
</div>
</div>
</div>
</div>
</div>
So the problem is when I click on the last two pills "Activity" and "Impact" and shows the information right below the pill content of "STEMuli" (after clicking STEMuli). But the weird part is when you click on "Who we are" and then click on "Activity" or "Impact" it doesn't do anything. I'm pulling my hair out trying to figure this out, I looked for lingering div tags and at one point I had it working when I had only 3 pill options. But right when I threw in this fourth item in it threw it out of sync. Any suggestions?
Also please enjoy my Infinity War placeholder images.
.popover-header{
color:#000000;
}
li{
color:#000000;
}
#border{
border-style: solid;
border-color: black;
}
#row{
overflow: hidden;
}
.logo{
z-index:0;
}
h5{
color: #ffffff;
}
.row {
width: 100%;
z-index: 1;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 50px 0;
padding-bottom: 30px;
padding-bottom: 30px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
margin-right: 10px;
margin-left: 50px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:before {
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}
a:hover{
color: #F1D302;
}
.checkbox-wrapper {
height: 13px;
width: 13px;
}
.card-img-top {
height: 300px;
width: 100%;
}
.btn-xlong {
padding: 10px 50px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.steps-form-3 {
width: 2px;
height: 470px;
position: relative; }
.steps-form-3 .steps-row-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.steps-form-3 .steps-row-3:before {
top: 14px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 100%;
background-color: #7283a7; }
.steps-form-3 .steps-row-3 .steps-step-3 {
height: 150px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative; }
.steps-form-3 .steps-row-3 .steps-step-3.no-height {
height: 50px; }
.steps-form-3 .steps-row-3 .steps-step-3 p {
margin-top: 0.5rem; }
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
width: 60px;
height: 60px;
border: 2px solid #59698D;
background-color: white !important;
color: #59698D !important;
border-radius: 50%;
padding: 18px 18px 15px 15px;
margin-top: -22px; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
border: 2px solid #4285F4;
color: #4285F4 !important;
background-color: white !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
font-size: 1.7rem; }
::-webkit-scrollbar{
width: 0px;
height:5px;
}
::-webkit-scrollbar-thumb{
border-radius:10px;
box-shadow: insert 0 0 6px rgba(0,0,0,.3);
}
.spacing{
padding: 6px;
}
/*This css file defines the color scheme and font of all of the webpages so import into every new webpage*/
body {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
background-color: #9E2B25;
color:#FDFFFC;
}
.button{
background-color:#0267C1;
}
.nav-pills .nav-link.active
{
background-color: #0267c1;
}
h3{
color: #ffffff;
}
#cardimg
{
height:300px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet">
<link href="/css/mastercss.css" rel="stylesheet">
<link rel="stylesheet" href="/css/profile.css" crossorigin="anonymous">
<script src="/js/moment.js"></script>
</head>
<body>
<!--This is where the logo is-->
<div id="row" class="row h-100 justify-content-center">
<img src="https://boygeniusreport.files.wordpress.com/2018/04/avengers-infinity-war3.jpg?quality=98&strip=all&w=782" class="img-fluid" alt="Responsive image">
</div>
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-we-tab" data-toggle="pill" href="#pills-we" role="tab" aria-controls="pills-we" aria-selected="true">
<h3>Who We Are</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-STEM-tab" data-toggle="pill" href="#pills-STEM" role="tab" aria-controls="pills-STEM" aria-selected="false">
<h3>STEMuli</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-activity-tab" data-toggle="pill" href="#pills-activity" role="tab" aria-controls="pills-activity" aria-selected="false">
<h3>Activity</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-impact-tab" data-toggle="pill" href="#pills-impact" role="tab" aria-controls="pills-impact" aria-selected="false">
<h3>Impact</h3>
</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-we" role="tabpanel" aria-labelledby="pills-we-tab">
<blockquote class="blockquote text-center">
<video width="700" controls>
<source src="/img/IMG_0021.mov" type="video/mp4">
<source src="/img/IMG_0021.mov" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<h5>Texas Capital Bank’s mission is helping businesses grow and communities prosper. Our approach to banking is to find the best people, develop the best relationships, and build something great together.</h5></blockquote>
</div>
<div class="tab-pane fade" id="pills-STEM" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row">
<h2 style="padding:20px;">Credit</h2>
<div class="row__inner">
<a href='#.' onclick="redirectbankon()">
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-html="true" title="Description" data-content="The Bank On It module provides an overview of banking services and is designed to help participants build a positive relationship with a financial institution.
">
<div class="tile__media">
<img class="tile__img" src="http://cdn.collider.com/wp-content/uploads/2018/04/avengers-infinity-war-imax-poster.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Bank On It</h5>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="tab-pane fade" id="pills-activity" role="tabpanel" aria-labelledby="pills-activity-tab">PLEASE SHOW!</div>
<div class="tab-pane fade" id="pills-impact" role="tabpanel" aria-labelledby="pills-impact-tab">PLEASE SHOW!</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/JavaScript" src="/js/redirect.js"></script>
<script type="text/JavaScript" src="/js/form.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
you forgot to close a html tag somewhere, by just adding <\div> once before your 3rd pill, it works perfectly
the first reason we want minimal examples is to prevent that, with a small file and good indentation, you would be able to spot the issue instantly
Acutely i checked all your code there is nothing wrong i just removed the data inside because it looks too mess to see and i just put just a test text and its working fine you can check it here
fiddle: https://jsfiddle.net/ew0xb5m3/
I have been trying to make my slider stay in the same place when the side-menu of my page comes in from the left on the page. I have been searching for answers and there seems to be some people who have encountered the same problem in various situations.
I have tried to change the position properties of elements on the page without any success. Is there anyone who might be able to help me with this problem?
JSFiddle: https://jsfiddle.net/nekgunru/2/
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeOut(100);
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<title>Practice</title>
<!--Links to main Stylesheet-->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!--Links to "Oswald"-font-->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--Links to Javascript-file-->
<script type="text/javascript" src="app.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>
The issue is that you are fading out .icon-menu which causes it to be set to display: none; when the fading animation has completed. This means that it no longer effects the position of the elements around it and so in this case they move up.
none
Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.
display - (https://developer.mozilla.org/en-US/docs/Web/CSS/display)
One way to navigate around this problem would be to use fadeOuts callback to set visibility: hidden; instead as it makes the element invisible while still affecting the position of the elements around it.
hidden
The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).
visibility (https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
Change:
$('.icon-menu').fadeOut(100);
To:
$('.icon-menu').fadeOut(100, function() {
$(this).css({"display": "block", "visibility": "hidden"});
});
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeOut(100, function() {
$(this).css({"display": "block", "visibility": "hidden"});
});
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>
Alternative method
You could instead use animate and set the opacity to 0 as this will simply modify the transparency of the element, it will still effect the position of the elements around it.
Change:
$('.icon-menu').fadeOut(100);
To:
$('.icon-menu').animate({opacity: 0}, 100);
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').animate({opacity: 0}, 100);
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>