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 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!
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
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.
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.
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.