Border Radius Create - javascript
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>
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 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 make responsive iframe google maps full screen
I am trying to embed google maps in the website using iframes. I need this map to be fullscreen on any device when the map is shown. I can't figure out a way to do this, tried setting width and height to 100% which made it look like this ):
But right now my website looks like this:
Any way of making the map fullscreen?
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!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>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" width="720" height="550px" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
sorry i cant really get into adjusting your css right now but here is a little something i came up with when i need to output YouTube videos in iframes. try it out
<style>
#mediaPlayer{
position: relative;
height: auto;
padding-bottom: 56.25%;
padding-top: 1.875em;
overflow: hidden;
border: 0.1875em double #185875;
background-image:url('../video_loading.gif');
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-attachment: fixed;
/*to adjust the height and width*/
margin-right: 20%;
margin-left: 20%;
margin-top: 20%;
margin-bottom: 20%;
/*or you can use it in single line*/
margin:20%;
/*or if you want different margins for different sides in a single line*/
margin: 20% 20% 20% 20%;
/* the above means margin: top right bottom left; */
}
#mediaPlayer iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
}
</style>
/*instead of using margin just add a div and specify the exact height and width you want*/
<div style="height: 50%; width:50%;">
<center>
<div id="mediaPlayer">
<iframe id="play_now" width="100%" height="100%" src="" value="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</center>
</div>
The video_loading.gif background is usually a good idea for users with slow network to have something in the background while your iframe content is loading
but you have to find your own unique gif file/image and set it's location in the background-image:url('../file-location-here.gif');
just replace your <div class="box"></div> with the code above let me know how it turns out.
How about the following example. The solution came from Responsive iframe (google maps) and weird resizing. By tweaking padding-top and padding-bottom you can change the size.
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
.box {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
overflow: hidden;
}
.box iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!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>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
You can also try and use CSS variables:
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
let events = ['load', 'resize'];
let googleMaps = document.querySelector('.box iframe');
events.forEach( event => {
window.addEventListener(event, () => {
googleMaps.style.setProperty('--google-maps-height', `${window.innerHeight}px`);
});
});
.box {
height: 100%;
}
.box iframe {
width: 100%;
height: var(--google-maps-height);
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!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>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</body>
</html>
Are you looking for something like this? Add the following code to your css and see if it does the trick.
iframe {
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
Take a look at using viewport percentage
How do I display my hidden search form in the toggleable div on mobile screen?
How can I display the hidden search form on mobile device currently blank since display for the search form is none on media query? The search container is toggled.search_mobi is the trigger button. The search container is only viewable on desktop at the moment. Is this possible with either CSS or Javascript.
var toggle = document.querySelector(".search_mobi");
var content = document.querySelector(".search_container");
toggle.addEventListener("click", function() {
content.classList.toggle("displaysb");
});
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
*{
margin: 0;
}
header{
position: fixed;
top: 0;
right: 5px;
left: 5px;
z-index: 1;
}
.Navbar {
background-color: #46ACC2;
display: flex;
padding: 20px;
max-width: auto;
font-family: sans-serif;
color: white;
}
.Navbar__Link {
padding-right: 10px;
}
.Navbar__Link-brand{
padding-left: 50px;
}
.Navbar__Items {
display: flex;
vertical-align: middle;
}
.Navbar__Items--right {
margin-left:auto;
}
.Navbar__Link-toggle {
display: none;
}
.search {
position: relative;
display: flex;
font-size: 18px;
margin-left: auto;
vertical-align: middle;
}
.search_mobi{
display: none;
}
.search input {
width: 220px;
height: 25px;
background: #fff;
border: 1px solid #fff;
border-radius: 50px;
box-shadow: 0 0 5px #ccc, 0 2px 2px #ebebeb inset ;
}
.search input {
text-indent: 30px;
color:black;
font-weight: bolder;
padding: 5px;
}
.search .fa-search {
position: absolute;
top: 5px;
color: orange;
left: 10px;
font-size: 15px;
}
#media only screen and (max-width: 768px) {
.search_container{
display:block;
position: static;
margin-left: 5px;
margin-right: 5px;
margin-top: 62px;
height: 0px;
width: auto;
background-color: yellow;
z-index: 2;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.search_container.displaysb{
height: 35px;
}
.Navbar__Items,
.Navbar {
flex-direction: column;
}
.search{
display: none;
}
.search_mobi{
display: inline;
position: absolute;
vertical-align: middle;
color: orange;
background-color: #fff;
border-radius: 50%;
padding: 6px;
left: auto;
font-size: 16px;
cursor: pointer;
}
.Navbar__Items {
display:none;
}
.Navbar__Items--right {
margin-left:0;
}
.Navbar__ToggleShow {
display: flex;
padding-top: 20px;
height:200px;
z-index: 5;
}
.Navbar__Link{
padding-bottom: 20px;
align-self: center;
}
.Navbar__Link-brand{
margin: 0 auto;
padding: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="malinav.css" />
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
<header class="Navbar">
<div class="search_mobi">
<span class="fa fa-search"></span>
</div>
<div class=" Navbar__Link-brand">
Website
</div>
<div class="search ">
<input placeholder="Find products and services">
<span class="fa fa-search"></span>
</div>
<nav class="Navbar__Items Navbar__Items--right ">
<div class="Navbar__Link">
Mangoes
</div>
<div class="Navbar__Link">
Oranges
</div>
<div class="Navbar__Link">
Bananas
</div>
<div class="Navbar__Link">
Pears
</div>
<div class="Navbar__Link">
Avocado
</div>
</nav>
</header>
<div class="search_container">
<div class="search">
<input placeholder="Find products and services">
<span class="fa fa-search"></span>
</div>
</div>
<script src="malinav.JS"></script>
</body>
</html>
You need set id to search div
<div id="search" class="search">
<input placeholder="Find products and services">
<span class="fa fa-search"></span>
</div>
then toggle the hidden class
document.querySelector("#search").classList.toggle("search");
var toggle = document.querySelector(".search_mobi");
var content = document.querySelector(".search_container");
toggle.addEventListener("click", function() {
content.classList.toggle("displaysb");
document.querySelector("#search").classList.toggle("search");
});
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
*{
margin: 0;
}
header{
position: fixed;
top: 0;
right: 5px;
left: 5px;
z-index: 1;
}
.Navbar {
background-color: #46ACC2;
display: flex;
padding: 20px;
max-width: auto;
font-family: sans-serif;
color: white;
}
.Navbar__Link {
padding-right: 10px;
}
.Navbar__Link-brand{
padding-left: 50px;
}
.Navbar__Items {
display: flex;
vertical-align: middle;
}
.Navbar__Items--right {
margin-left:auto;
}
.Navbar__Link-toggle {
display: none;
}
.search {
position: relative;
display: flex;
font-size: 18px;
margin-left: auto;
vertical-align: middle;
}
.search_mobi{
display: none;
}
.search input {
width: 220px;
height: 25px;
background: #fff;
border: 1px solid #fff;
border-radius: 50px;
box-shadow: 0 0 5px #ccc, 0 2px 2px #ebebeb inset ;
}
.search input {
text-indent: 30px;
color:black;
font-weight: bolder;
padding: 5px;
}
.search .fa-search {
position: absolute;
top: 5px;
color: orange;
left: 10px;
font-size: 15px;
}
#media only screen and (max-width: 768px) {
.search_container{
display:block;
position: static;
margin-left: 5px;
margin-right: 5px;
margin-top: 62px;
height: 0px;
width: auto;
background-color: yellow;
z-index: 2;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.search_container.displaysb{
height: 35px;
}
.Navbar__Items,
.Navbar {
flex-direction: column;
}
.search{
display: none;
}
.search_mobi{
display: inline;
position: absolute;
vertical-align: middle;
color: orange;
background-color: #fff;
border-radius: 50%;
padding: 6px;
left: auto;
font-size: 16px;
cursor: pointer;
}
.Navbar__Items {
display:none;
}
.Navbar__Items--right {
margin-left:0;
}
.Navbar__ToggleShow {
display: flex;
padding-top: 20px;
height:200px;
z-index: 5;
}
.Navbar__Link{
padding-bottom: 20px;
align-self: center;
}
.Navbar__Link-brand{
margin: 0 auto;
padding: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="malinav.css" />
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
<header class="Navbar">
<div class="search_mobi">
<span class="fa fa-search"></span>
</div>
<div class=" Navbar__Link-brand">
Website
</div>
<div class="search ">
<input placeholder="Find products and services">
<span class="fa fa-search"></span>
</div>
<nav class="Navbar__Items Navbar__Items--right ">
<div class="Navbar__Link">
Mangoes
</div>
<div class="Navbar__Link">
Oranges
</div>
<div class="Navbar__Link">
Bananas
</div>
<div class="Navbar__Link">
Pears
</div>
<div class="Navbar__Link">
Avocado
</div>
</nav>
</header>
<div class="search_container">
<div id="search" class="search">
<input placeholder="Find products and services">
<span class="fa fa-search"></span>
</div>
</div>
<script src="malinav.JS"></script>
</body>
</html>
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.