Hi guys I'm having a bit of trouble using swiper js slides. This is the link of my website having swiper js slider:
https://nyside2.internet.dk/
As you can see in the start the swiper js slider is showing a few parts from the next slide. This is a very big concern for me. Because I want only one slider per view also when I click on the next or previous button I'm having half part of the previous slider and half part of the next slider at the same time. Again this isn't what I want I want only one slide after clicking the next or previous button.
You can see the code below that I'm using:
<HTML>
<head>
<style>
HTML,body
{position: relative;
height: 100%;
}
body{
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
#Slider .swiper-container {
width: auto;
height: 100%;
}
#Slider .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}
/* reset list */
#Slider ul.swiper-wrapper{
list-style-type: none;
padding: 0px;
margin: 0px;
}
#Slider h2{
flex-basis: 100%;
}
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
top: 45%;
background: none;
color: #FFFFFF;
opacity: 0;
}
#Slider .swiper-container:hover .swiper-button-prev{
opacity: 1.0;
animation-duration: 1s;
animation-iteration-count: 1;
margin-left: 30px;
animation-name: PreviousSlider;
}
u/keyframes PreviousSlider{
0%{
opacity: 1;
}
100%{
opacity: 1;
transform: translate(30px, 0px);
}
}
#Slider .swiper-container:hover .swiper-button-next{
opacity: 1.0;
animation-duration: 1s;
animation-iteration-count: 1;
margin-right: 30px;
animation-name: NextSlider;
}
u/keyframes NextSlider{
0%{
opacity: 1;}
100%{
opacity: 1;
transform: translate(-30px, 0px);}
}
#Slider .h2--small .heading-line--0{
position: absolute;
display: block;
top: 50%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 60px;
font-weight: 200;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .h2--small .heading-line--1{
position: absolute;
display: block;
top: 58%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 60px;
font-weight: 500;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .content_subtitle{
position: absolute;
display: block;
top: 68%;
margin-left: 20px;
z-index: 9;
font-family: futura-pt;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 579px;
height: 87px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 29px;
letter-spacing: 0px;
font-weight: 400;
font-size: 24px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .button--inline{
position: absolute;
display: block;
top: 77%;
margin-left: 20px;
z-index: 8;
background-color: rgba(0, 0, 0, 0);
font-family: "News Cycle";
text-transform: uppercase;
height: auto;
width: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: nowrap;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 23px;
letter-spacing: 2px;
font-weight: 700;
font-size: 20px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
border-width: 0px;
border-radius: 0px;
}
#Slider .button--inline .b8{
color: #EF8524;
}
#Slider .fa-long-arrow-alt-right:before{
color: #EF8524;
text-align: left;
letter-spacing: 0px;
font-weight: 400;
}
#Slider .video-overlay{
margin-top: -759px;
width: 100%;
height: 750px;
position: relative;
display: flex;
background: black;
opacity: 0.5;
}
/* Extra small devices (phones, 600px and down) */
u/media only screen and (max-width: 600px) and (min-width: 360px){
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
display: none;
}
#Slider .h2--small .heading-line--0{
position: absolute;
display: block;
top: 22%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 25px;
font-weight: 200;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .h2--small .heading-line--1{
position: absolute;
display: block;
top: 33%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 25px;
font-weight: 500;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .content_subtitle{
position: absolute;
display: block;
top: 53%;
margin-left: 20px;
z-index: 9;
font-family: futura-pt;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 320px;
height: 87px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 25px;
letter-spacing: 0px;
font-weight: 400;
font-size: 18px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .button--inline{
position: absolute;
display: block;
top: 84%;
margin-left: 20px;
z-index: 8;
background-color: rgba(0, 0, 0, 0);
font-family: "News Cycle";
text-transform: uppercase;
height: auto;
width: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: nowrap;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 23px;
letter-spacing: 2px;
font-weight: 700;
font-size: 18px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
border-width: 0px;
border-radius: 0px;
}
}
/***********
/* Small devices (portrait tablets and large phones, 600px and up) */
u/media only screen and (max-width: 768px) and (min-width: 600px){
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
top: 35%;
background: none;
color: #FFFFFF;
opacity: 0;
}
#Slider .h2--small .heading-line--0{
position: absolute;
display: block;
top: 40%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 50px;
font-weight: 200;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .h2--small .heading-line--1{
position: absolute;
display: block;
top: 53%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 50px;
font-weight: 500;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .content_subtitle{
position: absolute;
display: block;
top: 68%;
margin-left: 20px;
z-index: 9;
font-family: futura-pt;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 579px;
height: 87px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 29px;
letter-spacing: 0px;
font-weight: 400;
font-size: 24px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .button--inline{
position: absolute;
display: block;
top: 85%;
margin-left: 20px;
z-index: 8;
background-color: rgba(0, 0, 0, 0);
font-family: "News Cycle";
text-transform: uppercase;
height: auto;
width: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: nowrap;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 23px;
letter-spacing: 2px;
font-weight: 700;
font-size: 20px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
border-width: 0px;
border-radius: 0px;
}
#Slider .button--inline .b8{
color: #EF8524;
}
}
/* For tablet devices 768px to 992px */
u/media only screen and (max-width: 992px) and (min-width: 768px){
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
top: 38%;
background: none;
color: #FFFFFF;
opacity: 0;
}
#Slider .h2--small .heading-line--0{
position: absolute;
display: block;
top: 45%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 60px;
font-weight: 200;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .h2--small .heading-line--1{
position: absolute;
display: block;
top: 58%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 60px;
font-weight: 500;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .content_subtitle{
position: absolute;
display: block;
top: 72%;
margin-left: 20px;
z-index: 9;
font-family: futura-pt;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 579px;
height: 87px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 29px;
letter-spacing: 0px;
font-weight: 400;
font-size: 24px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
.button--inline{
position: absolute;
display: block;
top: 85%;
margin-left: 20px;
z-index: 8;
background-color: rgba(0, 0, 0, 0);
font-family: "News Cycle";
text-transform: uppercase;
height: auto;
width: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: nowrap;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 23px;
letter-spacing: 2px;
font-weight: 700;
font-size: 20px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
border-width: 0px;
border-radius: 0px;
}
.button--inline .b8{
color: #EF8524;
}
}
/* Large devices (laptops/desktops, 992px and up) */
u/media only screen and (max-width: 1200px) and (min-width: 992px) {
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
top: 45%;
background: none;
color: #FFFFFF;
opacity: 0;
}
#Slider .h2--small .heading-line--0{
position: absolute;
display: block;
top: 50%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 60px;
font-weight: 200;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .h2--small .heading-line--1{
position: absolute;
display: block;
top: 58%;
margin-left: 20px;
z-index: 11;
font-family: futura-pt;
font-style: Regular;
text-transform: uppercase;
height: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 894px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 75px;
letter-spacing: normal;
font-size: 60px;
font-weight: 500;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .content_subtitle{
position: absolute;
display: block;
top: 68%;
margin-left: 20px;
z-index: 9;
font-family: futura-pt;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: normal;
width: 579px;
height: 87px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 29px;
letter-spacing: 0px;
font-weight: 400;
font-size: 24px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
}
#Slider .button--inline{
position: absolute;
display: block;
top: 77%;
margin-left: 20px;
z-index: 8;
background-color: rgba(0, 0, 0, 0);
font-family: "News Cycle";
text-transform: uppercase;
height: auto;
width: auto;
color: rgb(255, 255, 255);
text-decoration: none;
white-space: nowrap;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: left;
line-height: 23px;
letter-spacing: 2px;
font-weight: 700;
font-size: 20px;
transform-origin: 50% 50%;
opacity: 1;
transform: translate(0px, 0px);
visibility: visible;
border-width: 0px;
border-radius: 0px;
}
#Slider .button--inline .b8{
color: #EF8524;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://unpkg.com/swiper#8.0.7/swiper-bundle.min.css">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<ul class="swiper-wrapper">
<!-- Slides -->
<li class="swiper-slide">
<div>
<video
source src="//nyside2.internet.dk/wp-content/uploads/2022/03/moviefront720.mp4" type="video/mp4" lazyload="//nyside2.internet.dk/wp-content/uploads/2022/03/moviefront720.mp4" ></video>
<div class="video-overlay"> </div>
<h2 class="h2 content-copy__title h2--small"><span class="heading-line heading-line--0">Forretningsorienteret</span>
<span>
<strong class="heading-line heading-line--1">
bureau
</strong>
</span>
</h2>
<div class="b2 b2--spread content_subtitle">
<p>
Stærkt team med fokus på strategi og kreativitet der engagere og aktiver mennesker på deres kunderejse
</p>
</div>
<div class="button hero-content-cta z4 button--inline">
<a href="https://nyside2.internet.dk/?page_id=37">
<span class="b8 z2">
Se hvordan vi gør
</span>
<i class="fas fa-long-arrow-alt-right">
</i>
</a>
</div>
</div>
</li>
<li class="swiper-slide">
<div>
<video source src="//nyside2.internet.dk/wp-content/uploads/2022/03/Frontmovie2_720.mp4" type="video/mp4" lazyload="//nyside2.internet.dk/wp-content/uploads/2022/03/Frontmovie2_720.mp4"></video>
<div class="video-overlay"></div>
<h2 class="h2 content-copy__title h2--small"><span class="heading-line heading-line--0">Fra kr. 2.980,- / mdr.</span>
<span>
<strong class="heading-line heading-line--1">
Den fulde løsning
</strong>
</span>
</h2>
<div class="b2 b2--spread content_subtitle">
<p>
Nyt kreativt webdesign, der løfter din virksomhed og øger effekten af din indsats
</p>
</div>
<div class="button hero-content-cta z4 button--inline">
<a href="https://nyside2.internet.dk/about/">
<span class="b8 z2">
Interesseret - så klik
</span>
<i class="fas fa-long-arrow-alt-right">
</i>
</a>
</div>
</div>
</li>
</ul>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper#8.0.7/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 1,
centeredSlides: true,
autoplay: {
delay: 5000,
autoplayDisableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
/* ON INIT AUTOPLAY THE FIRST VIDEO */
on: {
init: function () {
console.log('swiper initialized');
var currentVideo = $("[data-swiper-slide-index=" + this.realIndex + "]").find("video");
currentVideo.trigger('play');
},
},
});
/* GET ALL VIDEOS */
var sliderVideos = $(".swiper-slide video");
/* SWIPER API - Event will be fired after animation to other slide (next or previous) */
swiper.on('slideChange', function () {
console.log('slide changed');
/* stop all videos (currentTime buggy without this loop idea - no "real" previousIndex) */
sliderVideos.each(function( index ) {
this.currentTime = 0;
});
/* SWIPER GET CURRENT AND PREV SLIDE (AND VIDEO INSIDE) */
var prevVideo = $("[data-swiper-slide-index=" + this.previousIndex + "]").find("video");
var currentVideo = $("[data-swiper-slide-index=" + this.realIndex + "]").find("video");
prevVideo.trigger('stop');
currentVideo.trigger('play');
});
</script>
</body>
</html>
I would to use angular or other framework to get that! better to use swipper with somthing framework. Your script don'd clear to me. Sorry to don't get help you. Your css code is perfect, but swipper has properties. Take a look on documentacion to javascript. I would recomend to use Ionic Framewor to create thats cards thath you want to slide.
Related
I'm currently having some problems with the positioning of the elements on my page. When full screen the elements are centred and don't overlap.
However, when the screen is resized the elements shift to the left and start overlapping
I was wondering how to go about fixing this?
Heres my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/8711e0b6fa.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="content-wrapper">
<header>
[My Coily Story]
<ul>
<li>Home</li>
<li>Scenes</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<div class="collage"></div>
<audio id="player" src="1.mp3"></audio>
<div class="player" >
<div class="control">
<i class="fas fa-play" id="playbtn"></i>
</div>
<div class="info">
Kathleen Cleaver - Natural Hair
<div class="bar">
<div id="progress"></div>
</div>
</div>
<div id="current">0:00</div>
</div>
<div class="start">
<a href="./Page/index.html">
<span></span>
<span></span>
<span></span>
<span></span>
Start
</a>
</div>
</body>
<script type="text/javascript" src="./main.js"></script>
</html>
CSS
#font-face {
font-family: 'arcade';
src: url(fonts/ARCADECLASSIC.TTF);
font-weight: 100;
font-style: Regular;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
letter-spacing: 1px;
transition: all 0.35s linear;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
scroll-behavior: none;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
font-family: Poppins, sans-serif;
}
.logo:hover{
pointer-events: none;
border: none;
box-shadow: none;
background: transparent;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
border: none;
box-shadow: none;
transition-delay: 0s;
}
.collage {
background: url(./Images/1.gif);
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
height: 61%;
width: 55%;
border: solid 8px;
border-color: white;
align-items: center;
min-width: 55%;
max-width: 55%;
justify-content: center;
top: 20%;
left: 27%;
margin-top: -50px;
margin-left: -50px;
}
.player {
width: 55%;
background-color: black;
display: grid;
grid-template-columns: 48px 1fr 48px;
color: white;
grid-gap: 16px;
position: relative;
border-radius: 50px;
height: 60px;
position: relative;
top: 33%;
left: 65%;
align-items: center;
justify-content: center;
margin-top: -50px;
margin-left: -50px;
}
.control, #current {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-block: 16px;
}
#playbtn {
font-size: 24px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
cursor: pointer;
}
#playbtn:hover {
-webkit-text-fill-color: white;
}
.info {
display: flex;
justify-content: center;
align-items: center;
font-size: 21px;
white-space: nowrap;
}
#current {
text-align: right;
}
.bar {
--space: -4px;
background-color: #24242424;
overflow: hidden;
left: var(--space);
right: var(--space);
top: var(--space);
bottom: var(--space);
position: absolute;
border-radius: 64px;
z-index: -2;
}
#progress {
display: block;
width: var(--progress, 0%);
background-color: white;
transition: all 1s linear;
height: 100%;
}
a {
z-index: 10000;
position: relative;
display: inline-block;
padding: 15px 30px;
color: #d4337e;
font-family: arcade;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 60px;
overflow: hidden;
transition: 0.2s;
position: relative;
}
.start {
position: relative;
top: 42%;
left: 31%;
align-items: center;
justify-content: center;
height: 60px;
width: 55%;
margin-top: -50px;
margin-left: -50px;
}
a:hover {
color: #ffffff;
background: #d4337e;
box-shadow: 0 0 10px #d4337e, 0 0 40px #d4337e, 0 0 80px #d4337e;
transition-delay: 1s;
}
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#d4337e);
}
a:hover span:nth-child(1) {
left: 100%;
transition: 1s;
}
a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#d4337e);
}
a:hover span:nth-child(3) {
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#d4337e);
}
a:hover span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#d4337e);
}
a:hover span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}
JS
var player = document.getElementById("player");
let progress = document.getElementById("progress");
let playbtn = document.getElementById("playbtn");
var playpause = function () {
if (player.paused) {
player.play();
} else {
player.pause();
}
}
playbtn.addEventListener("click", playpause);
player.onplay = function () {
playbtn.classList.remove("fa-play");
playbtn.classList.add("fa-pause");
}
player.onpause = function () {
playbtn.classList.add("fa-play");
playbtn.classList.remove("fa-pause");
}
player.ontimeupdate = function () {
let ct = player.currentTime;
current.innerHTML = timeFormat(ct);
///progress
let duration = player.duration;
prog = Math.floor((ct * 100) / duration);
progress.style.setProperty("--progress",prog + "%");
}
function timeFormat(ct) {
minutes = Math.floor(ct / 60);
seconds = Math.floor(ct % 60);
if (seconds < 10) {
seconds = "0"+seconds;
}
return minutes + ":" + seconds;
}
Any help is appreciated.
From what i see you plan your element positioning on display relative or absolute.
on the other hand you should build your layout with flexbox
So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>
I am building a website and I cannot tell a difference between two HTML/CSS/JS files to see what is making my logo, button, and the main text a different style. The first code is the desired look for the website's logo, button, and main text but the second is incorrect. Any help will be appriciated!
My desired HTML style for the logo, buttons, and main text styling is on this page:
<!DOCTYPE html>
<section class="showcase">
<script type="text/javascript">
window.addEventListener('load', () => {
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
});
</script>
<header>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #011721;
transition: 0.5s;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.text
{
z-index: 10;
}
.text h2
{
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #011721;
}
.menu ul li a:hover
{
color: #03a9f4;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 3em;
}
}
</style>
<h2 class="logo">Sample Logo</h2>
<div class="toggle"></div>
</header>
<div class="overlay">
<div class="text">
<p id='text'>You Can Contact Us Here</p>
<button id='back'>Call</button>
<a href="mailto:><button id='email'>Email</button></a>
</div>
</div>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
<style>
#text {
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 3em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back:hover
{
letter-spacing: 6px;
}
#email
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#email:hover
{
letter-spacing: 6px;
}
</style>
<body>
</body>
</html>
The different styling on the second page for the buttons/logo/main text:
<!DOCTYPE html>
<section class="showcase">
<script type="text/javascript">
window.addEventListener('load', () => {
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
});
</script>
<header>
<style>
#form {
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 5em;
margin: 20px 0;
max-width: 700px;
}
#logintext {
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
font-size: 7em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 20%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#formGroupExampleInput {
width: 75%;
height: 3%;
background-color:#fff;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 52.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#formGroupExampleInput2 {
width: 75%;
height: 3%;
background-color:#fff;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 75%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#usernamelabel {
text-align:center;
position: absolute;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#passwordlabel {
text-align:center;
position: absolute;
left: 50%;
top: 65%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#submit
{
display: inline-block;
font-size: 1em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
position: absolute;
border: none;
left: 50%;
top: 87.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#submit:hover
{
letter-spacing: 6px;
}
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo {
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active {
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #011721;
transition: 0.5s;
z-index: 2;
}
.showcase.active {
right: 300px;
}
.showcase video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.text {
z-index: 10;
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul {
position: relative;
}
.menu ul li {
list-style: none;
}
.menu ul li a {
text-decoration: none;
font-size: 24px;
color: #011721;
}
.menu ul li a:hover {
color: #03a9f4;
}
#media (max-width: 991px) {
.showcase,
.showcase header {
padding: 40px;
}
}
</style>
<h2 class="logo">Sample Logo</h2>
<div class="toggle"></div>
</header>
<h2 id='logintext'>Login</h2>
<div class="overlay">
<div class="text">
<form id='form' action="/login" method="POST">
<div class="form-group">
<label id='usernamelabel' for="formGroupExampleInput">Username</label>
<input type="text" class="form-control" id="formGroupExampleInput" name="username">
</div>
<div class="form-group">
<label id='passwordlabel' for="formGroupExampleInput2">Password</label>
<input type="password" class="form-control" id="formGroupExampleInput2" name="password">
</div>
<button id='submit' type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
<html>
<style>
#text {
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 3em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back:hover
{
letter-spacing: 6px;
}
#email
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#email:hover
{
letter-spacing: 6px;
}
</style>
<body>
</body>
</html>
In the first example you are missing a open html tag and also missing a closing quote mailto:
<!DOCTYPE html><html>
<section class="showcase">
<script type="text/javascript">
window.addEventListener('load', () => {
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
});
</script>
<header>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo
{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active
{
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #011721;
transition: 0.5s;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.text
{
z-index: 10;
}
.text h2
{
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.menu
{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul
{
position: relative;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
text-decoration: none;
font-size: 24px;
color: #011721;
}
.menu ul li a:hover
{
color: #03a9f4;
}
#media (max-width: 991px)
{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 3em;
}
}
</style>
<h2 class="logo">Sample Logo</h2>
<div class="toggle"></div>
</header>
<div class="overlay">
<div class="text">
<p id='text'>You Can Contact Us Here</p>
<button id='back'>Call</button>
<button id='email'>Email</button>
</div>
</div>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
<style>
#text {
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 3em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back:hover
{
letter-spacing: 6px;
}
#email
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#email:hover
{
letter-spacing: 6px;
}
</style>
<body>
</body>
</html>
<!DOCTYPE html>
<section class="showcase">
<script type="text/javascript">
window.addEventListener('load', () => {
const menuToggle = document.querySelector('.toggle');
const showcase = document.querySelector('.showcase');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
showcase.classList.toggle('active');
})
});
</script>
<header>
<style>
#form {
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 5em;
margin: 20px 0;
max-width: 700px;
}
#logintext {
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
font-size: 7em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 20%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#formGroupExampleInput {
width: 75%;
height: 3%;
background-color:#fff;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 52.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#formGroupExampleInput2 {
width: 75%;
height: 3%;
background-color:#fff;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 75%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#usernamelabel {
text-align:center;
position: absolute;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#passwordlabel {
text-align:center;
position: absolute;
left: 50%;
top: 65%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#submit
{
display: inline-block;
font-size: 1em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
position: absolute;
border: none;
left: 50%;
top: 87.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#submit:hover
{
letter-spacing: 6px;
}
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo {
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active {
background: url(https://i.ibb.co/rt3HybH/close.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #011721;
transition: 0.5s;
z-index: 2;
}
.showcase.active {
right: 300px;
}
.showcase video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.text {
z-index: 10;
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul {
position: relative;
}
.menu ul li {
list-style: none;
}
.menu ul li a {
text-decoration: none;
font-size: 24px;
color: #011721;
}
.menu ul li a:hover {
color: #03a9f4;
}
#media (max-width: 991px) {
.showcase,
.showcase header {
padding: 40px;
}
}
</style>
<h2 class="logo">Sample Logo</h2>
<div class="toggle"></div>
</header>
<h2 id='logintext'>Login</h2>
<div class="overlay">
<div class="text">
<form id='form' action="/login" method="POST">
<div class="form-group">
<label id='usernamelabel' for="formGroupExampleInput">Username</label>
<input type="text" class="form-control" id="formGroupExampleInput" name="username">
</div>
<div class="form-group">
<label id='passwordlabel' for="formGroupExampleInput2">Password</label>
<input type="password" class="form-control" id="formGroupExampleInput2" name="password">
</div>
<button id='submit' type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
<html>
<style>
#text {
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: 800;
color: #fff;
line-height: 2em;
text-transform: uppercase;
font-size: 3em;
margin: 20px 0;
max-width: 700px;
text-align:center;
position: absolute;
left: 50%;
top: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#back:hover
{
letter-spacing: 6px;
}
#email
{
display: inline-block;
font-size: 2.5em;
background: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
justify-content: center;
border: none;
text-align:center;
position: absolute;
left: 50%;
top: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#email:hover
{
letter-spacing: 6px;
}
</style>
<body>
</body>
</html>
I'm trying to create an iOS 'style' modal sheet that that will popup and then the users can drag it down and the modal sheet will follow the users touch gesture and then it will disappear OFF the screen using HammerJS.
I've managed to create the modal sheet and I have also implemented the HammerJS to a certain extend.
When the user 'swipes' down the modal sheet, it will disappear but it doesn't follow the swipe/touch gesture before it hides. it just disappears which makes it a bit clunky.
$(document).on('click', '.button', function() {
$('.addreFinder').css('bottom', '0');
$('.sheet-backdrop').addClass('backdrop-in');
});
///custom modal sheet///
$('.c-modal').each(function() {
var mc = new Hammer(this);
mc.get('swipe').set({
direction: Hammer.DIRECTION_ALL
});
mc.on("swipedown", function(ev) {
console.log('dragged');
$('.modal-in').css('bottom', '-1850px');
$('.sheet-backdrop').removeClass('backdrop-in');
});
});
.sheet-modal.modal-in {
position: absolute;
bottom: -1850px;
left: 0;
width: 100%;
padding: 20px;
transition: bottom 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
display: block;
transform: translate3d(0, 0, 0);
z-index: 13200;
}
.sheet-modal.modal-in,
.sheet-modal.modal-out {
transition-duration: .3s;
}
.demo-sheet-swipe-to-close,
.demo-sheet-swipe-to-step {
--f7-sheet-bg-color: #fff;
--f7-sheet-border-color: transparent;
border-radius: 15px 15px 0 0;
overflow: hidden;
}
.sheet-modal {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
display: none;
box-sizing: border-box;
transition-property: transform;
transform: translate3d(0, 100%, 0);
background: var(--f7-sheet-bg-color);
z-index: 12500;
will-change: transform;
}
.swipe-handler {
height: 16px;
position: absolute;
left: 0;
width: 100%;
top: 0;
background: #fff;
cursor: pointer;
z-index: 10;
}
.page-content {
will-change: scroll-position;
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
height: 100%;
position: relative;
z-index: 1;
padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
}
.swipe-handler:after {
content: '';
width: 36px;
height: 6px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -18px;
margin-top: -3px;
border-radius: 3px;
background: #666;
}
.block-title-large {
font-size: 20px;
color: #000;
line-height: 40px;
padding: 10px;
margin-top: 20px;
}
.block {
box-sizing: border-box;
position: relative;
z-index: 1;
color: #000;
padding: 10px;
}
.sheet-backdrop.backdrop-in {
visibility: visible;
opacity: 1;
}
.sheet-backdrop {
z-index: 11000;
}
.actions-backdrop,
.custom-modal-backdrop,
.dialog-backdrop,
.popover-backdrop,
.popup-backdrop,
.preloader-backdrop,
.sheet-backdrop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 13000;
visibility: hidden;
opacity: 0;
transition-duration: .4s;
}
.bbody {
width: 100%;
box-sizing: border-box;
margin-top: 50px;
}
.wrapper {
text-align: center;
position: relative;
height: 80px;
font-size: 0;
top: 50%;
transform: translateY(-50%);
}
.search {
padding: 0 30px;
font-size: 18px;
width: 80%;
max-width: 400px;
height: 80px;
border: 1px solid #b3b3b3;
border-radius: 20px 0 0 20px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
display: inline-block;
}
.submit {
cursor: pointer;
border: none;
background: url('data:image/png;base64,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') no-repeat center center, #1e1e20;
background-size: 35px 35px;
border-radius: 0 20px 20px 0;
padding: 15px 25px;
display: inline-block;
width: 20%;
height: 80px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
}
.pac-container {
width: 100%;
}
.pac-item {
cursor: pointer;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
vertical-align: middle;
text-align: left;
border-top: 1px solid #e6e6e6;
color: #999;
width: 100%;
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px;
}
.pac-icon-marker {
background-position: -1px -161px;
}
.addressFinderTexts>* {
margin-top: 10px;
}
.addressFinderTexts p {
font-size: 12px;
}
.useMyCureentLOcationBtn {
width: 80%;
height: 25px;
line-height: 25px;
display: inline-block;
background: #ffaf06;
color: #fff;
font-size: 12px;
margin-top: 15px;
overflow: hidden;
}
.addressFinderTexts {
width: 100%;
margin-top: 20px;
min-height: 380px;
height: auto;
text-align: center;
padding: 10px;
box-sizing: border-box;
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<div class="sheet-backdrop"></div>
<div class="c-modal sheet-modal demo-sheet-swipe-to-close modal-in addreFinder" id="addressFinder">
<div class="sheet-modal-inner">
<div class="swipe-handler"></div>
<div class="page-content">
<div class="block">
<div class="bbody">
Drag me down to hide me
</div>
</div>
</div>
</div>
</div>
<button class="button">Click Here To show modal</button>
I hope I have explained the situation properly for someone to be able to help me.
I have a CTA that slides out when you hover over it. The problem I have is that the text is sometimes hard to read depending on the background colour. I've created a demo of what I'm trying to achieve, you can check it out here:
Demo on CodePen
The essence of this demo is:
HTML:
<div class="at-about-fab">
<div class="at-about-fab__thumbnail">
<img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
</div>
<div class="at-about-fab__meta">
<h2>Call Us Now</h2>
<p>555 555 5555</p>
</div>
</div>
The CSS looks like this:
.at-about-fab {
z-index: 999999;
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
align-items: center;
flex-direction: row;
transform: translateX(100%);
transition: 0.2s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: -58px;
width: 58px;
height: 48px;
transform: translateY(-50%);
}
&:hover {
transform: translateX(0%);
.at-about-fab__meta {
opacity: 1;
}
}
&__thumbnail {
position: absolute;
top: 50%;
left: -58px;
background: #FFFFFF;
width: 48px;
height: 48px;
border: 1px solid #EEEEEE;
border-radius: 100%;
padding: 4px;
box-sizing: border-box;
transform: translateY(-50%);
overflow: hidden;
cursor: pointer;
img {
display: block;
width: 100%;
border-radius: 100%;
}
}
&__meta {
font-family: 'Open Sans', sans-serif;
opacity: 0;
transition: 0.2s ease;
h2,
p {
margin: 0;
padding: 0;
}
h2 {
color: #444444;
font-size: 14px;
font-weight: 600;
}
p {
color: #CCCCCC;
font-size: 12px;
font-weight: 400;
}
a {
color: inherit;
font-weight: 400;
text-decoration: none;
}
}
}
Any suggestions on how to get this right? I've looked at a few JavaScript-based examples but my JavaScript skills aren't there yet...
Many thanks
You can try something like this:
Idea
Add mouseover event on main container.
In this handler, have a variable that will hold classname that is to be added.
On hover:
Get all sections.
Check the bounds of current section with icon's bound.
If top of icon is greater than top of section, update the className variable
If not, break the loop.
Now remove all classes add className to container. You will also have to write corresponding classes in CSS as well.
Sample: Updated CodePen
var iconContainer = document.querySelector('.at-about-fab');
iconContainer.addEventListener('mouseover', function () {
var bounds = this.getBoundingClientRect();
var sections = document.querySelectorAll('.section');
var className = '';
Array.from(sections).some(function(el) {
var currentBounds = el.getBoundingClientRect();
if(bounds.top > currentBounds.top) {
className = el.getAttribute('id');
}
else {
return true;
}
});
this.classList.remove('section1', 'section2', 'section3', 'section4');
this.classList.add(className);
})
It is not advisable to share offsite links that might be erased however this is a good start. 7 Practical Tips for Cheating at Design
Summary has been done in the comments to the CSS.
.at-about-fab {
z-index: 999999;
position: fixed;
/*Dropped the right to hide the text block a little more - you can ignore*/
right: 0px;
bottom: 20px;
/*Add a background that best blends. White is not a bad option as allows many with eye issues read the text behind. Add a little padding*/
background-color: white;
padding: 5px 20px;
display: flex;
align-items: center;
flex-direction: row;
transform: translateX(100%);
transition: 0.2s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: -58px;
width: 58px;
height: 48px;
transform: translateY(-50%);
}
&:hover {
transform: translateX(0%);
.at-about-fab__meta {
opacity: 1;
}
}
&__thumbnail {
position: absolute;
top: 50%;
left: -58px;
background: #FFFFFF;
width: 48px;
height: 48px;
border: 1px solid #EEEEEE;
border-radius: 100%;
padding: 4px;
box-sizing: border-box;
transform: translateY(-50%);
overflow: hidden;
cursor: pointer;
img {
display: block;
width: 100%;
border-radius: 100%;
}
}
&__meta {
font-family: 'Open Sans', sans-serif;
opacity: 0;
transition: 0.2s ease;
h2,
p {
margin: 0;
padding: 0;
}
h2 {
color: #444444;
font-size: 14px;
font-weight: 600;
}
p {
/*It is advisable not to go so off color. So lighter grey of the #444 you used is a better option so I went for #999 */
color: #999;
font-size: 12px;
font-weight: 400;
}
a {
color: inherit;
font-weight: 400;
text-decoration: none;
}
}
}
/* Just for the sake of testing */
.content{
position:relative;
}
#wrapper
{
position:relative;
}
.section
{
width: 100%;
text-align:center;
padding:250px 0;
border:1px solid #666;
}
#section1
{
background: #fff;
}
#section2
{
background: #000;
color:#fff;
}
#section3
{
background: #444444;
}
#section4
{
background: #BA2322;
}
Codepen Demo
You could use mix-blend-mode: exclusion; with the help from data attribute and ::after selector:
.at-about-fab {
z-index: 999999;
position: fixed;
right: 20px;
bottom: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.at-about-fab:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: -58px;
width: 58px;
height: 48px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.at-about-fab:hover {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.at-about-fab:hover .at-about-fab__meta {
opacity: 1;
}
.at-about-fab__thumbnail {
position: absolute;
top: 50%;
left: -58px;
background: #FFFFFF;
width: 48px;
height: 48px;
border: 1px solid #EEEEEE;
border-radius: 100%;
padding: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
overflow: hidden;
cursor: pointer;
}
.at-about-fab__thumbnail img {
display: block;
width: 100%;
border-radius: 100%;
}
.at-about-fab__meta {
font-family: 'Open Sans', sans-serif;
opacity: 0;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
}
.at-about-fab__meta h2,
.at-about-fab__meta p {
margin: 0;
padding: 0;
}
.at-about-fab__meta h2 {
color: #444444;
font-size: 14px;
font-weight: 600;
}
.at-about-fab__meta p {
color: #CCCCCC;
font-size: 12px;
font-weight: 400;
}
.at-about-fab__meta a {
color: inherit;
font-weight: 400;
text-decoration: none;
}
/* Just for the sake of testing */
.content {
position: relative;
}
#wrapper {
position: relative;
}
.section {
width: 100%;
text-align: center;
padding: 250px 0;
border: 1px solid #666;
position: relative;
color: black;
}
.section:after {
content: attr(data-content);
position: absolute;
width: 100%;
height: auto;
text-align: center;
top: 50%;
left: 0;
mix-blend-mode: exclusion;
color: white;
}
#section1 {
background: #fff;
}
#section2 {
background: #000;
}
#section3 {
background: #444444;
}
#section4 {
background: #BA2322;
}
<!-- Credits -->
<!-- Developer - Andy Tran (https://andytran.me) -->
<!-- Design - Andy Tran (https://andytran.me) -->
<div class="at-about-fab">
<div class="at-about-fab__thumbnail">
<img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
</div>
<div class="at-about-fab__meta">
<h2>Call Us Now</h2>
<p>555 555 5555</p>
</div>
</div>
<!-- Just for the sake of testing -->
<div class="content">
<div id="wrapper">
<div class="section" id="section1" data-content="section1"></div>
<div class="section" id="section2" data-content="section2"></div>
<div class="section" id="section3" data-content="section3"></div>
<div class="section" id="section4" data-content="section4"></div>
</div>
</div>
Here is also a link to the updated codepen with SCSS.