Having trouble with linking javascript to HTML

Having trouble with linking javascript to HTML - javascript

const menu = document.querySelector('#mobile-menu');
const menulinks = document.querySelector('.navbar__menu');
// Display Mobile Menu
const mobilemenu = () => {
menu.classList.toggle('is-active');
menulinks.classlist.toggle('active');
};
menu.addEventListener('click', mobileMenu ) ;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh sans', sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display:flex;
justify-content:center ;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 11px 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%)
background-size 100%;
-webkit-background-clip: text;
background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: table;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 3rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
padding: 10px -100px;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 4 5rem;
width: 100%
}
.Button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 1.5rem;
padding: 10px 20px;
height: 100%;
width: 100%;
border:none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #0d628a;
transition: all 0.3s ease;
}
.Button:hover {
color: #000000;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Website</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
Lolipop
tion
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
About
</li>
<li class="navbar__item">
Services
</li>
<li class="navbar__Btn">
Sign Up
</li>
</ul>
</div>
<scripts src="Modify.js"></scripts>
</nav>
</body>
</html>
I just cant know what is it that i did wrong... which is why i came here as a last resort help me pls.
AS you can already see..... i have done everything correct.... but i don't know if this this text editor bug(i'm using vs code) or its just me... help me solve these
and pls forgive me if i'm writing the wrong thing lol
well i just need the answer to this stuff pls..... THank you guys

The tag to link a script is <script> not <scripts>

Please use script instead of scripts.it won't work and I suggest you to use sublime text 3 or Notepad ++ with vs code like me. It can save you from many headaches. :)

There are a few syntax errors with code.
HTML
<scripts src=""></scripts> is not valid HTML. You must <script src=""></script>
Relocate script to bottom of HTML just before the closing <\body>. Remove from just before closing </nav>
Javascript
To create a function you can:
Expression: const mobileMenu = function() { // code goes here }
Declaration: function mobileMenu() { // code goes here }
Arrow: const mobileMenu = () => { // code goes here }. While this is valid code you can not use it as a callback within the event listener as is. Running this function as is will attempt to look for classList on the window object which doesn't exist. You would need instead use const mobileMenu = (e) => { e.currentTarget.classList.toggle('active') }
The event listener is attached to the wrong element. Listen for click event on .navbar__item not .navbar__menu. You will also need to use querySelectorAll('.navbar__item') instead of querySelector('.navbar__item') in order to select all elements.
Lastly, you'll need to cycle through each element using a forEach().
CSS
There isn't a closing bracket that closes out your media query.
Presently there are no declared styles for .active and #mobile__menu
const menu = document.querySelector("#mobile-menu");
const menulinks = document.querySelectorAll(".navbar__item");
// Display Mobile Menu
function mobileMenu() {
this.classList.toggle("active");
}
menu.addEventListener('click', mobileMenu)
menulinks.forEach((link) => link.addEventListener("click", mobileMenu));
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh sans", sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 11px 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%)
background-size 100%;
-webkit-background-clip: text;
background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: table;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 3rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
padding: 10px -100px;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 4 5rem;
width: 100%;
}
.Button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 1.5rem;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #0d628a;
transition: all 0.3s ease;
}
.Button:hover {
color: #000000;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
}
<!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" />
<link rel="stylesheet" href="./main.css" />
<title>Static Template</title>
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
Lolipop
tion
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
About
</li>
<li class="navbar__item">
<a href="#services" class="navbar__links" id="services-page"
>Services</a
>
</li>
<li class="navbar__Btn">
Sign Up
</li>
</ul>
</div>
</nav>
<script src="./Modify.js"></script>
</body>
</html>

Related

Sticky navbar creating white space

I am making a personal website and I am having issues with my sticky navbar. When the site loads the navbar is intended to go on top of section #home but it generates a white space for itself and it's supposed to take the background image of section #home/be on top of it and on top of every other section on the website (SEE PICTURE)
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Setting Website Settings -->
<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>Mark6712</title>
<meta name="description" content="Mark6712's personal website.">
<meta name="keywords" content="Mark6712, Programming, C, C++, Software, Personal">
<meta name="robots" content="noindex, nofollow">
<meta name="author" content="Mark6712">
<!-- Setting the Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/assets/favicon/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Mark6712">
<meta name="application-name" content="Mark6712">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/assets/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="/assets/favicon/browserconfig.xml">
<meta name="theme-color" content="#44444c">
<!-- Importing CSS/JS -->
<link rel="stylesheet" href="/assets/stylesheets/navbar.css">
<link rel="stylesheet" href="/assets/stylesheets/main.css">
<script src="/assets/scripts/navbar.js" defer></script>
</head>
<body>
<nav class="navbar">
<a class="nav-logo" href="#">Mark6712</a>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<main>
<section id="home">
<h1>Home</h1>
<p>This is the home page.</p>
</section>
<section id="about">
<h1>About</h1>
<p>This is the about page.</p>
</section>
</main>
<footer>
</footer>
</body>
</html>
navbar.css
#import url('https://fonts.googleapis.com/css?family=Heebo&display=swap');
#import url('https://fonts.googleapis.com/css?family=Proxima+Nova&display=swap');
.navbar {
z-index: 100;
font-family: 'Heebo', sans-serif;
display: flex;
position: sticky;
top: 1vh;
justify-content: space-between;
align-items: center;
border-radius: 20px;
background-color: rgba(80, 80, 80, 0.50);
backdrop-filter: saturate(180%) blur(20px);
color: white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
margin: 0;
padding: 0;
}
.nav-logo {
position: relative;
font-family: 'Proxima Nova', 'Segoe UI', sans-serif;
font-size: 1.5rem;
font-weight: bold;
margin: .5rem;
left: .7rem;
text-decoration: none;
color: white;
}
.nav-links {
height: 100%;
z-index: 99;
}
.nav-links ul {
display: flex;
margin: 0;
padding: 0;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.nav-links li:hover {
background-color: #555;
border-radius: 20px;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 95%;
background-color: white;
border-radius: 10px;
margin: 8%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
background-color: rgba(80, 80, 80, 0.50);
backdrop-filter: saturate(180%) blur(20px);
}
.toggle-button {
display: flex;
}
.nav-links {
display: none;
width: 100%;
}
.nav-links ul {
width: 100%;
flex-direction: column;
background-color: rgba(81, 81, 81, 0.50);
}
.nav-links ul li {
text-align: center;
}
.nav-links ul li a {
padding: .5rem 1rem;
}
.nav-links.active {
display: flex;
}
}
main.css
* {
box-sizing: border-box;
z-index: 1;
}
html, body {
scroll-behavior: smooth;
overflow-x: hidden;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
z-index: 1;
}
section {
min-height: 100vh;
z-index: 1;
}
#home {
height: 100vh;
width: 100%;
color: aliceblue;
background-image: url("../images/background.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
navbar.js
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('nav-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
navbarLinks.addEventListener('click', () => {
navbarLinks.classList.remove('active')
})

You can solve this by using the float property and setting the width of the navbar to 100%.
.navbar {
width: 100%; /* new line */
float: right; /* new line */
clear: both; /* new line */
z-index: 100;
font-family: 'Heebo', sans-serif;
display: flex;
position: sticky;
top: 1vh;
justify-content: space-between;
align-items: center;
border-radius: 20px;
background-color: rgba(80, 80, 80, 0.5);
backdrop-filter: saturate(180%) blur(20px);
color: white;
border-radius: 20px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
scroll-behavior: smooth;
height: 100%;
width: 100%;
z-index: 1;
position: relative;
}
section {
min-height: 100vh;
z-index: 1;
}
#home {
top: 0;
min-height: 100vh;
width: 100%;
color: rgb(22, 29, 36);
background-image: url('../images/background.png');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: antiquewhite;
}
.navbar {
z-index: 100;
font-family: 'Heebo', sans-serif;
display: flex;
position: sticky;
top: 1vh;
justify-content: space-between;
align-items: center;
border-radius: 20px;
background-color: rgba(80, 80, 80, 0.5);
backdrop-filter: saturate(180%) blur(20px);
color: white;
border-radius: 20px;
width: 100%; /* new line */
float: right; /* new line */
clear: both; /* new line */
}
.nav-logo {
position: relative;
font-family: 'Proxima Nova', 'Segoe UI', sans-serif;
font-size: 1.5rem;
font-weight: bold;
margin: 0.5rem;
left: 0.7rem;
text-decoration: none;
color: white;
}
.nav-links {
height: 100%;
z-index: 99;
}
.nav-links ul {
display: flex;
margin: 0;
padding: 0;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.nav-links li:hover {
background-color: #555;
border-radius: 20px;
}
.toggle-button {
position: absolute;
top: 0.75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 95%;
background-color: white;
border-radius: 10px;
margin: 8%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
<nav class="navbar">
<a class="nav-logo" href="#">Mark6712</a>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<main>
<section id="home">
<h1>Home</h1>
<p>This is the home page.</p>
</section>
<section id="about">
<h1>About</h1>
<p>This is the about page.</p>
</section>
</main>

How can I center this piece of text?

The piece of text, "We do photography and videography", must be centered. I tried using the text-align command and justifying the content to the center. I'm thinking that it must have something to do with the way I have positioned the whole body of the HTML file. Help would be appreciated
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRODUX NA</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel = "stylesheet" type = "text/css" href = "reset.css"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#600&family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<a href="index.html">
<img class="logo" src="1 NA.png" width="50" height="50">
</a>
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li>
Contacts
</li>
<li>
Portfolio
</li>
</ul>
</nav>
<div id="textAndButtonContainer">
<div id="text">
</div>
<div class="container">
<a href="commence.html">
<button id="button1">Get Started</button>
</a>
</div>
</div>
<script type = "text/javascript">
var i = 0,text;
text = "All your favorite memories in one film."
function typing(){
if(i < text.length){
document.getElementById("text").innerHTML += text.charAt(i);
i++
setTimeout(typing, 50);
}
}
typing();
</script>
<h3 class="pv">We do photography and videography.</h3>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 50vh;
background-image: linear-gradient(rgba(68, 67, 67, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg);
background-size: cover;
background-position: center;
text-align: center;
justify-content: center;
}
nav {
width: 100%;
height: 80px;
position: fixed;
}
.logo{
float: left;
padding: 0 30px;
margin-left: 55px;
margin-right: 30px;
width: 50px;
margin-top: 20px;
}
ul li {
list-style: none;
display: inline-block;
line-height: 90px;
padding: 0 31px;
}
ul {
margin-left: 840px;
}
ul li a {
text-decoration: none;
font-size: 20px;
font-family: 'Roboto Condensed', sans-serif;
color: rgb(250, 250, 250);
}
ul li a:hover {
color: rgb(102, 151, 241);
transition-duration: 0.5s;
}
#text{
transform: uppercase;
color: white;
font-family: 'Poppins', sans-serif;
text-align: center;
margin: 0;
font-size: 60px;
}
#textAndButtonContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
border: none;
}
.container {
display: flex;
justify-content: center;
}
#button1 {
background-color: rgb(30, 109, 255);
border: 2px;
border-radius: 15px 50px;
color: white;
padding: 35px;
margin: 22px;
text-align: center;
font-size: 13px;
font-family: 'Poppins', Helvetica;
}
#button1:hover {
background-color: rgb(19, 66, 165);
color: white;
transition-duration: 0.4s;
}
.apptmnt {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
border: none;
font-family: 'Poppins', sans-serif;
color: white;
font-size: 45px;
}
.apptmnt2 {
position: absolute;
top: 39%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
border: none;
font-family: 'Poppins', sans-serif;
color: white;
}
.pv {
position: inherit;
text-align: center;
}
I'm doing completing this as a personal project, which would have a great effect. Centering this piece of text in the most simplified way would be great and could help me apply it to any other situation.

At first your CSS code is not in <style>...</style> style tags.
Next, your body { width: 50vh } CSS code restricts <h3> to align because of the small width. Remove it and then everything should work fine.
body {
height: 100vh;
background-image: linear-gradient(rgba(68, 67, 67, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg);
background-size: cover;
background-position: center;
text-align: center;
justify-content: center;
}

use padding. although its not the best practice but it has usually helped me solve positions of texts.. the code below centers text but may not be responsive. its highly recommended to checkout other CSS units.. use Visbug chrome extension to know what units u may need
.pv {
text-align: center;
position: relative;
padding:5px 350px;
justify content :center;
}

you have set with to body to 50vw, That's why you are facing this issue. As .pv can have the only width as much as width its parent(here it's body) has. So basically your text-align property is working but because width is not enough, so that you can visually watch it on site.
Remove width of 50vh from body.
Or if you don't want to do that, then
.pv{
position:absolute;
inset:0;
}

Mobile Resizable Window Dropdown Menu Doesnt Work

Ok so I'm attempting a mobile resizable window. When I tried running it, it doesn't work and I don't know why. Here is my html code:
const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
padding-right: 50px;
padding-left: 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.fa-gem {
margin-right: 0.5rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}
.button:hover {
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #f77062;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<nav class="navbar">
<div class="navbar__container">
<i class="fas fa-gem"></i> AigoLearningJuniorTeam
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Our Team
</li>
<li class="navbar__item">
Weekly Challenges
</li>
<li class="navbar__item">
Monthly Challenges
</li>
<li class="navbar__btn"> Get Started </li>
</ul>
</div>
</nav>
<script>src="app.js"</script>
</body>
Everything works perfectly fine until I resize my window into a mobile version, the drop menu icon shows, but when I press on it, nothing happens.

How do I center my buttons on my website?

I'm having a problem with my code and can't figure it out. I'm writing my own website and can't get my buttons to go to the center of the page. I tried almost everything I think but it always goes to about 30% or 70% for some reason... The website is not fully responsive for now I will work on that later. What's wrong with my code? What can I do to fix it next time? Thanks for any ideas!
function showHide() {
var navList = document.getElementById("nav-lists");
if (navList.className == '_Menus') {
navList.classList.add("_Menus-show");
} else {
navList.classList.remove("_Menus-show");
}
const body = document.querySelector('body')
const twitter = document.querySelector('.twitter')
twitter.addEventListener("mouseover", function () {
body.classList.add('linked')
},false)
twitter.addEventListener("mouseout", function () {
body.classList.remove('linked')
}, false)
}
#font-face {
font-family: 'familiar_probold';
src: url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff2') format('woff2'),
url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sansheavy_caps';
src: url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff2') format('woff2'),
url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'source_sans_problack';
src: url('fonts/SourceSans/sourcesanspro-black-webfont.woff2') format('woff2'),
url('fonts/SourceSans/sourcesanspro-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #f7f7f7;
font-family: sans-serif;
}
img {
width: 100%;
height: auto;
}
.navbar {
width: 100%;
background-color: #000;
}
.container {
max-width: 1140px;
margin: 0 auto;
height: 60px;
display: flex;
flex-wrap: wrap;
}
._Logo {
overflow: hidden;
text-align: center;
flex-basis: 230px;
}
._Logo img {
height: 100% !important;
width: 150px !important;
}
._Menus ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
._Menus ul li a {
display: block;
padding: 0 10px;
height: 60px;
line-height: 60px;
text-decoration: none;
color: #FFF;
outline: none;
font-family: 'uni_sansheavy_caps';
}
._Menus ul li a:hover {
background-color: #FFF;
color: #000;
}
._Iconbar {
display: none;
background-color: #000;
}
.menu-bar {
width: 45px;
align-self: center;
cursor: pointer;
}
.icon-bar {
height: 3px;
width: 100%;
background: #FFF;
margin: 7px 0;
display: block;
border-radius: 2px;
}
.toppadding{
padding-top: 0;
}
.topbackround{
width: 100%;
height: auto;
position: relative;
text-align: center;
color: white;
}
.sloganlefttextfirst{
position: absolute;
top: 20%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: grey;
}
.sloganlefttextsecond{
position: absolute;
top: 25%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
}
.sloganlefttextthird{
position: absolute;
top: 35%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
color: #DCC98E;
border-bottom: 6px solid #DCC98E;
padding-bottom: 3px;
}
.howitworkslefttextfirst a{
position: absolute;
top: 51%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: #B9CDBE;
border-bottom: 3px solid #B9CDBE;
padding-bottom: 3px;
text-decoration: none;
}
.howitworkslefttextsecond{
position: absolute;
top: 57%;
left: 5%;
font-family: 'Arial';
font-size: 200%;
color: white;
}
hr{
color: black;
background-color: black;
height: 8px;
border: none;
}
.midbackground{
background-color: #1B1C1E;
padding-bottom: 100px;
}
.tutorial{
padding-top: 3%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.tutorial p{
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
left: 50%;
font-family: 'Arial';
color: white;
font-size: 50%;
width: 100%;
}
.circles{
margin: 0 auto;
}
.circles > div {
overflow: hidden;
float: left;
width: auto;
height: auto;
position: relative;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #1B1C1E;
}
.circles > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'uni_sansheavy_caps';
font-size: 400%;
color: grey;
}
.circles > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circles > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circles > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circles > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circles{width:800px}
.circles > div {padding: 12.5%;}
}
.circlescontent{
margin: 0 auto;
}
.circlescontent > div {
overflow:hidden;
float:left;
width:auto;
height:auto;
position: relative;
background: #1B1C1E;
}
.circlescontent > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'familiar_probold';
font-size: 250%;
color: grey;
}
.circlescontent > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circlescontent > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circlescontent > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circlescontent > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circlescontent{width:800px}
.circlescontent > div {padding: 12.5%;}
}
.statement{
padding-top: 25%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.statement p{
padding-top: 20px;
padding-bottom: 0;
text-align: center;
left: 50%;
font-family: 'familiar_probold';
color: white;
font-size: 50%;
width: 100%;
}
.statementfinal{
padding-top: 0;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
} /*HERE*/
.buttonbkg{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
left: 50%;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: inline-block;
align-content: center;
}
.gradient {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
bottom: auto;
margin: auto;
z-index: -1;
background: radial-gradient(90px circle at top center, rgba(238,88,63,.8) 30%, rgba(255,255,255,0));
transition: all 0s ease-out 0s;
transform: translatex(-140px);
animation: 18s linear 0s infinite move;
display: inline-block;
align-content: center;
}
#keyframes move {
0% {
transform: translatex(-140px);
}
25% {
transform: translatex(140px);
opacity: 0.3;
}
50% {
transform: translatex(140px);
opacity: 1;
background: radial-gradient(90px circle at bottom center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
75% {
transform: translatex(-140px);
opacity: 0.3;
}
100% {
opacity: 1;
transform: translatex(-140px);
background: radial-gradient(90px circle at top center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
}
#media (max-width: 900px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
#media (max-width: 600px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
}}
/*
#0C0028
#1D5EC3
#181A1B
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reff Skins</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<nav class="navbar">
<div class="container">
<section class="_Logo"><img src="images/brand.png" alt="REFF SKINS"></section>
<section class="_Iconbar">
<span class="menu-bar" onclick="showHide()">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</span>
</section>
<section class="_Menus" id="nav-lists">
<ul>
<li>ABOUT</li>
<li>HOW IT WORKS</li>
<li>FAQ</li>
<li>AVAILABLE SKINS</li>
<li>SIGN IN THROUGH STEAM</li>
</ul>
</section>
</div>
</nav>
<div class="toppadding"></div>
<div class="topbackround">
<img class="topbackround" src="images/awpasiimov.jpeg">
<div class="sloganlefttextfirst">WEBSITE WITH TRULY FREE SKINS</div>
<div class="sloganlefttextsecond">LOW ON SKINS?</div>
<div class="sloganlefttextthird">TIME TO GET NEW FREE!</div>
<div class="howitworkslefttextfirst">HOW IS THIS WORKING?</div>
<div class="howitworkslefttextsecond">check how it works page or visit our YouTube</div>
<!--<button class="btn1">HOW IT WORKS</button></div>
<button class="btn2">SKINS</button></div>
<button class="btn3">SIGN IN WITH STEAM</button></div>-->
</div>
<hr></hr>
<div class="midbackground">
<div class="tutorial">HOW CAN I DO IT?<p>If you want your new skins complete the four easy steps.</p></div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
1.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
2.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
3.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
4.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SIGN IN WITH STEAM
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
DO THE REFERR PROCESS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SELECT WANTED SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
GET YOUR SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="statement">IT'S THAT EASY<p>NO DEPOSITS, NO PAYMENT METHODS, NO RISKY GAMBLING, NO SKINS HOLDING</p></div>
<div class="statementfinal">WE SAID NO TO CATCHES!</div>
<div class="buttunbkg">
<span class="gradient"></span>SIGN IN WITH STEAM
<span class="gradient"></span>AVAILABLE SKINS
<span class="gradient"></span>HOW IT WORKS
</div>
</div>
</body>
</html>

Seems like you've got it half using flex, here's an answer sticking to it.
Firstly, you spelt buttonbkg wrong. Add flex-direction: column to it. Then like others said you will want to get rid of the left: 50%. On your .steam add your flex, and center align/justify.
.buttonbkg{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: flex;
justify-content: center;
align-items: center;
}

You need to add this to your button selector:
.button {
transform: translateX(-50%);
}

On your .button class you have left: 50%;, remove it. Also add margin: 3% auto
On you .steam class change display: inline-block; to display: block;
margin: 3% auto
3% -> top/bottom margin
auto -> left/right margin, auto will make left an right margin the same
Other solution would be to change your transform: translatez(0); to transform: translateX(-50%);, but I think transform is like shooting with a shotgun at a fly.

:hover is not working

I am fairly new to web development, so although appreciated, I am not looking for critiques on "best practices", I realize this is not beautiful code, but I am not sure why the a:hover function is not working. it does indeed work for other parts of the code that are not included but I am not sure why this code will not work, any insight would be appreciated.
NOTE: There is no issue with the .css filepath or anything, all the other styles elements work just fine.
So with this question I have included two files, my .html file as well as my main.css file. I have removed any personal information and any code that is not pertinent to the actual issue.
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-decoration-color: white;
}
html {
margin: 0px;
}
body {
margin: 0px;
min-height: 100%;
}
.home {
position: relative;
z-index: -2;
}
.intropage {
position: fixed;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
}
#enterwebsite {
font-family: 'Cookie';
font-size: 48px;
color: white;
border: solid white 2px;
border-radius: 15px;
text-align: center;
padding: 10px 25px;
}
#enterwebsite:hover {
font-family: 'Cookie';
font-size: 48px;
color: black;
border: solid black 2px;
border-radius: 15px;
text-align: center;
padding: 10px 25px;
}
.enterbutton-container {
position: absolute;
top: 60%;
left: 39.5%;
}
.enterbutton {
text-align: center;
}
.backgroundimage {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("styles/images/SF2.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.backgroundimage img {
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
overflow: hidden;
}
.navigation {
display: flex;
background: rgba(10, 10, 10, 0.9);
}
.logo {
display: flex;
flex-grow: 30;
justify-content: center;
align-items: flex-start;
}
h2 {
color: white;
font-family: 'Raleway';
}
p {
color: white;
padding: 32px;
font-family: 'Raleway';
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.logo h1 {
margin: 0;
color: rgba(230, 230, 230, 1.0);
font-family: 'Raleway';
font-size: 32px;
}
#logotop {
text-decoration: underline;
}
#logobottom {
text-decoration: overline;
}
.logotext {
justify-content: center;
}
.intro-container {
display: flex;
justify-content: center;
margin-top: 150px;
}
.intro {
display: flex;
flex-flow: column;
align-items: center;
width: 40%;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 25px;
}
.menu {
flex-grow: 70;
display: flex;
align-items: flex-end;
z-index: auto;
}
.ul-menu {
flex-grow: 1;
display: flex;
list-style-type: none;
justify-content: space-between;
}
.menu-item {
flex-grow: 1;
color: white;
font-family: 'Raleway';
}
.profilepic img {
border: solid 2px cyan;
border-radius: 50%;
margin-top: -100px;
}
.topmenuitem {
text-decoration: none;
color: white;
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet'>
<div class="home">
<div class="navigation">
<div class="logo">
<div class="logocontainer">
<a href="index.html">
<div class="logotext">
<h1 id="logotop">JOHN J</h1>
</div>
<div class="logotext">
<h1 id="logobottom">JINGLEHEIMERSCHMIDT</h1>
</div>
</a>
</div>
</div>
<div class="menu">
<ul class="ul-menu">
<li class="menu-item"><a class="topmenuitem" href="home.html">Home</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Projects/code</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Music</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Websites</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">About</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Contact</a></li>
</ul>
</div>
</div>
<div class="main-body">
</div>
<div class="intro-container">
<div class="intro">
<div class="profilepic">
<img src="assests/profilephoto.jpg" alt="Profile Picture">
</div>
<h2>Welcome!</h2>
<p>Hello, and this is a test link thank you for visiting. here is some text
<br>
<br>
<br> here is some more text
</p>
</div>
</div>
</div>

Remove
z-index: -2;
at .home class
Your body has only one child tag with class home. In this case you shouldn't to set negative z-index. Negative z-index means that this element under the all others elements

Yes Bro, I have debugged your code.
Because of negative z index, your cursor is not detecting the link itself. Removing it, solves the problem. Please check the property properly that how you want to use it.
.home{
position: relative;
// z-index: -2;
}

Just remove z-index: -2; from css file
and for more information related to z-index property in CSS please visit this link
CSS z-index property

First, remove z-index: -2 rule of the .home selector in your CSS
Then, wrap the a with span:
<p>Hello, and <span> this is a test link </span> thank you for visiting..
And in CSS:
span:hover {
//code n' stuffs
}

We Keep Coding

JavaScript is the programming language of the Web.

Having trouble with linking javascript to HTML - javascript

The tag to link a script is <script> not <scripts>

Please use script instead of scripts.it won't work and I suggest you to use sublime text 3 or Notepad ++ with vs code like me. It can save you from many headaches. :)

Related

Sticky navbar creating white space

How can I center this piece of text?

Mobile Resizable Window Dropdown Menu Doesnt Work

How do I center my buttons on my website?

:hover is not working

Categories

Resources