hey guys i am new to javascript and i am trying to figure out how to change the background image of my section while hovering the respective texts. currently i want to load 3 different backgrounds but i have issues trying to figure out. below is the code im using .do lmk if u have any suggestions. thanks in advance .
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d model</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* custom webkit scrollbar
*/
html {
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
body {
overflow-x: hidden;
font-family: 'Krona One', sans-serif;
background-color: rgb(0, 0, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
}
.section {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
scroll-snap-align: center;
user-select: none;
}
h1 {
font-weight: 500;
font-size: 5vw;
text-transform: uppercase;
color: white;
line-height: 100%;
text-align: center;
}
h2 {
font-weight: 500;
font-size: 6vw;
text-transform: uppercase;
-webkit-text-stroke: 1px white;
color: transparent;
}
</style>
</head>
<section class="section">
<h1 id="gold">Gold</h1>
<h2 id="silver">Silver</h2>
<h1 id="blue">Light Blue</h1>
</section>
</body>
</html>
First you need to get the element and then you need to set the backgroundImage property to that element like
var goldElement = document.getElementById('gold');
goldElement.addEventListener('mouseover'), (event)=> { `goldElement.style. backgroundImage = "url('path_to_image')" ` }
And change the background to normal when mouse leave.
goldElement.addEventListener('mouseleave', (event)=> { `goldElement.style. backgroundImage = "url('')" ` });
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d model</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* custom webkit scrollbar
*/
html {
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
body {
margin:0;
padding:0;
overflow-x: hidden;
font-family: 'Krona One', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
}
.section {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
scroll-snap-align: center;
user-select: none;
background-color: rgb(0, 0, 0);
}
h1 {
font-weight: 500;
font-size: 5vw;
text-transform: uppercase;
color: white;
line-height: 100%;
text-align: center;
}
h2 {
font-weight: 500;
font-size: 6vw;
text-transform: uppercase;
-webkit-text-stroke: 1px white;
color: transparent;
}
</style>
</head>
<body>
<section class="section">
<h1 id="gold" onMouseOver="gold()" onMouseOut="leave()">Gold</h1>
<h2 id="silver" onMouseOver="silver()" onMouseOut="leave()">Silver</h2>
<h1 id="blue" onMouseOver="blue()" onMouseOut="leave()">Light Blue</h1>
</section>
<script>
var sect = document.querySelector('section');
function gold(){
sect.style.background = '#FFD700';
}
function silver(){
sect.style.background = '#C0C0C0';
}
function blue(){
sect.style.background = '#ADD8E6';
}
function leave(){
sect.style.background = '#000000';
}
</script>
</body>
</html>
If you want to stay on the color just hovered, then remove the leave function from the above code and from the Tags too.
You can use the :hover property in CSS to add styles only whenever the mouse is over the specific HTML element; and to add an image you can use the CSS property background: url(URL_HERE);
For example, your gold ID can be set to display a background by creating a specific :hover property as such:
#gold:hover {
background: url(" https://via.placeholder.com/600x200.png/FFFF00/");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d model</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* custom webkit scrollbar
*/
html {
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
body {
overflow-x: hidden;
font-family: 'Krona One', sans-serif;
background-color: rgb(0, 0, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
}
.section {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
scroll-snap-align: center;
user-select: none;
}
h1 {
font-weight: 500;
font-size: 5vw;
text-transform: uppercase;
color: white;
line-height: 100%;
text-align: center;
}
h2 {
font-weight: 500;
font-size: 6vw;
text-transform: uppercase;
-webkit-text-stroke: 1px white;
color: transparent;
}
#gold:hover {
background: url(" https://via.placeholder.com/600x200.png/FFFF00/");
}
#silver:hover {
background: url(" https://via.placeholder.com/600x200.png/CCCCCC/");
}
#blue:hover {
background: url(" https://via.placeholder.com/600x200.png/0000FF/");
}
</style>
</head>
<body>
<section class="section">
<h1 id="gold">Gold</h1>
<h2 id="silver">Silver</h2>
<h1 id="blue">Light Blue</h1>
</section>
</body>
</html>
For every image, you would need to provide a separate class - if you don't want this behaviour, consider using JavaScript instead to dynamically adjust the background image.
Related
The content is divided into different sections. I have disabled the vertical direct-scrolling, page can be scrolled using the submit buttons only. Each sections height has been set to 100vh to take up all the available viewport-height. This works great on desktops as well as mobile devices. But, being a form, the problem arises on the mobile devices when you click inside the input boxes and the in-built keyboard pops up. The in-built keyboard takes up almost 50% screen size ant the content (section) is scrolled/moved unusually. Even if the section remains at it place, it is slightly (maybe by 100px) scrolled up or down if you close the keyboard, making it look ugly. Works good if there's only one section but there will always be more than 10 sections. Is there any other approach to make this successful. I can do this with ajax, but want it to be a single-page (which can be scrolled using those buttons). Or is there any fix available so the content doesnot moves up or down if the mobile keyboard opens or closes?
Thankyou
~Vivek
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght#800&family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
:focus {
outline: none;
}
:root {
/* Colors */
--primary: #FF7300;
--primary-light: #FFE3CC;
--secondary: #334762;
--white: #ffffff;
/* Fonts */
--font-one: 'Poppins', sans-serif;
--font-two: 'Exo', sans-serif;
--font-three: 'Baloo Da 2', cursive;
--font-four: 'Fira Sans', sans-serif;
--font-five: 'Lato', sans-serif;
}
::selection {
background: var(--white);
color: var(--primary);
}
body {
overflow-y: hidden;
background-color: var(--primary-light);
font-family: var(--font-four);
color: var(--secondary);
font-size: 16px;
}
section {
width: 100%;
height: 100vh;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
gap: 1.25rem;
align-items: center;
}
/* Questions' Wrapper */
.question__wrapper {
max-width: 90%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
gap: 1rem;
}
#media (max-width: 576px) {
.question__wrapper {
gap: .9rem;
}
}
.container input.text-answer {
font-size: 1.125rem;
color: var(--primary);
font-weight:700;
min-width: 400px;
height: 40px;
border: none;
border-bottom: 3px solid var(--secondary);
background-color: var(--bg-color);
}
#media (max-width: 767px) {
.container input.text-answer {
min-width: unset;
}
}
.small-button-container {
position: absolute;
right: 30px;
bottom: 30px;
}
.small-button {
font-size: 1.23rem;
padding: 10px 20px;
background-color: var(--primary);
text-decoration: none;
color: var(--white);
}
.submit-button {
display: block;
max-width: 100px;
border-radius: 3px;
text-align: center;
padding: .4rem .8rem;
cursor: pointer;
font-family: var(--font-three);
background-color: var(--primary);
color: var(--white);
font-size: 1.2rem;
font-weight: 900;
text-decoration: none;
}
#media (max-width: 767px) {
.submit-button {
margin-top: 20px;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<section id="name">
<div class="container">
<div class="logo">
<img src="logo.svg" alt="">
</div>
<div class="question__wrapper">
<div class="question">What is your Name?</div>
<input type="text" class="text-answer" placeholder="Type here" tabindex="1" required>
Submit
<div class="small-button-container">
🠗
</div>
</div>
</div>
</section>
<section id="email">
<div class="container">
<div class="logo">
<img src="logo.svg" alt="">
</div>
<div class="question__wrapper">
<div class="question">What is your Email?</div>
<input type="text" class="text-answer" placeholder="Type here" tabindex="1" required>
Submit
<div class="small-button-container">
🠕
🠗
</div>
</div>
</div>
</section>
</body>
</html>
In this project, my aim is to change emoji when I click and also I want "it wasn't funny bro" text to show up when I click to the emoji. When I click to the emoji it changes, but the text does not show up. I followed the same steps, it works for emojis but doesn't work for text. I could not figure out why it's not working.
My code looks like this:
const beginningFace = document.querySelector(".beginning");
const reactionFace = document.querySelector(".reaction");
const beginningText = document.querySelector(".beginningT");
const reactionTextFirst = document.querySelector(".reactionT-first");
const reactionTextSecond = document.querySelector(".reactionT-second");
beginningFace.addEventListener('click',()=>{
if(reactionFace.classList.contains('reaction')){
reactionFace.classList.add('active');
beginningFace.classList.remove('active');
}
});
beginningText.addEventListener('click',()=>{
if(reactionTextFirst.classList.contains('reactionT-first') && reactionTextSecond.classList.contains('reactionT-second')){
reactionTextFirst.classList.add('active');
reactionTextSecond.classList.add('active');
beginningFace.classList.remove('active');
}
});
#import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&display=swap');
body, html {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background-color: #202076;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
perspective: 700px;
}
.beginningT {
display: none;
}
.reactionT-first {
display:none;
position: relative;
font-family: 'Exo';
font-size: 5em;
margin: 0;
transform: skew(-15deg);
letter-spacing: 0.03em;
}
.reactionT-second{
display: none;
font-family: 'Mr Dafoe';
margin: 0;
font-size: 5.5em;
margin-top: -0.6em;
color: white;
text-shadow: 0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em #fe05e1;
transform: rotate(-7deg);
}
.emoji{
font-size: 18rem;
cursor: pointer;
user-select: none;
}
.beginning{
display: none;
}
.reaction{
display: none;
}
.active{
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="emoji beginning active">😃</div>
<div class="emoji reaction">😐</div>
<div class ="text beginningT active" style="font-size: 2rem; font-style: italic; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #F98299;">My reaction after your joke↑ (click to see it!)</div>
<div class="text reactionT-first">IT WASN'T</div>
<div class="text reactionT-second">FUNNY BRO</div>
<script src="app.js"></script>
</body>
</html>
If you want your other text to show up when you click on the emoji, you have to do all the logic inside beginningFace.addEventListener, instead of using two diffent event listeners. I moved the logic, and removed the second click listener.
These lines were missing in the first click listener
reactionTextFirst.classList.add('active');
reactionTextSecond.classList.add('active');
beginningText.classList.remove('active');
const beginningFace = document.querySelector(".beginning");
const reactionFace = document.querySelector(".reaction");
const beginningText = document.querySelector(".beginningT");
const reactionTextFirst = document.querySelector(".reactionT-first");
const reactionTextSecond = document.querySelector(".reactionT-second");
beginningFace.addEventListener('click',()=>{
if(reactionFace.classList.contains('reaction')){
reactionFace.classList.add('active');
beginningFace.classList.remove('active');
reactionTextFirst.classList.add('active');
reactionTextSecond.classList.add('active');
beginningText.classList.remove('active');
}
});
#import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&display=swap');
body, html {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background-color: #202076;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
perspective: 700px;
}
.beginningT {
display: none;
}
.reactionT-first {
display:none;
position: relative;
font-family: 'Exo';
font-size: 5em;
margin: 0;
transform: skew(-15deg);
letter-spacing: 0.03em;
}
.reactionT-second{
display: none;
font-family: 'Mr Dafoe';
margin: 0;
font-size: 5.5em;
margin-top: -0.6em;
color: white;
text-shadow: 0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em #fe05e1;
transform: rotate(-7deg);
}
.emoji{
font-size: 18rem;
cursor: pointer;
user-select: none;
}
.beginning{
display: none;
}
.reaction{
display: none;
}
.active{
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="emoji beginning active">😃</div>
<div class="emoji reaction">😐</div>
<div class ="text beginningT active" style="font-size: 2rem; font-style: italic; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #F98299;">My reaction after your joke↑ (click to see it!)</div>
<div class="text reactionT-first">IT WASN'T</div>
<div class="text reactionT-second">FUNNY BRO</div>
<script src="app.js"></script>
</body>
</html>
I am trying to achieve parallax effect where I have almost done but I have problem in Heading tag <h1 id="text">Merry Chrismas</h1> which is not animating. <h1 id="text">Merry Chrismas</h1> goes to top when scrolling.
let text = document.getElementById('text');
let moon = document.getElementById('moon');
let snow = document.getElementById('snow');
let leftMountain = document.getElementById('left-mountain');
let rightMountain = document.getElementById('right-mountain');
let btn = document.getElementById('btn');
window.addEventListener('scroll', function() {
let value = window.scrollY;
text.style.top = value * -0.5 + '%';
moon.style.top = value * -0.5 + '%';
snow.style.top = value * 1 + 'px';
leftMountain.style.left = value * -0.5 + 'px';
rightMountain.style.left = value * 0.5 + 'px';
btn.style.marginTop = value * 2 + 'px';
})
/* To reset all margin and padding */
* {
margin: 0;
padding: 0;
}
/* Now To remove horizontal scroll bar we have to use box sizing properties */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: 'lato', sans-serif;
/* min-height: 100vh; */
background: #fff;
transition: all 0.2s linear;
color: #000;
overflow-x: hidden;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
/* position: relative;
z-index: 1000; */
}
.logo {
font-size: 2rem;
}
header a {
text-decoration: none;
padding: 10px 20px;
position: relative;
z-index: 1000;
}
header a:hover {
color: #ff556e;
}
header a.active {
border: 0.125rem solid #ff556e;
border-radius: 2rem;
color: #ff556e;
}
.hero-section {
/* position: relative; */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
.hero-section h1 {
font: italic bold 4rem lato, sans-serif;
position: absolute;
}
.hero-section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
pointer-events: none;
}
#base {
transform: translateY(200px);
}
.btn {
position: absolute;
display: inline-block;
text-decoration: none;
background: #ff0;
padding: 6px 15px;
border-radius: 20px;
font-size: 1.2rem;
font-weight: bold;
transform: translateY(50px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header id="header">
Chrismas
<nav id="navigation">
Home
Description
Features
Contact Us
</nav>
</header>
<section id="heroSection" class="hero-section">
<img src="https://i.ibb.co/R605wLx/bg.png" alt="bg" id="bg">
<img src="https://i.ibb.co/LZpM2k2/moon.png" alt="moon" id="moon">
<img src="https://i.ibb.co/QnPgdXG/snow.png" alt="snow" id="snow">
<img src="https://i.ibb.co/mGgD2s7/back-mountain.png" alt="back-mountain" id="back-mountain">
<h1 id="text">Merry Chrismas</h1>
<img src="https://i.ibb.co/wCx7SMd/left-mountain.png" alt="left-mountain" id="left-mountain">
<img src="https://i.ibb.co/4YnDZTM/right-mountain.png" alt="right-mountain" id="right-mountain">
Explore
<img src="https://i.ibb.co/3kdcSVZ/base.png" alt="base" id="base">
</section>
</body>
</html>
[JSBIN Demo]
Try modifying to this:
text.style.top = value * -0.2 + '%';
#text {
position: fixed;
top: 0;
}
You can adjust to the speed that you need
I have a html page with a filter_options and content. Inside the filter_options there are some options listed. I have given scroll access and on scroll-Y it would change the scroll-X of those options. But with that the content scroll is also working. How can I allow the filter_options scroll to only work when it is being scrolled?
index.html
document.getElementById("options").addEventListener('mousewheel', function(e) {
if (e.wheelDelta > 0) {
this.scrollLeft -= 100;
} else {
this.scrollLeft += 100;
}
});
body {
margin: 0;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: white;
}
::-webkit-scrollbar-thumb {
background: orange;
border-radius: 30px;
}
#filter_options {
width: 80%;
height: 100%;
position: fixed;
top: 0;
z-index: 2;
background-color: rgba(66, 60, 60, 0.13);
float: left;
overflow: scroll;
}
#filter_options div {
background-color: rgb(51, 51, 51);
text-align: center;
overflow: auto;
white-space: nowrap;
margin-top: 5%;
}
#filter_options div div {
color: white;
background-color: orange;
padding: 12px;
font-size: 20px;
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block;
user-select: none;
}
#content {
height: 5000px;
width: 90%;
margin-left: 5%;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="filter_options">
<div id="options">
<div>Option 1</div><div>Option 2</div><div>Option 3</div><div>Option 4</div><div>Option 5</div><div>Option 6</div><div>Option 7</div><div>Option 8</div><div>Option 9</div><div>Option 10</div>
</div>
</div>
<div id="content"></div>
</body>
</html>
Try to use
#content {overflow: hidden}
I just thought of a solution. By using e.preventDefault() before the if statement.
Right now when I resize my webpage it messes up my entire website. I have looked up solutions but they have not worked for me. I read that it might be because I have some positions set to absolute, I tried setting them to relative but that did not work. Any help is appreciated :)
Website: http://al-saba.net/
#import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400);
* {margin: 0; padding: 0;}
html {
background-color: black;
opacity: .9;
min-height:100%;
width: 100%;
height: 100%;
background-repeat: no-repeat;
z-index: 2000;
}
h1 {
position: absolute;
font-family: 'Passion One';
font-size: 200px;
color: blue;
letter-spacing: 1.6rem;
top: calc(62% - 200px);
text-align: center;
text-shadow: 2px 4px 3px rgba(0,0,0,0.6);
opacity: .8;
width: 100%;
z-index: 2001;
}
h2 {
position: absolute;
font-family: 'Open Sans', monospace;
font-size: 26px;
color: #6EBEDC;
letter-spacing: .4rem ;
top: calc(64% - 30px);
text-align: center;
opacity: .68 ;
width: 100%;
z-index: 2002;
}
h3 {
position: absolute;
font-family: 'Open Sans', monospace;
font-size: 24px;
color: #6EBEDC;
letter-spacing: .4rem ;
top: calc(38% - 30px);
text-align: center;
opacity: .68 ;
width: 100%;
z-index: 2003;
}
body {
}
footer {
position: absolute;
bottom: calc(22% - 100px);
right: calc(16% - 125px);
letter-spacing: .6rem;
z-index: 2002;
}
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: relative;
height: 106%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .filter {
z-index: 100;
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 102%;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
a {text-decoration: none;}
/* This class is added on scroll */
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
/* Navigation Settings */
nav {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background: #5B5B5B;
opacity: .8;
font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;
}
nav:hover {
opacity: .9;
}
nav li {
display: inline-block;
padding: 24px 24px;
}
nav li a:hover {
color: black;
}
nav li a{
color: white;
text-transform: uppercase;
}
section {
height: 100vh;
}
/* Screens Settings */
#screen1 {
background: #1061E5;
text-align: center;
}
#screen1 p {
padding-top: 200px;
text-align: center;
}
#screen2 {
background: white;
text-align: center;
}
#screen3 {
background: black;
text-align: center;
}
#media only screen and (max-width: 520px) {
nav li {
padding: 24px 4px;
}
nav li a {
font-size: 16px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale=1">
<script src = "jquery-3.1.1.min.js"></script>
<script src = "script.js"></script>
<link rel = "stylesheet" href="style.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Passion+One|Source+Code+Pro" rel="stylesheet">
<title> AL-SABA.net </title>
</head>
<body>
<header>
<h3> Design • Code • Programs </h3>
<h1> AL-SABA </h1>
<h2> Personal Website </h2>
</header>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel = 'stylesheet' type = 'text/css'>
<div class = "homepage-hero-module">
<div class = "video-container">
<div class = "filter"></div>
<video autoplay loop class = "fillWidth">
<source src="coding.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="Love-Coding.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
</div>
<section id="screen1">
<p>Scroll down</p>
<nav class = "bar">
<ul>
<li class = "bar-home">Home</li>
<li class = "bar-about">About</li>
<li class = "bar-projects">Projects</li>
<li class = "bar-contact">Contact</li>
</ul>
</nav>
</section>
<section id="screen2"></section>
<section id="screen3"></section>
<footer>
</footer>
</body>
</html>
It looks like everything is okay except for the "Al-Saba" h1. You can declare the font size using relative values that consider the viewport width.
Change your h1 CSS. Make this: font-size:200px; something like font-size:15vw.
The "Design • Code • Programs" and "Personal Website" overlap "Al-Saba" because you have them all in the same div. Try this instead:
<header>
<div> <h3> Design • Code • Programs </h3></div>
<div> <h1> AL-SABA </h1></div>
<div> <h2> Personal Website </h2></div>
</header>
You can adjust the position.
For example try adjusting the heading element position. You can see a big different.
h1,h2,h3 {
position:static;
}
Just remove this metatag
<meta name = "viewport" content = "width = device-width, initial-scale=1">