How can i make the glowing effect behind a video?

How can i make the glowing effect behind a video? - javascript

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

Related

My close button is lost when i use the " justify-content: space-between;"

I'm following this yt video how to make a website everything is good but after i finish when i try to click the menu button which on mobile view the close button is no where to be find?!?! i play around the css when i remove the justify-content: space-between; the button is back but in a awkward position.
here is the code:
#import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");
* {
box-sizing: border-box;
font: inherit;
color: inherit;
}
body {
font-family: "Figtree", sans-serif;
padding: 0;
margin: 0;
color: #333;
}
p {
max-width: 600;
}
.container {
max-width: 1200px;
padding: 24px;
margin: 0 auto;
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
header {
display: flex;
align-items: center;
}
.navigation {
flex-grow: 1;
margin-left: 40px;
}
.nav--item {
text-decoration: none;
color: #887c7c;
margin-left: 24px;
}
.nav--item:first-child {
margin-left: 0;
}
.nav--item--active {
color: #333;
}
.nav--button {
border: none;
background: linear-gradient(
to right top,
#8c1587,
#bb0073,
#da1658,
#ea453a,
#eb6f12
);
padding: 10px 36px;
border-radius: 50px;
color: white;
}
main {
display: flex;
align-items: center;
}
.headline {
font-size: 52px;
font-weight: bolder;
padding: 0;
margin: 0;
}
.description {
color: #585454;
margin: 0;
padding: 0;
margin: 24px 0 40px 0;
}
.play-button {
border: 1px solid #cda6da;
border-radius: 50px;
padding: 10px 36px;
background: transparent;
display: flex;
align-items: center;
background: linear-gradient(to right, #cf17c9 0%, #cf1512 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.play-button .fa-solid{
background: inherit;
font-size: 1.20rem;
margin-right: 6px;
}
.main--content {
flex: 1;
margin: 40px 0 40px 0;
}
.main--img {
flex: 1;
}
.main--img img{
width: 100%;
}
footer{
display: flex;
color: #bdbdbd;
}
.socials{
margin-right: 40px;
}
.socials--items{
margin-right: 12px;
}
.socials--items:hover{
color: #333;
}
.menu-button
{
flex-grow: 1;
display: none;
}
.menu-button button{
border: none;
background-color: transparent;
font-size: 1.5rem;
}
.mobile-nav{
position: fixed;
width: 100vh;
height: 100vh;
background-color: white;
padding: 24px;
display: none;
/* transform: translateX(-100%);
transition: transform 300ms ease-in-out; */
}
.mobile-nav-open
{
transform: translateX(0);
}
.mobile--nav--header{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
}
#mobile--nav--item--active{
color: #333;
}
.close-button button{
border: none;
background-color: transparent;
font-size: 1.5rem;
}
.mobile--nav--item{
text-decoration: none;
font-size: 1.2rem;
color: #bdbdbd;
display: block;
margin-bottom: 24px;
}
#media only screen and (max-width:660px)
{
main{
display: block;
}
header .logo{
display: none;
}
.navigation{
display: none;
}
.mobile-nav{
display: block;
}
.menu-button{
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/84d2ebe131.js"
crossorigin="anonymous"
></script>
<title>Home Page</title>
</head>
<div class="mobile-nav" id="mobile-nav">
<div class="mobile--nav--header">
<img src="/img/Collab..png" alt="logo of the page" class="logo" />
<div class="close-button" onclick="toggleMobileNavigation()">
<button><i class="fa-solid fa-close"></i></button>
</div>
</div>
Home
About
Services
Contact
</div>
<div class="container">
<header>
<img src="/img/Collab..png" alt="logo of the page" class="logo" />
<nav class="navigation">
Home
About
Services
Contact
</nav>
<div class="menu-button" onclick="toggleMobileNavigation()">
<button><i class="fa-solid fa-bars"></i></button>
</div>
<button class="nav--button">Get Started</button>
</header>
<main>
<div class="main--content">
<h1 class="headline">Lorem ipsum <br />dolor sit.</h1>
<p class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi
soluta officiis quae repellat excepturi iure optio consectetur iste
fuga voluptas.
</p>
<button class="play-button">
<i class="fa-solid fa-circle-play"></i>Discover Video
</button>
</div>
<div class="main--img">
<img src="/img/data-x1.png" alt="people illustration" />
</div>
</main>
<footer>
<div class="socials">
<a href="" class="socials--items">
<i class="fa-brands fa-instagram"></i
></a>
<a href="" class="socials--items">
<i class="fa-brands fa-twitter"></i
></a>
<a href="" class="socials--items">
<i class="fa-brands fa-youtube"></i
></a>
</div>
<span>John Cena</span>
</footer>
</div>
<!--
<script>
function toggleMobileNavigation()
{
var element = document.getElementById("mobile-nav");
if (element.classList.contains("mobile-nav-open"))
{
element.classList.remove("mobile-nav-open");
}
else
{
element.classList.add("mobile-nav-open");
}
}
</script>
-->
</body>
</html>

You need to set the width to 100vw I think there was a typo, where you set the viewport height for width, also the child div inherits the width of the parent, finally padding-right is added to make the button visible on screen!
function toggleMobileNavigation()
{
var element = document.getElementById("mobile-nav");
if (element.classList.contains("mobile-nav-open"))
{
element.classList.remove("mobile-nav-open");
}
else
{
element.classList.add("mobile-nav-open");
}
}
#import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");
* {
box-sizing: border-box;
font: inherit;
color: inherit;
}
body {
font-family: "Figtree", sans-serif;
padding: 0;
margin: 0;
color: #333;
}
p {
max-width: 600;
}
.container {
max-width: 1200px;
padding: 24px;
margin: 0 auto;
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
header {
display: flex;
align-items: center;
}
.navigation {
flex-grow: 1;
margin-left: 40px;
}
.nav--item {
text-decoration: none;
color: #887c7c;
margin-left: 24px;
}
.nav--item:first-child {
margin-left: 0;
}
.nav--item--active {
color: #333;
}
.nav--button {
border: none;
background: linear-gradient(
to right top,
#8c1587,
#bb0073,
#da1658,
#ea453a,
#eb6f12
);
padding: 10px 36px;
border-radius: 50px;
color: white;
}
main {
display: flex;
align-items: center;
}
.headline {
font-size: 52px;
font-weight: bolder;
padding: 0;
margin: 0;
}
.description {
color: #585454;
margin: 0;
padding: 0;
margin: 24px 0 40px 0;
}
.play-button {
border: 1px solid #cda6da;
border-radius: 50px;
padding: 10px 36px;
background: transparent;
display: flex;
align-items: center;
background: linear-gradient(to right, #cf17c9 0%, #cf1512 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.play-button .fa-solid{
background: inherit;
font-size: 1.20rem;
margin-right: 6px;
}
.main--content {
flex: 1;
margin: 40px 0 40px 0;
}
.main--img {
flex: 1;
}
.main--img img{
width: 100%;
}
footer{
display: flex;
color: #bdbdbd;
}
.socials{
margin-right: 40px;
}
.socials--items{
margin-right: 12px;
}
.socials--items:hover{
color: #333;
}
.menu-button
{
flex-grow: 1;
display: none;
}
.menu-button button{
border: none;
background-color: transparent;
font-size: 1.5rem;
}
.mobile-nav .close-button {
position: absolute;
top:0;
right: 10px;
}
.mobile-nav{
position: fixed;
width: 100vw; /* <- changed */
height: 100vh;
background-color: white;
padding: 24px;
display: none;
position: relative;
/* transform: translateX(-100%);
transition: transform 300ms ease-in-out; */
}
.mobile-nav-open
{
transform: translateX(0);
}
.mobile--nav--header{
width:100%;
display: flex;
align-items: center;
justify-content: space-between; /* <- changed */
position: relative;
width: 100%; /* <- changed */
padding-right: 20px; /* <- changed */
margin-bottom: 40px;
}
#mobile--nav--item--active{
color: #333;
}
.close-button button{
border: none;
background-color: transparent;
font-size: 1.5rem;
}
.mobile--nav--item{
text-decoration: none;
font-size: 1.2rem;
color: #bdbdbd;
display: block;
margin-bottom: 24px;
}
#media only screen and (max-width:660px)
{
main{
display: block;
}
header .logo{
display: none;
}
.navigation{
display: none;
}
.mobile-nav{
display: block;
}
.menu-button{
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/84d2ebe131.js"
crossorigin="anonymous"
></script>
<title>Home Page</title>
</head>
<div class="mobile-nav" id="mobile-nav">
<div class="mobile--nav--header">
<img src="/img/Collab..png" alt="logo of the page" class="logo" />
<div class="close-button" onclick="toggleMobileNavigation()">
<button><i class="fa-solid fa-close"></i></button>
</div>
</div>
Home
About
Services
Contact
</div>
<div class="container">
<header>
<img src="/img/Collab..png" alt="logo of the page" class="logo" />
<nav class="navigation">
Home
About
Services
Contact
</nav>
<div class="menu-button" onclick="toggleMobileNavigation()">
<button><i class="fa-solid fa-bars"></i></button>
</div>
<button class="nav--button">Get Started</button>
</header>
<main>
<div class="main--content">
<h1 class="headline">Lorem ipsum <br />dolor sit.</h1>
<p class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi
soluta officiis quae repellat excepturi iure optio consectetur iste
fuga voluptas.
</p>
<button class="play-button">
<i class="fa-solid fa-circle-play"></i>Discover Video
</button>
</div>
<div class="main--img">
<img src="/img/data-x1.png" alt="people illustration" />
</div>
</main>
<footer>
<div class="socials">
<a href="" class="socials--items">
<i class="fa-brands fa-instagram"></i
></a>
<a href="" class="socials--items">
<i class="fa-brands fa-twitter"></i
></a>
<a href="" class="socials--items">
<i class="fa-brands fa-youtube"></i
></a>
</div>
<span>John Cena</span>
</footer>
</div>
</body>
</html>

Why is my automatic chatbox not showing up?

So when i click "chat with us", the full chat box must appear but it doesn't. The console announces mistake as:'Uncaught TypeError: Cannot read property 'style' of null
at HTMLButtonElement. '
Anything wrong with my codes? somebody can help me? Thank you so much!
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Snake</title>
<link rel="stylesheet" href="chat.css">
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!
<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i>
</button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
</html>
This is my css:
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
This is my JS:
var coll = document.getElementsByClassName('collapsible')
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active')
var content = this.nextElementSibling
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}

Using .nextSibling will look directly for the next child element under your parent div. Since this refers to your button inside of chat-bar-collapsible there are no more child elements that are adjacent to your button element under the char-bar-collapsible div. You need to walk up to the parent element using .parentNode, and then access the adjacent content div from that using .nextElementSibling:
var content = this.parentNode.nextElementSibling;
var coll = document.getElementsByClassName('collapsible');
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active');
var content = this.parentNode.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i></button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>

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>

How to stop Iframe (video) after modal close?

I met some problems in my code, I find some solutions in this forum but somehow it doesn't help me. So maybe you will find how to solve it. I need to stop the video after closing it with the cross icon and also after clicking on the modal. Also, it will be cool if this video starts from beginning after it opens again.
#font-face {
font-family: "BebasNeue";
src: url("fonts/BebasNeue.otf");
}
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing: antialiased;
text-rendering:optimizeLegibility;
}
::selection {
background: #f3df4b; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #f3df4b; /* Gecko Browsers */
}
html, body {
height: 100%;
background: #f8f8f8; /* fallback for old browsers */
}
h1{
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 6rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
h2{
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 3.5rem;
font-style: normal;
font-weight: normal;
font-variant: small-caps;
}
p{
font-family: 'BebasNeue', sans-serif;
font-size: 1.25rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #111;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.push {
height: 50px;
}
/*/////////menu////////////*/
header{
height: 100px;
display: inline-block;
position: relative;
z-index: 100;
width: 100%;
}
.menu_box{
width: 100%;
overflow: hidden;
position: fixed;
}
.menu_box_logo{
float: left;
padding: 20px 20px 20px 20px;
}
.menu_box_ul {
float: right;
padding: 40px 0 20px 20px;
}
.menu_box_ul a {
display: inline;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 1.75rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.menu_box_ul a:hover {
color: #F3DF4B;
}
.menu_box_ul .icon {
display: none;
}
.menu_box_ul_more{
display: none;
top: 40px;
}
.menu_box_ul_more a {
display: inline;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
font-family: 'BebasNeue', sans-serif;
font-size: 1.25rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.menu_box_ul_more a:hover {
color: white;
}
#media screen and (max-width: 826px) {
.menu_box_ul_more{
display: none;
}
}
#media screen and (min-width: 826px) {
.menu_box_ul_more.show{
display: none;
}
}
#media screen and (max-width: 826px) {
.menu_box_ul a {
display: none;
}
.menu_box_ul a.icon,
.menu_box_ul a.language {
display: inline;
}
}
#media screen and (max-width: 826px){
.menu_box_ul_more.show .icon{
position: absolute;
right: 0;
top: 0;
}
.menu_box_ul_more.show{
background-color: #f8f8f8;
text-align: center;
padding-top: 110px;
}
.menu_box_ul_more.show a{
display: block;
}
}
#a_checked{
color: #F3DF4B;
}
.menu_icon{
display: none;
}
/* The container <div> - needed to position the dropdown content */
.container{
margin-top: 100px;
}
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f8f8f8;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
/*/////////index////////////*/
.logo{
width: 100%;
text-align:center;
}
.text{
display:table-cell;
vertical-align: middle;
text-align:center;
width: 100%;
padding: 120px 20px 0px 20px;
margin: auto;
width: 50%;
}
.text1{
padding-top: 15px;
padding-bottom: 15px;
}
.text2{
padding-top: 15px;
padding-bottom: 15px;
}
.text2 .h2{
font-family: 'BebasNeue', sans-serif;
font-size: 2.5rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.text3{
padding-top: 15px;
padding-bottom: 15px;
}
.about_button{
padding-top: 15px;
padding-bottom: 15px;
line-height: 500px;
text-align: center;
height: 500px;
}
.text3_span{
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.about_read_watch{
line-height: 100px;
text-align: center;
height: 100px;
margin-bottom: 60px;
margin-top: 20px;
}
.text4_span{
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.button{
background-color: transparent;
color: #F3DF4B;
border: 2px solid #F3DF4B;
border-radius: 999px;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - .2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: .2em;
text-decoration: none;
outline: none;
}
.button2{
background-color: transparent;
color: #F3DF4B;
border: 2px solid #F3DF4B;
border-radius: 999px;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - .2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: .2em;
text-decoration: none;
outline: none;
margin-left: 20px;
}
.button3{
background-color: transparent;
color: #F3DF4B;
border: 2px solid #F3DF4B;
border-radius: 999px;
padding-top: 1em;
padding-right: 1.44em;
padding-right: calc(1.44em - .2em);
padding-bottom: 1em;
padding-left: 1.44em;
text-align: center;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: .2em;
text-decoration: none;
outline: none;
margin-left: 20px;
}
.button:hover,
.button2:hover,
.button3:hover{
color: #000;
background-color: #f8f8f8;
border: 2px solid #000;
-webkit-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
-moz-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
-ms-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
-o-transition: color 500ms ease-in-out, border-color 170ms ease-in-out;
}
#media (max-width:545px) {
.text1 h1{
font-size: 2.5rem;
}
.text1{
padding-top: 15px;
padding-bottom: 5px;
}
.text2{
padding-top: 5px;
padding-bottom: 5px;
}
.text2 h2{
font-size: 2rem;
}
.text3{
padding-top: 5px;
padding-bottom: 15px;
}
.text{
padding: 50px 20px 0px 20px;
}
}
.imglog{
margin-top: 70px;
width: 500px;
height: 190.5px;
}
#media (max-width: 470px) {
.imglog{
width: 250px;
height: 95.25px;
}
}
#media (max-width: 585px) {
.button3{
margin-top: 20px;
}
}
#media (max-width: 390px) {
.button2{
margin-top: 20px;
}
}
/*/////////footer////////////*/
#import url(https://fonts.googleapis.com/css?family=Lato);
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
.footer {
height: 50px;
text-align: center;
}
.col-lg-6 .offset-lg-2 {
width: 260px;
display:block;
margin: 0 auto;
}
.col-lg-6 .offset-lg-2 ul{
padding:0;
list-style: none;
}
.social-icon {
color: #fff;
font-size: 1.875rem;
}
.social-icons{
margin-bottom: -1rem;
}
.social-icons li {
vertical-align: top;
display: inline;
}
.social-icons a {
color: rgb(234, 234, 234);
text-decoration: none;
}
.fa-facebook {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-facebook:hover {
background-color: #3d5b99;
}
.fa-youtube {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-youtube:hover {
background-color: #e64a41;
}
.fa-linkedin {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-linkedin:hover {
background-color: #0073a4;
}
.fa-instagram {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
color: #000;
}
.fa-instagram:hover {
background-color: #9b6954;
}
/*/////////work.html file////////////*/
.col-lg-5.col-md-12 a{
text-decoration-line: none;
}
#div_box_video{
width: 650px;
height: 550px;
background-image: url(/./honey/rusne.jpg);
-ms-background-position-x: center;
-ms-background-position-y: bottom;
background-position: center bottom;
background-size: cover;
margin: 0 auto;
margin-top: 30px;
}
#div_box_video img{
z-index: 3;
}
#shadow_box{
position: relative;
width: 650px;
height: 550px;
background-color: rgba(137, 137, 137, 0.56);
z-index: 10;
text-align: center;
color: rgb(28, 28, 28);
}
#shadow_box:hover{
background-color: rgba(137, 137, 137, 0.9);
}
#popupBoxOnePosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
#popupBoxTwoPosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
#popupBoxThreePosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
#popupBoxFourPosition{
top:0;
left:0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 101;
}
.login-html{
width:70%;
height:85%;
position:absolute;
padding:90px 70px 50px 70px;
margin: auto;
top: 7.5%;
left: 15%;
border-radius: 10px;
}
.close {
position: absolute;
right: 20px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
#forphone2{
margin: 0 auto;
width: 60%;
}
#media (max-width:1298px) {
.sign-in-htm iframe{
height: 550px;
}
.login-html{
width: 90%;
left: 5%;
}
}
#media (max-width:1000px) {
.sign-in-htm iframe{
height: 400px;
}
.login-html{
width: 90%;
left: 5%;
top: 15%;
}
}
#media (max-width:780px) {
.sign-in-htm iframe{
height: 300px;
}
.login-html{
width: 100%;
left: 0%;
}
}
#media (max-width:550px) {
.sign-in-htm iframe{
height: 300px;
}
.login-html{
width: 100%;
left: 0%;
top: 20%;
padding:90px 35px 50px 35px;
}
}
#media (max-width:450px) {
.sign-in-htm iframe{
height: 200px;
}
.login-html{
width: 100%;
left: 0%;
top: 20%;
padding:90px 15px 50px 15px;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="lt-LT"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src=""></script>
<script>
</script>
<link rel="icon" type="image/x-icon" href="../img/favicon.ico" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="google-site-verification" content="" />
<title>Honey agency | Video Production</title>
<meta name="google-site-verification" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" itemprop="description" content="Main agiency "Video Production" services: video promotion, video creation, video" />
<meta name="keywords" itemprop="keywords" content="video promotion, video creation, video" />
<link rel="canonical" href="http://thehoney.lt/" />
<meta property="og:title" content="Begining"/>
<meta property="og:description" content="[fullwidth backgroundcolor="" backgroundimage="" backgroundrepeat="no-repeat" backgroundposition="top left" backgroundattachment="scroll" bordersize="1px" bordercolor="" paddingTop="" paddingBottom="20"]Make your story sweet as honey!Agiency "VIDEO PRODUCTION SERVICES" - is"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://thehoney.lt/"/>
<meta property="og:site_name" content="VIDEO PRODUCTION SERVICES"/>
<meta property="og:image" content="http://thehoney.lt/img/honey_logo_transparent_croped.png"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../style.css?v=1.1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div id="popupBoxOnePosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxOnePosition').style.display='none'" class="close" title="Close Modal1">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700px" src="https://www.youtube.com/embed/Ttt8U6teiH0?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="popupBoxTwoPosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxTwoPosition').style.display='none'" class="close" title="Close Modal2">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700" src="https://www.youtube.com/embed/x-3BnCklSuE?showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="popupBoxThreePosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxThreePosition').style.display='none'" class="close" title="Close Modal3">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700px" src="https://www.youtube.com/embed/Ttt8U6teiH0?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="popupBoxFourPosition" class="modal">
<div class="login-html">
<span onclick="document.getElementById('popupBoxFourPosition').style.display='none'" class="close" title="Close Modal4">×</span>
<div class="login-form">
<div class="sign-in-htm">
<iframe width="100%" height="700px" src="https://www.youtube.com/embed/Ttt8U6teiH0?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="wrapper">
<header>
<div class="menu_box" id="menu_box">
<div class="menu_box_logo">
<img class="imglogo" style="width: 250px; height:95,25px;" src="../img/honey_logo_transparent_croped.png" alt="Honey logo">
</div>
<div class="menu_box_ul" id="myTopnav">
Our work
Who we are
Contact us
☰
</div>
<div class="menu_box_ul_more" id="myDropdown" class="dropdown-content">
Our work
Who we are
Contact us
</div>
</div>
</header>
<div class="container-fluid" style="margin-bottom: 70px; width:100%;">
<div class="row justify-content-center" style="width:100%; margin-right: 0; margin-left: 0;">
<div class="col-lg-5 col-md-12" id="forphone">
<a id="forphone2" href="javascript:void(0)" onclick="document.getElementById('popupBoxOnePosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
<div class="col-lg-5 col-md-12" id="forphone">
<a href="javascript:void(0)" onclick="document.getElementById('popupBoxTwoPosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
</div>
<div class="row justify-content-center" style="width:100%; margin-right: 0; margin-left: 0;">
<div class="col-lg-5 col-md-12" >
<a href="javascript:void(0)" onclick="document.getElementById('popupBoxThreePosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
<div class="col-lg-5 col-md-12" >
<a href="javascript:void(0)" onclick="document.getElementById('popupBoxFourPosition').style.display='block'" style="width:auto;">
<div class="col-12" id="div_box_video" style="padding-left: 0; padding-right: 0;">
<div class="col-12" id="shadow_box">
<h1 style="color: #f8f8f8; text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);">Rusnytė<p >Rusnytės projektas</p></h1>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="raw" style="margin-top: 70px;">
<div class="about_read_watch">
<span class="text4_span">
<input type="button" class="button" onclick="location.href='../contacts';" value="Contact Us"/>
</span>
</div>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="social">
<div class="footer-social-icons">
<ul class="social-icons">
<li><a target="_blank" href="https://www.facebook.com/Honey-Media-247807789328138/" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" href="https://www.linkedin.com/company/11763547/" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
<li><a target="_blank" href="https://www.instagram.com/thehoney_media/" class="social-icon"> <i class="fa fa-instagram"></i></a></li>
<li><a target="_blank" href="https://www.youtube.com/channel/UCQhsEwX6sxXnxt70pJXg1Rw/featured" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('.menu_box');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$('.menu_box').css('background-color', '#f8f8f8');
$('.imglogo').css('width', '125px');
$('.imglogo').css('height', '47.625px');
$('.menu_box_ul a').css('font-size', '1.25rem');
$('.menu_box_logo').css('padding', '10px 10px 10px 10px');
$('.menu_box_ul').css('padding', '25px 0 10px 10px');
$('.menu_box_ul_more.show a').css('font-size', '1.75rem');
$('.menu_box_ul_more.show').css('padding-top', '80px');
} else {
$('.menu_box').css('background-color', 'transparent');
$('.imglogo').css('width', '250px');
$('.imglogo').css('height', '95.25px');
$('.menu_box_ul a').css('font-size', '1.75rem');
$('.menu_box_logo').css('padding', '20px');
$('.menu_box_ul').css('padding', '40px 0 20px 20px');
$('.menu_box_ul_more.show a').css('font-size', '2rem');
$('.menu_box_ul_more.show').css('padding-top', '110px');
}
});
});
</script>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.icon')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<script>
// Get the modal
var modal = document.getElementById('popupBoxOnePosition');
var modal2 = document.getElementById('popupBoxTwoPosition');
var modal3 = document.getElementById('popupBoxThreePosition');
var modal4 = document.getElementById('popupBoxFourPosition');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
if (event.target == modal3) {
modal3.style.display = "none";
}
if (event.target == modal4) {
modal4.style.display = "none";
}
}
</script>
</body>
</html>

This will do the trick
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;
This too
document.getElementById('some_frame_id').contentWindow.location.reload();
The second one will not work due to CORS in most cases.

You should do that by postMessage like the following:
$('.close-modal').click(function(){
$('.your-iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});

Add text pop up on link click

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.

We Keep Coding

JavaScript is the programming language of the Web.

How can i make the glowing effect behind a video? - javascript

Related

My close button is lost when i use the " justify-content: space-between;"

Why is my automatic chatbox not showing up?

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

How to stop Iframe (video) after modal close?

Add text pop up on link click

Categories

Resources