/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
i {
margin-right: 0.3rem;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.05rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
}
.showcase-img {
width: 960px;
height: 400px;
background-color: blue; /* For testing */
border-radius: 4px;
}
.showcase-img img {
width: 100%;
height: 100%;
opacity: 0.1;
}
.showcase ul {
display: flex;
bottom: 13.73rem;
position: relative;
justify-content: space-between;
}
.showcase ul li {
font-size: 2rem;
float: left;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img src="images/#" alt="">
</div>
<ul>
<li class="left-flash"><i class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
</body>
</html>
// I want the left arrow to stick to the left side of the showcase-img container and the right arrow to the right side... I tried justify-content: space-between; but it didn't work, I can of course add margins but that's annoying and would make the site less responsive, any help is greatly appreciated!
 
it is very useful for your question
Related
After the media query, I can't seem to manage to get the hamburger menu to show up. Navbar links do disappear, but the menu won't show up.
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--main-color: #ff702a;
--text-color: #fff;
--bg-color: #1e1c2a;
--big-font: 5rem;
--h2-font: 2.25rem;
--p-font: 0.9rem;
--bg-hover: #2f2b41;
}
body {
background-color: var(--bg-color);
font-family: "Poppins", sans-serif;
height: 2000px;
}
body .navbar {
background-color: grey;
display: flex;
justify-content: space-between;
height: 80px;
position: fixed;
width: 100%;
}
body .navbar .logo {
display: flex;
justify-content: center;
align-items: center;
margin-left: 30px;
}
body .navbar .logo a {
color: var(--main-color);
text-decoration: none;
font-weight: 900;
font-size: 2rem;
cursor: pointer;
}
body .navbar .hamburger-menu {
position: absolute;
top: 0.75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
body .navbar .hamburger-menu .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
body .navbar .navbar-menu {
display: flex;
align-items: center;
gap: 2rem;
margin-right: 25px;
min-width: auto;
}
body .navbar .navbar-menu li {
list-style: none;
opacity: 0.8;
transition: 0.4s ease;
border-radius: 50px;
}
body .navbar .navbar-menu li a {
text-decoration: none;
color: white;
font-size: 1.2rem;
padding: 0.8rem;
}
body .navbar .navbar-menu li:hover {
opacity: 1;
background-color: var(--bg-hover);
}
#media (max-width: 760px) {
.hamburger-menu {
display: flex;
}
.navbar-menu li {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- HEADER -->
<header class="navbar">
<div class="logo">
MyWeb
</div>
<a href="#" class="hamburger-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="navbar-menu">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</header>
<!-- SOMETHING -->
<script src="script.js"></script>
</body>
</html>
Your media query styles that make your hamburger visible are lower specificity and thus never applied.
/* Two class selectors */
body .navbar .hamburger-menu {
display: none;
}
#media (max-width: 760px) {
/* One class selector */
.hamburger-menu {
display: flex;
}
}
I compiled your scss into css for the snippet in both your question and this answer, you do NOT need to nest everything like there's no tomorrow - because you run into problems like this and it's just bad practice.
Go and remove all your unnecessary nesting!
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--main-color: #ff702a;
--text-color: #fff;
--bg-color: #1e1c2a;
--big-font: 5rem;
--h2-font: 2.25rem;
--p-font: 0.9rem;
--bg-hover: #2f2b41;
}
body {
background-color: var(--bg-color);
font-family: "Poppins", sans-serif;
height: 2000px;
}
body .navbar {
background-color: grey;
display: flex;
justify-content: space-between;
height: 80px;
position: fixed;
width: 100%;
}
body .navbar .logo {
display: flex;
justify-content: center;
align-items: center;
margin-left: 30px;
}
body .navbar .logo a {
color: var(--main-color);
text-decoration: none;
font-weight: 900;
font-size: 2rem;
cursor: pointer;
}
body .navbar .hamburger-menu {
position: absolute;
top: 0.75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
body .navbar .hamburger-menu .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
body .navbar .navbar-menu {
display: flex;
align-items: center;
gap: 2rem;
margin-right: 25px;
min-width: auto;
}
body .navbar .navbar-menu li {
list-style: none;
opacity: 0.8;
transition: 0.4s ease;
border-radius: 50px;
}
body .navbar .navbar-menu li a {
text-decoration: none;
color: white;
font-size: 1.2rem;
padding: 0.8rem;
}
body .navbar .navbar-menu li:hover {
opacity: 1;
background-color: var(--bg-hover);
}
#media (max-width: 760px) {
body .navbar .hamburger-menu {
display: flex;
}
.navbar-menu li {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- HEADER -->
<header class="navbar">
<div class="logo">
MyWeb
</div>
<a href="#" class="hamburger-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="navbar-menu">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</header>
<!-- SOMETHING -->
<script src="script.js"></script>
</body>
</html>
I am currently trying to make a website. However, the problem that I am getting is that when I minimize the browser, Yes, it is being responsive, but the text is going over the other components on the website and I am unsure how to work around this issue as I am quite stumped at this error.
Image for more clarification:
Web error
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css" />
<link rel="stylesheet" href="jason.css">
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="main text">
<p>At Virgin Active, we do health and fitness differently. We have expertly crafted exercise experiences
that are the perfect blend of intelligent programming and feel-good movement. We've got everything from
Yoga to HIIT, so you can move your body any
way you want.
</p>
</div>
</div>
<section class="no.1" id="no.1">
<div class="section">
<img src="Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br>
Classes include: Align,Flow and Calm SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
</section>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
</body>
</html>
Css:
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1b1b1b;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li {
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: cyan;
}
nav ul ul li a:hover {
color: cyan;
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background {
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
/* USE FLEXBOX */
display: flex;
align-items: center;
justify-content: flex-start;
/* ADD SOME PADDING FOR BETTER UI */
padding-inline: 16px; /* LEFT and Right */
}
.overlay {
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
}
.overlay h3 {
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p {
font-size: 35px;
}
.main h1 {
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text {
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body {
margin: 0;
font-family: sans-serif;
}
.section {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img {
height: 250px;
}
.section h1 {
margin-left: 100px;
color: black;
}
.section p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer {
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social {
text-align: center;
padding-bottom: 25px;
color: #4b4c4d;
}
.footer .social a {
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover {
color: #24262b;
background-color: #ffffff;
}
.footer ul {
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a {
color: #fff;
text-decoration: none;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
}
.footer .copyright {
margin-top: 15px;
text-align: center;
font-size: 20px;
color: #fff;
}
you can use css media query create responsive web page.
#media only screen and (min-width: 768px) {
.overlay h3 {
font-size: 16px;
}
.overlay p {
font-size: 25px;
}
}
#media only screen and (min-width: 1200px) {
.overlay h3 {
font-size: 22px;
}
.overlay p {
font-size: 40px;
}
}
Another way that is not recommended using viewport width and height
.overlay p {
font-size: 1.5vw;
}
I'm following a free code camp video on personal portfolio, i'm stuck with icons class. I need to add color, font-size for the active icon (i am currently using scss), up to now i am not able to apply any specific style (color and font-size) to ' i ' What am i doing the wrong way? Please need help
enter image description here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
:root {
--color-primary: #191d2b;
--color-secondary: #27ae60;
--color-white: #fff;
--color-black: #000;
--color-grey-0:#f8f8f8;
--color-grey-1: #dbe1e8;
--color-grey-2: #b2becd;
--color-grey-3: #6c7983;
--color-grey-4: #454e56;
--color-grey-5: #2a2e35;
--color-grey-6: #12181b;
--br-sm-2: 14px
--box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--color-primary);
font-size: 1.1rem;
color: var(--color-white);
transition: all .4s ease-in-out;
}
a {
display: inline-block;
text-decoration: none;
color: inherit;
font-family: inherit;
}
header {
height: 100vh;
color: var(--color-white);
overflow: hidden;
}
section {
min-height: 100vh;
width: 100%;
top: 0;
left: 0;
position: absolute;
padding: 3rem 18rem;
}
.section {
transform: translateY(-100%) scale(0);
transition: all .4s ease-in-out;
background-color: var(--color-primary);
}
.sec1 {
display: none;
transform: translateY(0) scale(1);
}
.sec2 {
display: none;
transform: translateY(0) scale(1);
}
.sec3 {
display: none;
transform: translateY(0) scale(1);
}
.sec4 {
display: none;
transform: translateY(0) scale(1);
}
.sec5 {
display: none;
transform: translateY(0) scale(1);
}
//controls
.controlls {
position: fixed;
z-index: 10;
top: 50%;
right: 3%;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
transform: translateY(-50%);
/*HERE IS THE CODE*/
.active-btn {
background-color: var(--color-secondary) !important;
transition: all .4s ease-in-out;
i {
color: var(--color-white) !important;
}
}
.control {
padding: 1rem;
cursor: pointer;
background-color: var(--color-grey-4);
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: .7rem 0;
box-shadow: var(--box-shadow-1);
/*HERE IS THE CODE*/
i {
font-size: 1.2rem;
color: var(--color-grey-2);
pointer-events: none;
}
}
}
<!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>Portfolio</title>
<link rel="stylesheet" href="../portfolio/css/styles.css">
<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=Poppins:ital,wght#0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body class="main-content">
<header class="section sec1 header active">
</header>
<main>
<section class="section sec2 about"></section>
<section class="section sec3 portfolio"></section>
<section class="section sec4 blogs"></section>
<section class="section sec5 contact"></section>
</main>
<div class="controlls">
<div class="control control-1 active-btn">
<i class="fas fa-home"></i>
</div>
<div class="control control-2">
<i class="fas fa-user"></i>
</div>
<div class="control control-3">
<i class="fas fa-briefcase"></i>
</div>
<div class="control control-4">
<i class="fas fa-newspaper"></i>
</div>
<div class="control control-5">
<i class="fas fa-envelope-open"></i>
</div>
</div>
</body>
</html>
You are using SASS or SCSS with nested classes in a CSS file. The file extension should be .sass or the stylesheet must be coded according to the following CSS syntax
body {
margin: 0;
background: #F2F2F2;
font-family: "Montserrat", sans-serif;
height: 100vh;
}
#container {
display: grid;
grid-template-columns: 70px auto;
height: 100%;
}
#container #content {
padding: 30px 50px;
}
#container #content ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#container #content ul li {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 8px;
}
#container #content ul li a {
font-size: 1.5em;
text-decoration: none;
font-weight: bold;
color: #00A8FF;
}
#container #content ul li ul {
margin-top: 20px;
}
#container #content ul li ul li {
padding: 0;
}
#container #content ul li ul li a {
font-size: 1em;
font-weight: 300;
}
I am trying to build my personal webpage but simply cant manage to make my footer not cover the two buttons.
This problem only occurs on my laptop. As soon as I switch to my external monitor, the two buttons arent covered anymore.
I have tried inserting html{overflow-y: scroll;} to my css but it doesnt seem to work :(
Any help would be awesome! Thank you.
HTML:
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
background-size: cover;
padding: 0;
margin: 0;
}
.navbar {
height: 80px;
width: 100%;
background-color: #808080;
}
.logo {
width: 140px;
height: auto;
padding: 15px 50px;
}
.navbar ul {
float: right;
margin-right: 20px;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
font-family: 'Roboto', sans-serif;
transition: .2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
user-select: none;
}
.center h1 {
color: black;
font-size: 70px;
font-weight: bold;
width: 900px;
text-align: center;
}
.center h2 {
color: black;
font-size: 70px;
font-weight: bold;
width: 885px;
margin-top: 10px;
text-align: center;
}
.center .buttons {
margin: 35px 280px;
}
.buttons button {
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons .btn {
margin-left: 25px;
}
.buttons button:hover {
background: #4b79b4;
}
footer {
position: absolute;
background-color: #808080;
height: auto;
width: 100%;
padding-top: 40px;
color: black;
bottom: 0px;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3 {
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p {
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li {
margin: 0 10px;
}
.socials a {
text-decoration: none;
color: lightsteelblue;
}
.socials a i {
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i {
color: #4b79b4;
}
.footer-bottom {
background-color: #737373;
width: 100%;
padding: 20px 0;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span {
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<!-- BEGIN NAVBAR -->
<nav class="navbar">
<img class="logo" src="logo.png">
<ul>
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<!-- END NAVBAR -->
<!-- BEGIN CONTENT -->
<div class="center">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
<!-- END CONTENT -->
</div>
<!-- BEGIN FOOTER -->
<footer>
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
<!-- END FOOTER -->
</body>
</html>
What you describe kind of feels like a grid to me using three "rows", one for the "navbar", one for the "content" and one for the "footer" such as:
display: grid;
grid-template-rows: auto 1fr auto;
Now given that we can put the containers for the rows in a wrapper .wrapper
Then we tall it which "row" each of the sections belongs in. grid-row: 2/2; for the content for example in row 2 (start and end)
I took a good bit of liberty with your CSS (it is still a "lot" just for this) specifically, I added borders to show where things are - you will want to remove those but I did it to illustrate where is "is" in the flow.
This is by no means "perfect" but just a very quick place to build from.
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
padding: 0;
margin: 0;
border: solid orange 3px;
}
.wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
border: lime 4px dashed;
}
.navbar-container {
border: red 4px solid;
grid-row: 1/1;
display: flex;
align-items: start;
margin: 0rem;
}
.content-container {
font-family: sans-serif;
display: grid;
place-items: center;
grid-row: 2/2;
border: blue 1px solid;
}
.footer-container {
padding-top: 2rem;
display: grid;
grid-template-rows: auto 1fr auto;
border: cyan 1px solid;
}
.footer-content {
display: grid;
grid-template-rows: 1fr auto 1fr;
align-items: center;
justify-items: center;
}
.footer-bottom {
grid-row: 3/3;
align-text: center;
padding: 0.25rem;
border: dashed blue 1px;
}
.navbar {
height: 5rem;
width: 100%;
background-color: #808080;
font-family: 'Roboto', sans-serif;
}
.navbar>.logo {
width: 140px;
height: auto;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 50px;
padding-right: 50px;
border: solid 1px green;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
transition: 0.2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
user-select: none;
}
.buttons {
display: flex;
flex-direction: row;
margin-top: 1rem;
margin-bottom: 1rem;
}
.buttons button {
margin: 1rem;
}
.buttons button {
flex: auto;
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons button:hover {
background: #4b79b4;
}
.socials {
list-style: none;
display: flex;
align-items: middle;
justify-content: center;
}
.socials li {
margin-right: 10px;
}
.footer-bottom {
font-size: 0.75rem;
background-color: #737373;
text-align: center;
width: 100%;
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-container">
<img class="logo" src="logo.png">
<ul class="menu-items">
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<div class="center content-container">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
</div>
<footer class="footer-container">
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
</body>
</html>
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.nav i {
margin-right: 0.3rem;
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.02rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, .nav i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
border: none;
}
.showcase-img {
width: 960px;
height: 470px;
border-radius: 2px;
border: 2px solid black;
box-shadow: 3px 3px 15px hsl(250, 100%, 41%);
}
.showcase-img img {
width: 100%;
height: 100%;
}
.showcase-img img:hover {
background-color: dodgerblue; /* testing */
transition: all 0.2s ease-in-out;
opacity: 0.7;
}
.showcase ul {
display: flex;
bottom: 15.6rem;
position: relative;
justify-content: space-between;
width: 85%;
}
.showcase ul li {
color: black;
font-size: 2.5rem;
}
.showcase ul li i:hover {
transition: all 150ms ease-in-out;
font-size: 2.7rem;
color: var(--nav-hue);
cursor: pointer;
}
.showcase ul li i:active {
transition: all 50ms ease-in-out;
transform: translateY(0.2rem);
font-size: 2.9rem;
color: white;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.column {
flex-direction: column;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img id="image" src="images/arma3.png" alt="">
</div>
<ul>
<li class="left-flash"><i id="left-flash" class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i id="right-flash" class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
// When i hover over the showcase-img container the opacity changes but when the mouse goes over the ul which contains 2 li's that are icons the hovering stops and the opacity resets which shouldn't happen, i want the opacity to stay at 0.7 while the mouse is in the showcase-img container, how can i fix this? Thanks!
Rather than applying :hover directly on image like this .showcase-img img:hover img{} apply it directly on parent div it means .showcase:hover img{}. This should be something like this:
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.nav i {
margin-right: 0.3rem;
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.02rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, .nav i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
border: none;
}
.showcase-img {
width: 960px;
height: 470px;
border-radius: 2px;
border: 2px solid black;
box-shadow: 3px 3px 15px hsl(250, 100%, 41%);
}
.showcase-img img {
width: 100%;
height: 100%;
}
.showcase:hover img {
background-color: dodgerblue; /* testing */
transition: all 0.2s ease-in-out;
opacity: 0.7;
}
.showcase ul {
display: flex;
bottom: 15.6rem;
position: relative;
justify-content: space-between;
width: 85%;
}
.showcase ul li {
color: black;
font-size: 2.5rem;
}
.showcase ul li i:hover {
transition: all 150ms ease-in-out;
font-size: 2.7rem;
color: var(--nav-hue);
cursor: pointer;
}
.showcase ul li i:active {
transition: all 50ms ease-in-out;
transform: translateY(0.2rem);
font-size: 2.9rem;
color: white;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.column {
flex-direction: column;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img id="image" src="images/arma3.png" alt="">
</div>
<ul>
<li class="left-flash"><i id="left-flash" class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i id="right-flash" class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>