Add text pop up on link click

Add text pop up on link click - javascript

MY website is currently under construction so im trying to add a little pop up on the header links that says "coming soon" or something like that. You click it and it just pops up near the link.
This is the tutorial i was following but cant get it to work with my own code. So ill take anything at this point.
https://www.w3schools.com/howto/howto_js_popup.asp
Id like something where all i have to do is add a certain class to each link and it just work once that class is added or something like that seems to me to be the best.
so idealy id like to add it to the about us, our work and services button.
<ul class="nav">
<div class="new">
<li>HOME</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
#import url('https://fonts.googleapis.com/css?family=Roboto');
#import url('https://fonts.googleapis.com/css?family=Roboto:bold');
#import url('https://fonts.googleapis.com/css?family=Roboto:100');
#import url('https://fonts.googleapis.com/css?family=Roboto:600');
#font-face {
font-family: "roboto";
src: url('https://fonts.googleapis.com/css?family=Roboto');
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
top: 0;
background-image: url('images/bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color:#e0e0e0;
}
.logo {
width: 150px;
fill: white;
display: block;
position: relative;
padding: 23px 0px 0px 50px;
}
.logo svg {
position: absolute;
top: 0px;
right: 0px;
}
#hireus {
position: absolute;
top: 0;
right: 0;
padding: 3px;
font-family: proxima nova;
font-size: 12px;
text-decoration: none;
color: white;
margin: 27px 50px 0px 0px;
text-decoration: none;
z-index: 10;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
/*
top: 0;
background-image: url('images/bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
*/
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
/* was ul */
.nav {
list-style-type: none;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
display: table;
margin: 0;
width: 100%;
text-align: center;
padding: 0
}
li {
/*
width: 120px;
height: 40px;
*/
margin: 0px 0px;
display: inline-block;
padding: 0;
font-family: proxima nova;
font-size: 10px;
text-decoration: none;
}
.new a {
display: block;
/*
width: 120px;
height: 40px;
*/
/* line-height: 40px; */
text-decoration: none;
text-align: center;
color: white;
/* margin: 20px 20px; */
margin: 32px 20px 0px 20px;
}
.content {
max-width: 1200px;
margin: 0 auto;
text-align: center;
padding-bottom: 7%;
}
.content h1 {
font-family: proxima nova;
font-size: 520%;
font-weight: bold;
color: white;
margin: 0;
padding-bottom: 3px;
}
.content p {
font-family: proxima nova;
font-size: 12px;
font-weight: 100;
color: white;
margin: 0 auto;
max-width: 420px;
padding-bottom: 25px;
}
.btn {
font-family: proxima nova;
font-size: 14px;
font-weight: bold;
color: white;
text-decoration: none;
border: solid 1px white;
/* padding: 10px 100px; */
border-radius: 60px;
transition: all 0.5s;
width: 160px;
display: inline-block;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
}
.btn:hover {
color: #b0ccff;
border: solid 1px #b0ccff;
}
.btn2 {
font-family: proxima nova;
font-size: 14px;
font-weight: bold;
color: white;
text-decoration: none;
border: solid 1px #0B315C;
/* padding: 10px 100px; */
border-radius: 60px;
transition: all 0.5s;
width: 160px;
background-color: #0B315C;
display: inline-block;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
margin-left: 30px;
-webkit-box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5);
}
.btn2:hover {
color: #b0ccff;
border: solid 1px #b0ccff;
}
#scroll {
color: green;
}
.title {
font-family: proxima nova;
font-size: 50px;
font-weight: 600;
color: black;
text-align: center;
margin-top: 60px;
padding-bottom: 2px;
}
.subtitle {
font-family: proxima nova;
font-size: 12px;
font-weight: 200;
color: #9D9D9D;
text-align: center;
margin-top: -45px;
padding-bottom: 2px;
}
#second {
border-bottom: 1px solid #E6E6E6;
width: 480px;
margin: auto;
}
#Layer_1 {
width: 100px;
height: 100px;
}
#group2 {}
.whatwedo {
text-align: center;
width: 100%;
margin-top: 100px;
}
.subject {
text-align: center;
width: 300px;
display: inline-block;
margin: 0px 50px;
}
.subject img{
width: 100px;
}
.subject h2 {
font-family: proxima nova;
font-size: 20px;
font-weight: 600;
color: black;
margin-bottom: 12px;
}
.desc {
font-family: proxima nova;
font-size: 12px;
font-weight: 200;
color: #9D9D9D;
}
.group3 {
position: relative;
text-align: center;
color: white;
margin-top: 90px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: proxima nova;
font-size: 24px;
font-weight: 100;
color: white;
width: 550px;
}
form {
display: table;
margin: 0 auto;
}
#forth {
width: 100%;
}
#forth h2{
margin-bottom: 20px;
}
input[type=text],
select {
width: 400px;
padding: 13px 20px;
margin: 8px 0;
display: inline-block;
border-radius: 30px;
box-sizing: border-box;
font-family: proxima nova;
font-size: 14px;
}
input[type=submit] {
width: 160px;
background-color: #4CAF50;
color: white;
padding: 13px 20px;
margin: 8px 0;
border: none;
border-radius: 30px;
cursor: pointer;
background-color: #0B315C;
font-family: proxima nova;
font-size: 14px;
font-weight: bold;
position: relative;
bottom: 42px;
margin: -9px 0px 0px 240px;
}
.email-form {
width: 400px;
}
.email-form input {
border: 0;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
#hi{
background-color: #F9F9F9;
margin-top: -64px;
padding-top: 150px;
padding-bottom: 120px;
}
footer {
background-color: #30659B;
width: 100vw;
}
.logo2 {
width: 150px;
fill: white;
display: block;
}
.nav2 {
padding:0;
list-style-type: none;
color: white;
display: flex; /*Generates a flexbox layout with default flex direction as row */
width: 100%; /* Not really required */
height:100px;
align-items: center; /*Aligns contents vertically */
justify-content: space-around;
margin: 0px;
}
li {
padding:0;
font-family: proxima nova;
font-size: 10px;
text-decoration: none;
text-align:center;
margin:5px;
}
li:first-child{
margin-left:100px;
}
li:last-child{
margin-right:100px;
}
li a {
text-decoration: none;
color: white;
}
/*--- Media Queries --*/
#media screen and (max-width: 900px) {
.content {
padding-bottom: 10%;
}
.content h1 {
font-size: 400%
}
.btn {
font-size: 110%;
padding: 9px 43px;
}
}
#media screen and (max-width: 768px) {
.content {
padding-bottom: 12%;
}
.content h1 {
font-size: 300%
}
.btn {
font-size: 100%;
padding: 9px 43px;
}
}
#media screen and (max-width: 480px) {
.content {
padding-bottom: 14%;
}
.content h1 {
font-size: 300%
}
.btn {
font-size: 100%;
padding: 10px 44px;
}
}
<!DOCTYPE html>
<head>
<title>Launchpad | Web design and marketing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
</head>
<body>
<div class="logo">
<svg class="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50"><title>Artboard 1</title><path d="M46.26,10.5h6.46V35.17H65.55v5.69H46.26Z"/><path d="M82.8,38.59a9.1,9.1,0,0,1-7,2.82c-3.5,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87A14.42,14.42,0,0,1,79,18.33c5,0,9.6,2,9.6,8.33v14.2H82.8Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M109.15,38.08a10.29,10.29,0,0,1-7.74,3.32c-4.82,0-7.1-2.64-7.1-6.92V18.88h5.78V32.21c0,3,1.59,4.05,4.05,4.05a6.47,6.47,0,0,0,5-2.5V18.88h5.78v22h-5.78Z"/><path d="M135.5,27.57c0-3-1.59-4.1-4.05-4.1a6.26,6.26,0,0,0-5,2.59V40.86h-5.78v-22h5.78v2.87a10.07,10.07,0,0,1,7.69-3.41c4.82,0,7.15,2.73,7.15,7V40.86H135.5Z"/><path d="M157.26,18.33c4.51,0,7.24,2,8.69,4l-3.78,3.5a5.44,5.44,0,0,0-4.64-2.37c-3.5,0-6,2.55-6,6.37s2.46,6.42,6,6.42a5.55,5.55,0,0,0,4.64-2.37L166,37.4c-1.46,2-4.19,4-8.69,4-6.78,0-11.65-4.78-11.65-11.56S150.48,18.33,157.26,18.33Z"/><path d="M184.61,27.48c0-3-1.59-4-4.1-4a6.4,6.4,0,0,0-5,2.59V40.86h-5.78V10.5h5.78V21.74a10.17,10.17,0,0,1,7.74-3.41c4.82,0,7.15,2.64,7.15,6.92V40.86h-5.78Z"/><path d="M196.12,49.24V18.88h5.78v2.78a8.49,8.49,0,0,1,6.78-3.32c5.64,0,9.74,4.19,9.74,11.52s-4.1,11.56-9.74,11.56A8.4,8.4,0,0,1,201.9,38v11.2Zm10.74-25.76a6.47,6.47,0,0,0-5,2.5v7.78a6.62,6.62,0,0,0,5,2.5c3.32,0,5.55-2.59,5.55-6.42S210.19,23.47,206.86,23.47Z"/><path d="M235.94,38.59a9.1,9.1,0,0,1-7,2.82c-3.51,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87a14.42,14.42,0,0,1,9.6-3.46c5,0,9.6,2,9.6,8.33v14.2h-5.78Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M262.57,38.08a8.62,8.62,0,0,1-6.78,3.32c-5.55,0-9.74-4.19-9.74-11.51s4.14-11.56,9.74-11.56a8.47,8.47,0,0,1,6.78,3.37V10.5h5.83V40.86h-5.83Zm0-12.11a6.36,6.36,0,0,0-5-2.5c-3.28,0-5.55,2.59-5.55,6.42s2.28,6.37,5.55,6.37a6.36,6.36,0,0,0,5-2.5Z"/><path d="M7.56,38.52l8.13,10.73a1.41,1.41,0,0,0,2.16,0L26,38.52a1.34,1.34,0,0,0-.56-2L18.53,33A4,4,0,0,0,15,33l-6.89,3.5A1.34,1.34,0,0,0,7.56,38.52Z"/><path d="M30.31,14.15,18.12.82a1.91,1.91,0,0,0-2.7,0L3.23,14.15a4,4,0,0,0-1,2.16L-.38,34.52c-.13.9,1,1.53,1.93,1.07L4.29,34.2l12.48-6.37L29.25,34.2,32,35.59c.92.47,2.06-.17,1.93-1.07l-2.57-18.2A4,4,0,0,0,30.31,14.15Z"/></svg>
</div>
<a id="hireus" href="/">HIRE US</a>
<ul class="nav">
<div class="new">
<li>HOME</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.2s">
<h1>Welcome to Launchpad</h1>
<p>We are a creative agency who specializes in digital marketing and graphic design. Let us launch your business to the next level!</p>
</section>
<section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.7s">
<a class="btn" href="#">Hire Us</a>
<a class="btn2" href="#">Learn More</a>
</section>
</div>
</div>
</section>
<div id="second">
<h2 class="title">What we do</h2>
<p class="subtitle">Let us take your buisness to the next level.</p>
</div>
<div class="group2">
<div class="whatwedo">
<div class="subject" id="customdesign">
<img src="images/customdesign.svg" alt="Custom Design">
<h2 class="title2">Custom Design</h2>
<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
</div>
<div class="subject" id="contentmarketing">
<img src="images/contentmarketing.svg" alt="Content Mrketing">
<h2 class="title2">Content Marketing</h2>
<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
</div>
<div class="subject" id="emailmarketing">
<img src="images/emailmarketing.svg" alt="Email Marketing">
<h2 class="title2">Email Marketing</h2>
<p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p>
</div>
</div>
</div>
<div class="group3">
<img src="images/testimonialbg.png" alt="Norway" style="width:100%;">
<div class="centered">“The team at Launchpad exceeded our expectations!
They have a bright future ahead of them.”<br>
<span style="font-weight: 600;">Sam Molloy, Unmatched Masonry</span></div>
</div>
<!--
<div id="second">
<h2 class="title">Our work</h2>
<p class="subtitle">Nervous about taking off? Here's the portfolio.</p>
</div>
-->
<div id="hi">
<div id="forth">
<h2 class="title">Lets get in touch</h2>
<form action="mailto:contact#madebylaunchpad.com" method="post" enctype="text/plain" class="email-form">
<input type="text" name="mail" placeholder="Your email address"><br>
<input type="submit" value="Lets talk">
</form>
</div>
</div>
<footer>
<ul class="nav2">
<li class="li2">ABOUT US</li>
<li class="li2">OUR WORK</li>
<li class="li2">SERVICES</li>
<li>
<div class="logo2">
<svg class="logo2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50"><title>Artboard 1</title><path d="M46.26,10.5h6.46V35.17H65.55v5.69H46.26Z"/><path d="M82.8,38.59a9.1,9.1,0,0,1-7,2.82c-3.5,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87A14.42,14.42,0,0,1,79,18.33c5,0,9.6,2,9.6,8.33v14.2H82.8Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M109.15,38.08a10.29,10.29,0,0,1-7.74,3.32c-4.82,0-7.1-2.64-7.1-6.92V18.88h5.78V32.21c0,3,1.59,4.05,4.05,4.05a6.47,6.47,0,0,0,5-2.5V18.88h5.78v22h-5.78Z"/><path d="M135.5,27.57c0-3-1.59-4.1-4.05-4.1a6.26,6.26,0,0,0-5,2.59V40.86h-5.78v-22h5.78v2.87a10.07,10.07,0,0,1,7.69-3.41c4.82,0,7.15,2.73,7.15,7V40.86H135.5Z"/><path d="M157.26,18.33c4.51,0,7.24,2,8.69,4l-3.78,3.5a5.44,5.44,0,0,0-4.64-2.37c-3.5,0-6,2.55-6,6.37s2.46,6.42,6,6.42a5.55,5.55,0,0,0,4.64-2.37L166,37.4c-1.46,2-4.19,4-8.69,4-6.78,0-11.65-4.78-11.65-11.56S150.48,18.33,157.26,18.33Z"/><path d="M184.61,27.48c0-3-1.59-4-4.1-4a6.4,6.4,0,0,0-5,2.59V40.86h-5.78V10.5h5.78V21.74a10.17,10.17,0,0,1,7.74-3.41c4.82,0,7.15,2.64,7.15,6.92V40.86h-5.78Z"/><path d="M196.12,49.24V18.88h5.78v2.78a8.49,8.49,0,0,1,6.78-3.32c5.64,0,9.74,4.19,9.74,11.52s-4.1,11.56-9.74,11.56A8.4,8.4,0,0,1,201.9,38v11.2Zm10.74-25.76a6.47,6.47,0,0,0-5,2.5v7.78a6.62,6.62,0,0,0,5,2.5c3.32,0,5.55-2.59,5.55-6.42S210.19,23.47,206.86,23.47Z"/><path d="M235.94,38.59a9.1,9.1,0,0,1-7,2.82c-3.51,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87a14.42,14.42,0,0,1,9.6-3.46c5,0,9.6,2,9.6,8.33v14.2h-5.78Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M262.57,38.08a8.62,8.62,0,0,1-6.78,3.32c-5.55,0-9.74-4.19-9.74-11.51s4.14-11.56,9.74-11.56a8.47,8.47,0,0,1,6.78,3.37V10.5h5.83V40.86h-5.83Zm0-12.11a6.36,6.36,0,0,0-5-2.5c-3.28,0-5.55,2.59-5.55,6.42s2.28,6.37,5.55,6.37a6.36,6.36,0,0,0,5-2.5Z"/><path d="M7.56,38.52l8.13,10.73a1.41,1.41,0,0,0,2.16,0L26,38.52a1.34,1.34,0,0,0-.56-2L18.53,33A4,4,0,0,0,15,33l-6.89,3.5A1.34,1.34,0,0,0,7.56,38.52Z"/><path d="M30.31,14.15,18.12.82a1.91,1.91,0,0,0-2.7,0L3.23,14.15a4,4,0,0,0-1,2.16L-.38,34.52c-.13.9,1,1.53,1.93,1.07L4.29,34.2l12.48-6.37L29.25,34.2,32,35.59c.92.47,2.06-.17,1.93-1.07l-2.57-18.2A4,4,0,0,0,30.31,14.15Z"/></svg>
</div></li>
<li class="li3">TWITTER</li>
<li class="li3">FACEBOOK</li>
<li class="li3">INSTAGRAM</li>
</ul>
</footer>
</body>
</html>

Here's the code working:
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
</body>

I built a pretty easy example for you and I'll run you through the code here.
First here it is in action:
var selector = document.getElementById('showHide');
selector.onclick = function(){
var show = document.getElementById('hidden');
show.style.display = "block"
};
<ul class="nav">
<div class="new">
<li id="showHide">HOME</li>
<li id='hidden' style='display: none;'>Hello</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
This is going to be your nav bar. As you can see i made some changes. I gave your home button an id so that we can call it later. I also added a new <li> tag that is hidden from site by "display: none".
<ul class="nav">
<div class="new">
<li id="showHide"><a href="/" >HOME</a></li>
<li id='hidden' style='display: none;'>Hello</li>
<li>ABOUT US</li>
<li>OUR WORK</li>
<li>SERVICES</li>
</div>
</ul>
Here is the magic
var selector = document.getElementById('showHide');
selector.onclick = function(){
var show = document.getElementById('hidden');
show.style.display = "block"
};
At the top we create a selector variable to tell it what we want to target, which for us will be the Home button.
Below that we write a function that triggers when our selector is clicked. When it is triggered we define what we want to change(in this case that would be the element with the id of "hidden"). After that we simply edit it's display property to show.

Related

Progress bar with steps styling

How to style my progress bar so it looks like the design? I tried to moved the text but they keep staying in the circle. Also not sure how to create the circle within another circle dot with css. It should be non clcikable. Here is the css and html files. Also not sure how to let active/finished steps be in a tick icon.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>XXXXXX</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">1</li>
<li class="step">2</li>
<li class="step">3</li>
<li class="step">4</li>
<li class="step">5</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>
<script src="./bar script.js"></script>
</body>
</html>
--------------------- css file
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #fff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
Here is the reference picture

I hope that's what you meant
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #4584ff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
/* added css */
#progress-text .step {
display:flex;
justify-content:center;
}
#progress-text .step label{
margin-top:120%;
font-size:.7rem;
font-weight:bold;
font-color:inherit;
}
#progress-text .step.active::after {
content:"✓";
color:#fff;
z-index:2;
position:absolute;
top:2px;
left:8px;
font-size:12px;
font-weight:bold;
}
#progress-text .step.progress{
border-color:#4584ff;
}
#progress-text .step.progress::after{
content:"•";
transform:scale(3);
position:absolute;
left:10px;
top:1.5px;
color:#4584ff;
}
#progress-text .step.progress label{
color:#4584ff;
}
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">
<label>Review</label>
</li>
<li class="step active">
<label>Assignment</label>
</li>
<li class="step progress">
<label>Investigation</label>
</li>
<li class="step">
<label>Handling</label>
</li>
<li class="step">
<label>Resolution</label>
</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>

How can i make the glowing effect behind a video?

In the latest Youtube update, Google has put a glow effect behind the videos. He calls it "cinematicmode" which takes the video in question and creates that beam of light while the video is playing. I'm with a Boostrap5 project trying to replicate the same format that youtube has but I don't know how to do it. I don't know if it can be done with JS or with CSS or with some external library.
The code I am working on:
.container {
max-width: 980px;
}
.title {
color: white;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, 0.1);
border: solid rgba(0, 0, 0, 0.15);
border-width: 1px 0;
box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -0.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
video {
border-radius: 5%;
width: 100%;
}
.video-tam {
width: 220px;
height: 140px;
}
.tit {
border-radius: 10px;
}
.tit-video {
font-size: 20px;
margin-top: 2%;
}
.descrip {
color: white;
}
.img-logo {
width: 30vh;
}
.img-user{
width: 10vh;
}
.cont-descrip {
margin-top: 5%;
background-color: #dc3444;
border-radius: 10px;
padding: 2%;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
body{
background: #304FFE;
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: none !important;
}
.dashboard-header .navbar {
padding: 0px;
border-bottom: 1px solid #e6e6f2;
-webkit-box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);
box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);
-webkit-transition: all 0.3s ease;
min-height: 60px;
}
.navbar-brand {
display: inline-block;
margin-right: 1rem;
line-height: inherit;
white-space: nowrap;
padding: 11px 20px;
font-size: 30px;
text-transform: uppercase;
font-weight: 700;
color: #007bff;
}
.navbar-brand:hover{
color: #007bff;
}
.navbar-right-top {}
.navbar-right-top .nav-item {
border-right: 1px solid #e6e6f2;
}
.navbar-right-top .nav-item:last-child {
border: none;
}
.navbar-right-top .nav-item .nav-link {
padding: 13px 20px;
font-size: 16px;
line-height: 2;
color: #82849f;
}
/* -- top-search-bar --- */
.top-search-bar {
padding-top: 12px;
padding-right: 24px;
}
/* ------ Notification Dropdown -------- */
.notification {}
.notification-dropdown {
min-width: 320px;
}
.notification-dropdown,
.connection-dropdown,
.nav-user-dropdown {
padding: 0px;
margin: 0px;
}
.notification-title {
font-size: 14px;
color: #3d405c;
text-align: center;
padding: 8px 0px;
border-bottom: 1px solid #e3e3e3;
line-height: 1.5;
background-color: #fffffe;
}
.notification-list {}
.notification-list .list-group-item {
border-radius: 0px;
padding: 12px;
margin-top: -1px;
border-left: transparent;
border-right: transparent;
}
.notification-list .list-group-item.active {
z-index: 2;
color: #3d405c;
background-color: #f7f7fb;
border-color: #e1e1e7;
}
.notification-list .list-group-item-action:focus,
.list-group-item-action:hover {
color: #404040;
text-decoration: none;
background-color: #f7f7fb;
}
.notification-list .list-group-item:last-child {}
.notification-info {}
.notification-info .notification-date {
display: block;
font-size: 11px;
margin-top: 4px;
text-transform: uppercase;
color: #71748d;
}
.notification .dropdown-toggle::after,
.connection .dropdown-toggle::after,
.nav-user .dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: .255em;
vertical-align: .255em;
content: "";
border: none;
}
.notification-list-user-img {
float: left;
}
.notification-list-user-block {
padding-left: 50px;
font-size: 14px;
line-height: 21px;
}
.notification-list-user-name {
color: #5969ff;
font-size: 14px;
margin-right: 8px;
}
.list-footer,
.conntection-footer {
font-size: 14px;
color: #fff;
text-align: center;
padding: 10px 0px;
line-height: 1.5;
font-weight: 700;
background-color: #5969ff;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.list-footer a,
.conntection-footer a {
color: #fff;
}
.list-footer a:hover,
.conntection-footer a:hover {
color: #fff;
}
.indicator {
content: '';
position: absolute;
top: 16px;
right: 23px;
display: inline-block;
width: 7px;
height: 7px;
border-radius: 100%;
background-color: #ef172c;
animation: .9s infinite beatHeart;
transform-origin: center;
}
#keyframes beatHeart {
0% {
transform: scale(0.9);
}
25% {
transform: scale(1.1);
}
40% {
transform: scale(0.9);
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(0.9);
}
}
/* ------ Connection -------- */
.connection {}
.connection-dropdown {}
.connection-list {
width: 300px;
padding: 20px;
}
.connection-item {
border-radius: 3px;
line-height: 32px;
text-align: center;
padding: 12px 7px 4px;
display: block;
border: 1px solid transparent;
color: #3d405c;
font-size: 12px;
}
.connection-item img {
width: 32px;
}
.connection-item:hover {
background-color: #fff;
border: 1px solid #e6e6f2;
}
.connection-item span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ----- User Nav Dropdown -----*/
.nav-user {}
.nav-user-dropdown {
padding: 0px;
min-width: 230px;
margin: 0px;
}
.nav-user-name {}
.nav-user-info {
background-color: #5969ff;
line-height: 1.4;
padding: 12px;
color: #fff;
font-size: 13px;
border-radius: 2px 2px 0 0;
}
.nav-user-info .status {
float: left;
top: 7px;
left: 0px;
}
.nav-user-dropdown {}
.nav-user-dropdown .dropdown-item {
display: block;
width: 100%;
padding: 12px 22px 15px;
clear: both;
font-weight: 400;
color: #686972;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
font-size: 13px;
line-height: 0.4;
}
.nav-user-dropdown .dropdown-item:hover {
background-color: #f7f7fb;
}
/*---- User icon sizes ---*/
.user-avatar-xxl {
height: 128px;
width: 128px;
}
.user-avatar-xl {
height: 90px;
width: 90px;
}
.user-avatar-lg {
height: 48px;
width: 48px;
}
.user-avatar-md {
height: 32px;
width: 32px;
}
.user-avatar-sm {
height: 24px;
width: 24px;
}
.user-avatar-xs {
height: 18px;
width: 18px;
}
.avatar {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
border: 2px solid #F7F9FA;
background: #F7F9FA;
color: #fff;
}
.media-attachment div.avatar {
border: none;
}
.avatar.bg-primary {
display: flex;
align-items: center;
justify-content: center;
}
.avatar.bg-primary i {
font-size: 14px;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta
name="author"
content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
<title>YouFlix</title>
<meta name="generator" content="Hugo 0.104.2" />
<link
rel="canonical"
href="https://getbootstrap.com/docs/5.2/examples/checkout/"
/>
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="main.css" />
</head>
<body class="bg-dark">
<div class="container">
<main>
<div class="py-5 text-center">
<img
class="d-block mx-auto mb-4 img-logo"
src="Logo_negro_negro.webp"
alt="YouFlix"
/>
<h2 class="title">YouFlix</h2>
<p class="lead text-light">Tu Web de Videos preferida</p>
</div>
<div class="row g-5">
<div class="col-md-7 col-lg-8">
<video class="embed-responsive embed-responsive-16by9" controls>
<source src="videoplayback.mp4" type="video/mp4" />
</video>
<span
class="tit-video badge bg-danger rounded-pill w-100 text-start"
>TITULO DEL VIDEO</span
>
<div class="cont-descrip">
<p class="descrip">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea,
est? Error, enim. Esse, provident vitae aliquam, illum
distinctio est quis quidem minus quisquam ullam quos, nisi neque
necessitatibus voluptas dolorem.
</p>
</div>
</div>
<div class="col-md-5 col-lg-4 order-md-last">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="badge bg-danger rounded-pill">TUS VIDEOS</span>
<span class="badge bg-danger rounded-pill">100</span>
</h4>
<ul class="list-group mb-5">
<li
class="list-group-item d-flex justify-content-between lh-sm bg-secondary"
>
<div>
<video
class="embed-responsive embed-responsive-16by9 video-tam"
controls
>
<source src="videoplayback.mp4" type="video/mp4" />
</video>
<span class="text-light">12:04</span>
</div>
</li>
<li
class="list-group-item d-flex justify-content-between lh-sm bg-secondary"
>
<div>
<video
class="embed-responsive embed-responsive-16by9 video-tam"
controls
>
<source src="videoplayback.mp4" type="video/mp4" />
</video>
<span class="text-light">12:04</span>
</div>
</li>
<li
class="list-group-item d-flex justify-content-between lh-sm bg-secondary"
>
<div>
<video
class="embed-responsive embed-responsive-16by9 video-tam"
controls
>
<source src="videoplayback.mp4" type="video/mp4" />
</video>
<span class="text-light">12:04</span>
</div>
</li>
<li
class="list-group-item d-flex justify-content-between lh-sm bg-secondary"
>
<div>
<video
class="embed-responsive embed-responsive-16by9 video-tam"
controls
>
<source src="videoplayback.mp4" type="video/mp4" />
</video>
<span class="text-light m-2">12:04</span>
</div>
</li>
</ul>
</div>
</div>
</main>
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">© 2022–2023 YouFlix</p>
</footer>
</div>
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
<script src="form-validation.js"></script>
</body>
</html>
I have not found any of the web format.
Someone could help me? Thanks in advance. :)
I tried to use backdrop-filter in CSS but does not fit with my description

Border Radius Create

Anyone who make is toggle menu. I am trying a long time i am unable to make this toggle menu below are the my html file and css and attach pic create same this. i want to create border radius like this picture for mobile screen.enter image description here
Below are my code pasted anyone can do this. I am very thankful to you
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.hero{
width: 100%;
min-height: 100vh;
background: #eceaff;
color: #525252;
}
nav{
padding: 20px 10%;
align-items: center;
justify-content: space-between;
position: relative;
}
.user-pic{
padding: 15px;
float: right;
border-radius: 50rem;
cursor: pointer;
background-color: white;
border-radius: 50rem;
}
nav ul{
width: 100%;
text-align: right;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
color: white;
text-decoration: none;
}
nav ul li a:hover{
color: yellow;
}
.sub-menu-link{
background-color: white;
border-radius: 50rem;
}
.sub-menu-wrap{
position: absolute;
top: 100%;
right: 10%;
width: 320px;
max-height: 0px;
overflow: hidden;
}
.sub-menu-wrap.open-menu{
max-height: 400px;
margin-top: 30px;
}
.sub{
background: rgb(245, 7, 7);
padding: 20px;
width: 65%;
margin: 10px 0.5px 0px;
border-bottom-right-radius: 2rem;
opacity: 1;
}
.sub-menu{
background: rgb(245, 7, 7);
padding: 20px;
margin: 0px 0.5px 40px 0.5px;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
border-top-left-radius: 1rem;
}
.user-info{
display: flex;
align-items: center;
}
.user-info h3{
font-weight: bold;
}
.user-info span{
width: 60px;
border-radius: 50%;
margin-right: 15px;
}
.sub-menu-link{
display: flex;
align-items: center;
text-decoration: none;
color: #525252;
margin: 12px 0;
}
.sub-menu-link p{
width: 100%;
}
.sub-menu-link img{
width: 40px;
background: #e5e5e5;
border-radius: 50%;
padding: 8px;
margin-right: 15px;
}
.sub-menu-link span{
font-size: 22px;
transition: transform 0.5s;
}
.sub-menu-link:hover span{
transform: translate(5px);
}
.sub-menu-link:hover p{
font-weight: 600;
}
<!DOCTYPE html>
<!-- Creadted by Coding Pakistan Youtube Channel -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<nav >
<div class="p">
<div onclick="toggleMenu()" class="user-pic">
<span >CK</span>
</div></div>
<div class="sub-menu-wrap" id="subMenu">
<div class="sub">
</div>
<div class="sub-menu">
<a href="#" class="sub-menu-link">
<img src="images/profile.png">
<p>User Profile</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/help.png">
<p>Privacy and Safety</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/setting.png">
<p>Settings</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/logout.png">
<p>Sign Out</p>
</a>
</div>
</div>
</nav>
</div>
<script>
let subMenu = document.getElementById("subMenu");
function toggleMenu(){
subMenu.classList.toggle("open-menu");
}
</script>
</body>
</html>

Try this:
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.hero{
width: 100%;
min-height: 100vh;
background: #eceaff;
color: #525252;
}
nav{
padding: 20px 10%;
align-items: center;
justify-content: space-between;
position: relative;
}
.user-pic{
padding: 15px;
float: right;
border-radius: 50rem;
cursor: pointer;
background-color: white;
border-radius: 50rem;
border: 15px solid rgb(245, 7, 7);
box-shadow: 0 0 0 15px rgb(245 7 7);
}
nav ul{
width: 100%;
text-align: right;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
color: white;
text-decoration: none;
}
nav ul li a:hover{
color: yellow;
}
.sub-menu-link{
background-color: white;
border-radius: 50rem;
}
.sub-menu-wrap{
position: absolute;
top: 100%;
right: 9%;
width: 320px;
max-height: 0px;
overflow: hidden;
}
.sub-menu-wrap.open-menu{
max-height: 400px;
margin-top: 44px;
}
.sub{
background: rgb(245, 7, 7);
padding: 20px;
width: 65%;
margin: 10px 0.5px 0px;
border-bottom-right-radius: 2rem;
opacity: 1;
}
.sub-menu{
background: rgb(245, 7, 7);
padding: 20px;
margin: 0px 0.5px 40px 0.5px;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
border-top-left-radius: 1rem;
}
.user-info{
display: flex;
align-items: center;
}
.user-info h3{
font-weight: bold;
}
.user-info span{
width: 60px;
border-radius: 50%;
margin-right: 15px;
}
.sub-menu-link{
display: flex;
align-items: center;
text-decoration: none;
color: #525252;
margin: 12px 0;
}
.sub-menu-link p{
width: 100%;
}
.sub-menu-link img{
width: 40px;
background: #e5e5e5;
border-radius: 50%;
padding: 8px;
margin-right: 15px;
}
.sub-menu-link span{
font-size: 22px;
transition: transform 0.5s;
}
.sub-menu-link:hover span{
transform: translate(5px);
}
.sub-menu-link:hover p{
font-weight: 600;
}
<!DOCTYPE html>
<!-- Creadted by Coding Pakistan Youtube Channel -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<nav >
<div class="p">
<div onclick="toggleMenu()" class="user-pic">
<span >CK</span>
</div></div>
<div class="sub-menu-wrap" id="subMenu">
<div class="sub-menu">
<a href="#" class="sub-menu-link">
<img src="images/profile.png">
<p>User Profile</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/help.png">
<p>Privacy and Safety</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/setting.png">
<p>Settings</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/logout.png">
<p>Sign Out</p>
</a>
</div>
</div>
</nav>
</div>
<script>
let subMenu = document.getElementById("subMenu");
function toggleMenu(){
subMenu.classList.toggle("open-menu");
}
</script>
</body>
</html>

Image Modal or Expand when click in html and css

So i am trying to put a code for modal or in order to expand my images. I already checked every sector or every codes and still didn't find why it's not working. I don't want nothing to change in it except the modal, it my get mess up if i change things. I got the codes from a website. In the site their result are working but when i put the codes in the notepad nothing happened. It will be really helpful if you can find what is wrong with it. Thank you in advance for those who will help me.
body {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 8vw 130vw 7vw;
grid-gap: 0em;
margin: 0;
padding: 0;
background-color: #ffffff;
width: 100%;
}
header,
footer {
grid-column: 1 / span 2;
}
main {
grid-column: 1 / span 2;
}
body {
margin: 0 auto;
max-width: 89em;
margin-left: 0;
margin-right:0;
padding: 0em 0;
}
header,
main,
aside,
footer {
display: flex;
}
footer {
background: #eaeaea;
}
.main1 {
margin-top: 450px;
margin-left: 0;
}
#body_1 h2 {
margin-left: 50px;
font-size: 30px;
color: black;
margin-top: 95px;
margin-bottom:3px;
font-family: courier new;
float: left;
}
#body_1 h6 {
margin-left: 10px;
color: blue;
margin-top: 220px;
margin-bottom:3px;
font-family: courier new;
float: left;
}
#body_1 h4 {
margin-left: 230px;
font-size: 30px;
color: black;
margin-top: 260px;
margin-bottom:3px;
position: left;
float: left;
}
.text4 {
position: absolute;
float: left;
top: 870px;
}
.background_wrap {
position: absolute;
background-color: rgba(19, 13, 6,0.5);
z-index: -1000;
width: 100%;
height: 100% ;
overflow:hidden;
background: url("Pics&Video/laoang6.jpg") no-repeat center;
background-size: cover;
}
.background_wrap::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 20%;
z-index: 1000;
}
.sub-content {
position: fixed;
width: 1000px;
height: 120px;
margin: 0 auto;
transition: 0.5s;
}
.sub-content.active {
background-color: rgba(0, 26, 26,0.7);
width: 100%
}
.sub-content.active ul li a {
background-color: rgba(0, 26, 26,0.7);
}
#list {
margin-right: 5px;
position:fixed;
margin-left: 780px;
margin-top: 20px;
}
ul {
margin-top:1px;
padding: 0px;
list-style: none;
color: white;
margin-right: 0px;
font-family: calibri;
font-weight: bold;
}
ul li {
float: right;
width: 130px;
font-family: courier new;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff ;
border-left: 1px solid #ffffff ;
border-top: 1px solid #ffffff ;
line-height: 25px;
text-align: center;
font-size: 13px;
font-weight: bolder;
margin-top: 35px;
margin-right: 3px;
}
ul li a {
color: white;
display: block;
margin-top: 2px;
font-weight: bolder;
text-decoration: none;
}
ul li a:hover {
background-color: green;
font-weight:bolder;
cursor: pointer;
color: white
}
ul li ul li {
display: none;
font-weight: bolder;
}
ul li:hover ul li {
display:block;
cursor: pointer;
color: white;
margin-top:1px;
margin-right: 0px;
position: center;
background-size: cover;
font-weight: bolder;
}
h1 {
font-family: comic sans ms, sans-serif;
text-align: center;
font-size: 60px;
text-transform: uppercase;
font-weight: bolder;
color: white;
margin-bottom: 6px;
}
h2 {
font-family: comic sans ms, sans-serif;
text-align: center;
font-size: 30px;
text-transform: uppercase;
font-weight: 300;
color: white;
padding-top: 14%;
}
.wrapper {
position: center;
width: 750px;
height: 100px;
margin-left:auto;
margin-right:auto;
margin-top: 150px;
font-size: 17px;
}
.image_wrap {
margin-top:20px;
height: 70px;
margin-left:55px;
}
.fl_image {
float: left;
margin-right:5px;
margin-bottom: 10px;
}
.content h6 {
font-family: courier new;
font-size: 13px;
text-transform: uppercase;
font-weight: 300;
color: green;
margin-bottom: 10px;
margin-left: 25px;
margin-top: 100px;
}
.content p {
font-family: courier new;
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #ffffff;
}
div.gallery {
margin: 10px;
border: 0px solid #ccc;
float: left;
width: 250px;
height:250px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 100%;
}
.gallery1 {
float: left;
position: absolute;
margin-top: 320px;
margin-left: 10px;
}
div.gallery {
margin: 10px;
border: 0px solid #ccc;
float: left;
width: 300px;
height:250px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: 100%;
}
.gallery2 {
float: left;
position: absolute;
margin-top: 840px;
margin-left: 10px;
}
.text4 {
margin-left: 360px;
font-size: 30px;
color: black;
margin-top: 220px;
margin-bottom:3px;
position: left;
float: left;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10000 ; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 600px;
max-height: 450px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
.transparent_btn {
font-size: 10px;
line-height: 50px;
color: #EC7063 ;
background-color: transparent;
border: 1px solid #D98880;
padding: 1px 20px;
border-radius: 10px;
text-decoration: none;
cursor: pointer;
transition: background-color ease 300ms;
font-weight: 200;
font-size: 16px;
margin-top: 620px;
float: left;
}
.transparent_btn:hover {
color: #fff;
background-color: rgba(245, 183, 177,0.8);
}
.btn {
position: absolute;
z-index: 1;
margin-left: 640px;
}
.btn2 {
position: absolute;
margin-top: 530px;
margin-left: 640px;
}
<!Doctype html>
<html>
<head>
<title> Hotels </title>
<link style="text/css" href="Hotel.css" rel="stylesheet" > </link>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()){
$(".sub-content").addClass('active');
}else{
$(".sub-content").removeClass('active');
}
})
});
</script>
<script>
$(document).ready(function(){
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img04");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
});
</script>
</head>
<body>
<header>
<div class="background_wrap">
</div>
<div class="content">
<div class="sub-content">
<img class="image_wrap fl_image" src="Pics&Video\picture.png" height="100px" margin-left="5px" alt="Image One"/>
<div id="list" >
<ul>
<li><a> <i class="fas fa-file-signature"></i> Contact</a></li>
<li> <i class="fas fa-user"></i> About</li>
<li> History </i></li>
<li><a> Activities <i class="fas fa-caret-down"></i></a>
<ul>
<li> Hotels</li>
<li> Festival</li>
</ul>
</li>
</ul>
</div>
<h6>Calbayog Tourism</h6>
</div>
</div>
<div class="wrapper">
<h2>Search all travel deals, in one go</h2>
<h1> HOTEL </h1>
</div>
</header>
<main class="main1">
<div id="body_1">
<h2> Calbayog Hotel </h2> <h6> 2 Places </h6>
<h4> Baypark Hotel </h4>
<div class="gallery1">
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog1.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog2.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog3.jpg" width="600" height="400">
</div>
<div class="gallery">
<img id="myImg" src="Pics&Video/Western Samar/Calbayog/Baypark/calbayog4.jpg" width="600" height="400">
</div>
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img04">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</div>
<div class="btn">
View
</div>
<div class="text4">
<h4> Ciriaco Hotel </h4>
</div>
<div class="gallery2">
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco1.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco2.jpg" alt="Forest" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco3.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<div class="gallery">
<img src="Pics&Video/Western Samar/Calbayog/Ciriaco/ciriaco4.jpg" alt="Forest" width="600" height="400">
</div>
</div>
<div class="btn2">
View
</div>
</div>
</main >
<footer style="background: #1a75ff;">
<div style="text-align: center; margin-left: 40%; margin-top: 30px; font-family: courier new;">
#2019 Calbayog Tourism. All rights resereved.
</div>
</footer>
</body>
</html>

First you have to move your scripts inside document.ready. They are accessing DOM elements before rendering is completed.
Then you have to move the modal up. Do something like this and you'll see the modal move up. $("#img01").css({position:"absolute", "top": "0px"})
Then you can proceed :)

how to get the rotation info of a div into a variable in js

var schakkel = document.getElementById('schakkelaar').style.transform;
if (90 < schakkel && schakkel < 140){
console.log('it workssss');
}
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
background-color: #F7F7F7;
}
#border-buiten-tekst1 {
font-family: 'Raleway', sans-serif;
margin-left: 32.5vw;
margin-top: -3vw;
border: solid;
position: absolute;
}
#flex-container-pijlen {
position: absolute;
display: flex;
margin-left: 30vw;
margin-top: -3.2vw;
}
#pijl-links {
width: 3.5vw;
}
#pijl-rechts {
width: 3.5vw;
margin-left: 15vw;
margin-left: 22vw;
}
#gloeilamp {
margin-left: 65vw;
max-width: 5vw;
max-height: 5vw;
position: absolute;
}
#schakkelaar2 {
margin-left: 55.7vw;
margin-top: -20vw;
position: relative;
transform: rotate(37deg);
}
#schakkelaar {
margin-left: 35.2vw;
margin-top: 29.35vw;
position: relative;
transform: rotate(37deg);
}
#border-buiten-tekst2 {
font-family: 'Raleway', sans-serif;
margin-left: 34.4vw;
margin-top: 4vw;
padding-top: .2vw;
text-align: center;
width: 20vw;
border-left: solid;
border-right: solid;
border-bottom: solid;
}
.menu-area li a{
text-decoration: none;
color: #F7F7F7;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
padding: 0px 25px;
font-size: 14px;
line-height: 30px;
position: relative;
z-index: 1;
}
.menu-area li{
list-style: none;
display: inline-block;
}
.custom-padding{
padding-top: 20%;
}
nav{
position: relative;
padding: 10px 20px 10px 10px;
text-align: center;
z-index: 1;
background: #8CC63E;
margin: 0 auto;
width: calc(100% - 60px);
margin-top: 30px;
}
#border-spel {
background-image: url("../img/speelveld.png");
position: absolute;
margin-left: calc(42vw - 600px);
margin-top: .5vw;
width:1320px !important;
height: 36vw;
}
#border-buiten {
margin-left: calc( 30vw - 450px );
margin-top: 4.4vw;
width: 1650px;
height: 41vw;
background-color: #8CC63E;
}
.logo{
width: 20vh;
float: left;
margin-top: -30px;
margin-left: 10px;
}
.menu-area li a:hover{
background: #432064;
color: #F7F7F7;
}
nav:before{
position: absolute;
content: '';
left: 0;
top: 100%;
border-top:10px solid #333333;
border-right:10px solid #333333;
border-left: 10px solid transparent;
border-bottom:10px solid transparent;
}
nav:after{
position: absolute;
content: '';
left: 0;
top: 100%;
border-top:10px solid #333333;
border-right:10px solid #333333;
border-left: 10px solid transparent;
border-bottom:10px solid transparent;
}
.menu-area h2{
color:#F7F7F7;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin-left: 50px;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #432064;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<script src="js/js.js"></script>
<meta charset="UTF-8">
<meta name="description" content="Stagair local spot">
<meta name="keywords" content="Technolab, Stagairs, Workshops">
<meta name="author" content="Ravi Breugom, Alexander Wallaard, Natascha van Baal">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<title>Technolab Stagairspot</title>
</head>
<body data-gr-c-s-loaded="true">
<header>
<div class="custom=padding">
<nav>
<a href="../../beveiligd.php"><img class="logo"
src="../../img/WhatsApp%20Image%202018-09-20%20at%2010.44.00.jpeg"
alt="Logo"></a>
<ul class="menu-area">
<li>Workshops</li>
<li>Agenda</li>
<li>Leerdoelen</li>
<li>Contact</li>
<div class="dropdown">
<li><a class="dropbtn">⚙
<i class="fa fa-caret-down"></i>
</a></li>
<div class="dropdown-content">
<a href='../../uitloggen.php'>Uitloggen</a>
<a><?php
session_start();
if ($_SESSION['ingelogd'] == "ja") {
echo $_SESSION['username'] . "<br>";
} else {
header("Location: ../../login_form.php");
}
?></a>
</div>
</div>
</div>
</header>
<div id="border-buiten">
<h1 id="border-buiten-tekst1">Stroom Geeft energy game.</h1>
<p id="border-buiten-tekst2">het doel van dit spel is om het lampje van stroom te vorzien! lukt het jouw om het
lampje te laten branden?</p>
<section id="flex-container-pijlen">
<img id="pijl-links" alt="pijl-links" src="img/pijl-links.png">
<img id="pijl-rechts" alt="pijl-rechts" src="img/pijl-rechts.png">
</section>
<canvas id="border-spel">
</canvas>
<!--spel plaatjes-->
<div id="gloeilamp">
<img id="gloei-uit" alt="gloeiaan" src="img/gloeilamp-uit.png"/>
<img id="gloei-aan" alt="gloeiuit" src="img/gloeilamp-aan.jpg" style="display:none;"/>
</div>
<div id="schakkelaar"><img id="target" style="transform: rotate(-126.828deg);" src="img/schakkelaar.png"/></div>
<script src="./bl.ocks.org_files/rotate.js.download"></script>
<div id="schakkelaar2"><img id="target2" style="transform: rotate(-126.828deg);" src="img/schakkelaar.png"/></div>
<script src="./bl.ocks.org_files/rotate2.js.download"></script>
<footer id="copyright">© Technolab Leiden</footer>
</body>
</html>
ey everyone, i have a question about this code. i am making a simple js game, i need to get the rotation info of a image, so when you rotate the image in that game then something needs to happen when the image is being rotated between 90 and 140 degrees. But it keeps saying that the result is null, can anybody help me? i searched everywhere on the internet but i didn't found an answer. Sorry that the HTML & CSS is messy but i always make the code nice when i finished the project

If you set transform: rotate(50deg) to your element
const schakkel = document.getElementById('schakkelaar').style.transform; will return the string rotate(50deg) to you.
What you need to if you want to get the actual transformvalue is to use getComputedStyle: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
Then window.getComputedStyle(schakkel).transform will output the matrix transform of your element matrix(0.996195, 0.0871557, -0.0871557, 0.996195, 0, 0)
See more on how to use it on this good article at CSSTricks: https://css-tricks.com/get-value-of-css-rotation-through-javascript/

Here is the exactly what you need.
Try this you can remove the remaining deg.
HTML
<div id="banner-message"; style="transform: rotate(360deg)">
</div>
<script>
let style = $("#banner-message").attr('style');
let pos = style.indexOf("(")+1;
console.log(style.slice(pos, style.lastIndexOf(")")));
</script>

We Keep Coding

JavaScript is the programming language of the Web.

Add text pop up on link click - javascript

Related

Progress bar with steps styling

How can i make the glowing effect behind a video?

Border Radius Create

Image Modal or Expand when click in html and css

how to get the rotation info of a div into a variable in js

Categories

Resources