close dropdown menu after click on link and use transition [closed] - javascript
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a dropdown menu which is almost complete with just 2 bugs/issues that I can't figure out. My nav links to different areas on the home page. So on the home page the user can click a nav link which would instantly take them down to the desired location on the page.
My issue comes as the user clicks on the nav link they are brought to the location but the dropdown menu will not close.
Next to this I also want to animate my menu from top to bottom, so it looks more elegant. I tried lots of things but I can't seem to make it work.. Hopefully you can help me out!
I uploaded this question already this morning but noticed that the great answers that were given to me did not work with the rest of my code. I thus decided to re-upload my question but this time adding my full html/css and js code.
link to my GitHub page: https://kabk.github.io/go-theses-21-sacha-van-alfen/LandingPage.html
html:
<!DOCTYPE html>
<html>
<head>
<!-- head section -->
<meta charset="utf-8">
<title>Rosy Retrospect</title>
<meta name="viewport" content="width=device-width" />
<link href="index.css" rel="stylesheet" />
</head>
<body>
<label for="drop" class="toggle">☰</label>
<label for="drop2" class="toggle2"><img src="images/rose.png"></label>
<!-- ☰ -->
<div class="bg-left"></div>
<section class="bg-container">
<div class="bg-left"></div>
</section>
<div class="page-header">
<nav>
<label for="drop2" class="toggle2"><img src="images/rose.png"></label>
<input type="checkbox" id="drop2" />
<ul class="menu2">
</ul>
</nav>
<nav>
<label for="drop" class="toggle">☰</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>
<li>ABSTRACT</li>
<li>INTRODUCTION</li>
<li>I. <br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</li>
<li>II. <br>CONTEMPORARY NOSTALGIA</li>
<li>III. <br>THE TWO FACES OF NOSTALGIA</li>
<li>CONCLUSION</li>
<li>BIBLIOGRAPHY</li>
</ul>
</nav>
<div id="title-bar-grey">ROSY RETROSPECT</div>
</div>
<div class="video-container">
<video class="animation" playsinline autoplay muted preload loop><source src="images/opener.mp4"/></video>
</div>
<div class="flex-container">
<!-- THESIS -->
<div class="abstract">
<a id="abstract" class="subheaders"><h1>ABSTRACT</h1></a>
</div>
<div class="intermezzo's">
<a id="intermezzo's" class="subheaders"><h1>INTERMEZZO'S</h1></a>
</div>
<div class="introduction">
<a id="introduction" class="chapter-title"><h1>INTRODUCTION</h1></a>
<br />
<p>
<br>
<br><br>
<div class="indent">How did nostalgia’s meaning develop from the coined moment of the terminology, and how has this concept been experienced in Europe since the 2000’s (with special focus on the period from 2010-2020) in comparison to the 17th century?</div>
<br>
<p>In order to answer this question, I have divided my thesis into chapters. The <span class="text-shadow underline">first chapter</span> is an introduction to the history of nostalgia. From the 17th century, when nostalgia was seen as a curable disease, to the mid-nineteenth century, when nostalgia became institutionalized in national and provincial museums, historical centres, heritage foundations, and memorials. The past was until that moment no longer unknown or unknowable. The past became “heritage”. Further I will also shine a light on the start of Romanticism and how nostalgia emerged during that time. In the <span class="text-shadow underline">second chapter</span> I will dive more into the technology that once promised to bridge modern displacement and distance and provide a miracle cure for nostalgic soreness. On the contrary, technology became much faster than nostalgic longing. If we claim that progress did not cure nostalgia; did it increase it instead? In the
<span class="text-shadow underline">final chapter</span> I will look at nostalgia as seen from two different points of view: the positive view on nostalgia; how it directly stimulates creativity. And a more negative view on nostalgia: how it represents a personal insufficiency and an unaffordable luxury as such.
</p>
<br>
<br>
</div>
<div class="chapterI">
<a id="chapterI" class="chapter-title"><h1>I.<br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</h1></a>
<br>
<span>
<p id="chapterI.I" class="subheaders">I.I THE ACTUAL AND THE IMAGINARY</p>
</span>
<br>
<p>Nostalgia originates from the Greek <i>nostos</i> <span class="basker"><a>(νόστος)</a></span> and <i>algia</i> <span class="basker"><a>(ἄλγος)</a></span>. <i>Nostos</i> means to return home and <i>algia</i> means pain and longing. Almost everyone has experienced nostalgic feelings, though it can be hard to define. One of the difficulties in giving nostalgia a good definition is that the word has changed its meaning throughout history (Salmose, 2012). I will explain more about this <span class="text-shadow underline">later on in this chapter</span>. In Boym’s essay, she defined nostalgia as follows: “Longing for a home that no longer exists or has never existed. Nostalgia is a sentiment of loss and displacement, but it is also a romance with one’s own fantasy. The danger of nostalgia is that it tends to confuse the actual home and the imaginary one,” (Boym, 2001, P. XIII). A return home can sometimes turn out as a disappointment. In our head we tend to idealize our past, forgetting about all the negative parts. Even if everything still looks the same, the time is different. This can also be called <i>rosy retrospection</i>, which means remembering the past more positively than it actually was ("Rosy Retrospection", 2020).
<p><br>
<a href="intermezzo1.html"><div class="intermezzo1"><img src="images/roseblack.png">
</div></a><br><br><br>
<span>
<p id="chapterI.II" class="subheaders">I.II FROM CURABLE DISEASE TO INCURABLE LONGING</p>
</span>
<br>
<div class="images2"><img src="images/Hofer.png">
<div class="image-footnotes"> Image 1: The original title page to Hofer’s medical dissertation
</div>
</div>
<br>
<br>
<br>
<br>
<div class="images2"><img src="images/Painting.jpg">
<div class="image-footnotes">Image 2: <i>Evening Landscape with an Aqueduct</i> by Théodore Gericault
</div>
</div>
<br>
<p>
Back then, during the time of romanticism, nostalgia emerged from strong national feelings. Today nostalgia is still used in politics. Tradition is sometimes used an as excuse to approve or to sustain something. As an example, we can look at the <i>Zwarte Pieten</i><sup class="footnote-ref" id="fnref:3"><a rel="footnote" href="#fn:3">3</a></sup> discussion. Every year around November/December it is be brought back up again. Proponents of <i>Zwarte Piet</i> argue that it is a tradition and you can’t take that away from them, as if that legitimizes everything. As Boym would say in a very accurate way: “The mix of nostalgia and politics can be explosive,” (Boym, 2007, P.10). In <span class="text-shadow underline">the next chapter</span> I will focus more on this time period.
</p>
<br>
<div class="images2"><img src="images/Kodak.jpg">
<div class="image-footnotes">Image 3: Kodak advertisement from 1903
</div>
</div>
<br>
<br><br>
</div>
<div class="chapterII">
<a id="chapterII" class="chapter-title"><h1>II.<br>CONTEMPORARY NOSTALGIA</h1></a>
<br>
<p> An example of someone who is dealing with restorative nostalgia is earlier mentioned J. Slagboom: he desires to re-construct or relive the ‘rituals of homeland’ in the present. But how does this longing start and what influences it? Like explained in the <span class="text-shadow underline">first chapter</span>, nostalgia was defined for the first time to describe the mental symptoms of Swiss soldiers after hearing certain sounds. Still today sound can raise nostalgic feelings, but in the 21st century there are many big nostalgia influencers that were not around in the 17th century. For example, the camera, the internet and many other technical inventions. Technology is also understood to be the driving force of globalization that began in the 18th century and has continued ever since (Shangquan, 2000, P.3). Both improved technology and globalization have had a big influence on how and how much people feel nostalgic.
</p>
<br>
<a href="intermezzo2.html"><div class="intermezzo2"><img src="images/roseblack.png">
</div></a><br><br><br>
<span>
<p id="chapterII.I" class="subheaders">II.I INTENSE INTERCONNECTEDNESS</p>
</span>
<br>
<br>
<a href="intermezzo3.html"><div class="intermezzo3"><img src="images/roseblack.png">
</div></a><br><br><br>
<span>
<p id="chapterII.II" class="subheaders">II.II HYBRID MEMORY: THE INFLUENCE OF TECHNOLOGY ON THE MIND</p>
</span>
<br>
<p>Like mentioned in <span class="text-shadow underline">the beginning of this chapter</span>, globalisation and improved technology go hand in hand. Technology was once seen as something to bridge modern displacement and distance and provide a miracle cure for nostalgic sadness. On the contrary, technology and nostalgia have become co-dependent. If progress did not cure nostalgia; did it increase it?
</p>
<br>
</div>
<div class="chapterIII">
<a id="chapterIII" class="chapter-title"><h1>III.<br>THE TWO FACES OF NOSTALGIA</h1></a>
<br>
<a href="intermezzo4.html"><div class="intermezzo4"><img src="images/roseblack.png">
</div></a><br><br><br>
<span>
<p id="chapterIII.I" class="subheaders">III.I VIRTUAL REALITY OF CONSCIOUSNESS</p>
</span><br>
<br>
<a href="intermezzo5.html"><div class="intermezzo5"><img src="images/roseblack.png">
</div></a><br><br><br>
<span>
<p id="chapterIII.II" class="subheaders">III.II HISTORY WITHOUT GUILT</p>
</span>
<br>
</div>
<br><br>
<div class="conclusion">
<a id="conclusion" class="chapter-title"><h1>CONCLUSION</h1></a>
<br>
</div>
<br><br>
<div class="bibliography">
<a id="bibliography" class="chapter-title"><h1>BIBLIOGRAPHY</h1></a><br>
<div class="image-footnotes">
<br><br>Tuminas, D. (2019). <i>New exhibition ‘Joint Memory: Photographic Fragments’.</i> Fotodok.org. Retrieved 20 October 2020, from https://www.fotodok.org/en/joint-memory/
</div>
</div>
</div>
<div class="bottom-panel" id="bottom-panel">
<div class="popup-wrapper" id="popup-wrapper"></div>
</div>
<ol>
<li id="fn:1"><p><i>Simon de Wit</i> was a supermarket chain in the Netherlands from 1951 till 1972, when it became part of another Dutch supermarket chain called <i>Albert Heijn</i>. Both <i>Albert Heijn</i> and <i>Simon de Wit</i> originally come from Zaanstad ("Geschiedenis in detail | Albert Heijn", 2020).</p>
</li>
<li id="fn:2"><p>Romanticism is the name of a 19th-century vision of life that is expressed in literature, music and the visual arts ("Romanticism", 2020).</p>
</li>
<li id="fn:3"><p>To celebrate the 5th of December, which is the Dutch St. Nicholas holiday, Dutch people gather for parades in which the saint called<i>Sinterklaas</i> arrives in town to hand out candy and gifts. But these parades have taken on an increasingly political tone because of <i>Sinterklaas</i> his traditional <i>blackface</i> sidekick. In Dutch tradition, <i>Sinterklaas</i> has a “helper” named <i>Zwarte Piet</i>, or <i>Black Pete</i>, who appears as a blackface character with large gold earrings and exaggerated big red lips. The number of Dutch people who are protesting the tradition of <i>Sinterklaas</i> his “helper” is growing (Little, 2020).</p>
</li>
</ol>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="index.js"></script>
<script src="footnotes.js"></script>
<script src="navHandler.js"></script>
</body>
</html>
js:
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
css:
/*
html, body {
overflow-y: scroll;
height:100%;
} */
html, body {
background-color: rgb(233, 233, 233);
overflow-x: hidden;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased !important;
outline: none;
}
::-webkit-scrollbar {
display: none;
}
/* LANDINPAGE */
.container {
width: 100vw;
height: 54vh;
overflow: hidden;
background: rgb(233, 233, 233);
position: fixed;
top: 8px;
left: 0px;
}
.slider {
top: 100em;
position: relative;
box-sizing: border-box;
animation: slider 70s linear infinite;
list-style-type: none;
text-align: center;
}
#keyframes slider {
0% { top: -150em }
100% { top: 0em }
}
.slider {
margin: 0;
padding: 0 1em;
line-height: 6.5em;
}
.slider p {
font-family:'OggR';
font-size: 130px;
color: rgb(183, 118, 218);
}
.container2 {
width: 100vw;
height: 48vh;
overflow: hidden;
background: rgb(233, 233, 233);
/* background: radial-gradient(#e66465, #9198e5); */
position: fixed;
bottom: -8px;
left: 0px;
}
.slider2 {
top: 10em;
bottom:-10em;
position: relative;
box-sizing: border-box;
animation: slider 70s linear infinite;
list-style-type: none;
text-align: center;
animation-direction: reverse;
}
.slider2 {
margin: 0;
padding: 0 1em;
line-height: 5em;
}
.slider2 p {
font-family:'OggR';
font-size: 100px;
color: rgb(251, 155, 114);
}
/* TOC */
.toc{
/* height: 100vh; */
text-align: center;
position:relative;
max-height: 100vh;
}
.toc a{
font-family:'OggR';
/* line-height: 10px; */
font-size:14px;
color: black;
position:relative;
text-align: center;
text-decoration:none;
width: 100vw;
height: 100vh;
max-height: 100vh;
}
/* TEXT */
#font-face {
font-family: 'OggI';
src: url('fonts/Ogg-Italic.otf') format('opentype');
}
#font-face {
font-family: 'OggR';
src: url('fonts/Ogg-Roman.otf') format('opentype');
}
#font-face {
font-family: 'SuisseR';
src: url('fonts/SuisseWorks-Regular.otf') format('opentype');
}
#font-face {
font-family: 'SuisseI';
src: url('fonts/SuisseWorks-RegularItalic.otf') format('opentype');
}
#font-face {
font-family: 'BaskerR';
src: url('fonts/BaskervilleMTStd-Regular.otf') format('opentype');
}
p {
font-family: 'SuisseR';
font-size: 16px;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 9 3 3;
}
i{
line-height: 5px;
text-decoration: none;
font-family: 'OggI';
}
.basker a{
font-family: serif;
}
.rose img{
position: absolute;
height: 20px;
width: 20px;
}
/* UNDERLINE LINKS */
.text-shadow {
text-shadow:
-1.5px -1.5px rgb(233, 233, 233),
-1.5px 1.5px rgb(233, 233, 233),
1.5px -1.5px rgb(233, 233, 233),
1.5px 1.5px rgb(233, 233, 233);
}
.underline a {
font-size: 16px;
font-family: 'SuisseR';
color: black;
background-size: 1px 1em;
box-shadow:
inset 0 -0.180em rgb(233, 233, 233),
inset 0 -0.23em rgb(254, 69, 213);
display: inline;
}
/* .chapter-title h1 {
text-decoration: none;
font-family: 'OggR';
font-weight: 400;
font-size: 23px;
padding-left: 18px;
} */
.chapter-title h1 {
text-decoration: none;
font-family: 'OggR';
font-weight: 400;
font-size: 23px;
padding-left: 18px;
padding-right: 18px;
text-align: center;
/* height: 100vh;
top:50vh; */
}
sup {
font-family: 'OggR', sans-serif;
font-weight: 400;
font-size: 11px;
vertical-align: baseline;
position: relative;
top: -0.4em;
}
/* .chapter-title{
height: 100vh;
} */
.subheaders {
font-family: 'OggR', serif;
font-size: 17px;
padding-left: 18px;
}
.image-footnotes {
font-family: 'SuisseR', serif;
font-size: 15px;
padding-top: 6px;
padding-left: 18px;
padding-right: 18px;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 9 3 3;
}
/* INDENT */
.indent {
font-family: 'OggI';
font-size: 16px;
padding-top: 0px;
padding-left: 18px;
padding-right: 0px;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 9 3 3;
}
/* PAGE HEADER*/
.page-header {
position: fixed;
z-index: 9999;
width: 100%;
height: 40px;
}
.page-middle {
position: fixed;
bottom: 47.5%;
z-index: 9999;
width: 100%;
height: 40px;
}
.page-footer {
position: fixed;
bottom: 0px;
z-index: 9999;
width: 100%;
height: 40px;
}
/* THESIS */
.video-container {
position: relative;
width: 50%;
height: 60px;
/* margin-left: 25%;
margin-right: 25%; */
padding-top: 20px;
overflow: scroll;
z-index: 1;
}
.flex-container {
position: relative;
width: 50%;
margin-left: 25%;
margin-right: 25%;
padding: 20px;
overflow: scroll;
}
.flex-container2 {
position: relative;
width: 50%;
height:100vh;
margin-left: 25%;
margin-right: 25%;
padding: 20px;
}
.abstract {
padding-top: 60px;
}
/* IMAGES */
.images {
padding-top: 25px;
padding-bottom: 25px;
z-index: 1;
}
.images img{
width: 100%;
display: block;
padding-bottom: 10px;
}
.images2 img{
width: 80%;
position: relative;
margin-left: 10%;
margin-right: 10%;
display: block;
padding-bottom: 10px;
}
/* TITLE HEADER */
#title-bar {
font-size: 18px;
position: fixed;
font-family: 'OggR';
color: rgb(147, 37, 207);
text-align: center;
padding-bottom: 1vh;
padding-top: 1vh;
float: right;
width: 100%;
height: 10%;
z-index: 200;
}
#title-bar-grey {
font-size: 18px;
position: fixed;
font-family: 'OggR';
color: rgb(233, 233, 233);
text-align: center;
padding-bottom: 1vh;
padding-top: 1vh;
float: right;
width: 100%;
height: 10%;
z-index: 200;
}
.toggle,
[id^="drop"] {
display: none;
}
nav {
margin: 0;
padding: 0;
float: center;
position: absolute;
z-index: 400;
border: solid 0px;
}
nav ul {
float: center;
position: relative;
width: 100vw;
}
.menu {
background: rgb(233, 233, 233);
background: linear-gradient(
90deg,
rgba(233, 233, 233, 0.9) 40%,
rgb(255, 101, 207) 99%
);
background: -webkit-linear-gradient(
90deg,
rgba(233, 233, 233, 0.9) 40%,
rgb(255, 101, 207) 99%
);
}
nav ul li {
text-align: center;
position: relative;
margin: 0px;
display: left;
}
nav a {
font-family: "OggR";
color: black;
font-size: 14px;
text-decoration: none;
position: relative;
text-align: center;
transition: 0.3s;
}
.toggle + a,
.menu {
display: none;
}
.toggle {
position: fixed;
display: block;
padding: 4px 20px;
color: rgb(233, 233, 233);
font-size: 20px;
text-decoration: none;
width: 20px;
height: 30px;
z-index: 9999999999999999999;
}
/* #drop:checked + .menu {
display: block;
} */
.toggle2 img{
width: 20px;
height: 20px;
position: fixed;
display: block;
top: 10px;
}
[id^=drop]:checked + ul {
display: grid;
height: 100vh;
transform: translateY(0);
}
.toggle2,
[id^=drop2] {
display: none;
}
.menu2{
background: rgb(255, 101, 207);
filter: opacity(40%);
/* filter: blur(50px); */
/* background: linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
background: -webkit-linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%); */
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle2 + a,
.menu2 {
display: none;
}
/* Stylinf the toggle lable */
.toggle2 {
position: fixed;
right: -33px;
display: block;
padding:4px 20px;
color: rgb(233, 233, 233);
font-size:20px;
text-decoration:none;
width: 50px;
height: 30px;
z-index: 9999999999999999999;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop2]:checked + ul {
display: grid;
}
/* INTERMEZZO'S */
.intermezzo1 img{
position: absolute;
width: 30px;
height: auto;
left: 46%;
right: 50%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.intermezzo2 img{
position: absolute;
width: 30px;
height: auto;
left: 46%;
right: 50%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.intermezzo3 img{
position: absolute;
width: 30px;
height: auto;
left: 46%;
right: 50%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.intermezzo4 img{
position: absolute;
width: 30px;
height: auto;
left: 46%;
right: 50%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.intermezzo5 img{
position: absolute;
width: 30px;
height: auto;
left: 46%;
right: 50%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
/* footnote popup */
.footnote-ref a{
color: rgb(254, 69, 213);
}
.bottom-panel {
position: fixed;
font-size: 0.9rem;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
}
.popup-wrapper {
display: none;
max-width: 100%;
margin: 0 auto;
color: black;
background-color: white;
border-top: 1px solid black;
/* background: linear-gradient(90deg, rgb(254, 69, 213) 5%, white 70%);
background: -webkit-linear-gradient(90deg, rgb(254, 69, 213) 5%, white 70%); */
z-index: 5;
}
#popup-index {
padding: 1.25rem 0 0 1.25rem;
z-index: 5;
}
#popup-close {
padding: 1.25rem;
margin-left: auto;
cursor: pointer;
z-index: 5;
}
#popup-content {
min-width: 50%;
text-align: left;
padding: 1.25rem 0 1.25rem 0.9rem;
}
ol{
display: none;
}
.bg-container {
position: fixed;
height: 100%;
width: 100%;
pointer-events: none;
overflow: hidden;
top: 0px;
z-index: 99;
}
.bg-container-bottom {
position: fixed;
height: 100%;
width: 100%;
pointer-events: none;
overflow: hidden;
bottom: 0px;
z-index: 99;
}
.bg-middle-top {
position: fixed;
height: 100%;
width: 100%;
pointer-events: none;
overflow: hidden;
top: 49.5%;
z-index: 99;
}
.bg-middle-bottom {
position: fixed;
height: 100%;
width: 100%;
pointer-events: none;
overflow: hidden;
bottom: 49.5%;
z-index: 99;
}
.bg-left {
height: 100%;
width: 100%;
background: linear-gradient(90deg, rgba(233, 233, 233, 0) 70%, rgb(255, 101, 207) 95%);
background: -webkit-linear-gradient(90deg, rgba(233, 233, 233, 0) 70%, rgb(255, 101, 207) 95%);
float: left;
}
.bg-right {
height: 100%;
width: 100%;
background: linear-gradient(90deg, rgb(255, 101, 207) 5%, rgba(233, 233, 233, 0) 30%);
background: -webkit-linear-gradient(90deg, rgb(255, 101, 207) 5%, rgba(233, 233, 233, 0) 30%);
float: left;
}
.bg-middle-top {
height: 100%;
width: 100%;
background: linear-gradient(90deg, rgba(233, 233, 233, 0) 85%, rgb(255, 101, 207) 99%);
background: -webkit-linear-gradient(90deg, rgba(233, 233, 233, 0) 85%, rgb(255, 101, 207) 99%);
float: left;
}
.bg-middle-bottom {
height: 100%;
width: 100%;
background: linear-gradient(90deg, rgb(255, 101, 207) 1%, rgba(233, 233, 233, 0) 15%);
background: -webkit-linear-gradient(90deg, rgb(255, 101, 207) 1%, rgba(233, 233, 233, 0) 15%);
float: left;
}
/* //////////////////MOBILE VERSION 800 px////////////////// */
#media screen and (max-width: 800px) {
html, body { overflow-x: hidden }
.video-container{
position:relative;
box-sizing: border-box;
width: 100%;
margin-left: 0%;
margin-right: 0%;
padding: 0px;
/* margin-top: 8%; */
}
.flex-container{
position:relative;
box-sizing: border-box;
width: 99%;
margin-left: 0.5%;
margin-right: 0.5%;
/* margin-top: 8%; */
}
.abstract {
padding-top: 3px;
}
p {
font-size: 15px;
}
h1 {
font-size: 20px;
/* text-indent: 13px; */
padding-left: 13px;
line-height: 24px;
}
.chapter-title h1 {
padding-left: 13px;
}
.subheaders {
padding-left: 13px;
line-height: 20px;
}
#title-bar > h1 {
font-size: 14px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-indent: 0px;
}
.image-footnotes {
font-size: 12px;
padding-top: 8px;
padding-left: 16px;
padding-right: 16px;
}
.image-footnotes-italic {
font-size: 12px;
}
}
#media screen and (max-width: 380px) {
html, body { overflow-x: hidden }
#keyframes slider {
0% { top: -140em }
100% { top: 0em }
}
.slider {
line-height: 5.8em;
}
.slider p {
font-size: 115px;
}
.slider2 {
line-height: 4.5em;
}
.slider2 p {
font-size: 85px;
}
}
Try this:
const toggleBtn = document.getElementById("toggle");
const navMenu = document.getElementById("navMenu");
const links = document.getElementsByClassName("navLink");
let navBarOpen = false;
toggleBtn.addEventListener("click", function () {
if (!navBarOpen) {
navMenu.classList.remove("close");
navMenu.classList.add("open");
toggleBtn.classList.remove("close");
toggleBtn.classList.add("open");
navBarOpen = true;
} else if (navBarOpen) {
navMenu.classList.remove("open");
navMenu.classList.add("close");
toggleBtn.classList.remove("open");
toggleBtn.classList.add("close");
navBarOpen = false;
}
});
/* Credit to: Elnatan vazana: https://stackoverflow.com/users/12740967/elnatan-vazana */
for (let i = 0; i < links.length; i++) {
links[i].addEventListener("click", () => {
navMenu.classList.remove("open");
navMenu.classList.add("close");
toggleBtn.classList.remove("open");
toggleBtn.classList.add("close");
navBarOpen = false;
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: block;
transform: translateY(-100%);
transition-duration: 0s;
}
nav.close {
transition-duration: 0.5s;
transform: translateY(-100%);
}
nav.open {
transition-duration: 0.5s;
transform: translateY(0%);
}
.menu {
list-style: none;
background-color: #f8f9fa;
padding: 30px;
}
.menu li {
list-style: none;
padding: 15px 15px;
font-size: 14px;
}
.menu li a {
text-decoration: none;
color: #111111;
transition: opacity 0.3s;
}
.menu li a:hover {
opacity: 0.7;
}
#toggle {
position: absolute;
z-index: 999;
top: 20px;
right: 25px;
background-color: #212529;
border-radius: 50%;
width: 70px;
height: 70px;
color: #f8f9fa;
cursor: pointer;
}
#toggle .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#toggle span {
background-color: #f8f9fa;
width: 30px;
height: 2px;
display: block;
margin: 8px 0px;
}
#toggle.open span {
margin: 0px;
transition-duration: 0.2s;
}
#toggle.open span:nth-child(1) {
transform: rotate(45deg);
}
#toggle.open span:nth-child(2) {
display: none;
}
#toggle.open span:nth-child(3) {
transform: rotate(-45deg);
}
#toggle.close span {
display: block;
margin: 8px 0px;
transition-duration: 0.2s;
transform: rotate(0deg);
}
<div id="toggle">
<div class="icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav id="navMenu">
<ul class="menu" id="menu">
<li><a class="navLink" href="#abstract">ABSTRACT</a></li>
<li><a class="navLink" href="#introduction">INTRODUCTION</a></li>
<li>
<a class="navLink" href="#chapterI"
>I. <br />THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</a
>
</li>
<li>
<a class="navLink" href="#chapterII"
>II. <br />CONTEMPORARY NOSTALGIA</a
>
</li>
<li>
<a class="navLink" href="#chapterIII"
>III. <br />THE TWO FACES OF NOSTALGIA</a
>
</li>
<li><a class="navLink" href="#conclusion">CONCLUSION</a></li>
<li><a class="navLink" href="#bibliography">BIBLIOGRAPHY</a></li>
</ul>
</nav>
If you do not understand any part of the code then feel free to ask me.
Codepen: https://codepen.io/manaskhandelwal1/pen/BaLqbPP
Live Link: https://stackoverflow-sachava.netlify.app/
Related
How to fix the slider to the markers in my five-step slider?
I've done my best to append a CSS version of my wrapper but I am having a lot of trouble with the slider (2nd item in the flex box).
This is a 5 step slider than I am trying to align to its 5 markers, denoted as the years 2017 through to 2021. However, the right hand side is going too far our of bounds each time, and does not line up with the markers themselves. I've tried my best to create a workable version, but this project was allocated to me with no notes and I'm struggling.
My ideal outcome is to have a slider that fits on the markers that requires very little/no responsive design tweaks when moving across displays (1280px, 1920px eg). Just that when you select say, 2019 - the ui handle is actually on that point. Further, when you select 2021 the ui handle doesn't go out of bounds.
The $year variable is read in from an options.inc file as range(2017, 2021) which appends the markers. But there is a disconnect between the slider and the markers.
My solution, if I cannot find better, is to use classes to move the slider depending on the class (first/second/middle) and map that across. But as you can imagine, having CSS overlap JS gives a bit of an awkward animation that I am trying to avoid.
(function($) {
yearSlider: function() {
var $el = $(".timeline-slider");
this.year = +$el.find(".marker:last").text().trim();
$el.slider({
value: +$el.find(".marker:last").text().trim(), // last-slide class added assuming this condition
min: +$el.find(".marker:first").text().trim(),
max: +$el.find(".marker:last").text().trim(),
step: 1,
range: "min",
animate: "fast",
slide: function(event, ui) {
petMapFilters.year = ui.value;
petMap.map.fire("dragend");
sliderPosition($(this), event, ui);
if ($(".results-popup-opener").hasClass("active")) {
petMapResultPopup.init();
}
if ($(".dma-popup").is(":visible")) {
petMapDmaPopup.showLoader();
petMapDmaPopup.init(petMapDmaPopup.targetData);
}
},
});
// Inelegant method.
function sliderPosition(target, event, ui) {
target.removeClass(" first-slide second-slide middle-slide fourth-slide last-slide");
if (ui.value == $el.find(".marker:last").text().trim()) {
target.addClass("last-slide");
}
if (ui.value == $el.find(".marker:nth-child(4)").text().trim()) {
target.addClass("fourth-slide");
}
if (ui.value == $el.find(".marker:nth-child(3)").text().trim()) {
target.addClass("middle-slide");
}
if (ui.value == $el.find(".marker:nth-child(2)").text().trim()) {
target.addClass("second-slide");
}
if (ui.value == $el.find(".marker:first").text().trim()) {
target.addClass("first-slide")
}
}
}
})(jQuery);
html,
legend,
select {
box-sizing: border-box;
}
select,
textarea {
border-radius: 0;
}
*,
::after,
::before {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
background: #fff;
font-family: Lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-weight: 400;
line-height: 1.5;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
select {
width: 100%;
}
.bottom-bar-wrapper .bottom-bar-inner a {
color: inherit;
font-size: 1.5625vw;
}
.bottom-bar-wrapper .bottom-bar-inner a.restart {
color: #000;
font-size: 0.75vw;
}
.bottom-bar-wrapper .bottom-bar-inner .fa {
color: #fc3f31;
font-size: 44px;
}
.bottom-bar-wrapper a.results-popup-opener.no-pointer {
color: #fff;
}
.bottom-bar-inner {
height: 100%;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.nav-links,
.timeline-slider {
padding-right: 0.625rem;
padding-left: 0.625rem;
min-width: 0;
}
.timeline-slider {
width: 100%;
-webkit-flex: 1 1 0px;
-ms-flex: 1 1 0px;
flex: 1 1 0px;
margin-left: 4.65vw;
margin-right: 2vw;
}
.nav-links {
-webkit-flex: 1 1 0px;
-ms-flex: 1 1 0px;
flex: 1 1 0px;
}
.nav-links a {
padding: 0 1.5vw;
height: 17vh;
line-height: 1.25;
background-color: transparent;
}
.nav-links a.active {
background-color: #f1f2f2;
}
.nav-links .nav-text {
position: relative;
white-space: nowrap;
}
.nav-links .nav-text .badge {
width: 1.5625vw;
height: 1.5625vw;
min-width: 0;
padding: 0;
font-size: 0.73015vw;
line-height: 1.65vw;
position: absolute;
right: 0;
top: 0;
-webkit-transform: translate(75%, -75%);
-ms-transform: translate(75%, -75%);
transform: translate(75%, -75%);
}
.restart div {
position: absolute;
top: 100%;
left: 50%;
-webkit-transform: translate(-50%, 10px);
-ms-transform: translate(-50%, 10px);
transform: translate(-50%, 10px);
}
#media only screen and (min-width:1920px) {
#slider {
max-width: 50%;
}
}
.ui-slider .ui-corner-all.ui-slider-handle {
width: 68px;
height: 68px;
top: -26px;
border-radius: 50%;
outline: red;
border: red;
background-color: transparent;
background-repeat: no-repeat;
background-size: cover;
cursor: move;
z-index: 3;
}
.ui-slider.ui-widget.ui-widget-content {
font-family: Lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
background-color: #d0d3d4;
color: #000;
border-radius: 0.375rem;
height: 0.75rem;
border: 0;
padding-left: 12px;
padding-right: 12px;
}
.ui-slider .ui-slider-range {
border-radius: 0.375rem;
}
.marker-container {
margin-top: 36px;
}
.marker {
font-size: 1.04175vw;
font-family: AvenirLTStd-Roman;
}
span {
user-select: none;
}
.first-slide .marker:nth-child(1),
.last-slide .marker:nth-child(5),
.marker.active,
.second-slide .marker:nth-child(2),
.middle-slide .marker:nth-child(3),
.fourth-slide .marker:nth-child(4) {
color: #fc3f31;
font-weight: 700;
}
.marker-text {
position: relative;
}
.marker-text:before {
content: "\A";
background: #8a8d8f;
width: 14px;
height: 14px;
border-radius: 50%;
position: absolute;
top: -37px;
left: 50%;
right: 50%;
z-index: 2;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.csss"></script>
<div id="wrapper" class="bottom-bar-wrapper" style="">
<div class="popups-wrapper">
<a href="#" class="popup-close is-visible hide">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="wrapper" class="bottom-bar-inner align-middle align-justify flex-container">
<a href="#" class="restart">
<img src="/wp-content/themes/poweredbydata/assets/visualisations/pet-map/images/restart.png" alt="restart">
<div>Restart</div>
</a>
<div id="slider" class="timeline-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content middle-slide">
<div class="marker-container flex-container align-justify">
<span class="marker">
<div class="marker-text">2017</div>
</span>
<span class="marker">
<div class="marker-text">2018</div>
</span>
<span class="marker">
<div class="marker-text">2019</div>
</span>
<span class="marker">
<div class="marker-text">2020</div>
</span>
<span class="marker">
<div class="marker-text">2021</div>
</span>
</div>
<div class="ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min" style="width: 50%;"></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 50%;"></span></div>
<div id="buttons" class="nav-links flex-container align-justify avenir-heavy">
<span class="nav-text">X<span class="badge badge-profile">2</span></span>
<span class="nav-text">Y<span class="badge blue badge-conditions hide">2</span></span>
<span class="nav-text">Z</span>
<span class="nav-text">Results</span>
</div>
</div>
</div>
I have been able to come up with a temporary solution that yes, is a bit low quality but I doubt everyone will notice.
What I have done, for the two displays most commonly used, is created a media query that should hopefully handle the disjointed nature of the scroll bar.
#media only screen and (min-width:1920px) {
.first-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
margin-left: 0%;
}
.second-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
margin-left: -2%;
}
.middle-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
margin-left: -4%;
}
.fourth-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
margin-left: -6.25%;
}
.last-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
margin-left: -8.5%;
}
}
#media only screen and (min-width:1280px) {
.first-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
margin-left: 1.5%;
}
.second-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
margin-left: -3.75%;
}
.middle-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
margin-left: -6.25%;
}
.fourth-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
margin-left: -9%;
}
.last-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
margin-left: -11.5%;
}
This is done by eye, and brings the handle over the markers. It is CSS and is easy to install. However, it does not handle all displays unfortunately.
My circular divs get stuck midway flipping when hovering and two of my divs can't get above the bottom div on hover
I am trying to make a responsive and functional diagram that when I hover it flips and shows information.
So I made this Venn diagram with three circular divs on top of each other and when I hover my mouse over one of the divs it enlarges and flips showing information on the other side. What I get is a buggy transformation when hovering. I am not sure how to make the flipping smoother when hovering because right now I need to get my cursor on a specific area so the circle fully flips around and not get stuck. I tried using margin and padding for the ":hover" but that doesn't really work and it would also look too spaced out. Secondly is that when hovering on the top two circular divs they enlarge (like they are supposed to) and go above each other but never above the bottom circular div. I tried using z-index with a huge number but still doesn't make it go above the divs. Also, on javascript how would I make it so that when hovering the other circles have a blur?
It should look something like what I prototyped on figma.
The venn diagram
And here is the HTML, CSS, and Javascript I used to make this version of the venn diagram.(Don't mind how I formatted the information in the paragraph.)
const circles = document.querySelectorAll('.circle');
circles.forEach((circle) => {
circle.addEventListener('mouseover', () => {
removeActiveClasses();
circle.classList.add('circleactive');
});
});
function removeActiveClasses() {
circles.forEach((circle) => {
circle.classList.remove('circleactive');
});
}
#ven_diagram {
display: flex;
flex-direction: column;
width: 100%;
height: 355px;
margin-left: auto;
margin-right: auto;
}
#top {
width: 100%;
transform: translateX(0%) translateY(10%);
display: flex;
flex-direction: row;
justify-content: center;
}
#bottom {
width: 100%;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
position: relative;
bottom: 24%;
/*transform: translateX(0%) translateY(-40%);*/
}
.circle {
width: 220px;
height: 220px;
cursor: pointer;
box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.circleactive {
width: 260px;
height: 260px;
z-index: 900;
transition: 1s ease-in;
}
.circletitle {
position: relative;
z-index: 999;
text-align: center;
font-family: Roboto;
font-style: normal;
font-weight: 900;
font-size: 24px;
line-height: 28px;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 1);
text-shadow: 5px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
}
#circle1 {
background: rgba(33, 218, 223, 1);
transform: translateX(25%) translateY(0%);
transform-style: preserve-3d;
transition: transform 1s ease-in;
}
#circle1:hover {
transform: rotateY(180deg);
}
.circle .side {
backface-visibility: hidden;
border-radius: 6px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.side .circle3p {
transform: rotateY(180deg);
display: flex;
justify-content: space-around;
}
#circle2 {
background: rgba(95, 216, 21, .78);
transform: translateX(-25%) translateY(0%);
transform-style: preserve-3d;
transition: transform 1s ease-in;
}
#circle2:hover {
transform: rotateY(180deg);
}
#circle3 {
background: rgba(253, 45, 45, .8);
transform: translateX(0%) translateY(-10%);
transform-style: preserve-3d;
transition: transform 1s ease-in;
}
#circle3:hover {
transform: rotateY(180deg);
}
#circle1 span {
margin-right: 50%;
font-weight: 500;
font-size: 24px;
letter-spacing: 0.1em;
color: #FFFFFF;
text-shadow: 2px 2px 4px rgba(184, 184, 184, 0.70);
backdrop-filter: blur(4px);
}
#circle2 span {
margin-left: 50%;
font-weight: 500;
font-size: 24px;
letter-spacing: 0.1em;
color: #FFFFFF;
text-shadow: 2px 2px 4px rgba(184, 184, 184, 0.70);
backdrop-filter: blur(4px);
}
#circle3 span {
font-weight: 500;
font-size: 24px;
letter-spacing: 0.1em;
color: #FFFFFF;
text-shadow: 2px 2px 4px rgba(184, 184, 184, 0.70);
backdrop-filter: blur(4px);
}
#circle1p {
display: none;
}
#circle2p {
display: none;
}
#circle3p {
display: none;
}
#section1 {
height: 100vh;
}
#section1 h1 {
color: black;
}
<section id="section1" class="section">
<div id="ven_diagram">
<div id="top" class="absol">
<div id="circle1" class="circle side" onmouseleave="removeActiveClasses();"><span>Mind</span>
<p class="side circle3p">has to do with how a person thinks, feels and acts as he or she copes with life. A person with good emotional health can feel, express and respond to a wide range of emotions in healthy ways and form healthy relationships with others</p>
</div>
<div id="circle2" class="circle side" onmouseleave="removeActiveClasses();"><span>Social</span>
<p class="side circle3p">has to do with your relationships with others. People with good social health can connect with and contribute to family, friends, and the wider community</p>
</div>
</div>
<div id="bottom" class="absol">
<span class="circletitle">Mental Health</span>
<div id="circle3" class="circle side" onmouseleave="removeActiveClasses();"><span>Spiritual</span>
<p class="side circle3p">has to do with how you find meaning and purpose in your life. People with good spiritual health have a sense of something bigger than themselves and their own day-to-day lives</p>
</div>
</div>
<p>Mental wellness according to the World Health Organization, is defined as “a state of well-being in which the individual realizes his or her own abilities, can cope with the normal stresses of life, can work productively and fruitfully, and is able
to make a contribution to his or her community.”</p>
</div>
</section>
There are problems with the flipping of circles, things moving incorrectly and a requirement that a hovered circle appears above the others.
A further problem, though scarcely visible, is that making an element have an opacity less than 1 means that everything within it also has opacity less than 1 - so in this case the titles of two of the circles were fainter. We get round this by putting the background color on a before pseudo element so we can set its opacity independently.
Also, the blur made text blur, and the code did not make the text fill the circles.
This snippet attempts to get round these problems - the main change is that positioning is done absolute and without the separate top and bottom divs. The three circle elements are drawn within the ven_diagram element which is 'shrunk' so that they overlap.
CSS variables are used to define some dimensions so they should be easy to change and almost everything is done in terms of vmin to make the diagram responsive (including font-size) though you could substitute px if responsiveness at this level is not required.
An alteration had to be made to the sensing of mouse movements as there are overlapping elements, so one element's mouseover could be another element's mouseout. mouseleave/enter are used instead and the active circle only made inactive if the mouse leaves it, not a neighbouring circle.
The blurring of other circles when one is hovered over has not been implemented. Instead the background color has been made opacity 1 to put the text on a clearer background.
More 'tidying up' is probably possible, but hopefully this will help start on the process:
const diagram = document.querySelector('#ven_diagram');
const circles = document.querySelectorAll('.circle');
circles.forEach((circle) => {
circle.addEventListener('mouseenter', () => {
removeActiveClasses();
circle.classList.add('circleactive');
diagram.classList.add('isactive');
});
});
function removeActiveClasses() {
circles.forEach((circle) => {
circle.classList.remove('circleactive');
});
diagram.classList.remove('isactive');
}
* {
margin: 0;
padding: 0;
}
#ven_diagram {
--unit: 1vmin;
--cw: 40;/* diameter of each circle in var(--unit) units */
--overlap: 0.333; /* the venn diagram will be reduced by this much of cw (so as to get overlap) */
position: relative;
width: calc(((2 * var(--cw)) - (var(--cw) * var(--overlap) )) * var(--unit));
height: calc(((2 * var(--cw)) - (var(--cw) * var(--overlap) )) * var(--unit));
font-size: calc(( var(--cw) * var(--overlap) * 2 * var(--unit)) / 7.5);
margin: 10vh auto;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
width: calc(var(--cw) * var(--unit));
height: calc(var(--cw) * var(--unit));
cursor: pointer;
box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 50%;
transform-style: preserve-3d;
position: absolute;
perspective: 100px;
transition: transform 1s ease-in;
display: inline-block;
display: flex;
justify-content: center;
align-items: center;
}
.circleactive {
transform: scale(1.2) rotateY(180deg);
opacity: 1;
z-index: 900;
}
.circleactive .text {
opacity: 1;
}
.circletitle {
position: relative;
z-index: 999;
text-align: center;
font-family: Roboto;
font-style: normal;
font-weight: 900;
line-height: 3.8vmin;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 1);
text-shadow: 5px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.isactive .circletitle {
opacity: 0;
}
.circle1 {
--bg: rgb(33, 218, 223);
--opacity: 1;
top: 0;
left: 0;
}
.circle2 {
--bg: rgb(95, 216, 21);
--opacity: 0.78;
top: 0;
right: 0;
}
.circle3 {
--bg: rgb(253, 45, 45);
--opacity: 0.8;
bottom: 0;
left: calc(50% - ((var(--cw) / 2) * var(--unit)));
}
.circle::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--bg);
opacity: var(--opacity);
}
.circle.circleactive::before {
--opacity: 1;
}
.circle .side {
backface-visibility: hidden;
border-radius: 6px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.circle span {
font-weight: 500;
letter-spacing: 0.1em;
color: #FFFFFF;
text-shadow: 2px 2px 4px rgba(184, 184, 184, 0.70);
rbackdrop-filter: blur(4px);
position: absolute;
opacity: 1;
}
.circleactive span {
opacity: 0;
}
.circle1 span {
margin-right: 50%;
}
.circle2 span {
margin-left: 50%;
}
#section1 {
height: 100vh;
}
#section1 h1 {
color: black;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
/* ideas for fitting text in a circle taken from https://css-tricks.com/using-css-to-set-text-inside-a-circle/#:~:text=1%20First%20up%2C%20the%20HTML.%20We%E2%80%99re%20going%20to,outcome%2C%20and%20human%20engagement%20as%20an%20explicit%20 */
.quote-wrapper {
position: relative;
margin: 0 auto 0;
}
.text {
width: 100%;
height: 100%;
position: relative;
margin: 0;
}
.text p {
height: 100%;
font-size: 21px;
font-size: 14px;
line-height: 1.2;
padding: 0;
text-align: center;
text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}
.text::before {
content: "";
width: 50%;
height: 100%;
float: left;
shape-outside: polygon(
0 0,
98% 0,
50% 6%,
23.4% 17.3%,
6% 32.6%,
0 50%,
6% 65.6%,
23.4% 82.7%,
50% 94%,
98% 100%,
0 100%
);
shape-margin: 7%;
}
.text p::before {
content: "";
width: 50%;
height: 100%;
float: right;
shape-outside: polygon(
2% 0%,
100% 0%,
100% 100%,
2% 100%,
50% 94%,
76.6% 82.7%,
94% 65.6%,
100% 50%,
94% 32.6%,
76.6% 17.3%,
50% 6%
);
shape-margin: 7%;
}
.quote-wrapper {
margin-top:0;
width: 100%;
height: 100%;
transform: rotateY(180deg);
}
.text p {
font-size: calc((var(--cw) * var(--unit) / 16));
}
.text {
opacity: 0; /* Firefox needs this Chrome/Edge do not */
}
section > p {
width: 80%;
text-align: center;
margin: 0 auto;
}
<section id="section1" class="section">
<div id="ven_diagram">
<span class="circletitle">Mental Health</span>
<div class="circle circle1 side" onmouseleave="if (this.classList.contains('circleactive')) removeActiveClasses();"><span>Mind</span>
<div class="quote-wrapper" style="transform: rrotateY(180deg);">
<div class="text">
<p>has to do with how a person thinks, feels and acts as he or she copes with life. A person with good emotional health can feel, express and respond to a wide range of emotions in healthy ways and form healthy relationships with others</p>
</div>
</div>
</div>
<div class="circle circle2 side" onmouseleave="if (this.classList.contains('circleactive')) removeActiveClasses();"><span>Social</span>
<div class="quote-wrapper" style="transform: rrotateY(180deg);">
<div class="text">
<p>has to do with your relationships with others. People with good social health can connect with and contribute to family, friends, and the wider community</p>
</div>
</div>
</div>
<div class="circle circle3 side" onmouseleave="if (this.classList.contains('circleactive')) removeActiveClasses();"><span>Spiritual</span>
<div class="quote-wrapper" style="transform: rrotateY(180deg);">
<div class="text">
<p>has to do with how you find meaning and purpose in your life. People with good spiritual health have a sense of something bigger than themselves and their own day-to-day lives</p>
</div>
</div>
</div>
</div>
<p>Mental wellness according to the World Health Organization, is defined as “a state of well-being in which the individual realizes his or her own abilities, can cope with the normal stresses of life, can work productively and fruitfully, and is able
to make a contribution to his or her community.”</p>
</section>
Waypoints not working properly with my sidenav
I'm attempting to make a side nav on my site which adds the "active" class to it's four buttons but I cannot seem to make it work properly.
I've successfully added waypoints to the code but they always seem to be a little off and it takes a bit of extra scrolling from the user to activate the waypoint. I've also tried to follow the {offset} rules in the documentation but to no veil. They either stop working properly from last to first or they stop doing so from first to last.
In order to make the sidenav work, I've split the page in columns, as shown in the CSS below. Feel free to provide insight on the code, as this is a learning exercise and I KNOW my code is pretty dirty at the moment (particularly Javascript)
The side nav:
<div class="sidebar verticalized" id="sidebar-verticalized">
<ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
<li class="side-link">
<a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
</li>
<li class="side-link">
02
</li>
<li class="side-link">
03
</li>
<li class="side-link">
04
</li>
</ul>
</div>
The CSS:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}
my mess of JS (each section is declared below):
var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');
$section1.waypoint(function (){
$link1.addClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section2.waypoint(function(){
$link1.removeClass('active');
$link2.addClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section3.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.addClass('active');
$link4.removeClass('active');
});
$section4.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.addClass('active');
});
What I've tried so far:
Offset: bottom-in-view (sections are sometimes too large and therefore the old active element remains)
Offset: +/- x% (This fixes the issue from one end but not the other one: I could be going from 1 to 4 on links and it works, but 4 to 1 is broken and vice versa)
Any and all advice/tips are welcome. I'm trying to imitate the bootstrap navbar behaviour with active items for each section.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>`enter code here`
My JQuery is not working on Chrome, sometimes works on firefox and then stops
when I click on the menu Icon, sometimes it works but after refreshing 3 or 4 times it stops. not working in Chrome at all. am i missing something. Please help.
$(function () {
const menu = $(".fa-3x");
const list = $(".show");
const main = $("#firstpage");
const last = $("#secondpage");
menu.on("click", _=> {
$(".show").toggleClass("hide");
});
});
Mock-up Site here - codepen
The query selector is wrong. $(".show").toggleClass("hide");
It could be better to use #menulinks to access related lu element.
$("#menulinks").on("click", _=> {
$("#menulinks ul").toggleClass("hide");
});
Demo
/* jshint esversion:6 */
/* global $ */
$(function () {
$("#menulinks").on("click", _=> {
$("#menulinks ul").toggleClass("hide");
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* makes the image fill entire screen*/
}
.name,
.scroller {
position: absolute;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
/* makes text in perfect mid*/
}
h1 {
font-family: "Inconsolata", monospace;
text-transform: uppercase;
}
.name {
top: 45%;
}
.show {
width: 130px;
background: rgba(3, 4, 32, 0.54);
position: relative;
left: 43px;
visibility: visible;
opacity: 1;
z-index: 4;
transition: 0.3s;
}
.fa-3x:hover,
#arrow:hover {
cursor: pointer;
opacity: 0.75;
}
.hidden li:hover a,
.name,
a:hover {
background: linear-gradient(to right, #215AF6, #F2359D);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: none;
}
.info {
font-size: 350%;
padding: 0;
margin-bottom: 20px;
letter-spacing: 5px;
}
.description {
letter-spacing: 4px;
word-spacing: 5px;
}
header {
background: linear-gradient(rgba(17, 20, 42, 0.95), rgba(17, 20, 42, 0.95)), url("https://images.pexels.com/photos/399636/pexels-photo-399636.jpeg?w=940&h=650&auto=compress&cs=tinysrgb") center;
background-attachment: fixed;
background-size: cover;
text-transform: uppercase;
height: 100vh;
color: white;
}
#secondpage {
background-size: cover;
height: 100vh;
}
div.scroller {
position: absolute;
top: 95%;
left: 50%;
}
.scrolltext {
font-size: 10px;
letter-spacing: 3px;
padding-top: 0;
}
.material-icons.md-100 {
font-size: 100px;
margin-top: -20px;
}
#menulinks {
text-align: left;
padding: 20px;
}
nav p {
font-size: 65%;
letter-spacing: 4px;
}
li a {
text-decoration: none;
color: white;
padding-left: 10px;
font-size: 90%;
}
ul {
list-style: none;
}
li {
padding: 5px;
}
.hide {
opacity: 0;
visibility: hidden;
}
.show li:hover {
background: rgba(3, 4, 32, 1);
padding-left: 12px;
transition: 0.3s;
}
.dp {
max-width: 400px;
max-height: 200px;
filter: grayscale(100%);
}
#bottom {
max-height: 110px;
max-width: 350px;
overflow: hidden;
margin: 0 auto;
margin-top: 230px;
margin-bottom: 50px;
text-align: center;
}
#summary,
#greeting {
max-width: 400px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
}
#greeting {
letter-spacing: 10px;
word-spacing: 10px;
}
#summarytext,
#span {
line-height: 150%;
font-size: 20px;
}
#span {
margin-top: 30px;
}
.fa-2x {
opacity: 0.1;
}
<html lang="en">
<head>
<title>Brian Profile</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header id="firstpage">
<nav id="menulinks">
<i class="fas fa-align-justify fa-3x"></i>
<p>menu</p>
<ul class="hide">
<li id="firstopt">About</li>
<li id="secondopt">Experience</li>
<li id="thirdopt">Portfolio</li>
<li id="fourthopt">Contact</li>
</ul>
</nav>
<div class="name">
<h1 class="info">Hello, I'm Brian</h1>
<p class="description">an aspiring web developer</p>
</div>
<div class="scroller">
<p class="scrolltext"> SCROLL DOWN</p>
<i class="material-icons md-100" id="arrow">expand_more</i>
</div>
</header>
<footer id="secondpage">
<div id="bottom">
<p>
<img src="https://dl.dropbox.com/s/3c0xlv56hhb1ed7/2013-07-20%2021.58.43.jpg?=raw1" alt="InstaPic" class="dp"></p>
</div>
<div id="greeting">
<span>HI THERE</span>
<p><i class="far fa-window-minimize fa-2x"></i></p>
</div>
<div id="summary">
<p id="summarytext">
I am a web developer based in London. With a growing Portfolio that is constantly updated, I have a passion for all things 'web'.</p>
<p id="span"><span>For more information visit my Blog.</span>
</p>
</div>
</footer>
<script src="scripts.js"></script>
</body>
</html>
I can't get my content to overlay background image
Here's my html and css code. My strategy seemed to work well with the 1st background image, but when I got to the 2nd background image, it no longer worked. I created a stage outside the main content area set the position to relative then a wrapper to include my 2 backgrounds with their position to absolute so I can manually position it. However, once I get to the benefits-section div, it acts like this part is no longer contained in the content-wrapper div. Can anyone spot my problem? I also included an image of what the the website actually looks like completed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Garcinia Cambogia</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="stage">
<div class="bg-wrapper">
<img src='img/flower-background.jpg' id="bg" atl="flower background">
<img src="img/middle-background.jpg" id="bg2" alt="benefits-section background">
</div>
<div class="content-wrapper">
<nav>
<h1>Produce</h1>
<ul>
<li>Home</li>
<li>About the Product</li>
<li>Benefits</li>
<li>Testimonals</li>
<li>Buy</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
<div class="copy">
<h2>Increase your <br> energy level with <br> <span>Garcinia Cambogia</span></h2>
<img src="img/product.png" alt="Main Product">
<div class="opt-in">
<h2>Try it Out</h2>
<form>
<input type="text" value="Your Name*">
<input type="text" value="Your Email*">
</form>
<div class="order-btn">
<h2>Order Now</h2>
</div>
</div><!-- end of opt-in -->
</div><!-- end of copy -->
<div class="promo-section">
<h1> About Garcinia Cambogia </h1>
<h2> Reduce food intake and promote <span>weight loss fast</span>!</h2>
<p>Effective thermogenic supplements are those that contain key ingredients that create a fat burning 'thermogenic'
environment by working together and in synergy. Some of these ingredients also aid
in reducing appetite and spiking an increase in short-term energy. Dosage of Garcinia cambogia, beginning
from 750 mg to 1,500 mg, takes 2-3 times in individual dose before meals.
</p>
<h2> Other <span>Related</span> Products</h2>
<ul>
<div class="hover08">
<div class="img-wrapper">
<li><img src="img/Rasberry-product.png" alt="Rasberry Product"><a class="search" id="search1" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
<div class="img-wrapper">
<li><img src="img/Garcinia-Cambogia.png" alt="Garcinia"><a class="search" id="search2" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
<div class="img-wrapper">
<li id="mango-ketone"><img src="img/Mango-Ketone.png" alt="Mango Product"><a class="search" id="search3" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
</ul>
</div><!-- end of hover08 -->
</div><!-- end of promo-section -->
<div class="benefits-section clear">
<h1> What are the benefits </h1>
<h2> Obesity is an imbalance between fat intake and energy expenditure.
Now day obesity is a problem of health and mind in many people.</h2>
<p>The rush hours working lifestyle make many people take junk food and fast food more than nutritionists.
The important factor is Generic, it is found that one obese patient has a 40% chance of obesity and both
obese patients have 80% chance of obesity. The chronic diseases that are developed from obesity are
diabetes, high blood pressure, stroke, heart attack, cancer, gout and sleep apnea. So control the weight
is the best way to void health problem.
Control the body weight helps you against the chronic diseases and make good looking. There are many
ways to reduce and control the weight. Using weight control products is not the best way, especially use
potential dangerous diet products without consult from the doctors or the pharmacists. Balance the energy
expenditure and fat intake is an important point. If you eat more you have to exercise more. Other ways
are break bad habits such as alcohol intake, watching T.V. during eating, or ignore vegetables. You have
to realize how much the fat in each menu and should the low cholesterol with high nutrition.</p>
</div>
</div><!-- end of content-wrapper -->
</div><!-- end of stage -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>
#font-face { font-family: 'Lucida Sans Demibold Roman'; src: url('../fonts/Lucida Sans Demibold Roman.ttf'); }
#font-face { font-family: 'Arizonia-Regular'; src: url('../fonts/Arizonia-Regular.ttf'); }.stage { position: relative; max-height: 100%; max-width: 100%; }
.content-wrapper { width: 960px; margin: 0 auto; position: relative; z-index: 2; }
.bg-wrapper { position: absolute; z-index: 1; left: 0; top: 0; min-width: 100% }
#bg { position: relative; top: 0; left:0; min-width: 100%; max-height: 760px; }
#bg2 { position: relative; top: 500px; left: 0; min-width: 100%; max-height: 702px; }
nav h1 { font-size: 69px; font-family: 'Arizonia-Regular'; letter-spacing: 0; text-align: center; color: #e0bd67; margin-bottom: 15px; margin-top: 15px; }
nav ul { list-style-type: none; padding: 0; margin: 0; background-color: #c29f4d; box-shadow: 5px 5px 1px #808279; height: 50px; width: 100%; float: left; margin-bottom: 95px; }
nav ul li { display: inline; padding-right: 40px; padding: 16px 40px 16px 0; margin-top: 0; float: left;}
nav li:first-child { padding-left: 113.04px; }
nav li:last-child { padding-right: 113.04px; }
nav a { text-decoration: none; color: #fff; font-family: 'Lucida Sans Demibold Roman'; font-size: 16px; }
.copy { float: left; }
.copy h2 { font-family: 'Open Sans'; font-size: 34px; color: #fff; font-weight: bold; float: right; text-transform: uppercase; line-height: 34px; margin-bottom: 35px; margin-top: 0;}
.copy img { float: left; margin-top: 55px; }
.copy span { color: #ffd062; }
.opt-in { background-color: #d1aa50; width: 378px; height: 299px; float: right; margin-bottom: 78px; }
.opt-in h2 {float: left; width: 301px; text-align: center; margin: 15px 38.5px; padding-bottom: 20px; border-bottom: 2px solid #fff; }
.opt-in input { width: 296px; height: 40px; background-color: #ecdcb7; margin: 7px 38.5px; padding-left: 5px; }
.order-btn h2 { border-bottom: none; }
.promo-section { float: left; }
.promo-section h1 { font-family: 'Open Sans'; font-size: 36px; text-transform: uppercase; color: #c29f4d; text-align: center; border-bottom: 2px solid #c29f4d; width: 795px; margin: 90px 82.5px 30px 82.5px; padding-bottom: 5px; }
.promo-section h2 { text-align: center; font-size: 26px; color: #8e8e8e; }
.promo-section h2 span { color: #c29f4d; }
.promo-section p { text-align: center; color: #8e8e8e; font-family: 'Open Sans'; font-size: 16px; }
.promo-section ul { list-style-type: none; margin-top: 30px; padding: 0; }
.promo-section ul div li { display: inline; float: left; margin-right: 109.5px }
#mango-ketone { margin-right: 0;}
.img-wrapper { position: relative; float: left; }
.hover08 li img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.hover08 li:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); }
.hover08 a.search { position: absolute; top: 0px; right: 0px; opacity: 0; background-color: transparent; filter: alpha(opacity=0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#search1 { top:71px; right: 200px;}
#search2 { top: 92px; right: 190px; }
#search3 { top: 67px; right: 100px; }
.hover08 li:hover a.search { opacity: 1; -webkit-transition-delay: .2s; transition-delay: .2s;}
.benefits-section { margin-top: 30px; float: left; }
.benefits-section h1 { color: #fff;}
.clear { clear: both; }