I wrote code on JavaScript, it suppose to give class "active" to the sidebar when clicking on the hamburger menu, but it isn't. It says that "hamburger is not defined or it's not a function". I checked everything I could but could not find the answer.
Here is the HTML code:
const hamburger = document.getElementsByClassName(".hamburger");
const sidebar = document.getElementsByClassName(".sidebar");
hamburger.addEventListener('click', () => {
sidebar.classList.add("active");
})
.main-page {
width: 100%;
height: 100vh;
background-color: #000;
display: flex;
flex-direction: column;
justify-content: center;
}
.main-page__inner {
width: 100%;
max-width: 1350px;
margin: 0 auto;
}
.main-page__title {
font-family: 'Syncopate';
font-style: normal;
font-weight: 700;
font-size: 100px;
line-height: 104px;
color: #FFFFFF;
}
.hamburger {
position: absolute;
width: 40px;
top: 69px;
left: 41px;
z-index: 9999;
padding: 15px 0;
cursor: pointer;
}
.hamburger__item {
width: 100%;
display: block;
height: 4px;
background-color: #fff;
position: absolute;
inset: 0;
margin: 0 auto;
}
.hamburger__item:before,
.hamburger__item:after {
width: 100%;
height: 4px;
position: absolute;
content: "";
background-color: #fff;
left: 0;
z-index: 9999;
}
.hamburger__item:before {
top: -7px;
}
.hamburger__item:after {
bottom: -8px;
}
.sidebar {
position: fixed;
top: 0;
left: -100%;
bottom: 0;
z-index: 600;
background: #591753;
width: 100%;
max-width: 400px;
height: 100vh;
visibility: hidden;
}
.sidebar.open {
visibility: visible;
left: 0;
}
.sidebar__inner {
display: flex;
align-items: center;
justify-content: center;
margin: auto 0;
}
.sidebar__title {
font-family: 'Montserrat';
font-weight: 400;
font-size: 20px;
color: #fff;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&family=Montserrat:wght#400;600&family=Open+Sans:wght#300;400;500;600;700;800&family=Raleway:wght#100;200;300;400;500;600;700;800;900&family=Source+Sans+Pro:wght#600&family=Syncopate:wght#400;700&display=swap"
rel="stylesheet">
<header class="header">
<div class="container">
<div class="header__inner">
<div class="nav-bar">
<img class="logo" src="/assets/Header/LOGO.png" alt="logo">
<a class="click-to-action" href="#">Оставить заявку</a>
</div>
</div>
</div>
</header>
<div class="hamburger" id="hamburger">
<span class="hamburger__item" id="hamburger__item"></span>
</div>
<div class="sidebar" id="sidebar">
<div class="sidebar__inner">
<h1 class="sidebar__title">BLA BLA BLA</h1>
</div>
</div>
<div class="main-page">
<div class="container">
<div class="main-page__inner">
<h1 class="main-page__title">CHAMPION ASTANA</h1>
</div>
</div>
</div>
Will be easier for you if you use
document.getElementById("hamburger"); and
document.getElementById("sidebar");
instead of getElementsByClassName
Also you need to change in the css this class
.sidebar.open {
visibility: visible;
left: 0;
}
into this one:
.sidebar.active {
visibility: visible;
left: 0;
}
Because you are adding the class "active" in sidebar.classList.add("active");, not the class "open".
Here is a working code of your example:
const hamburger = document.getElementById("hamburger");
const sidebar = document.getElementById("sidebar");
hamburger.addEventListener('click', () => {
sidebar.classList.add("active");
})
.main-page {
width: 100%;
height: 100vh;
background-color: #000;
display: flex;
flex-direction: column;
justify-content: center;
}
.main-page__inner {
width: 100%;
max-width: 1350px;
margin: 0 auto;
}
.main-page__title {
font-family: 'Syncopate';
font-style: normal;
font-weight: 700;
font-size: 100px;
line-height: 104px;
color: #FFFFFF;
}
.hamburger {
position: absolute;
width: 40px;
top: 69px;
left: 41px;
z-index: 9999;
padding: 15px 0;
cursor: pointer;
}
.hamburger__item {
width: 100%;
display: block;
height: 4px;
background-color: #fff;
position: absolute;
inset: 0;
margin: 0 auto;
}
.hamburger__item:before,
.hamburger__item:after {
width: 100%;
height: 4px;
position: absolute;
content: "";
background-color: #fff;
left: 0;
z-index: 9999;
}
.hamburger__item:before {
top: -7px;
}
.hamburger__item:after {
bottom: -8px;
}
.sidebar {
position: fixed;
top: 0;
left: -100%;
bottom: 0;
z-index: 600;
background: #591753;
width: 100%;
max-width: 400px;
height: 100vh;
visibility: hidden;
}
.sidebar.active {
visibility: visible;
left: 0;
}
.sidebar__inner {
display: flex;
align-items: center;
justify-content: center;
margin: auto 0;
}
.sidebar__title {
font-family: 'Montserrat';
font-wei
<!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="ChampionA.css">
<script src="ChampionA.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&family=Montserrat:wght#400;600&family=Open+Sans:wght#300;400;500;600;700;800&family=Raleway:wght#100;200;300;400;500;600;700;800;900&family=Source+Sans+Pro:wght#600&family=Syncopate:wght#400;700&display=swap" rel="stylesheet">
<title>CHAMPION Astana</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="header__inner">
<div class="nav-bar">
<img class="logo" src="/assets/Header/LOGO.png" alt="logo">
<a class="click-to-action" href="#">Оставить заявку</a>
</div>
</div>
</div>
</header>
<div class="hamburger" id="hamburger">
<span class="hamburger__item" id="hamburger__item"></span>
</div>
<div class="sidebar" id="sidebar">
<div class="sidebar__inner">
<h1 class="sidebar__title">BLA BLA BLA</h1>
</div>
</div>
<div class="main-page">
<div class="container">
<div class="main-page__inner">
<h1 class="main-page__title">CHAMPION ASTANA</h1>
</div>
</div>
</div>
</body>
</html>
Firstly you are using getElementsByClassName with wrong string. It should be only the class name: document.getElementsByClassName('hamburger').
Secondly getElementsByClassName returns the array of elements, therefore it should be used like document.getElementsByClassName('hamburger')[0]
I would recommend using document.getElementById("hamburger") as you do have id available.
const hamburger = document.getElementsByClassName("hamburger")[0];
const sidebar = document.getElementsByClassName("sidebar")[0];
hamburger.addEventListener('click', () =>{
sidebar.classList.add("active");
})
Related
My header is fixed and the text is set to relative. When I scroll the text goes over the header.
I would like my text not to go over my header.
The Javascript is at the beginning.
The CSS is in the middle.
The HTML is at the end.
This is my picture, hopefully it didn't hyperlink :)
I am new to web design and I am taking a course on CS50. Furthermore, I have already tried to make the text fixed and the header relative.
```function openNav() {
document.getElementById("mobile__menu").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile__menu").style.width = "0";
}```
``` * {
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
position: fixed;
width: 100%;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}```
/* Mobile Nav */
```.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: all 0.5s ease 0s;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: all 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.right h1 {
margin: 10px;
padding: 10px;
text-transform: uppercase;
text-align: center;
position: relative;
top: 25%;
transform: translateY(-50%);
padding-top: 30px;
}
.right>* {
text-align: center;
justify-content: center;
align-items: center;
color: #ffffff;
text-justify: center;
text-align: center;
margin: 10px;
}
.column {
float: left;
width: 50%;
padding: 10px;
height: 740px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}```
``` <!DOCTYPE html>
<html lang="en">
<head>
<title>Ryan Miller</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="designer.css">
<link rel="stylesheet" href="designer-slideshow1.css">
<style>
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
body,
html {
height: 100%;
}
.parallax {
background-image: url("https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?cs%3Dsrgb%26dl%3Dapple-computer-desk-devices-326501.jpg%26fm%3Djpg");
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backface-visibility: visible;
}
</style>
</head>
<body>
<header>
<a class="logo" href="landing/landing.html"><img src="Logo.jpg" alt="logo" width="60px" height="auto" ;></a>
<nav>
<ul class="nav__links">
<li>Home</li>
<li>About</li>
<li>Programmer</li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p onclick="openNav()" class="menu cta">Menu</p>
</header>
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
Home
About
Programmer
</div>
</div>
<div class="parallax">
<div class="row">
<div class="column" style="background-color:rgba(170, 170, 170, 0.0);">
<h2></h2>
<p></p>
</div>
<div class="column right" style="background-color:rgba(0, 0, 0, 0.53);">
<h1>Logo Design</h1>
<h1>Advertisements</h1>
<h1>Business Cards</h1>
<h1>Photography</h1>
</div>
</div>
</div>
<script type="text/javascript" src="designer.js" />
</body>
</html>```
welcome!
Alright, so using a property called z-index, we can change the order of what appears on top, like so:
```function openNav() {
document.getElementById("mobile__menu").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile__menu").style.width = "0";
}```
``` * {
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
position: fixed;
width: 100%;
z-index: 1;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}```
/* Mobile Nav */
```.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: all 0.5s ease 0s;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: all 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.right h1 {
margin: 10px;
padding: 10px;
text-transform: uppercase;
text-align: center;
position: relative;
top: 25%;
transform: translateY(-50%);
padding-top: 30px;
}
.right>* {
text-align: center;
justify-content: center;
align-items: center;
color: #ffffff;
text-justify: center;
text-align: center;
margin: 10px;
}
.column {
float: left;
width: 50%;
padding: 10px;
height: 740px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}```
``` <!DOCTYPE html>
<html lang="en">
<head>
<title>Ryan Miller</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="designer.css">
<link rel="stylesheet" href="designer-slideshow1.css">
<style>
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
body,
html {
height: 100%;
}
.parallax {
background-image: url("https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?cs%3Dsrgb%26dl%3Dapple-computer-desk-devices-326501.jpg%26fm%3Djpg");
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backface-visibility: visible;
}
</style>
</head>
<body>
<header>
<a class="logo" href="landing/landing.html"><img src="Logo.jpg" alt="logo" width="60px" height="auto" ;></a>
<nav>
<ul class="nav__links">
<li>Home</li>
<li>About</li>
<li>Programmer</li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p onclick="openNav()" class="menu cta">Menu</p>
</header>
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
Home
About
Programmer
</div>
</div>
<div class="parallax">
<div class="row">
<div class="column" style="background-color:rgba(170, 170, 170, 0.0);">
<h2></h2>
<p></p>
</div>
<div class="column right" style="background-color:rgba(0, 0, 0, 0.53);">
<h1>Logo Design</h1>
<h1>Advertisements</h1>
<h1>Business Cards</h1>
<h1>Photography</h1>
</div>
</div>
</div>
<script type="text/javascript" src="designer.js" />
</body>
</html>```
So, z-index default is actually set to 0, so setting an element to z-index: 1; will make that the "priority" to be ordered on top of everything else. Hope this helps.
Try adding
z-index:1;
to header
add your class="column right" style="z-index:-1";
//html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ryan Miller</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="designer.css">
<link rel="stylesheet" href="designer-slideshow1.css">
<style>
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
body,
html {
height: 100%;
}
.parallax {
background-image: url("https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?cs%3Dsrgb%26dl%3Dapple-computer-desk-devices-326501.jpg%26fm%3Djpg");
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backface-visibility: visible;
}
</style>
</head>
<body>
<header>
<a class="logo" href="landing/landing.html"><img src="Logo.jpg" alt="logo" width="60px" height="auto" ;></a>
<nav>
<ul class="nav__links">
<li>Home</li>
<li>About</li>
<li>Programmer</li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p onclick="openNav()" class="menu cta">Menu</p>
</header>
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
Home
About
Programmer
</div>
</div>
<div class="parallax">
<div class="row">
<div class="column" style="background-color:rgba(170, 170, 170, 0.0);">
<h2></h2>
<p></p>
</div>
<!--only change this line--> <div class="column right" style="background-color:rgba(0, 0, 0, 0.53); z-index:-1">
<h1>Logo Design</h1>
<h1>Advertisements</h1>
<h1>Business Cards</h1>
<h1>Photography</h1>
</div>
</div>
</div>
<script type="text/javascript" src="designer.js" />
</body>
</html>
When a user scrolls down, how can I make the down arrow in the first view disappear?
0
I want to make the down arrow icons disappear when a user scrolls down the page. Although I searched it on another question of stackoverflow, I cannot find a solution. I made jQuery code. I am not sure it is correct or not.
this is the code on fiddle https://jsfiddle.net/92mtjzew/
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
$(window).scroll(function(){
if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
$('.box').show();
} else {
$('.box').hide();
}
});
#media only screen and (max-width: 2000px) {
html, body {
width: 100%;
height: 100%;
margin: 0;
background: linear-gradient(#FBDA61, #FF3CAC);
overflow-x: hidden;
color: cornsilk;
}
a {
text-decoration: none;
}
h1 {
font-size: 26pt;
}
button {
text-transform: uppercase;
font-weight: bold;
}
html {
font-family: "helvetica neue", sans-serif;
}
.box {
position: absolute;
top: 94%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
display: fixed
}
.box span {
display: fixed;
width: 20px;
height: 20px;
border-bottom: 3px solid white;
border-right: 3px solid white;
transform: rotate(45deg);
margin: -10px;
transition: all .3s;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
z-index: 1;
animation: animate 2s infinite;
}
.box span:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: -2;
}
.box span:before {
content: '';
color: cornsilk;
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #d3d3d3;
transition: all .3s;
z-index: -1;
}
.box span:hover {
color: #fff;
}
.box span:hover:before {
width: 100%;
}
.box span:nth-child(1) {
opacity: 0.3;
z-index: 1;
}
.box span:nth-child(2) {
opacity: 0.5;
z-index: 1;
}
.logo h1 {
margin: 0px
}
.logo img{
text-align: left;
float: left;
padding: 15px 0 0 0;
}
.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 80px;
line-height: 70px;
background-color: black;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: cornsilk;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
display: none;
float: right;
color: cornsilk;
}
#toggle {
display: none;
}
#slideshow {
position: relative;
top: 0px;
left: 0px;
}
#slideshow {
div {
width: 100%;
height: 300px;
img {
width: 100%;
height: auto;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1><img src="img/logo.png" widht="473px" height="50px"></h1>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div><img src="img/image1.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image2.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image3.jpg" width="1274px" height="640px" alt=""></div>
</div>
</section>
<div class="box">
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="js/main.js"></script>
<script>
function scrollDown(){
var businessPage = document.getElementById("businessPage");
businessPage.scrollIntoView();
}
</script>
</body>
</html>
I think this is use full for you... after 100px scroll down the arrow icon will disappear.
In the above mention code, you use the scroll on the body. you can also add this on full document by changing the class on the scroll function.
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
// $(window).scroll(function(){
// if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
// $('.box').show();
// } else {
// $('.box').hide();
// }
// });
// scroll selector
$('body').scroll(function() {
// scroll disatance
if($(this).scrollTop() >= 100){
$('.box').hide();
}
else
{
$('.box').show();
}
});
#media only screen and (max-width: 2000px) {
html, body {
width: 100%;
height: 100%;
margin: 0;
background: linear-gradient(#FBDA61, #FF3CAC);
overflow-x: hidden;
color: cornsilk;
}
a {
text-decoration: none;
}
h1 {
font-size: 26pt;
}
button {
text-transform: uppercase;
font-weight: bold;
}
html {
font-family: "helvetica neue", sans-serif;
}
.box {
position: absolute;
top: 94%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
display: fixed
}
.box span {
display: fixed;
width: 20px;
height: 20px;
border-bottom: 3px solid white;
border-right: 3px solid white;
transform: rotate(45deg);
margin: -10px;
transition: all .3s;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
z-index: 1;
animation: animate 2s infinite;
}
.box span:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: -2;
}
.box span:before {
content: '';
color: cornsilk;
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #d3d3d3;
transition: all .3s;
z-index: -1;
}
.box span:hover {
color: #fff;
}
.box span:hover:before {
width: 100%;
}
.box span:nth-child(1) {
opacity: 0.3;
z-index: 1;
}
.box span:nth-child(2) {
opacity: 0.5;
z-index: 1;
}
.logo h1 {
margin: 0px
}
.logo img{
text-align: left;
float: left;
padding: 15px 0 0 0;
}
.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 80px;
line-height: 70px;
background-color: black;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: cornsilk;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
display: none;
float: right;
color: cornsilk;
}
#toggle {
display: none;
}
#slideshow {
position: relative;
top: 0px;
left: 0px;
}
#slideshow {
div {
width: 100%;
height: 300px;
img {
width: 100%;
height: auto;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="css/font-awesome.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="header">
<div class="logo">
<!-- <h1><img src="img/logo.png" widht="473px" height="50px"></h1> -->
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div>
<img src="https://images.unsplash.com/photo-1558981420-bf351ce8e3ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="1274px" height="640px" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1558981420-bf351ce8e3ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="1274px" height="640px" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1558981420-bf351ce8e3ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="1274px" height="640px" alt="">
</div>
</div>
</section>
<div class="box">
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- <!-- <script src="js/main.js"></script> --> -->
<script>
// function scrollDown(){
// var businessPage = document.getElementById("businessPage");
// businessPage.scrollIntoView();
// }
</script>
<script src="main.js"></script>
</body>
</html>
I want to make the down arrow icons disappear when a user scroll down the page. Although I searched it on another question of stackoverflow, I cannot find a solution. I made jQuery code. I am not sure it is correct or not.
this is the code on fiddle
https://jsfiddle.net/92mtjzew/
main.js
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplayhttps://jsfiddle.net/92mtjzew/#: true,
autoplaySpeed: 8000,
dots: true,
});
});
$(window).scroll(function(){
if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
$('.box').show();
} else {
$('.box').hide();
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1><img src="img/logo.png" widht="473px" height="50px"></h1>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div><img src="img/image1.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image2.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image3.jpg" width="1274px" height="640px" alt=""></div>
</div>
</section>
<div class="box">
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="js/main.js"></script>
<script>
function scrollDown(){
var businessPage = document.getElementById("businessPage");
businessPage.scrollIntoView();
}
</script>
</body>
</html>
style.css
#media only screen and (max-width: 2000px) {
html, body {
width: 100%;
height: 100%;
margin: 0;
background: linear-gradient(#FBDA61, #FF3CAC);
overflow-x: hidden;
color: cornsilk;
}
a {
text-decoration: none;
}
h1 {
font-size: 26pt;
}
button {
text-transform: uppercase;
font-weight: bold;
}
html {
font-family: "helvetica neue", sans-serif;
}
.box {
position: absolute;
top: 94%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
display: fixed
}
.box span {
display: fixed;
width: 20px;
height: 20px;
border-bottom: 3px solid white;
border-right: 3px solid white;
transform: rotate(45deg);
margin: -10px;
transition: all .3s;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
z-index: 1;
animation: animate 2s infinite;
}
.box span:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: -2;
}
.box span:before {
content: '';
color: cornsilk;
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #d3d3d3;
transition: all .3s;
z-index: -1;
}
.box span:hover {
color: #fff;
}
.box span:hover:before {
width: 100%;
}
.box span:nth-child(1) {
opacity: 0.3;
z-index: 1;
}
.box span:nth-child(2) {
opacity: 0.5;
z-index: 1;
}
.logo h1 {
margin: 0px
}
.logo img{
text-align: left;
float: left;
padding: 15px 0 0 0;
}
.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 80px;
line-height: 70px;
background-color: black;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: cornsilk;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
display: none;
float: right;
color: cornsilk;
}
#toggle {
display: none;
}
#slideshow {
position: relative;
top: 0px;
left: 0px;
}
#slideshow {
div {
width: 100%;
height: 300px;
img {
width: 100%;
height: auto;
}
}
}
Try the following example
.hidden{display:none !important;}
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$('.box').removeClass("hidden");
} else {
$('.box').addClass("hidden");
}
});
});
I want to make something like - When I press on About, so there will show overlay over the main div with text about. Now when I click, so that div will show, but it will move down that particles-js div. And I don't want to move that div, but I want to make about to show over that particle (fullscreen overlay with 50% opacity)
$(".about").click(function() {
$(".main").fadeToggle('500');
$(".aboutText").fadeToggle('500');
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
#particles-js {
height: 100vh;
width: 100%;
background-color: green;
}
#about {
height: 100vh;
background-color: beige;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%, -50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
a.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
#media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.text {
color: #fff;
position: relative;
top: 50%;
left: 10%;
background-color: #000;
display: none;
}
a.about:hover {
color: #2ecc71;
}
.aboutText {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
display: none;
}
.aboutText--open {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<div class="aboutText">
<div class="text">
<p>sssss</p>
</div>
</div>
<div id="particles-js">
<h1 class="main">Text</h1>
</div>
<span class="home">Home</span>
About
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="app.js"></script>
</body>
</html>
Is this what you are trying to do? Show the about text when clicked?
$(".about").click(function() {
$("#particles-js").toggleClass("hide")
$(".aboutText").toggleClass("hide")
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
#particles-js {
height: 100vh;
width: 100%;
background-color: green;
}
#about {
height: 100vh;
background-color: beige;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%, -50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
a.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
#media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.text {
color: #fff;
position: relative;
top: 50%;
left: 10%;
background-color: #000;
}
a.about:hover {
color: #2ecc71;
}
.aboutText {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
.hide {
display: none;
}
.aboutText--open {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<div class="aboutText hide">
<div class="text">
<p>sssss</p>
</div>
</div>
<div id="particles-js">
<h1 class="main">Text</h1>
</div>
<span class="home">Home</span>
About
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="app.js"></script>
</body>
</html>
My problem is that the background "backgroundmain.png" WILL NOT repeat no matter what I do... I have tried adding more divs to contain everything in the body, but still no luck... I need the "backgroundmain.png" to fully repeat to cover the content at the bottom of the page.
P.S. I feel it may be a issue with all the divs being used, I just cant pin point it, so I am asking for a fresh set of eyes.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>MetLoop</title>
<link rel="stylesheet" type="text/css" href="defaults.css">
<link rel="stylesheet" type="text/css" href="css.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800,800i" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
</head>
<body>
<!--Last Updated 1/14/17-->
<div id="back">
<nav class="header">
<ul>
<li style="margin-left: 15%">Home</li>
<li>Contact Us</li>
<li>Our Service</li>
<li>Interactive Weather Map</li>
<li style="float:right; margin-right: 15%">Log In</li>
<li style="float:right;">Sign Up</li>
</ul>
</nav>
<div class="background">
<div class="main">
<!-- LOCAL WEATHER -->
<div class="localweather">
<p id="zipcode">Please enter your zip code to view today's local weather</p>
<br>
<form>
<input type="number" name="Zip Code"> <br> <br>
<input type="submit" value="Submit">
</form>
</div>
<!-- VIDEO NEWSLETTER -->
<div class="newsletter">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/mXkPhOh5kKQ" frameborder="0" allowfullscreen></iframe>
</div>
<!-- TWITTER FEED -->
<div class="feed">
<a class="twitter-timeline" data-width="300" data-height="814" data-theme="dark" data-link-color="#2B7BB9" href="https://twitter.com/MetLoop">Tweets by MetLoop</a>
</div>
<!-- 7 DAY FORECAST -->
<div class="weekweather">
<p>Please enter your zip code above to view an accurate 7 day forecast</p>
</div>
<!-- LIVE RADAR MAP -->
<div class="radar">
<img src="images/usaweather.gif">
</div>
</div>
</div>
</body>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
</html>
================================================================================
CSS:
body {
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
background-image: url("images/background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
#back {
background-image: url("images/backgroundmain.png");
background-repeat: repeat-y;
}
/*Navigation Bar*/
nav {
top: 0;
margin-top: 48px;
text-align: center;
}
ul {
z-index: 1;
margin-top: 20px;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 5%;
position: fixed;
background-color: #333;
top: 0;
}
li {
float: left;
}
li a {
display: block;
padding: 14px 16px;
color: white;
text-align: center;
text-decoration: none;
}
li a:hover {
background-color: white;
color: black;
font-size: 125%;
}
/*END NAV*/
/*Body Info*/
.main {
position: absolute;
top: 0;
background-image: url("images/backgroundmain.png");
background-repeat: repeat-y;
min-height: 100%;
margin-left: 15%;
margin-top: 48px;
width: 70%;
height: 100%;
}
/*Local Weather*/
.localweather {
box-sizing: border-box;
position: relative;
top: 0;
margin-top: 20px;
margin-left: 40px;
height: 50%;
width: 20%;
background-image: url("images/weatherphoto.png");
background-size: cover;
background-repeat: no-repeat;
text-align: center;
padding-top: 12%;
}
#zipcode {
font-family: 'Open Sans';
font-weight: 800;
font-style: italic;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
/*NEWSLETTER*/
.newsletter {
position: absolute;
background-color: grey;
height: 50%;
width: 50%;
left: 26%;
top: 2%;
}
/*TWITTER FEED*/
.feed {
position: absolute;
height: 85%;
width: 20%;
left: 78%;
top: 2%;
}
/*7 DAY FORECAST*/
.weekweather {
background-image: url("images/week.png");
background-repeat: no-repeat;
width: 75%;
height: 29%;
position: absolute;
top: 55%;
left: 3%;
text-align: center;
padding-top: 5%;
font-weight: 800;
font-style: italic;
}
/*RADAR MAP*/
.radar {
background-image: url("images/backgroundmain.png");
position: absolute;
left: 5%;
top: 90%;
}
.radar img {
height: 100%;
width: 100%;
}
The background on #back is repeating, but isn't showing up because that element is 0px height. It is 0px height because of the absolute positioning of it's children. If you assign a height to #back, you can see it is repeating. The solution would be to either assign a height to #back or rework your layout to reposition things so they maintain layout on the page and give #back a non-zero height.
body {
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
background-image: url("images/background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
#back {
background-image: url("http://www.w3schools.com/css/img_fjords.jpg");
background-repeat: repeat-y;
min-height: 500vh;
}
/*Navigation Bar*/
nav {
top: 0;
margin-top: 48px;
text-align: center;
}
ul {
z-index: 1;
margin-top: 20px;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 5%;
position: fixed;
background-color: #333;
top: 0;
}
li {
float: left;
}
li a {
display: block;
padding: 14px 16px;
color: white;
text-align: center;
text-decoration: none;
}
li a:hover {
background-color: white;
color: black;
font-size: 125%;
}
/*END NAV*/
/*Body Info*/
.main {
position: absolute;
top: 0;
background-image: url("images/backgroundmain.png");
background-repeat: repeat-y;
min-height: 100%;
margin-left: 15%;
margin-top: 48px;
width: 70%;
height: 100%;
}
/*Local Weather*/
.localweather {
box-sizing: border-box;
position: relative;
top: 0;
margin-top: 20px;
margin-left: 40px;
height: 50%;
width: 20%;
background-image: url("images/weatherphoto.png");
background-size: cover;
background-repeat: no-repeat;
text-align: center;
padding-top: 12%;
}
#zipcode {
font-family: 'Open Sans';
font-weight: 800;
font-style: italic;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
/*NEWSLETTER*/
.newsletter {
position: absolute;
background-color: grey;
height: 50%;
width: 50%;
left: 26%;
top: 2%;
}
/*TWITTER FEED*/
.feed {
position: absolute;
height: 85%;
width: 20%;
left: 78%;
top: 2%;
}
/*7 DAY FORECAST*/
.weekweather {
background-image: url("images/week.png");
background-repeat: no-repeat;
width: 75%;
height: 29%;
position: absolute;
top: 55%;
left: 3%;
text-align: center;
padding-top: 5%;
font-weight: 800;
font-style: italic;
}
/*RADAR MAP*/
.radar {
background-image: url("images/backgroundmain.png");
position: absolute;
left: 5%;
top: 90%;
}
.radar img {
height: 100%;
width: 100%;
}
<html>
<head>
<title>MetLoop</title>
<link rel="stylesheet" type="text/css" href="defaults.css">
<link rel="stylesheet" type="text/css" href="css.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800,800i" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
</head>
<body>
<!--Last Updated 1/14/17-->
<div id="back">
<nav class="header">
<ul>
<li style="margin-left: 15%">Home</li>
<li>Contact Us</li>
<li>Our Service</li>
<li>Interactive Weather Map</li>
<li style="float:right; margin-right: 15%">Log In</li>
<li style="float:right;">Sign Up</li>
</ul>
</nav>
<div class="background">
<div class="main">
<!-- LOCAL WEATHER -->
<div class="localweather">
<p id="zipcode">Please enter your zip code to view today's local weather</p>
<br>
<form>
<input type="number" name="Zip Code"> <br> <br>
<input type="submit" value="Submit">
</form>
</div>
<!-- VIDEO NEWSLETTER -->
<div class="newsletter">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/mXkPhOh5kKQ" frameborder="0" allowfullscreen></iframe>
</div>
<!-- TWITTER FEED -->
<div class="feed">
<a class="twitter-timeline" data-width="300" data-height="814" data-theme="dark" data-link-color="#2B7BB9" href="https://twitter.com/MetLoop">Tweets by MetLoop</a>
</div>
<!-- 7 DAY FORECAST -->
<div class="weekweather">
<p>Please enter your zip code above to view an accurate 7 day forecast</p>
</div>
<!-- LIVE RADAR MAP -->
<div class="radar">
<img src="images/usaweather.gif">
</div>
</div>
</div>
</body>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
</html>