So I am extremely new to coding and I am doing this for my career school capstone project and I am running into a lot of problems. Mainly two: How to put the image above the content box? (even with a transparent background).
Here is my Code:
/*Header Begins*/
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #FFDAB9;
}
li, a, button {
font-family: "Monserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.5);
}
.logo {
cursor: pointer;
}
.nav__links{
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #fd56ed;
}
button {
padding: 9px 25px;
background-color: #79cdf6;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(0,136,169,1);
}
header img {
width: 13%;
height: 13%;
}
/*Header Ends*/
/*body begins*/
.container {
width: 90%;
margin: 50px auto;
}
.box {
margin: 30px auto 70px;
background: #FFFFFF;
opacity: 0.5;
display: flex;
position: relative;
}
#box img:logo.png {
opacity: 1;
}
/*body ends*/
/*footer begins*/
footer {
width: 100%;
text-align: center;
bottom: 0;
box-shadow: 0 -2px 2px -2px rgba(0,0,0,.5);
position: reflexive;
left: 0;
padding-top: 8px;
padding-bottom: 5px;
}
.nav_link_footer li a:hover {
list-style: none;
color: #fd56ed;
}
.nav_link_footer li a {
transition: all 0.3s ease 0s;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="images/logo.png" alt="Alt Image">
<nav>
<ul class="nav__links">
<li>Home</li>
<li>Catalog</li>
<li>Clothes</li>
<li>Corner</li>
</ul>
</nav>
<a class="cta" href="Contact.html"><button>Contact Us</button><a>
</header>
*** <div class="container">
<div class="box">
<img src="images/logo.png">
</div>
</div> ***
<footer>
<ul class="nav_link_footer">
<li><p>Marshion©</p></li>
<li>Email Us</li>
<li><p>YouTube: #Marshion!</p></li>
<li><p>Instagram: #Marshion</p></li>
<li><p>Facebook: #Marshion</p></li>
</ul>
</footer>
</body>
</html>
The white box appears next to the image. I wanted it to be inside the box. I also wanted to box to have it's own set of opacity and colors. Which I know that I need to adjust my DIV boxes and create better ones but I'm not sure where to start #1, and I don't necessarily have any guidance on how to do so.
So first at all:
If you want to make the background of the box a bit transparent then you should not give an opacity: 0.5; but a background: rgba(255,255,255,0.5);
Then I also saw this in your CSS code:
You used a class for the box in the HTML. For the box-image in CSS you used an ID. And if you want to address the image in the Box class then you don't say .box img:logo.png but .box img
The correct CSS code should look like this:
Here is the whole revised code again. If something is missing then let us know:
/*Header Begins*/
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #FFDAB9;
}
li, a, button {
font-family: "Monserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.5);
}
.logo {
cursor: pointer;
}
.nav__links{
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #fd56ed;
}
button {
padding: 9px 25px;
background-color: #79cdf6;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(0,136,169,1);
}
header img {
width: 13%;
height: 13%;
}
/*Header Ends*/
/*body begins*/
.container {
width: 90%;
margin: 50px auto;
}
.box {
margin: 30px auto 70px;
background: rgba(255,255,255,0.5);
display: flex;
position: relative;
}
.box img {
opacity: 1;
margin: 0 auto;
display: block;
}
/*body ends*/
/*footer begins*/
footer {
width: 100%;
text-align: center;
bottom: 0;
box-shadow: 0 -2px 2px -2px rgba(0,0,0,.5);
position: reflexive;
left: 0;
padding-top: 8px;
padding-bottom: 5px;
}
.nav_link_footer li a:hover {
list-style: none;
color: #fd56ed;
}
.nav_link_footer li a {
transition: all 0.3s ease 0s;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="images/logo.png" alt="Alt Image">
<nav>
<ul class="nav__links">
<li>Home</li>
<li>Catalog</li>
<li>Clothes</li>
<li>Corner</li>
</ul>
</nav>
<a class="cta" href="Contact.html"><button>Contact Us</button><a>
</header>
*** <div class="container">
<div class="box">
<img src="images/logo.png">
</div>
</div> ***
<footer>
<ul class="nav_link_footer">
<li><p>Marshion©</p></li>
<li>Email Us</li>
<li><p>YouTube: #Marshion!</p></li>
<li><p>Instagram: #Marshion</p></li>
<li><p>Facebook: #Marshion</p></li>
</ul>
</footer>
</body>
</html>
Try this
#box img:logo.png {
float: none;
opacity: 1;
}
Related
Creating a simple product landing page, I'm done with the first part of the webpage. When I try to write a new section for "Why fly with us" that ideally, a user would scroll down to from the first part, and every new element appears on top of the first part.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.nav-container {
height: 70px;
background-color: rgb(0, 221, 221);
}
.navbar {
display: grid;
grid-template-columns: 0.2fr auto 1fr;
align-items: center;
height: 80px;
width: 90%;
max-width: 1720px;
margin: 0 auto;
}
#navbar-logo {
color: white;
justify-self: start;
}
#navbar-logo {
cursor: pointer
}
.nav-menu {
display: grid;
grid-template-columns: repeat(5, auto);
list-style: none;
font-size: 1.2rem;
text-align: center;
width: 50%;
justify-self: end;
}
.nav-links {
color: white
}
.nav-links:hover {
color: #f9e506;
transition: all 0.3s ease-out;
}
.nav-links-btn {
background-color: #f9e506;
padding: 6px 16px;
border-radius: 4px;
}
.nav-links-btn:hover {
background-color: transparent;
color: white;
padding: 5px 15px;
border-radius: 4px;
border: solid 1px #f9e506;
transition: all 0.3s ease-out;
}
.container {
position: fixed;
top: 38%;
left: 32%;
text-align: center;
}
h1 {
color: white;
font-size: 5rem;
margin: 0 0 1rem;
#media (max-width: $bp-s) {
font-size: 2rem;
}
}
h2 {
color: white;
font-weight: 300;
font-size: 2.2rem;
margin: 0 0 1rem;
#media (max-width: $bp-s) {
font-size: 1.5rem;
}
}
h3 {
color: white;
font-weight: 300;
font-size: 2.5rem;
margin: 0 0 1rem;
#media (max-width: $bp-s) {
font-size: 1.5rem;
}
}
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background-image: url("61766.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: 'Heebo', sans-serif;
font-size: 100%;
line-height: 1.45;
}
.btn {
width: 300px;
height: 80px;
border: none;
color: aqua;
background-color: #04d9ff;
border-radius: 4px;
box-shadow: inset 0 0 0 0 #f9e506;
transition: ease-out 0.3s;
font-size: 2rem;
outline: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: white;
}
.btn:hover {
box-shadow: inset 300px 0 0 0 #f9e506;
cursor: pointer;
color: #000;
}
.description {
background-color: aliceblue;
}
<!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>iTravel Agency</title>
<link rel="stylesheet" href="style.css"/>
<script src="script.js"></script>
</head>
<body>
<header>
<div class="nav-container">
<nav class="navbar">
<h3 id="navbar-logo">iTravel</h3>
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="nav-menu">
<li>Home</li>
<li>Flights</li>
<li>Hotels</li>
<li>My Bookings</li>
<li>Log In</li>
</ul>
</nav>
</div>
<div class="container">
<h1>iTravel</h1>
<h2>Travelling has never been easier</h2>
<button class="btn">Book Flights Now</button>
</div>
</header>
<div>
<section class="description">
<h4>Why fly with us?</h4>
<p>A travel agency like ours offers a one-stop solution for all your travel needs. From finding the perfect destination to planning..
</p>
</section>
</div>
</body>
</html>
I thought I might've failed to close a HTML tag but I've checked thoroughly and that's not the case. I've tried putting the next part in a div, I've also tried using the section tag but both attempts yielded the same results. I inspected the CSS, especially the html and body selectors, and even tweaked some of the values but to no avail. I suspect I'm missing a very minute detail and would appreciate a keener more experienced eye could help.
I think this might be what you were trying to accomplish. Basically, if you wrap each of your "sections" in an absolute positioned container (I used section) and then within each section have a fixed position container, you can achieve a parallax scroll effect. Assuming each section is 100vh, the trick is that each container needs to have its top property set to 100vh + the top property of the previous section (so the first one is 0, second is 100vh, third is 200vh...). Additionally, each successive section needs a higher z-index.
Run the snippet below and open it in full screen mode to test it out.
/* GLOBAL STYLES */
:root {
--navBarHeight: 3.5rem;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
background-image: url("61766.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: 'Heebo', sans-serif;
font-size: 100%;
line-height: 1.45;
}
h1 {
font-size: 5rem;
}
h2 {
font-weight: 300;
font-size: 2.2rem;
}
h3 {
font-weight: 300;
font-size: 2.5rem;
}
a {
color: inherit;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: white;
}
/* NAVBAR STYLES */
.nav-container {
color: white;
background-color: rgb(0, 221, 221);
position: fixed;
width: 100%;
z-index: 1000;
height: var(--navBarHeight);
padding: 0 1rem;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
#navbar-logo {
cursor: pointer;
}
.nav-menu {
display: flex;
margin: 0;
padding: 0;
list-style: none;
gap: .5rem;
}
.nav-links:hover {
color: #f9e506;
transition: all 0.3s ease-out;
}
.nav-links-btn {
background-color: #f9e506;
padding: 6px 16px;
border-radius: 4px;
}
.nav-links-btn:hover {
background-color: transparent;
color: white;
padding: 5px 15px;
border-radius: 4px;
border: solid 1px #f9e506;
transition: all 0.3s ease-out;
}
/* MAIN STYLES: PARALLAX SECTIONS */
main {
position: relative;
}
section {
text-align: center;
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
clip: rect(0, auto, auto, 0);
padding: 1rem;
box-shadow: inset 0 1px 2rem hsl(0 0% 0% / .05);
background-color: white;
}
.fixed {
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-top: calc(1rem + var(--navBarHeight));
}
section:nth-child(1) {
top: 0;
z-index: 1;
}
section:nth-child(2) {
top: 100vh;
z-index: 2;
}
section:nth-child(3) {
top: 200vh;
z-index: 3;
}
section:nth-child(4) {
top: 300vh;
z-index: 4;
}
.booknow {
background-color: white;
}
.description {
background-color: lightcyan;
}
.findDeals {
background-color: white;
}
.explore {
background-color: lightyellow;
}
.btn {
width: 300px;
height: 80px;
border: none;
color: aqua;
background-color: #04d9ff;
border-radius: 4px;
box-shadow: inset 0 0 0 0 #f9e506;
transition: ease-out 0.3s;
font-size: 2rem;
outline: none;
}
.btn:hover {
box-shadow: inset 300px 0 0 0 #f9e506;
cursor: pointer;
color: #000;
}
<header>
<div class="nav-container">
<nav class="navbar">
<h3 id="navbar-logo">iTravel</h3>
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="nav-menu">
<li>Home</li>
<li>Flights</li>
<li>Hotels</li>
<li>My Bookings</li>
<li>Log In</li>
</ul>
</nav>
</div>
</header>
<main>
<section class="booknow">
<div class="fixed">
<h1>iTravel</h1>
<h2>Travelling has never been easier</h2>
<button class="btn">Book Flights Now</button>
</div>
</section>
<section class="description">
<div class="fixed">
<h3>Why fly with us?</h3>
<p>A travel agency like ours offers a one-stop solution for all your travel needs. From finding the perfect destination to planning...</p>
</div>
</section>
<section class="findDeals">
<div class="fixed">
<h3>Check out these deals!</h3>
</div>
</section>
<section class="explore">
<div class="fixed">
<h3>Explore destinations</h3>
</div>
</section>
</main>
The main problem here is the positioning used for the first element (.container). With position: absolute & position: fixed the elements are removed from the normal flow of the document.
In other words they take no space during layout calculation and therefore are ignored while placing elements that are in the normal document flow.
So I am new to web development and was trying to practice by making a portfolio for myself but I ran into a slight issue. It seems that when a set margin-top to a divider, my navigation bar shifts a bit to the right.
So for some reason, when I apply "margin-top: 300px;" to the ".header" class, my navigation bar shifts to the right a bit.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap');
* {
font-family: 'Poppins', 'sans-serif';
padding: 0px;
margin: 0px;
box-sizing: border-box;
scroll-padding-top: 1rem;
scroll-behavior: smooth;
list-style: none;
text-decoration: none;
}
body {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 5px 20px 5px 20px;
z-index: 100;
background-color: white;
margin: 10px 25px 10px 10px;
cursor: pointer;
}
.nav-header {
color: var(--text-color);
}
.nav-header h2 {
font-weight: 500;
margin: 0;
padding: 0;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
font-size: 18px;
font-weight: 500;
}
nav ul li a {
color: var(--text-color);
transition-duration: 0.7s;
}
nav ul li a:hover {
color: var(--text-highlight)
}
nav ul li a:active {
color: var(--text-active);
}
nav ul li a span {
color: var(--text-active);
}
:root {
--text-color: #000000;
--text-highlight: #D3D3D3;
--text-active: #6b84d1;
}
.container {
max-width: 1300px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.header {
text-align: center;
margin-top: 300px;
;
}
.header h1 {
color: rgb(255, 100, 0);
font-size: 64px;
}
.header p {
font-weight: 500;
font-size: 36px;
}
.header hr {
margin-top: 225px;
}
<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>Kelvin Kuoch | Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/d4a6ce6cea.js" crossorigin="anonymous"></script>
<script>
function scrollToTop() {
window.scrollTo(0, 0);
}
</script>
</head>
<body>
<div class="container">
<div class="navbar">
<a class="nav-header">
<h2 onclick="scrollToTop()">Kelvin Kuoch</h2>
</a>
<nav>
<ul>
<li><a><span onclick="scrollToTop()" class="homeBtn">Home</a></span>
</li>
<li>Work</li>
<li>About</li>
</ul>
</nav>
<hr id="nav-div">
</div>
<div class="header">
<h1>Hello!</h1>
<h2>I'm Kelvin, a <br> highschool student <br> based in Australia.</h2>
<hr>
</div>
<div class="mid-container" id="my-work">
<h1>My Work</h1>
</div>
</div>
</body>
I think there is problem with your .navbar class; when I remove the extra margin it showing well:
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 5px 20px 5px 20px;
z-index: 100;
background-color: white;
margin: 10px 25px 10px 0px;
cursor: pointer;
}
Before removing the margin:
After removing it is fine now:
But I suggest you to use Bootstrap navigation which are fully responsive.
Hello I just started with HTML & CSS and I am currently working on my first website. I have the problem that my nav bar delays the div below it when the div (called Start) is set to relative. I have to scroll to see the full image in the div. But when I set it to absolute it centers the div perfectly but the nav bar is not visible anymore. I would be grateful if someone could help me!
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>RATA</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<img class="Logo" src="images/R-white.png" alt="Skull-Logo">
<nav>
<ul class="nav__links">
<li>Roadmap</li>
<li>About</li>
<li>Team</li>
<li>FAQ</li>
</ul>
</nav>
<a class="cta" href="#"><button>Mint</button></a>
</header>
<div class="Start">
<img class="background" src="images/RATA-small.svg" alt="RATA">
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
/************** PARAM SELECTORS ******************/
body {
margin: 0;
}
/*******************CLASS SELECTORS*****************/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #191919;
z-index: 1;
}
li, a, button {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.Logo {
cursor: pointer;
height: 100px;
margin: 0;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta button:hover {
background-color: rgba(0, 136, 169, 0.8)
}
/**Div**/
.Start {
position: relative;
bottom: 0;
width: 100%;
}
/** Image in Div**/
.background {
margin-top: 0px;
bottom: 0;
position: relative;
z-index: 0
}
I have to scroll to see the full image in the div.
That sounds like the image height is simply too large for your screen, here I set it to 200px:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
/************** PARAM SELECTORS ******************/
body {
margin: 0;
}
/*******************CLASS SELECTORS*****************/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #191919;
z-index: 1;
}
li, a, button {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.Logo {
cursor: pointer;
height: 100px;
margin: 0;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta button:hover {
background-color: rgba(0, 136, 169, 0.8)
}
/**Div**/
.Start {
position: relative;
bottom: 0;
width: 100%;
}
/** Image in Div**/
.background {
margin-top: 0px;
bottom: 0;
z-index: 0;
width: 100%;
height: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>RATA</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<img class="Logo" src="images/R-white.png" alt="Skull-Logo">
<nav>
<ul class="nav__links">
<li>Roadmap</li>
<li>About</li>
<li>Team</li>
<li>FAQ</li>
</ul>
</nav>
<a class="cta" href="#"><button>Mint</button></a>
</header>
<div class="Start">
<img class="background" src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
</div>
</body>
</html>
Click the Full Page button to see the snippet in full screen of your device
/* 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>
So I'm developing my first ever page after I've studied for about 3-4 months about HTML and CSS.
The problem is that the footer is sticked to the slideshow. Can't really seem to figure out how to stick it to the bottom of the page.
Also, if you find any other errors or you have any other tips for me, please mention them.
index.html
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>x</title>
<link href="css/css.css" rel="stylesheet" />
<link href="css/sshow.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="shadow">
<header id="top">
<nav id="top-mic">
<ul>
<li>Contact</li>
<li>Despre noi</li>
<li>Locatie</li>
</ul>
</nav>
<img src="img/logo.jpg" alt="davnic" id="logo" width="288" height="115"></img>
<div id="top-mare-wrap">
<nav id="top-mare">
<ul>
<li>Acasa</li>
<li>Buton1</li>
<li>Buton2</li>
<li>Buton3</li>
<li>Buton4</li>
</ul>
</nav>
</div>
</header>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/img3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<script src="js/sshow.js"></script>
<footer class="site-footer">
x
<img src="img/location_1.png" />
</footer>
</div>
</body>
</html>
sshow.css
.mySlides {
display: none;
}
.slideshow-container {
clear: both;
max-width: 100%;
position: relative;
margin: auto;
overflow: hidden;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.active {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
css.css
html {
box-sizing: border-box;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Roboto, Arial;
height: 4000px;
width: 100%;
padding-bottom: 6rem;
margin: 0;
font-size: 1.1em;
min-height: 100%;
position: relative;
}
header {
color: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid #ADADAD;
}
#container {
margin: 0 auto;
padding: 0;
color: #ffffff;
}
#top-mic {
background-color: #F28A00;
margin: 0;
padding: 0;
margin-bottom: 14px;
}
#top-mic ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#top-mic li {
float: right;
padding: 8px 30px;
}
#top-mic li a {
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 0.6em;
font-weight: bold;
transition: color 0.25s ease;
margin-right: 55px;
}
#top-mic li a:hover {
color: #ADADAD;
}
#logo {
float: left;
margin-left: 240px;
margin-right: 130px;
}
#top-mare-wrap {
margin: 0 auto;
}
#top-mare {
padding: 0;
margin: 0;
margin-bottom:60px;
}
#top-mare ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-mare li {
display:inline;
}
#top-mare li a {
margin-top: 42px;
margin-left: 40px;
padding-right: 20px;
display: inline-block;
text-decoration: none;
color: #ADADAD;
text-align: center;
font-size: 2.1em;
font-weight: bold;
transition: color 0.25s ease;
}
#top-mare li a:hover {
color: #F28A00;
}
#test {
color:black;
}
#container {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
#container:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
.footer {
clear: both;
margin-top: 4000px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #F28A00;
text-align: center;
}
I've observed that if i delete position:relative from the sshow.css, it works, but the buttons from the slideshow obviously disappear.
Also tried with this css:
html {
box-sizing: border-box;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Roboto, Arial;
height: 4000px;
width: 100%;
padding-bottom: 6rem;
margin: 0;
font-size: 1.1em;
min-height: 100%;
position: relative;
}
header {
color: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid #ADADAD;
}
#container {
margin: 0 auto;
padding: 0;
color: #ffffff;
}
#top-mic {
background-color: #F28A00;
margin: 0;
padding: 0;
margin-bottom: 14px;
}
#top-mic ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#top-mic li {
float: right;
padding: 8px 30px;
}
#top-mic li a {
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 0.6em;
font-weight: bold;
transition: color 0.25s ease;
margin-right: 55px;
}
#top-mic li a:hover {
color: #ADADAD;
}
#logo {
float: left;
margin-left: 240px;
margin-right: 130px;
}
#top-mare-wrap {
margin: 0 auto;
}
#top-mare {
padding: 0;
margin: 0;
margin-bottom:60px;
}
#top-mare ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-mare li {
display:inline;
}
#top-mare li a {
margin-top: 42px;
margin-left: 40px;
padding-right: 20px;
display: inline-block;
text-decoration: none;
color: #ADADAD;
text-align: center;
font-size: 2.1em;
font-weight: bold;
transition: color 0.25s ease;
}
#top-mare li a:hover {
color: #F28A00;
}
#test {
color:black;
}
.footer {
clear:both;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
Thanks a lot.
try closing div before the footer. the footer is inside the slide show, but i did'nt tested the code.
Try this:
CSS:
.footer {
border-style: groove;
border-width: 0px;
border-top-width: 1px;
border-top-color: white;
background-color: black;
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 25px;
}
It will always have this footer at the bottom, black background and small width above. Height is 25px. You can style this footer in the CSS. Also note that the position is fixed.
EDIT:
I didnt test your code, make sure div's are closed properly.
Use position: fixed for the footer element.