I am trying to create a hero section for a layout. My problem is that the content (text and buttons) is being obscured by the overlay even after setting a higher z-index value.
Here's my code:
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Base Styles */
:root {
--primary-color: #c72727;
--secondary-color: #f99500;
--light-color: #f3f3f3;
--dark-color: #333;
--max-width: 1100px;
}
body {
font-family: 'Lato', sans-serif;
line-height: 1.5;
background: var(--light-color);
}
img {
width: 100%;
height: auto;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #777;
}
i.fab {
color: #777;
}
p {
font-weight: 100;
margin: 1rem 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Staatliches', cursive;
margin-bottom: 0.55rem;
line-height: 1.3;
margin: 0.5rem 0;
}
/* Utilities */
.container {
max-width: var(--max-width);
margin: auto;
padding: 20px;
}
.btn {
display: inline-block;
cursor: pointer;
padding: 13px 20px;
color: #fff;
}
.btn-primary,
.bg-primary {
background: var(--primary-color);
}
.btn-secondary,
.bg-secondary {
background: var(--secondary-color);
}
.btn-dark,
.bg-dark {
background: var(--dark-color);
}
.bg-light {
background: var(--light-color);
}
.category {
color: #fff;
text-transform: uppercase;
border-radius: 50%;
padding: 10px;
font-size: 10px;
}
.category-sports {
background: var(--secondary-color);
}
.category-entertainment {
background: #a66bbe;
}
.category-tech {
background: #009cff;
}
/* Header */
#header {
position: sticky;
top: 0;
left: 0;
right: 0;
}
#header .container {
display: grid;
grid-template-columns: 6fr 3fr 2fr;
align-items: center;
}
#header .logo {
width: 180px;
}
#header ul {
display: flex;
justify-content: center;
align-items: center;
}
#header ul li {
margin-right: 10px;
}
/* Showcase */
#showcase {
height: 500px;
color: #fff;
background: url('../images/featured.jpg') no-repeat center center/cover;
position: relative;
}
#showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
#showcase * {
z-index: 10000;
}
<!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>NewsGrid | The Leading Online News Website</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<header id="header">
<div class="container">
<div class="logo">
<img src="./images/logo.png" alt="" />
</div>
<div class="social">
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
<i class="fab fa-youtube fa-2x"></i>
</div>
<nav>
<ul class="nav">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
</ul>
</nav>
</div>
</header>
<!-- Showcase -->
<section id="showcase">
<div class="container">
<div class="showcase-content">
<span class="category category-sports">Sports</span>
<h1>Some Sports Article</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus
rerum officia quibusdam mollitia deserunt animi soluta laudantium.
Quam sapiente a dolorum magnam necessitatibus quis tempore facere
totam. Dolor, sequi distinctio!
</p>
READ MORE
</div>
</div>
</section>
</body>
</html>
I did set the Z-index for the showcase content to be in front of the image, but it doesn't work. I have tried an identical approach elsewhere and that works.
Am I doing something incorrectly?
Please help, Thanks!
Related
So I have a school project due and my website will not display my text properly. Does anybody know the problem?
Here is the code
body {
background-image: image();
}
* {
box-sizing: border-box;
}
header {
background-color: navy;
padding: 34px;
}
.homestyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.concertstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.sportstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.Receptenstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.Contactstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.foto_zwolle {
width: 150px;
float: right;
}
.knopanimatie a::after {
content: '';
width: 0%;
height: 2px;
background: #fff;
margin: auto;
transition: 0.5s;
display: block;
}
.knopanimatie a:hover::after {
width: 100%;
}
.footer {
color: white;
font-family: 'Prompt', sans-serif;
background-color: rgb(21, 108, 179);
text-align: center;
padding: 10px;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 0%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: 0px;
z-index: 10;
}
.sticky {
top: 0;
padding: 0px;
font-size: 20px;
}
.grid-container {
display: grid;
grid-template-areas: 'header header header' 'zwolle zwolle zwolle' 'tekstlinks tekstmidden tekstrechts ' 'footer footer footer';
gap: 10px;
padding: 10px;
}
.tekstlinks {
grid-area: tekstlinks;
height: 100px;
width: 360px;
padding: 30px;
padding-top: 0px;
font-family: 'Prompt', sans-serif;
display: inline-block;
}
.tekstmidden {
grid-area: tekstmidden;
height: 100px;
display: inline-block;
width: 360px;
padding: 30px;
padding-top: 0px;
font-family: 'Prompt', sans-serif;
}
.zwolle {
grid-area: zwolle;
font-family: 'Prompt', sans-serif;
padding: 30px;
}
.tekstrechts {
grid-area: tekstrechts;
font-family: 'Prompt', sans-serif;
height: 100px;
width: 360px;
padding: 30px;
padding-top: 0px;
display: inline-block;
}
<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="stylejustin.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=Prompt:ital,wght#1,100&display=swap" rel="stylesheet">
<title> Document </title>
</head>
<img class="foto_zwolle" src="logo_rechtop_klein.png" alt="tekst">
<body>
<header>
<div class="knopanimatie">
<a class="homestyle" href="home.html"> Home </a>
<a class="concertstyle" href="concerten.html"> Concerten </a>
<a class="sportstyle" href="sport.html"> Sport </a>
<a class="Receptenstyle" href="Recepten.html"> Recepten </a>
<a class="Contactstyle" href="contact.html"> Contact </a>
</div>
</header>
<div class="grid-container">
<div class="zwolle">
<h1> Nieuws uit Zwolle </h1>
</div>
<div class="tekstlinks">
<p> sapien et ligula ullamcorper. In aliquam sem fringilla ut morbius.</p>
</div>
<div class="tekstmidden">
<img src="/mainPags/Zwolle+op+hoogte.jpg" width="250px" style="z-index: 20;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</p>
<div class="tekstrechts">
<p>
In aliquam sem fringilla ut morbius.</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="push"></div>
</div>
<div class="sticky">
<footer class="footer">
<h3> Footer </h3>
<p>Footerinfo</p>
<p> infovanfooter </p>
</footer>
</div>
</body>
</html>
```
Please note that some of this has been written in dutch, so don't pay attention to it. That is just my main language.
I tried messing with the padding, margin and even the gridbox but nothing helped. Please help me.
I'm trying to make the header stick on the top, throughout the page. And It works fine till class="section" but the PROBLEM is after first section the header element become hidden.
I have included some part of the code hope it'll help you understand my problem.
*{
box-sizing: border-box;
}
:root {
--primary-color: #b90415;
--primary-color-hover: #d3071b;
--secondary-color: #103063;
--secondary-color-hover: #143f85;
--light-color: #f4f4f4;
--spotify-green:rgba(30, 215, 96,0.9);
}
html,body{
font-family: 'Nunito',sans-serif;
width: 100%;
margin: 0;
height: 100%;
line-height: 1.9em;
color: var(--light-color);
scroll-behavior: smooth;
}
/*For all Links*/
a{
text-decoration: none;
color: #ffffffaf;
}
/*For all unorder-List*/
ul{
list-style-type: none;
}
/*=====================Top navigation-bar style=====================*/
body div{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
header{
position: sticky;
top: 0;
left: 0;
background-color: #252529;
overflow: hidden;
margin: 0;
box-shadow: 0 0 10px 0 #00000055;
z-index: 3;
}
.icon2{
visibility: hidden;
position: absolute;
right: 0;
}
span, .icon {
vertical-align: middle;
}
.icon:hover{
opacity: 0.3;
}
#top-nav ul{
margin: 0;
}
#top-nav ul li{
float: left;
}
#top-nav ul li a{
display: inline-block;
font-weight: 650;
padding: 7px 13px;
transition: 0.5s;
}
#top-nav ul li a:hover:not(.icon){
background-color: var(--spotify-green);
color: #000;
}
/*=======================section style=======================*/
.section{
background-image: linear-gradient(230deg,rgba(0, 0, 0, 0.6),rgba(0,0,0, 0.8)),url('img1.jpg');/* linear-gradient(230deg,rgba(0, 0, 0, 0.6),rgba(0,0,0, 0.8)),url('testimg.jpg');*/
height: 100%;
text-align: center;
font-size:x-large;
padding: 180px 0;
}
.section p{
margin: 50px auto;
width: 74%;
}
/*================================================================*/
.product-descr{
background-color: #252529;
text-align: center;
font-size: larger;
display: flex;
flex-direction: column;
}
.product-descr p{
margin: 50px auto 15px auto;
width: 74%;
}
.btn{
display: block;
margin: 15px auto 15px auto;
width: fit-content;
padding: 15px 10px;
background-color: rgba(30, 215, 96,0.3);;
border: 1px solid #000;
border-radius: 5px;
font-size: large;
transition: 0.4s;
}
.btn:hover{
background-color: var(--spotify-green);
border: 1px solid black;
font-weight: bold;
color: #000;
}
img{
width: 53%;
margin: 28px auto;
}
/*=============================================================*/
/*section 3 style*/
<!DOCTYPE html>
<html lang="en-IND">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.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=Source+Sans+Pro&family=Inter:wght#300&family=Nunito:wght#300&family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title></title>
</head>
<body>
<header>
<nav id="top-nav">
<ul>
<li><a class="icon" href="index.html"><span class="material-icons">home</span></a></li>
<li class="nav-link">Home</li>
<li class="nav-link">MyTunes</li>
<li class="nav-link">Overview</li>
<li class="nav-link">Music</li>
<li class="nav-link">Video</li>
<li class="nav-link">Gift Cards</li>
</ul>
<ul>
<li class="icon2"><a class="icon" href="#"><span class="material-icons">menu</span></a></li></ul>
</nav>
</header>
<div class="section">
<h1>Let it <span>Rythm</span></h1>
<h3>Your music, movies, and TV shows take center stage.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.</p>
</div>
<div id="b1" class="section2 product-descr">
<span class="icon"></span>
<h2>Music</h2>
<h2>45 Million songs. Zero Ads</h2>
<p>Stream over 45 million songs, ad-free. Or download albums and tracks to listen to offline. All the music in your personal Rythm library — no matter where it came from — lives right alongside the Rythm Music catalog. Start your free three-month trial with no commitment, and cancel anytime.</p>
<div class="btn">Start Free Trial Now</div>
<caption>Rythm Music is available in myTunes, and for iOS and Android devices.</caption>
<img src="mockup1.png" alt="" width="750">
</div>
</body>
</html>
The header should be position:fixed instead of position: sticky
header{
position: fixed;
top: 0;
left: 0;
width: 100%; /*set width 100% for the entire header*/
background-color: #252529;
overflow: hidden;
margin: 0;
box-shadow: 0 0 10px 0 #00000055;
z-index: 3;
}
*{
box-sizing: border-box;
}
:root {
--primary-color: #b90415;
--primary-color-hover: #d3071b;
--secondary-color: #103063;
--secondary-color-hover: #143f85;
--light-color: #f4f4f4;
--spotify-green:rgba(30, 215, 96,0.9);
}
html,body{
font-family: 'Nunito',sans-serif;
width: 100%;
margin: 0;
height: 100%;
line-height: 1.9em;
color: var(--light-color);
scroll-behavior: smooth;
}
/*For all Links*/
a{
text-decoration: none;
color: #ffffffaf;
}
/*For all unorder-List*/
ul{
list-style-type: none;
}
/*=====================Top navigation-bar style=====================*/
body div{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #252529;
overflow: hidden;
margin: 0;
box-shadow: 0 0 10px 0 #00000055;
z-index: 3;
}
.icon2{
visibility: hidden;
position: absolute;
right: 0;
}
span, .icon {
vertical-align: middle;
}
.icon:hover{
opacity: 0.3;
}
#top-nav ul{
margin: 0;
}
#top-nav ul li{
float: left;
}
#top-nav ul li a{
display: inline-block;
font-weight: 650;
padding: 7px 13px;
transition: 0.5s;
}
#top-nav ul li a:hover:not(.icon){
background-color: var(--spotify-green);
color: #000;
}
/*=======================section style=======================*/
.section{
background-image: linear-gradient(230deg,rgba(0, 0, 0, 0.6),rgba(0,0,0, 0.8)),url('img1.jpg');/* linear-gradient(230deg,rgba(0, 0, 0, 0.6),rgba(0,0,0, 0.8)),url('testimg.jpg');*/
height: 100%;
text-align: center;
font-size:x-large;
padding: 180px 0;
}
.section p{
margin: 50px auto;
width: 74%;
}
/*================================================================*/
.product-descr{
background-color: #252529;
text-align: center;
font-size: larger;
display: flex;
flex-direction: column;
}
.product-descr p{
margin: 50px auto 15px auto;
width: 74%;
}
.btn{
display: block;
margin: 15px auto 15px auto;
width: fit-content;
padding: 15px 10px;
background-color: rgba(30, 215, 96,0.3);;
border: 1px solid #000;
border-radius: 5px;
font-size: large;
transition: 0.4s;
}
.btn:hover{
background-color: var(--spotify-green);
border: 1px solid black;
font-weight: bold;
color: #000;
}
img{
width: 53%;
margin: 28px auto;
}
/*=============================================================*/
/*section 3 style*/
<!DOCTYPE html>
<html lang="en-IND">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.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=Source+Sans+Pro&family=Inter:wght#300&family=Nunito:wght#300&family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title></title>
</head>
<body>
<header>
<nav id="top-nav">
<ul>
<li><a class="icon" href="index.html"><span class="material-icons">home</span></a></li>
<li class="nav-link">Home</li>
<li class="nav-link">MyTunes</li>
<li class="nav-link">Overview</li>
<li class="nav-link">Music</li>
<li class="nav-link">Video</li>
<li class="nav-link">Gift Cards</li>
</ul>
<ul>
<li class="icon2"><a class="icon" href="#"><span class="material-icons">menu</span></a></li></ul>
</nav>
</header>
<div class="section">
<h1>Let it <span>Rythm</span></h1>
<h3>Your music, movies, and TV shows take center stage.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.</p>
</div>
<div id="b1" class="section2 product-descr">
<span class="icon"></span>
<h2>Music</h2>
<h2>45 Million songs. Zero Ads</h2>
<p>Stream over 45 million songs, ad-free. Or download albums and tracks to listen to offline. All the music in your personal Rythm library — no matter where it came from — lives right alongside the Rythm Music catalog. Start your free three-month trial with no commitment, and cancel anytime.</p>
<div class="btn">Start Free Trial Now</div>
<caption>Rythm Music is available in myTunes, and for iOS and Android devices.</caption>
<img src="mockup1.png" alt="" width="750">
</div>
</body>
</html>
I am currently trying to make a sidebar, which has an 'X' button at the top right corner. I tried to use float: right in order to place it on the right but it doesn't work.
The anchor that I used for the cross is within a div, but I don't know why it doesn't seem to work. I don't think the css with .side-nav .btn-close contains the problem.
I think there's something wrong with the side-nav class.
*{
box-sizing: border;
}
html {
background-color: #dfdfdf;
}
body {
padding: 0;
margin: 0;
}
.navbar {
display:flex;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.logo {
font-size: 1.5rem;
margin: .5rem;
color:white;
}
.navbar-links ul{
display:flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-links li a{
text-decoration: none;
color:white;
display: block;
padding: 1rem;
}
.toggle-button {
position: absolute;
top: .75rem;
left: 1rem;
width: 30px;
height: 21px;
display:flex;
flex-direction: column;
justify-content: space-between;
display: none;
}
.toggle-button .bar {
background-color:white;
width: 100%;
height: 3px;
}
.side-nav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #9ed39f;
overflow: hidden;
transition: 0.5s;
display: flex;
}
.side-nav .btn-close {
font-size: 36px;
border-bottom: none;
text-decoration: none;
color: #fff;
float:right;
margin-right:25px;
}
<!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="style.css" />
<title>Responsive Sidebar</title>
</head>
<body>
<nav class="navbar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="logo">Brand Name</div>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Abvout</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="side-nav">
×
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<main>
epturi, quod illo. Voluptatum
alias possimus ipsum omnis. Aspernatur animi debitis natus sed
exercitationem repudiandae excepturi, ipsum hi
</main>
</body>
</html>
I have modified your code a little. It should work now.
I have added wrapper div to your button and the ul in sidebar. Since you are using position:fixed on .side-nav, you have to use position: absolute on the X Button.
* {
box-sizing: border;
}
html {
background-color: #dfdfdf;
}
body {
padding: 0;
margin: 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.logo {
font-size: 1.5rem;
margin: .5rem;
color: white;
}
.navbar-links ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-links li a {
text-decoration: none;
color: white;
display: block;
padding: 1rem;
}
.toggle-button {
position: absolute;
top: .75rem;
left: 1rem;
width: 30px;
height: 21px;
display: flex;
flex-direction: column;
justify-content: space-between;
display: none;
}
.toggle-button .bar {
background-color: white;
width: 100%;
height: 3px;
}
.side-nav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #9ed39f;
overflow: hidden;
transition: 0.5s;
display: flex;
}
.side-nav .btn-close {
font-size: 36px;
border-bottom: none;
text-decoration: none;
color: #fff;
float: right;
margin-right: 25px;
}
/* Added These 2 Wrapper class */
.btn-close-wrapper {
position: absolute;
display: block;
width: 100%;
text-align: right;
}
.ul-wrapper {
padding-top: 50px;
}
<!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="style.css" />
<title>Responsive Sidebar</title>
</head>
<body>
<nav class="navbar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="logo">Brand Name</div>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Abvout</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="side-nav">
<!-- Used wrapper div for close button and ul -->
<div class="btn-close-wrapper">
×
</div>
<div class="ul-wrapper">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
<main>
epturi, quod illo. Voluptatum
alias possimus ipsum omnis. Aspernatur animi debitis natus sed
exercitationem repudiandae excepturi, ipsum hi
</main>
</body>
</html>
It is simply because float doesn't work on flex items. Your .side-nav has the display of flex. If you change it to block, it will work.
But my suggestion is not to use float at all. Because float is mainly for old newspaper-like text-image combination and using it to "structure the elements" was just a hack because of the lack of the flex-box.
So either stick with one of them (float or flex-box) Or better: make the close icon an absolutely positioned element to get it out of the flow:
*{
box-sizing: border-box;
}
html {
background-color: #dfdfdf;
}
body {
padding: 0;
margin: 0;
}
.navbar {
display:flex;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.logo {
font-size: 1.5rem;
margin: .5rem;
color:white;
}
.navbar-links ul{
display:flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-links li a{
text-decoration: none;
color:white;
display: block;
padding: 1rem;
}
.toggle-button {
position: absolute;
top: .75rem;
left: 1rem;
width: 30px;
height: 21px;
display:flex;
flex-direction: column;
justify-content: space-between;
display: none;
}
.toggle-button .bar {
background-color:white;
width: 100%;
height: 3px;
}
.side-nav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #9ed39f;
overflow: hidden;
transition: 0.5s;
display: flex;
}
.side-nav .btn-close {
font-size: 36px;
border-bottom: none;
text-decoration: none;
color: #fff;
margin-right:25px;
position: absolute;
right: 0;
}
<!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="style.css" />
<title>Responsive Sidebar</title>
</head>
<body>
<nav class="navbar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="logo">Brand Name</div>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Abvout</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="side-nav">
×
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<main>
epturi, quod illo. Voluptatum
alias possimus ipsum omnis. Aspernatur animi debitis natus sed
exercitationem repudiandae excepturi, ipsum hi
</main>
</body>
</html>
ALSO: Notice that box-sizing: border-box; is correct, not box-sizing: border;
I am trying to put a logo image in the top left were SYLK is. It keeps going to the center of the page. I need the image to go where sylk is on the page. I tried just adding the img into it but it goes right to the center. Any help is much appreciated. The logo is going to act as a home button.
HTML
<!doctype html>
<html>
<head>
<title>SYLC</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
sylk
<ul>
<li>Home</li>
<li>Merch</li>
<li>Work</li>
<li>Contact</li>
</ul>
</header>
<section>
<img src="img/stars.png" id="stars">
<img src="img/moon.png" id="moon">
<img src="img/mountains_behind.png" id="mountains_behind">
<h2 id="text">Sweti Yeti</h2>
Mint Now
<img src="img/mountains_front.png" id="mountains_front">
<div class="content">
</section>
<div class="sec" id="sec">
<h2>A Collection of 9,999 Yetis</h2>
<p>A Colorful, Engaging and Inovating Community. The Sweti Yeti's, a community focused club.
</p>
<h2>Yeti Trip</h2>
<div class="container">
<div class="timeline">
<ul>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 3</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Heading 4</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
</ul>
</div>
</div>
<div class="accordion">
<div class="image-box">
<img src="imG/yeti.png" alt="Accordion Image">
</div>
<div class="accordion-text">
<div class="title">FAQ</div>
<ul class="faq-text">
<li>
<div class="question-arrow">
<span class="question">What is the total supply?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>A total of 9999 unique Sweti Yeti's will be created.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">How Whitelist?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Participate in our Discord Community is a supportive and consistent way.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">Wen mint/presale?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Pre-pre Jan 22nd, Pre Feb 12, Full Feb 14</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">What is SWETI?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Share With Everyone To Inspire. Our goal is to make it easier for guys like us, who have big visions but little support in execution. Also relates to kid charity shtuff.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">IMX or whatever chain stuff</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>bleh</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question"> How to bother you?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Insert contact info</p>
<span class="line"></span>
</li>
</ul>
</div>
</div>
</div class="sec">
<script type="text/javascript">
let moon = document.getElementById('moon');
let stars = document.getElementById('stars');
let mountains_behind = document.getElementById('mountains_behind');
let mountains_front = document.getElementById('mountains_front');
let text = document.getElementById('text');
let btn = document.getElementById('btn');
let header = document.querySelector('header');
window.addEventListener('scroll', function() {
var value = window.scrollY;
moon.style.top = -value * -1.05 + 'px';
stars.style.left = value * 0.25 + 'px';
mountains_behind.style.top =-value * -0.5 + 'px';
header.style.top =-value * -0.5 + 'px';
mountains_front.style.top =-value * 0 + 'px';
text.style.marginTop = value * 1.5 + 'px';
btn.style.marginTop = value * 1.5 + 'px';
text.style.marginRight = value * 4 + 'px';
});
</script>
<script>
let li = document.querySelectorAll(".faq-text li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", (e)=>{
let clickedLi;
if(e.target.classList.contains("question-arrow")){
clickedLi = e.target.parentElement;
}else{
clickedLi = e.target.parentElement.parentElement;
}
clickedLi.classList.toggle("showAnswer");
});
}
</script>
CSS
#import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
body {
background: linear-gradient(#2b1055, #7597de);
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a.active,
header ul li a:hover {
background: #fff;
color: #2b1055;
}
section:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #1c0522, transparent);
z-index: 1000;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon {
mix-blend-mode: screen;
}
section img#mountains_front {
z-index: 10;
}
h2#text {
position: absolute;
color: #fff;
right: -350px;
white-space: nowrap;
font-size: 7.5vw;
transform: translateY(0px);
}
#btn {
text-decoration: none;
padding: 8px 30px;
border-radius: 40px;
background: #fff;
color: #2b1055;
transform: translateY(100px);
font-size: 1.5em;
z-index: 9;
}
.sec {
position: relative;
min-height: 500px;
padding: 100px;
background: #1c0522;
}
.sec h2 {
font-size: 3.5em;
margin-bottom: 10px;
color: #fff;
text-align: center;
}
.sec p {
font-size: 1.2em;
color: #fff;
}
::selection {
background: #7d2ae8;
color: #fff;
}
.accordion {
display: flex;
max-width: 1010px;
width: 100%;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 25px;
padding: 45px 90px 45px 60px;
margin: 0 auto;
}
.accordion .image-box {
height: 360px;
width: 300px;
}
.accordion .image-box img {
height: 100%;
width: 100%;
object-fit: contain;
}
.accordion .accordion-text {
width: 60%;
}
.accordion .accordion-text .title {
font-size: 35px;
font-weight: 600;
color: #7d2ae8;
font-family: "Fira Sans", sans-serif;
}
.accordion .accordion-text .faq-text {
margin-top: 25px;
height: 263px;
overflow-y: auto;
}
.faq-text::-webkit-scrollbar {
display: none;
}
.accordion .accordion-text li {
list-style: none;
cursor: pointer;
}
.accordion-text li .question-arrow {
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-text li .question-arrow .question {
font-size: 18px;
font-weight: 500;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li .question-arrow .arrow {
font-size: 20px;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li.showAnswer .question-arrow .arrow {
transform: rotate(-180deg);
}
.accordion-text li:hover .question-arrow .question,
.accordion-text li:hover .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li.showAnswer .question-arrow .question,
.accordion-text li.showAnswer .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li .line {
display: block;
height: 2px;
width: 100%;
margin: 10px 0;
background: rgba(0, 0, 0, 0.1);
}
.accordion-text li p {
width: 92%;
font-size: 15px;
font-weight: 500;
color: #595959;
display: none;
}
.accordion-text li.showAnswer p {
display: block;
}
#media (max-width: 994px) {
body {
padding: 40px 20px;
}
.accordion {
max-width: 100%;
padding: 45px 60px 45px 60px;
}
.accordion .image-box {
height: 360px;
width: 220px;
}
.accordion .accordion-text {
width: 63%;
}
}
#media (max-width: 820px) {
.accordion {
flex-direction: column;
}
.accordion .image-box {
height: 360px;
width: 300px;
background: #ffffff;
width: 100%;
border-radius: 25px;
padding: 30px;
}
.accordion .accordion-text {
width: 100%;
margin-top: 30px;
}
}
#media (max-width: 538px) {
.accordion {
padding: 25px;
}
.accordion-text li p {
width: 98%;
}
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Montserrat";
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 100px 0;
background-color: #1c0522;
}
.timeline {
width: 80%;
height: auto;
max-width: 800px;
margin: 0 auto;
position: relative;
}
.timeline ul {
list-style: none;
}
.timeline ul li {
padding: 20px;
background-color: #655ee1;
color: white;
border-radius: 10px;
margin-bottom: 20px;
}
.timeline ul li:last-child {
margin-bottom: 0;
}
.timeline-content h1 {
font-weight: 500;
font-size: 25px;
line-height: 30px;
margin-bottom: 10px;
}
.timeline-content p {
font-size: 16px;
line-height: 30px;
font-weight: 300;
}
.timeline-content .date {
font-size: 12px;
font-weight: 300;
margin-bottom: 10px;
letter-spacing: 2px;
}
#media only screen and (min-width: 768px) {
.timeline:before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background-color: gray;
}
.timeline ul li {
width: 50%;
position: relative;
margin-bottom: 50px;
}
.timeline ul li:nth-child(odd) {
float: left;
clear: right;
transform: translateX(-30px);
border-radius: 20px 0px 20px 20px;
}
.timeline ul li:nth-child(even) {
float: right;
clear: left;
transform: translateX(30px);
border-radius: 0px 20px 20px 20px;
}
.timeline ul li::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: gray;
top: 0px;
}
.timeline ul li:nth-child(odd)::before {
transform: translate(50%, -50%);
right: -30px;
}
.timeline ul li:nth-child(even)::before {
transform: translate(-50%, -50%);
left: -30px;
}
.timeline-content .date {
position: absolute;
top: -30px;
}
.timeline ul li:hover::before {
background-color: aqua;
}
}
Thanks in advance for any and all help.
Try adding to the header .logoclass
float:left;
margin-top:0;
I copied your code and added a small image I had that is only about 75x39 pixels respectively and it shows even with your menu and about 2" in on my monitor. It's not dead left on my laptop monitor but it should be in the ball park. I add a a bigger image 246x205 and it looks okay.
One thing I noticed when I copied your html and css down, I can't see your entire page. You man need some other modifications. The Mint Now is centered.
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
float:left;
margin-top:0;
position:fixed;
}
Note: I also added a position-fixed at the bottom. This will scroll your logo with the page. If you don't want to do that with your page, just remove the position tag.
If your logo still goes to the center, you may have something else conflicting with the positioning. I just used these two files you posted here.
<header>
<img src="sam.jpg">
I'm currently creating media queries for my current project, the problem I'm currently facing is that something is causing my navbar to not be responsive below width of 600px. What happens is show in the attached image.
I've actually solved this problem once before in a previous project but can't remember how I solved this problem even after comparing the code.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
<nav class="nav-bar">
<span class="open-slide">
<i class="fas fa-bars fa-2x"></i>
</span>
<ul class="nav-items">
<li>About</li>
<li>Events</li>
<li>Order</li>
<li>Locations</li>
</ul>
</nav>
</header>
<main>
<section id="about">
<div class="about-text">
<h1>Comics.Cards.Fun</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, neque ipsa nisi voluptatum distinctio asperiores dolorem obcaecati reiciendis sunt eaque veritatis omnis, rerum qui aperiam totam magnam sit facilis quod.</p>
</div>
</section>
<section id="events">
<h1>Events</h1>
<div class="cards-container">
<% Event.all.each do |event|%>
<div class="event-card">
<div class="overlay"></div>
<div class="event-date">
<span class="date"><%= event.date %></span>
</div>
<div class="event-image">
<%= image_tag event.image_url.to_s %>
</div>
<div class="event-data">
<div class="event-title">
<h3><%= event.title %></h3>
</div>
<p class="event-details"><%= event.description %></p>
</div>
</div>
<% end %>
</div>
</section>
<section id="order">
<h1>Order</h1>
<p>Looking for your monthly fix of comics? Just order from us!</p>
<div class="order-steps">
<div class="fill-form">
<i class="far fa-list-alt fa-10x"></i>
<p>
List down all the comics you wish to order.
</p>
</div>
<div class="email-us">
<i class="far fa-envelope fa-10x"></i>
<p>
Email it to us at the
<br>
lastcomicshop#gmail.com
<br>
Deadline is the 20<sup>th</sup> of every month
</p>
</div>
<div class="delivery">
<i class="fas fa-truck fa-10x"></i>
<p>
If you wish to have your comics delivered, just give us your address!
</p>
</div>
</div>
</section>
<section id="locations">
<h1>Locations</h1>
<div class="location-div">
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3983.8821426536624!2d101.61402541462657!3d3.1258517541674418!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc49cb25b5c01b%3A0xfcdf88c63a471fd6!2sThe+Last+Comic+Shop!5e0!3m2!1sen!2smy!4v1554862822510!5m2!1sen!2smy" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="address">
<p>
75A, Jalan SS22/23,
<br>
Damansara Utama,
<br>
47400 Petaling Jaya, Selangor
</p>
</div>
</div>
</section>
</main>
<footer>
<div id="contact-us">
<p>Connect with us:</p>
<div class="contact-outlets">
<i class="fab fa-facebook-square fa-3x"></i>
<i class="far fa-envelope fa-3x"></i>
</div>
</div>
</footer>
</body>
</html>
SCSS
// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
* {
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
}
// Navbar
.nav-bar {
width: 100%;
height: 8%;
display: flex;
position: fixed;
z-index: 1;
overflow: hidden;
justify-content: center;
align-items: center;
background-color: rgba(33, 33, 33, 0.9);
color: white;
}
.nav-bar > ul {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.nav-bar > ul > li {
list-style: none;
color: white;
padding: 0 2rem;
}
.nav-bar > ul > li > a {
text-decoration: none;
color: inherit;
font-family: 'Bree Serif', serif;
font-size: 21px;
}
// Sections
section {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
position: relative;
text-align: center;
color: white;
h1 {
font-family: 'Bree Serif', serif;
font-size: 53px;
}
p {
font-family: 'Open Sans', sans-serif;
font-size: 26px;
}
}
#about {
background-color: rgba(243, 63, 63, 0.8);
.about-text {
position: absolute;
top: 45%;
}
}
#events {
background-color: rgba(63, 63, 243, 0.8);
.cards-container {
position: absolute;
top: 25%;
width: 100%;
height: 100%;
display: flex;
}
}
#order {
background-color: rgb(25, 134, 25);
.order-steps {
position: absolute;
top: 35%;
display: flex;
flex-direction: row;
justify-content: space-around;
.fill-form,
.email-us,
.delivery {
width: 20%;
i {
padding-bottom: 1rem;
}
}
}
}
#locations {
background-color: rgb(245, 233, 63);
.location-div {
width: 100%;
position: absolute;
top: 25%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
}
#contact-us {
width: 100%;
background-color: rgba(0, 0, 0, 0.85);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.5rem 0;
p {
font-size: 1.2rem;
}
.contact-outlets {
width: 125px;
display: flex;
justify-content: space-between;
}
}
// Event cards
.event-card {
width: 30%;
height: 58%;
position: relative;
// background: url(https://idigitalcitizen.files.wordpress.com/2009/08/6x4-autobobots-logo.jpg) 50% / cover no-repeat;
margin: 0 1.3rem;
overflow: hidden;
border-radius: 8px;
box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.3);
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
visibility: hidden;
}
.event-date {
position: absolute;
top: 0;
left: 0;
padding: 0.8rem;
background-color: #77d7b9;
display: flex;
flex-direction: column;
.date {
font-size: 24px;
text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);
}
.month {
text-transform: uppercase;
}
.month,
.year {
font-size: 12px;
}
.event-image {
width: inherit;
height: inherit;
}
}
.event-data {
width: 100%;
height: inherit;
position: absolute;
bottom: 0;
z-index: 2;
padding: 0.8rem 0.5rem;
background-color: white;
color: black;
// Takes the height of the h3 tag with the class event-title and adds 3.5rem to hide the event details.
transform: translateY(calc(145px + 0.5rem));
transition: transform 0.5s;
.event-title {
font-family: 'Bree Serif', serif;
width: 100%;
height: 60px;
margin-bottom: 2rem;
}
.event-details {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
bottom: 0;
}
}
// When user hovers their mouse over the card, the event details pop up.
&:hover {
.overlay {
visibility: visible;
opacity: 0.5;
transition: opacity 0.5s, visibility 0.5s, ease;
}
.event-data {
transform: translateY(0);
transition: transform 0.5s;
}
}
}
// Responsive design
// Extra Small & Small devices
#media screen and (max-width: 600px) {
// navbar
.nav-bar {
ul {
display: none;
}
}
}
The problem is that you set your navbar to 100% width (which is fine), but since your iframe's width is 600px it allows your navbar to stretch all the way to reach this "100%" width. Change your iframe width to the page's width so your navbar and your page won't go off-boundary. Like this:
<iframe src="..." width="100%" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe>
Once that's done, I'd recommend reducing the nav items' font-size to have them all fit on your nav bar.