how do i activate a new class in java script? - javascript

I have this code.
When inspecting from the browser ,it seems when i click on hamburger-menu active class doesn't work.
I expect when I press the hamburger menu the container class to become the container.active class
Also,I set cursor: pointer for hamburger-menu and for link a(read-more) and it doesn't work.
Any help?
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
width: 100%;
}
.navbar {
position: fixed;
width: 100%;
height: 3rem;
top: 0;
left: 0;
z-index: 1;
}
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.hamburger-menu {
cursor: pointer;
width: 4em;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.menu-bar {
width: 50%;
height: 1.5px;
background: white;
position: relative;
transition: 0.5s;
right: 0;
}
.menu-bar:before {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(-7px);
}
.menu-bar:after {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(7px);
}
.main {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.background {
position: absolute;
width: 100%;
height: 100vh;
background: url("time.jpg") no-repeat top center / cover;
z-index: -1;
}
.background-blur {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(43, 51, 59, 0.8);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.future {
font-size: 3rem;
font-weight: bolder;
color: white;
}
.time {
font-size: 1.5rem;
font-weight: bold;
color: white;
}
.middle a {
position: relative;
top: 2rem;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
color: white;
border-radius: 25px;
background: blue;
padding: 0.6rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="menu-bar"></div>
</div>
</div>
<div class="main">
<div class="background">
<div class="background-blur">
<div class="middle">
<h2 class="future">"Future is here"</h2>
<h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
<a href="#">Read more </a2>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

It is because your .hamburger_menu classes z-index was under the main element and its dimensions was covering your other elements. I have commented where I increased the z index so you can decide how to handle it. But this way of layering your elements is bad when scaling your project. The read more button is not navigating because u haven't set a href path. Set it to a link or an address and click on the button to navigate. The below code shows that as well.
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
alert("clicked")
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
width: 100%;
}
.navbar {
position: fixed;
width: 100%;
height: 3rem;
top: 0;
left: 0;
z-index: 1;
}
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.hamburger-menu {
cursor: pointer;
width: 10%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: black;
z-index: 4; //changed z index to a higher number
}
.menu-bar {
width: 50%;
height: 1.5px;
background: white;
position: relative;
transition: 0.5s;
right: 0;
}
.menu-bar:before {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(-7px);
}
.menu-bar:after {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(7px);
}
.main {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 3;
}
.background {
position: absolute;
width: 100%;
height: 100vh;
background: url("time.jpg") no-repeat top center / cover;
z-index: -1;
}
.background-blur {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(43, 51, 59, 0.8);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.future {
font-size: 3rem;
font-weight: bolder;
color: white;
}
.time {
font-size: 1.5rem;
font-weight: bold;
color: white;
}
.middle a {
position: relative;
top: 2rem;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
color: white;
border-radius: 25px;
background: blue;
padding: 0.6rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="menu-bar"></div>
</div>
</div>
<div class="main">
<div class="background">
<div class="background-blur">
<div class="middle">
<h2 class="future">"Future is here"</h2>
<h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
Read more
</div>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

the problem is your "main" dom element which positioned absolute, so this is overlapping menu element.
So add position relative to menu in css and assign z-index to 1.
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
position: relative;
}
window.onload = function() {
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
});
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
width: 100%;
}
.navbar {
position: fixed;
width: 100%;
height: 3rem;
top: 0;
left: 0;
z-index: 1;
}
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.hamburger-menu {
cursor: pointer;
width: 4em;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.menu-bar {
width: 50%;
height: 1.5px;
background: white;
position: relative;
transition: 0.5s;
right: 0;
}
.menu-bar:before {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(-7px);
}
.menu-bar:after {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(7px);
}
.main {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.background {
position: absolute;
width: 100%;
height: 100vh;
background: url("time.jpg") no-repeat top center / cover;
z-index: -1;
}
.background-blur {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(43, 51, 59, 0.8);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.future {
font-size: 3rem;
font-weight: bolder;
color: white;
}
.time {
font-size: 1.5rem;
font-weight: bold;
color: white;
}
.middle a {
position: relative;
top: 2rem;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
color: white;
border-radius: 25px;
background: blue;
padding: 0.6rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="menu-bar"></div>
</div>
</div>
<div class="main">
<div class="background">
<div class="background-blur">
<div class="middle">
<h2 class="future">"Future is here"</h2>
<h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
<a href="#">Read more </a2>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

I have this search bar and i want it to have a fixed position but at stop at a certain point in my page

I have this search bar and it has a fixed position that starts below my header and i want it to stop above special offers how do I do that? Can i do it with css or will i need to add java script
html,
body {
margin: 0;
background-color: white;
font-family: 'Roboto', sans-serif;
}
* {
box-sizing: border-box;
}
#container {
display: grid;
height: 100vh;
background: white;
border: solid 2vh white;
grid-template-rows: 0.8fr 1fr 2fr 1fr;
}
/* -------------------------------header---------------------------- */
.logo {
margin-left: 3vh;
height: 8vh;
width: 22vh;
}
#header {
display: grid;
grid-template-columns: 2fr 10fr 1fr;
column-gap: 3rem;
align-items: center;
padding-bottom: 1vh;
border-bottom: 3px solid #ddd;
}
header>img {
margin: 1rem;
}
.menu {
display: grid;
grid-template-columns: repeat(3, 3fr);
position: relative;
place-items: center;
}
a.menulink {
color: #202084;
height: 40px;
width: 180px;
text-align: center;
font-size: 1.5rem;
font-weight: 500;
text-decoration: none;
line-height: 40px;
}
a.menulink:hover {
background-color: #202084;
color: white;
border: solid 1px #202084;
border-radius: 30px;
}
.utility {
height: 7vh;
width: 7vh;
display: grid;
grid-template-columns: 1fr;
font-size: 2.5rem;
color: #202084;
place-items: center center;
position: relative;
top: -0.3vh;
}
.utility:hover {
background-color: #202084;
color: white;
border: solid 1px #202084;
border-radius: 50%;
}
/* -------------------------------Search Bar----------------------------
*/
.search {
display: grid;
padding-top: 2vh;
justify-content: center;
grid-template-rows: 1fr 1fr;
position: fixed;
top: 10vh;
left: 50vh;
z-index: 2;
}
.search-bar {
grid-template-columns: 1fr 4fr 1fr;
width: 70vh;
height: 7vh;
background: rgba(112, 107, 107, 0.5);
display: grid;
border-radius: 60px;
grid-row: 2/3;
}
.search-bar input {
line-height: 7vh;
text-align: center;
background: transparent;
border: 0;
outline: none;
font-size: 1.3rem;
color: #202084;
}
.search-bar button {
height: 50px;
width: 50px;
font-size: 1.5rem;
border: 0;
border-radius: 50%;
background: #202084;
color: white;
cursor: pointer;
grid-column: 3/4;
position: relative;
left: 23vh;
bottom: 6.1vh;
transition: transform 0.5s;
}
.search-bar button:hover {
transform: scale(1.3);
}
/*
-------------------------------Banner---------------------------- */
.banner {
display: grid;
}
h1 {
font-size: 14rem;
font-weight: 500;
color: #202084;
position: relative;
top: 25vh;
z-index: 1;
}
.banner .sunbed {
height: 60vh;
width: 65vh;
position: absolute;
top: 30vh;
left: 90vh;
z-index: 1;
}
.banner .shadow {
height: 60vh;
width: 70vh;
position: absolute;
top: 55vh;
left: 80vh;
}
/* -------------------------------Special offers---------------------------- */
.offers {
color: #202084;
font-size: 4rem;
width: 50vh;
position: absolute;
top: 120vh;
left: 63vh;
border: #ddd solid 3px;
border-radius: 10px;
text-align: center;
padding-left: 1vh;
padding-right: 1vh;
}
.special {
display: grid;
grid-template-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
justify-self: center;
}
.special1,
.special2,
.special3 {
display: grid;
height: 60vh;
width: 25vw;
margin-top: 40vh;
margin-left: 5vh;
margin-bottom: 30vh;
border: #ddd solid 3px;
border-radius: 10px;
padding: 10px;
}
.special1 {
grid-column: 2/3;
}
.special2 {
grid-column: 3/4;
}
.special3 {
grid-column: 4/5;
}
.footer {
height: 20vh;
color: white;
background-color: black;
text-align: center;
position: absolute;
bottom: -122vh;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<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=Roboto:wght#100;300;400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/fee1c5da2d.js" crossorigin="anonymous"></script>
<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 href="styles.css" rel="stylesheet" type="text/css">
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<title>Document</title>
</head>
<body>
<div id="container">
<div id="header">
<img class="logo" src="images/logo.png" alt="">
<div class="menu">
Booking
Profiles
About Us
</div>
<div class="utility"><i class="fa-solid fa-user"></i></div>
</div>
<div id="search" class="search">
<form action="" class="search-bar">
<input type="text" placeholder="Location" name="q">
<input type="text" placeholder="Date" name="q">
<input type="text" placeholder="Time" name="q">
<button><i class="fa-solid fa-magnifying-glass"></i></button>
</form>
</div>
<div class="banner">
<div>
<h1>Find your <br> destination </h1>
</div>
<div><img class="sunbed" src="images/sunbeds.png" alt=""></div>
<div><img class="shadow" src="images/shadow.png" alt=""></div>
</div>
<div class="special">
<div class="offers">Special Offers</div>
<div class="special1">
</div>
<div class="special2">
</div>
<div class="special3">
</div>
</div>
</div>
<div class="footer">[Footer]</div>
</body>
</html>
I think what you're looking for is position: sticky as explained here.
So yes it can be done with CSS.
body {
max-height: 450px;
margin: 0;
}
.header {
margin: 10px;
border: 1px solid black;
height: 80px;
}
.sticky-container {
position: relative;
background-color: gray;
}
nav {
position: sticky;
top: 0;
/* styling */
background-color: blue;
padding: 10px;
color: white;
font-weight: bold;
text-align: center;
}
.more-content {
height: 400px;
margin: 10px;
border: 1px solid black;
}
.specials {
margin: 10px;
border: 1px solid black;
}
<html>
<body>
<div class='header'>my header</div>
<div class='sticky-container'>
<nav>my navbar</nav>
<div class='more-content'>some random content</div>
</div>
<div class='specials'>my specials</div>
<div class='more-content'>some random content</div>
</body>
</html>
The styling on the nav set the position: sticky and top: 0 which means it will stick to the top of the window when scrolling, as long is it's anchor is rendered. The anchor is defined by it's closest parent with a position: relative. In this case that is the div.sticky-container.
nav {
position: sticky; /* tells the element to act 'fixed' within it's
parent container */
top: 0; /* sets the nav at the top of the container or highest point
of the container still on the screen */
}
.sticky-container {
position: relative; /* makes sure that this container is seen
as an anchor by the 'sticky' navbar */
}
You may want to fiddle around with how you structure your sections in your HTML, but if I understand correctly this should do the trick.
Hope this helps!

White space on HTML with high width

Hello i dont understand why there is a white space within the container on the rights side, that apeears above like 750 witdh ive been fighting with it for a couple of hours . i am kinda new too..... thanks in advance.
ive tryied playing with flex etc... grow shrink and more flex options i am sure i a missing something.
const hemburger = document.querySelector(`#hemburger`);
const linksContainer = document.querySelector(`.nav__links__container`);
const mainContent = document.querySelector(`.main__content`);
const divHandller = () => {
document.querySelector(`.after__content`).classList.toggle(`display`);
};
const hamburgerHandler = () => {
linksContainer.classList.toggle(`nav__display__icons`);
};
function displayWindowSize() {
// Get width and height of the window excluding scrollbars
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
if (w >= 600) {
linksContainer.classList.remove(`nav__display__icons`);
}
}
window.addEventListener("resize", displayWindowSize);
hemburger.addEventListener(`click`, hamburgerHandler);
mainContent.addEventListener(`click`, divHandller);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: black;
color: white;
width: 100%;
height: 100%;
}
html {
font-size: 62.5%;
}
a {
text-decoration: none;
color: white;
}
.container {
display: flex;
justify-content: space-around;
margin-top: 1rem;
align-items: baseline;
}
.nav__logo__container {
flex: 2;
margin-left: 1rem;
position: relative;
}
.nav__links__container {
flex: 0.5 1 auto;
transition: 1s all;
}
#nav__links {
margin: 1rem;
}
#nav__logo {
font-size: 1.5rem;
}
#hemburger {
margin-right: 2rem;
font-size: 1.5rem;
display: none;
color: white;
}
#media (max-width: 600px) {
.nav__links__container {
position: absolute;
flex-direction: column;
display: flex;
left: -100%;
z-index: 2;
}
#hemburger {
display: block;
}
.main__content {
flex-direction: column;
justify-content: center;
}
.btn__container {
align-self: center !important;
}
.main__content {
height: 30vh;
}
}
.nav__display__icons {
position: absolute;
flex-direction: column;
display: flex;
left: 0;
margin-top: 3rem;
}
/* NAV STYLING END */
.main__content {
width: 80%;
height: 80vh;
background-color: black;
margin: 0 auto;
border: rgba(255, 255, 255, 0.491) 1.5px solid;
margin-top: 1.5rem;
display: flex;
align-items: center;
border-radius: 10px;
position: relative;
}
#main__content__text {
}
.after__content {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(130, 127, 127);
top: -150%;
transition: all 2s;
border-radius: 10px;
}
.display {
top: 0%;
}
#main__content__text {
text-align: center;
height: 20rem;
width: 20rem;
font-size: 2rem;
line-height: 4rem;
}
.main__content__img__container {
font-size: 1.5rem;
}
.btn__container {
align-self: flex-end;
margin-bottom: 2rem;
}
#btn {
padding: 1rem 2rem;
border-radius: 25px;
animation-name: btnAnimation;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
position: relative;
}
#btn:hover {
}
#keyframes btnAnimation {
0% {
transform: translateX(-50px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 0.9;
}
}
#keyframes btnAfterAnimation {
0% {
opacity: 0.5;
width: 4rem;
color: black;
}
100% {
opacity: 0;
width: 100%;
color: black;
}
}
#btn::after {
content: "";
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
background-color: rgb(118, 116, 116);
border-radius: 25px;
opacity: 0;
z-index: 1;
transition: all 1s;
}
#btn:hover::after {
animation-name: btnAfterAnimation;
animation-duration: 2s;
}
<!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>Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="container">
<div class="nav__logo__container">
Logo
</div>
<div class="nav__links__container">
Home
About
My project
Terms
</div>
<div> <i id="hemburger" class="fa-solid fa-bars"></i>
</div>
</div>
</nav>
<section class="main__content">
<div class="main__content__text__container">
<h3 id="main__content__text">strategic design for brands and small business and for you</h3>
</div>
<div class="btn__container">
<button id="btn">Click here for more info</button>
</div>
<div class="main__content__img__container">
<h4>Test test test</h4>
</div>
<div class="after__content"></div>
</section>
<script src="https://kit.fontawesome.com/618bf7505f.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
please try to add justify-content: space-around; to .main__content

How do I start an independent new section after 'position: absolute;'

I think it's important to note that I'm a complete beginner in webdev.
However, the point is that I can't yet figure out how to start a new section after using position: absolute; on the previous one.
Each time I start writing something new, it ends up either on the top of the page, or on the center of the page.
I have tried using flexbox and grid, however that didn't help me either.
So I wonder how do I do it without affecting the layout of the webpage?
It is not even a question that I have to learn more about CSS positioning.
I know it looks a bit messy.
Here's the code:
:root {
/* colors */
--clr-white: rgb(235, 255, 209);
--clr-black: rgb(10, 10, 9);
--clr-gray: rgb(30, 30, 30);
--clr-green: rgb(173, 255, 47);
--clr-orange: rgb(255, 123, 25);
--ff-main: 'Montserrat', sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: var(--clr-black);
color: var(--clr-white);
font-family: var(--ff-main);
font-size: 1.1rem;
/* line-height: 1.5; */
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1rem 3rem;
z-index: 1000;
}
nav {
display: flex;
position: sticky;
align-items: center;
justify-content: space-around;
top: 100%;
}
nav li {
line-height: 1.5;
}
main {
display: flex;
justify-content: space-around;
align-items: center;
}
a {
text-decoration: none;
color: inherit;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
z-index: -2;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.9;
z-index: -1000;
}
.background {
background-size: cover;
/* overflow: hidden; */
/* background-repeat: no-repeat; */
width: 100%;
filter: saturate(100%) contrast(100%) blur(0.3rem) hue-rotate(111deg);
z-index: -11;
}
.btn {
border: none;
border-radius: 6px;
background-color: var(--clr-green);
padding: 0.3rem 0.6rem;
color: var(--clr-black);
cursor: pointer;
}
.button {
border: 1px solid var(--clr-orange);
border-radius: 6px;
padding: 0.3rem 0.6rem;
color: var(--clr-green);
background-color: inherit;
cursor: pointer;
font-size: 1.1rem;
font-weight: 300;
transition: all 0.6s ease 0s;
}
.button:hover {
border: 1px solid var(--clr-green);
background-color: var(--clr-green);
color: var(--clr-black);
}
.heading {
font-size: 3rem;
font-weight: 900;
letter-spacing: 0.3rem;
}
.title {
position: static;
bottom: 1%;
font-weight: 100;
letter-spacing: 0.3rem;
right: 37.5%;
width: 100%;
}
.text {
position: absolute;
bottom: 9%;
/* left: 50%; */
right: 43%;
font-size: 1.1rem;
letter-spacing: 0.3rem;
font-weight: 100;
font-size: 700;
}
.uppercase {
text-transform: uppercase;
}
.touch {
position: absolute;
top: 27%;
left: 11%;
filter: blur(0.1rem);
}
.top-left {
position: absolute;
top: 11%;
left: 9%;
font-size: 11rem;
font-weight: 900;
}
.mid-left {
position: absolute;
top: 33%;
left: 33%;
font-size: 4.3rem;
font-weight: 400;
}
.mid-center {
position: absolute;
top: 42%;
left: 11%;
font-weight: 600;
}
.center {
position: absolute;
top: 44%;
font-size: 9rem;
font-weight: 900;
left: 38%;
}
.mid-right {
position: absolute;
top: 56%;
right: 18%;
font-weight: 200;
font-size: rem;
}
.down-right {
position: absolute;
top: 66%;
right: 11%;
font-size: 11rem;
font-weight: 900;
}
.main-content {
display: flex;
justify-content: center;
align-items: center;
}
.down {
position: absolute;
bottom: 3%;
left: 46.6%;
}
<!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="css/styles.css">
<title>stombic</title>
</head>
<body>
<!-- BACKGROUND -->
<section class="showcase">
<video muted autoplay class="background">
<source src="videos/1.mp4" type="video/mp4" />
</video>
<!-- MAIN -->
<main>
<section class="left">
<div class="uppercase">
<h1 class="heading"><span class="top-left">art</span> <span class="mid-left">is</span>
<span class="mid-center">where</span>
<span class="center">work</span>
<span class="mid-right">meets</span> <span class="gradient down-right">love</span></h1>
<p class="text">created to create.</p>
<button type="button" class="button down">Learn More</button>
</div>
</section>
<!-- <section>
<img src="images/splash.png" class="top-left"/>
<img src="images/hands.png" class="down-right"/>
</section> -->
</main>
</section>
</body>
</html>
This is one of the longer codes I've seen on this platform. If anyone wants the files it is not a problem for me to send it.
make the two absolute position sections inside a container that has a relative position.
You can use position: absolute on a container.
For example, use position: absolute on the main and then position the sections 'normally'. But if you need sibling sections to go next to each other and not overlap, you'd not use position: absolute on one of them.
I'd highly recommend Kevin Powell's Youtube Channel, where he makes great videos about CSS and demystifies positioning.

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.

Categories