I have a one page design that is essentially
Header
Content
Footer
This page uses parallax and everything works the way I want it to but I see a small sliver of the footer in between the header and content. I am not sure why this is the case. I am not that efficient with code and just trying to learn and experiment. Here is my code.
HTML
<body>
<header class="alaska-box">
<div class="logo"></div>
<div class="hiker"></div>
</header>
<div class="content">
<article>
<h1>Summer Collection</h1>
<hr>
<p>This is our summer collection, for the real inner survivor in you. This summer collection has a stealth theme for you.
This is a great series of apparel and accesories to help you travel <strong>INTO THE WILD</strong>. </p>
<hr>
<div class="summer-collection">
<ul class="product-grid">
<li><img src="assets/collection/jacket.jpg" alt="Summer Collection Jacket" /><p class="caption">
Into the Wild Jacket <strong>$120</strong>
</p></li><!--
--><li><img src="assets/collection/shorts.jpg" alt="Summer Collection Shorts" /><p class="caption">
Into the Wild Jacket <strong>$120</strong>
</p></li><!--
--><li><img src="assets/collection/hat.jpg" alt="Summer Collection Hat" /><p class="caption">
Into the Wild Hat <strong>$60</strong>
</p></li>
<li><img src="assets/collection/backpack.jpg" alt="Summer Collection Backpack" /><p class="caption">
Into the Wild Backpack <strong>$235</strong>
</p></li><!--
--><li><img src="assets/collection/boot.jpg" alt="Summer Collection Boot" /><p class="caption">
Into the Wild Boot <strong>$100</strong>
</p></li><!--
--><li><img src="assets/collection/gloves.jpg" alt="Summer Collection Gloves" /><p class="caption">
Into the Wild Gloves <strong>$45</strong>
</p></li>
<li><img src="assets/collection/hammock.jpg" alt="Summer Collection Hammock" /><p class="caption">
Into the Wild Hammock <strong>$175</strong>
</p></li><!--
--><li><img src="assets/collection/tent.jpg" alt="Summer Collection Tent" /><p class="caption">
Into the Wild Tent <strong>$290</strong>
</p></li><!--
--><li><img src="assets/collection/knife.jpg" alt="Summer Collection Knife" /><p class="caption">
Into the Wild Knife <strong>$75</strong>
</p></li>
</ul>
</div>
<h1>Summer Collection</h1>
<hr>
<p>This is our summer collection, for the real inner survivor in you. This summer collection has a stealth theme for you.
This is a great series of apparel and accesories to help you travel <strong>INTO THE WILD</strong>. </p>
<hr>
<div class="large-window">
<div class="window-tint">
<div class="summer-promo"> Summer Collection <strong>$1,000</strong>Buy Now</div>
</div>
</div>
<h1>Our History</h1>
<hr>
<p>This is our summer collection, for the real inner survivor in you. This summer collection has a stealth theme for you.
This is a great series of apparel and accesories to help you travel <strong>INTO THE WILD</strong>. </p>
</article>
</div>
</div>
<footer>
<div class="footer-stuff">
<div class="columns three b">
<strong>FIND US ON!</strong>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
<div class="columns three">
<strong>CHRIS MCCANDLESS</strong>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
</p>
</div>
<div class="columns six">
<p>
<strong>GET DISCOUNTS</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<form class="row">
<div class="columns eight">
<input type="email" placeholder="Your Email" class="u-full-width">
</div>
<div class="four columns">
<input type="submit" class="button-primary">
</div>
</form>
</div>
</div>
</footer>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/functions.js"></script>
</body>
CSS
/* Base */
body {
font-family: "Open Sans", sans-serif;
}
h1 {
color: #e5cb22;
padding-top: 30px;
font-weight: 500;
}
article {
max-width: 600px;
overflow: hidden;
text-align: center;
margin: auto;
}
.content {
position: relative;
background-color: white;
margin-bottom: 400px;
overflow: hidden;
z-index: 2
}
/* Parralax Stuff */
.alaska-box {
position: relative;
height: 600px;
background-image: url(assets/header.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
overflow: hidden;
margin: auto;
top: -8px;
left: -8px
right: -8px;
z-index: 3;
}
.logo {
height: 200px;
width: 100%;
background-image: url(assets/logo-1.png);
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 2;
top: 50%;
margin-top: -50px;
}
.hiker {
width: 416px;
height: 600px;
background-image: url(assets/hiker.png);
background-repeat: no-repeat;
background-position: right, bottom;
position: absolute;
right: 50%;
top: 100px;
margin-right: 100px;
}
/*Product Grid*/
.summer-collection {
margin-bottom: 50px;
text-align: center;
flex-wrap: wrap;
justify-content: space-between;
top: auto;
}
.caption {
font-size: 12px;
position: absolute;
bottom: 0px;
left: -100%;
background-color: black;
color: white;
padding: 2px 8px;
transition: all 0.3s ease-in-out;
}
.summer-collection li:hover p {
left: 0%; }
.summer-collection li.is-showing {
opacity: 1;
transform: translateX(0px);
}
.summer-collection li img {
display: block;
transform: scale(1);
transition: all 0.3s ease-in-out;
}
.summer-collection li:hover img {
transform: scale(1.1);
}
.is-showing {
opacity: 1;
transform: translateX(0px);
}
.summer-collection li{
margin-bottom: 20px;
position: relative;
opacity: 0;
transform: translateX(30px);
transition: all 0.4s ease-in-out;
overflow: hidden;
cursor: pointer;
}
.product-grid {
padding: 0;
}
ul.product.grid {
display: inline-table;
list-style: none;
font-size: 0px;
padding: 0;
margin-bottom: 0px;
margin-left: -2.5%;
}
ul.product-grid li {
display: inline-block;
width: 30.83%;
margin: 1%;
background: #fff;
font-size: 16px;
font-size: 1rem;
vertical-align: top;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul.product-grid li img {
max-width: 100%;
height: auto;
margin: 0 0 10px;
}
/*Media Queries for Grid*/
#media (max-width: 480px) {
ul.grid-nav li {
display: block;
margin: 0 0 5px;
}
ul.grid-nav li a {
display: block;
}
ul.product-grid {
margin-left: 0;
}
ul.product-grid li {
width: 100% !important;
margin: 0 0 20px;
}
}
/*Periscope*/
.large-window {
height: 640px;
background-image: url(assets/collection/large-window-img.jpg);
background-position: top;
background-position: center;
background-attachment: fixed;
margin-top: 100px;
border-radius: 50%;
position: relative;
}
.window-tint {
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.summer-promo {
color: #e5cb22;
font-weight: 300;
font-size: 50px;
line-height: 1.2;
}
.window-cta {
font-size: 20px;
text-decoration: none;
color: #e5cb22;
border: 2px solid #e5cb22;
padding: 5px 10px;
line-height: 3;
border-radius: 5px;
transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.window-cta:hover{
background-color: #e5cb22;
color: white;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.summer-promo strong {
display: block;
font-size: 40px;
}
/* Footer */
footer {
background: black;
color: white;
padding: 20px 0;
position: fixed;
bottom: 0;
width: 100%;
z-index: 1; }
footer .footer-stuff {
max-width: 640px;
margin: 0 auto; }
footer a {
color: white; }
footer input {
color: #666; }
Related
I’m currently working on a project from Frontend mentor, while developing the mobile version an issue arose where the main section is overflowing onto the footer section.
:root {
--DarkViolet: hsl(256, 26%, 20%);
--Grayish-Blue: hsl(216, 30%, 68%);
--VeryLight-Gray: hsl(0, 0%, 98%);
--Dark-Grayish-Violet: hsl(273, 4%, 51%);
--Very-Dark-Violet: hsl(270, 9%, 17%);
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.hide {
display: none;
}
.content-container {
width: 100%;
padding: 10px 0;
margin: auto;
}
main {
border: 10px dashed red;
display: flex;
flex-direction: column;
}
.flex {
display: flex;
}
.purple {
background-color: var(--DarkViolet);
color: #fff;
}
button {
background-color: var(--DarkViolet);
color: #fff;
border: 2px solid;
padding: 5px 20px;
font-size: .8em;
width: 200px;
}
#media only screen and (min-width: 214px) {
* {
overflow-x: hidden;
}
.content-container {
width: 90%;
}
header {
position: fixed;
background-color: white;
width: 100%;
z-index: 15;
}
header .flex {
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
}
header>* {
padding: 20px;
justify-content: space-between;
}
.menu {
position: fixed;
top: 0;
right: 0;
margin-top: 60px;
background-color: var(--Very-Dark-Violet);
padding: 50px 0;
text-align: center;
height: 100%;
width: 100%;
transform: translateY(-800px);
opacity: 0;
transition: all 0.5s ease-in-out;
}
.menu img {
width: inherit;
position: absolute;
right: 0;
bottom: 0;
}
.menu.open {
overflow: hidden;
opacity: 1;
font-size: 1.3em;
transform: translateY(0px);
transition: all 0.5s ease-in-out;
background-image: url(images/bg-pattern-mobile-nav.svg);
background-position: bottom;
background-repeat: no-repeat;
}
.menu .navLinks {
border: 1px solid gray;
display: block;
list-style: none;
background-color: inherit;
color: #000;
}
.menu .navLinks li {
color: white;
margin: auto;
margin-bottom: 40px;
margin-left: 0;
width: 100%;
}
.menu .navLinks li a {
color: white;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.menu .navLinks button {
width: 80%;
font-size: 1.2em;
text-transform: uppercase;
}
main {
transform: translateY(70px);
}
.mobile-intro-img {
width: 100%;
object-fit: fill;
margin-bottom: 0;
}
.purple-big-banner {
border: 3px solid red;
margin: 0;
background-color: var( --Very-Dark-Violet);
color: white;
position: relative;
overflow: hidden;
background-image: url(images/bg-pattern-intro-left-mobile.svg);
background-repeat: no-repeat;
}
.purple-big-banner .mobile-intro-img-left {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.purple-big-banner .mobile-intro-img-right {
position: absolute;
bottom: -50%;
z-index: 100;
right: 0;
}
.purple-big-banner .content-container {
border: 3px dashed white;
}
.purple-big-banner .content {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
gap: 2em;
margin: auto;
padding-top: 60px;
padding-bottom: 60px;
border: 1px solid red;
}
.purple-big-banner button {
margin: auto;
width: 60%;
}
.content-container>.mobile-intro-img-right-continued {
position: absolute;
top: 35%;
right: 0;
}
h1 {
overflow: hidden;
text-align: center;
font-size: 2em;
line-height: .85;
font-family: 'DM Serif Display', serif;
}
.purple-big-banner p {
line-height: 1.4em;
margin: 10px 0;
font-size: 1.1em;
}
hr {
width: 100px;
margin: auto;
margin-top: 40px;
margin-bottom: 20px;
}
.flex {
flex-direction: column;
margin-top: 40px;
align-items: center;
justify-content: center;
}
.box {
margin-bottom: 40px;
border: 1px solid rgb(31, 31, 31);
}
.box img {
padding: auto;
border: 1px solid red;
}
.box>* {
margin-bottom: 20px;
text-align: center;
}
.box p {
color: var(--Grayish-Blue);
}
.small-banner {
border: 5px solid red;
text-align: center;
background-image: url(images/bg-pattern-how-we-work-mobile.svg);
background-color: var( --Very-Dark-Violet);
color: white;
}
.small-banner .content {
display: flex;
flex-direction: column;
gap: 20px;
padding: 40px 0;
}
.small-banner button {
margin: auto;
width: 65%;
}
footer {
background-color: var(--VeryLight-Gray);
background-image: url(images/bg-pattern-footer-mobile.svg);
background-repeat: no-repeat;
border: 3px solid blue;
}
}
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet">
<header>
<div class="content-container flex">
<img src="images/logo.svg" alt="" srcset="">
<nav class="menu">
<ul class="navLinks">
<li><a class="menuItem" href="#">How we work</a></li>
<li><a class="menuItem" href="#">Blog</a></li>
<li><a class="menuItem" href="#">Account</a></li>
<li><button class="menuItem">View plans</button></li>
</ul>
</nav>
<div class="hamburger ">
<img class="menuIcon" src="images/icon-hamburger.svg " alt="">
<img class="closeIcon hide" src="images/icon-close.svg" alt="">
</div>
</div>
</header>
<main class="flex-main">
<img src="images/image-intro-mobile.jpg" alt="" class="mobile-intro-img-left">
<div class="purple-big-banner">
<div class="content-container">
<div class="content">
<hr class="hide">
<div>
<h1> Humanizing your insurance.</h1>
</div>
<div>
<p>
Get your life insurance coverage easier and faster. We blend our expertise blank and technology to help you find the plan that’s right for you. Ensure you and your loved ones are protected.
</p>
</div>
<div>
<button class="upper">View plans</button>
</div>
</div>
</div>
<img src="images/bg-pattern-intro-right-desktop.svg" class="pattern-right hide" alt="" srcset="">
<img src="images/bg-pattern-intro-left-desktop.svg" class="pattern-left hide" alt="" srcset="">
</div>
<div class="content-container">
<img src="images/bg-pattern-intro-right-mobile.svg" alt="" class="mobile-intro-img-right-continued">
<div class="content">
<hr>
<h1>We’re different</h1>
<div class="flex">
<div class="box">
<div>
<img src="images/icon-snappy-process.svg" alt="">
</div>
<h2>Snappy Process</h2>
<p> Our application process can be completed in minutes, not hours. Don’t get stuck filling in tedious forms.</p>
</div>
<div class="box">
<div>
<img src="images/icon-affordable-prices.svg" alt="">
</div>
<h2> Affordable Prices</h2>
<p> We don’t want you worrying about high monthly costs. Our prices may be low, but we still offer the best coverage possible.</p>
</div>
<div class="box">
<div>
<img src="images/icon-people-first.svg" alt="">
</div>
<h2>People First</h2>
<p> Our plans aren’t full of conditions and clauses to prevent payouts. We make sure you’re covered when you need it.</p>
</div>
</div>
</div>
</div>
<div class="content-container small-banner">
<div class="content">
<div>
<h2>Find out more <br> about how we work</h2>
</div>
<button class="upper">How we work</button>
</div>
</div>
</main>
<footer>
<div class="footer-top">
<div class="content-container flex">
<div class="logo">
<img src="images/logo.svg" alt="" srcset="">
</div>
<div class="flex social">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-pinterest"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
</div>
</div>
<hr class="content-container">
</div>
<div class="footer-bottom content-container flex">
<div>
<p class="title upper">Our company</p>
<ul>
<li>How we work</li>
<li>Why Insure?</li>
<li>View plans</li>
<li>Reviews</li>
</ul>
</div>
<div>
<p class="title upper">Help me</p>
<ul>
<li>FAQ</li>
<li>Terms of use</li>
<li>Privacy policy</li>
<li>Cookies</li>
</ul>
</div>
<div>
<p class="title upper">Contact</p>
<ul>
<li>Sales</li>
<li>Support</li>
<li>Live chat</li>
</ul>
</div>
<div>
<p class="title upper">Others</p>
<ul>
<li>Careers</li>
<li>Press</li>
<li>Licenses</li>
</ul>
</div>
<div></div>
</div>
<div class="attribution">
Challenge by Frontend Mentor. Coded by Your Name Here.
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
It seems like this is probably your issue:
main {
transform: translateY(70px);
}
below is the code for both html and css. Please I really need help with this issue and I want a solution why the scrolling effect is not working after i tried using html{
scroll-behavior: smooth;
}.....I have tried also to use some java script short codes but it is still not working. I have designed it to scroll to a specific part of the page after clicking on the menu headings
<html lang="en">
<head>
<title> Anetin Super Structures</title>
<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="shortcut icon" href="images/logo (1).png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<!--home section-->
<section id="coverphoto">
<img src="images/logomah.png" class="logo">
<div class="banner-text">
<h1 class="heading">Anetin Super Structures</h1>
<p class="paragraph">Engineering your dreams with us</p>
<div class="banner-btn">
<span></span> Find Out
<span></span> Read More
</div>
</div>
</section>
<div id="sideNav">
<nav>
<ul>
<li>HOME</li>
<li>FEATURES</li>
<li>SERVICES</li>
<li>TESTIMONIALS</li>
<li>ABOUT US</li>
</ul>
</nav>
</div>
<div id="menuBtn">
<img src="/images/menu-button.png" id="menu" >
</div>
<!--features sections-->
<section id="features">
<div class="title-text">
<p>FEATURES</p>
<h1>Why Choose Us</h1>
</div>
<div class="feature-box">
<div class="features">
<h1>Experienced Stuff</h1>
<div class="features-desk">
<div class="features-icon">
<i class="fa fa-shield"></i>
</div>
<div class="features-text">
<p>How we do it! On large scale construction our Architects normally manages the job with a construction manager and a design engineer supervising it.</p>
</div>
</div>
<h1>Pre Booking Online</h1>
<div class="features-desk">
<div class="features-icon">
<i class="fa fa-check-square-o"></i>
</div>
<div class="features-text">
<p>How we do it! On large scale construction our Architects normally manages the job with a construction manager and a design engineer supervising it.</p>
</div>
</div>
<h1>Affordable Cost</h1>
<div class="features-desk">
<div class="features-icon">
<i class="fa fa-usd"></i>
</div>
<div class="features-text">
<p>In every services that we offer we also make sure that they have affordable costs with quality work</p>
</div>
</div>
</div>
<div class="features-img">
<img src="images/feature.jpeg" >
</div>
</div>
</section>
<!--services section-->
<section id="services">
<div class="title-text">
<p>SERVICES</p>
<h1>We Provide Better</h1>
</div>
<div class="service-box">
<div class="single-service">
<img src="images/buildingN.jpeg">
<div class="overlay"></div>
<div class="service-descrip">
<h3>Construction</h3>
<hr>
<p></p>
</div>
</div>
<div class="single-service">
<img src="images/electrical eng.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Electrical Engineering</h3>
<hr>
<p></p>
</div>
</div>
<div class="single-service">
<img src="images/Painting.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Wall Painting</h3>
<hr>
<p>We pair you up with the ideal artist for your project. From wall paintings to wall art ideas for your office or homes - the ideas are endless.</p>
</div>
</div>
<div class="single-service">
<img src="images/pumblingN.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Pumbling</h3>
<hr>
<p> We install, check, and replace fixtures in your home or commercial property to ensure that you obtain high-quality service and materials. Toilets, kitchen and bathroom sinks etc.</p>
</div>
</div>
<div class="single-service">
<img src="images/engineeringdrawings.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Engineering Drawings</h3>
<hr>
<p></p>
</div>
</div>
<div class="single-service">
<img src="images/roofing.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Roofing</h3>
<hr>
<p>Custom Roofs, Ceiling, Material, Installation, Supply and Manufacturing by our professional engineers</p>
</div>
</div>
</div>
</section>
<!--end of services section-->
<!--testimonial section-->
<section id="testimonial">
<div class="title-text">
<p>TESTIMONIALS</p>
<h1>What Client Says</h1>
</div>
<div class="testimonial-row">
<div class="testimonial-column">
<div class="user">
<img src="images/tatenda.jfif">
<div class="user-info">
<h4>TATENDA CHIKOMA <i class="fa fa-twitter"></i></h4>
<small>#taibo87</small>
</div>
</div>
<p>To say we're happy would be an understatement. When Anetin Team builds a home for you, they'll build it with care as if they were doing it for themselves and their families. Anetin Team would definitely be the one to build our next home in Southley Park, Harare.</p>
</div>
<div class="testimonial-column">
<div class="user">
<img src="images/nyasha.jfif">
<div class="user-info">
<h4> NYASHA MUGANHIRE<i class="fa fa-twitter"></i></h4>
<small>#nyaash_16!</small>
</div>
</div>
<p>I love this company. Very easy to talk to them and they really know how to save money and do quality stuff. Anetin Super Structures were great to work with, they did a complete remodel of our kitchen and two bathrooms providing best ceiling fitting and repairing the damaged water system. </p>
</div>
<div class="testimonial-column">
<div class="user">
<img src="images/lorraine.jpg">
<div class="user-info">
<h4>LORRAINE MHASHU <i class="fa fa-twitter"></i></h4>
<small>#lolo30_</small>
</div>
</div>
<p>If you need a new roof please do yourself a favour and get in touch with Anetin Super Structures. I can't say enough how awesome it was working with Anetin, they made the entire roofing beautifully i'm always grateful. </p>
</div>
</div>
</section>
<!--end of testimonial section-->
<!--footer section-->
<section id="footer">
<img src="images/brick layering.jpg" class="footer-img">
<div class="title-text">
<p>CONTACT</p>
<h1>Visit Shop Today</h1>
</div>
<div class="footer-row">
<div class="footer-left">
<h1>Opening Hours</h1>
<p><i class="fa fa-clock-o"></i>Monday to Friday - 8am to 5pm</p>
<p><i class="fa fa-clock-o"></i>Saturday and Sunday - 9am to 3pm</p>
</div>
<div class="footer-right">
<h1>Get In Touch</h1>
<p>7329 Limpopo Rd Zimre Park, Zimbabwe<i class="fa fa-map-marker"></i></p>
<p>anetinsuperstructures#gmail.com</p>
<p><i class="fa fa-phone"></i>+263 77 448 7726</p>
</div>
</div>
<div class="social-links">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube-play"></i>
<p>© 2022 Anetin Super Structures. All Rights Reserved</p>
</div>
</section>
<!--end of footer section-->
<script>
var menuBtn = document.getElementById("menuBtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")
sideNav.style.right== "-250px"
menuBtn.onclick= function(){
if(sideNav.style.right== "-250px"){
sideNav.style.right= "0";
menu.src="/images/cancel.png";
}
else{
sideNav.style.right="-250px";
menu.src="/images/menu-button.png"
}
}
</script>
</body>
</html>
/*CSS*/
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html{
scroll-behavior: smooth;
}
#coverphoto{
background: linear-gradient(rgba(0,0,0,0.5),#967300),url(../images/cover.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.logo{
width: 140px;
position: absolute;
top: 4%;
left: 10%;
}
.banner-text{
text-align: center;
color: #fff;
padding-top: 180px;
}
.banner-text h1{
font-size: 130px;
font-family: 'Kaushan Script', cursive;
animation: anim 2s;
}
.banner-text p{
font-size: 20px;
font-style: italic;
font-weight: 100;
animation: anim 1.5s .5s backwards;
}
#keyframes anim{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.banner-btn{
margin: 70px auto;
animation: anim 2s .8s backwards;
}
.banner-btn a{
width: 150px;
text-decoration: none;
display: inline-block;
margin: 0 10px;
padding: 12px 0;
color: #fff;
border: .5px solid #fff;
position: relative;
z-index: 1;
transition: color .5s;
}
.banner-btn a span{
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
z-index: -1;
transition: .5s;
}
.banner-btn a:hover span{
width: 100%;
}
.banner-btn a:hover{
color: black;
}
#sideNav{
width: 250px;
height: 100vh;
position: fixed;
right: -250px;
top: 0;
background: #967300;
z-index: 2;
transition: .5s;
}
nav ul li{
list-style: none;
margin: 50px 20px;
color: #fff;
cursor: pointer;
}
nav ul li a {
text-decoration: none;
}
#menuBtn{
width: 30px;
height: 25px;
background: #967300;
text-align: center;
position: fixed ;
right: 50px;
top: 30px ;
border-radius: 3px;
z-index: 3;
cursor: pointer;
}
.menu-btn img{
width: 20px;
margin-top: 15px;
}
#media screen and (max-width: 770px) {
.banner-text h1{
font-size: 44px;
}
.banner-btn a{
display: block;
margin: 20px auto;
}`enter code here`
}
/* features*/
#features{
width: 100%;
padding: 70px 0;
}
.title-text{
text-align: center;
padding-bottom: 70px;
}
.title-text p{
margin: auto;
font-size: 20px;
color: #ddb01d;
font-weight: bold;
position: relative;
z-index: 1;
display: inline-block;
}
.title-text p::after{
content: '';
width: 50px;
height: 35px;
background: linear-gradient(#ddb01d, #fff) ;
position: absolute;
top: -20px;
left: 0;
z-index: -1;
transform: rotate(10deg);
border-top-left-radius: 35px;
border-bottom-right-radius: 35px;
}
.title-text h1{
font-size: 50px;
}
.feature-box{
width: 80%;
margin:auto ;
display: flex;
flex-wrap: wrap ;
align-items: center;
text-align: center;
}
.features{
flex-basis: 50%;
}
.features-img{
margin: auto;
flex-basis: 50%;
}
.features-img img{
width: 70%;
border-radius: 10px;
}
.features h1{
text-align: left;
margin-bottom: 10px;
font-weight: 100;
color: #967300;
}
.features-desk{
display: flex;
align-items: center;
margin-bottom: 40px;
}
.features-icon .fa{
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px;
border-radius: 8px;
color: #967300;
border: 1px solid #967300;
}
.features-text p{
padding: 0 20px;
text-align: initial;
}
#media screen and (max-width: 770px) {
.title-text h1{
font-size: 35px;
}
.features{
flex-basis: 100%;
}
.features-img{
flex-basis: 100%;
}
.features-img img{
width: 100%;
}
}
#services{
width: 100%;
padding: 70px 0;
background: #efefef;
}
.service-box{
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-around ;
margin: auto;
}
.single-service{
flex-basis: 48%;
text-align: center;
border-radius: 7px;
margin-bottom: 20px;
color: #fff;
position: relative;
}
.single-service img{
width: 100%;
border-radius: 7px;
}
.overlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
border-radius: 7px;
cursor: pointer;
background: linear-gradient(rgba(0,0,0,0.5), #967300);
opacity: 0;
transition: 1s;
}
.single-service:hover .overlay{
opacity: 1;
}
.service-descrip{
bottom: 0;
left: 50%;
width: 80%;
position:absolute;
transform: translateX(-50%);
opacity: 0;
transition: 1s;
}
hr{
background: #fff;
height:2px ;
border: 0;
margin: 15px auto;
width: 60%;
}
.service-descrip p{
font-size: 14px;
}
.single-service:hover .service-descrip{
bottom: 40%;
opacity: 1;
}
#media screen and (max-width: 770px) {
.single-service{
flex-basis: 100%;
margin-bottom: 30px;
}
.service-descrip p{
font-size: 12px;
}
hr{
margin: 5px auto;
}
.single-service:hover .service-descrip{
bottom: 25% !important;
}
}
#testimonial{
width: 100%;
padding: 70px 0;
}
.testimonial-row{
width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.testimonial-column{
flex-basis: 28%;
padding: 10px ;
margin-bottom: 30px;
border-radius: 5px ;
box-shadow: 0 10px 20px 3px #00968814;
cursor: pointer;
transition: transform .5s;
}
.testimonial-column p{
font-size: 14px;
}
.user{
display: flex;
margin: 2px 0px;
align-items: center;
}
.user img{
width: 40px;
margin-right: 20px;
border-radius: 3px;
}
.user-info .fa{
margin-left: 10px;
color: #27c0ff;
font-size: 20px;
}
.user-info small{
color: #009688;
}
.testimonial-column:hover{
transform: translateY(-7px);
}
#media screen and (max-width: 770px){
.testimonial-column{
flex-basis: 100%;
}
}
#footer{
padding: 100px 0 20px;
background: #efefef;
position: relative;
}
.footer-row{
width: 80%;
margin: 0 auto;
display: flex ;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-left, .footer-right{
padding: 10px;
margin-bottom: 20px ;
flex-basis: 45% ;
}
.footer-right{
text-align: right;
}
.footer-row h1{
margin: 10px 0;
}
.footer-row p{
line-height: 35px;
}
.footer-left .fa, .footer-right .fa{
font-size: 20px;
color: #967300;
margin: 10px;
}
.footer-img{
max-width: 370px;
opacity: 0.1;
position:absolute;
left: 50%;
top: 35%;
transform: translate(-50%, -50%);
}
.social-links{
text-align: center;
}
.social-links .fa{
height: 40px;
width: 40px;
font-size: 20px;
line-height: 40px;
border: 1px solid #967300;
margin: 40px 5px 0;
transition: .5s;
}
.social-links .fa:hover{
background: #967300;
color: #fff;
transform: translateY(-7px);
cursor: pointer;
}
.social-links p{
font-size: 12px;
margin-top: 20px;
}
#media screen and (max-width: 770px){
.footer-left, .footer-right{
flex-basis: 100%;
font-size: 14px;
}
.footer-img{
top: 25%;
}
}
I think you must ad scroll-behavior: smooth; to body selector!
You can try this:
// anhor
const menuBtn = document.getElementById("menuBtn");
menuBtn?.addEventListener('click', function(e) {
e.preventDefault();
const target = document.getElementById("some-selector");
target.scrollIntoView({ behavior: "smooth", block: "start" });
});
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">
How do I get rid of this white space (in the picture below). I have tried putting the margin 0px with the universal selector but nothing changed(with the big space in the right). I have tried to change the units from px to vhor vw or rembut nothing changed.
Here is my code:
*{
margin: 0;
box-sizing: border-box;
padding: 0;
font-family: 'Roboto', sans-serif;
}
/*header section*/
.container{
display:flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: absolute;
z-index: 1;
width: 100vw;
font-weight: bold;
text-transform: uppercase;
}
.logo-box{
position: relative;
left:10px;
}
.logo{
width: 100px;
}
.main-nav__item{
list-style-type: none;
color: white;
}
.main-nav__item:hover{
color: #ff9900;
cursor: pointer;
}
/*84.2*/
.slideshow-container{
width: 100vw;
position: relative;
margin: auto;
}
.img{
width: 100%;
height: 98vh;
}
.dotz{
height: 2px;
text-align: center;
}
.dot {
position: relative;
top: -30px;
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 20px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active{
background-color: #ff9900;
}
.dot:hover {
background-color: #ff9900;
}
/* Fading animation */
.fade-zz {
-webkit-animation-name: fade-z;
-webkit-animation-duration: 1.5s;
animation-name: fade-z;
animation-duration: 1.5s;
}
#keyframes fade-z {
from {opacity: .4}
to {opacity: 1}
}
/*//////////the end of the header///////////////////*/
/* styling icons */
.icon{
font-size: 2.5rem;
}
.ad{
margin-left: 80px;
margin-bottom: 3px
}
.rot{
transform: rotateZ(-33deg);
margin: 0 0 0.31rem 1.87rem ;
}
.op{
margin-left: 3.12rem;
}
.contact-description{
text-align: center;
font-weight: bold;
font-size: 0.81rem;
}
/*end styling icons */
/* contact-box title */
.contact-title{
text-align: center;
font-weight: bold;
margin-bottom: 0.18rem;
}
.contact-box{
display: flex;
justify-content: space-around;
align-items: center;
background-color: #ff0000;
height: 180px;
position: relative;
top: -6px;
color: white;
}
/* about us section*/
.title{
text-align: center;
}
.title-description{
text-align: center;
color: #ff9900;
font-weight: bold;
margin-bottom: 50px;
}
.title-description:hover{
color: black;
}
.line{
position: relative;
left: 650px;
width: 50px;
height: 5px;
text-align: center;
background-color: #ff9900;
border: 0px;
margin-bottom: 10px;
}
/* service section */
.service-image-box{
width: 100%;
height: 50%;
}
.service-image{
width: 100%;
}
.title-service{
font-size: 70px;
position: relative;
top: 9rem;
text-align: center;
color: white;
}
.quality-cuisine-box{
position: relative;
top: 10rem;
height: 0.1px;
left:19rem;
width: 1366px;
}
.hover:hover{
color: #ff9900;
}
.qu{
margin-left: 3rem;
color: white;
}
.service-title{
color: white;
}
.service-description{
color: white;
}
<div class="container">
<div class="logo-box">
<img src="images/logo.png" class="logo" alt="">
</div>
<ul class="main-nav__item">
<li>services</li>
</ul>
<ul class="main-nav__item">
<li>reservation</li>
</ul>
<ul class="main-nav__item">
<li>menu</li>
</ul>
<ul class="main-nav__item">
<li>our chefs</li>
</ul>
<ul class="main-nav__item">
<li>events</li>
</ul>
</div>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade-zz">
<!-- <div class="numbertext">1 / 3</div> -->
<img src="https://via.placeholder.com/1000" class="img">
<!-- <div class="text">Caption Text</div> -->
</div>
<div class="mySlides fade-zz">
<!-- <div class="numbertext">2 / 3</div> -->
<img src="https://via.placeholder.com/1000" class="img">
<!-- <div class="text">Caption Two</div> -->
</div>
<div class="mySlides fade-zz">
<!-- <div class="numbertext">3/3</div> -->
<img src="https://via.placeholder.com/1000" class="img">
<!-- <div class="text">Caption Three</div> -->
</div>
<!-- The dots/circles -->
<div class="dotz">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!--end of the slideshow-->
<!--contact box-->
<div class="contact-box">
<div class="adress">
<i class="fas fa-map-marker-alt icon ad"></i>
<h3 class="contact-title">Address</h3>
<p class="contact-description">4579 Penn Street,Manchester<br>united kingdom</p>
</div>
<div class="phone">
<i class="fas fa-phone-volume icon rot"></i>
<h3 class="contact-title">Phone</h3>
<p class="contact-description">636-399-9776 <br> 573-225-7350</p>
</div>
<div class="opening-time">
<i class="far fa-clock icon op"></i>
<h3 class="contact-title">Opening time</h3>
<p class="contact-description">all the days of the week <br>from 6 am to midnight</p>
</div>
</div>
<!-- about us section -->
<section class="about-us">
</div>
<i class="fas fa-utensils"></i>
<h1 class="title">about us</h1>
<hr class="line">
<p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page <br>avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années<br> 1500, quand un imprimeur
anonyme assembla </p>
</section>
<!-- service section -->
<section class="services">
<h1 class="title-service">
services
</h1>
<div class="quality-cuisine-box">
<i class="fas fa-concierge-bell icon qu"></i>
<h2 class="service-title">quality cuisine</h2>
<p class="service-description">Le Lorem Ipsum est <br>
simplement du faux
</p>
</div>
<!-- <div class="freindly-staff-box">
<i class="fas fa-smile-beam icon"></i>
<h2>freindly staff</h2>
<p>Le Lorem Ipsum est <br>
simplement du faux</p>
</div>
<div class="fresh-food-box">
<i class="fas fa-fish icon"></i>
<h2>fresh food</h2>
<p>Le Lorem Ipsum est <br>
simplement du faux</p>
</div> -->
<div class="service-image-box">
<img class="service-image" src="https://via.placeholder.com/1000" alt="">
</div>
</section>
this is an executable version of my code: https://codepen.io/AMeshu/pen/vvjgxg
A couple of problems on the fly:
You are using absolute sizes for position / measuring your elements. I changed the width property to max-width. Then in order to remove the scroll-x I set the body margin to 0.
.line – instead of left 650px I put right 0.
.main-nav__item - I don't know why, but you are using the unordered list element over and over. So I combine it to one, as you can see.
<style>
*{
margin: 0;
box-sizing: border-box;
padding: 0;
font-family: 'Roboto', sans-serif;
}
body {
margin: 0;
}
/* Header section */
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: absolute;
z-index: 1;
width: 100%;
font-weight: bold;
text-transform: uppercase;
}
.logo-box {
position: relative;
left: 10px;
}
.logo {
width: 100px;
}
.main-nav__item {
list-style-type: none;
}
.main-nav__item li {
float: left;
padding-right: 10px;
}
.main-nav__item li:hover {
color: #ff9900;
cursor: pointer;
}
/* 84.2 */ .slideshow-container {
max-width: 100vw;
position: relative;
margin: auto;
}
.img {
max-width: 100%;
height: 98vh;
}
.dotz {
height: 2px;
text-align: center;
}
.dot {
position: relative;
top: -30px;
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 20px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #ff9900;
}
.dot:hover {
background-color: #ff9900;
}
/* Fading animation */.fade-zz {
-webkit-animation-name: fade-z;
-webkit-animation-duration: 1.5s;
animation-name: fade-z;
animation-duration: 1.5s;
}
#keyframes fade-z {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* //////////The end of the header/////////////////// */
/* Styling icons */.icon {
font-size: 2.5rem;
}
.ad {
margin-left: 80px;
margin-bottom: 3px
}
.rot {
transform: rotateZ(-33deg);
margin: 0 0 0.31rem 1.87rem ;
}
.op {
margin-left: 3.12rem;
}
.contact-description {
text-align: center;
font-weight: bold;
font-size: 0.81rem;
} /* End styling icons */
/* contact-box title */.contact-title {
text-align: center;
font-weight: bold;
margin-bottom: 0.18rem;
}
.contact-box {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #ff0000;
height: 180px;
position: relative;
top: -6px;
color: white;
}
/* About us section*/.title {
text-align: center;
}
.title-description {
text-align: center;
color: #ff9900;
font-weight: bold;
margin-bottom: 50px;
}
.title-description:hover {
color: black;
}
.line {
position: relative;
right: 0px;
width: 50px;
height: 5px;
text-align: center;
background-color: #ff9900;
border: 0px;
margin-bottom: 10px;
}
/* Service section */
.service-image-box {
width: 100%;
height: 50%;
}
.service-image {
max-width: 100%;
}
.title-service {
font-size: 70px;
position: relative;
top: 9rem;
text-align: center;
color: white;
}
.quality-cuisine-box {
position: relative;
top: 10rem;
height: 0.1px;
/* left: 19rem; */
max-width: 1366px;
}
.hover:hover {
color: #ff9900;
}
.qu {
/* margin-left: 3rem; */
color: white;
}
.service-title {
color: white;
}
.service-description {
color: white;
}
</style>
Play with that pen and good luck!
I want the webdsn-drop to be behind the #navbuttons-container but I can't get it to work. For some reason #navbuttons-container div is behind it #webdsn-drop and I want these layers reversed.
body {
background-color: #0f0f0f;
width: 980px;
margin: 0 auto;
}
/*-----NAVIGATION-BAR-----*/
#navbuttons-container {
background-color: #303030;
width: 100%;
overflow: auto;
position: fixed;
left: 0px;
top: 0px;
overflow: hidden;
padding: 0;
z-index: 10;
}
#web-name {
color: #f7f7f7;
font-family: 'calibri light';
padding: 4.5px 0 0 10px;
float: left;
font-size: 30px;
margin: 0 auto;
letter-spacing: 10px;
}
#navigation {
max-width: 980px;
min-width: 854px;
margin: 0 auto;
}
.navbuttons {
float: right;
font-size: 20px;
font-family: 'calibri';
display: flex;
}
.navbuttons a {
color: #f7f7f7;
text-decoration: none;
padding: 12.5px 20px;
background-color: #303030;
transition: background-color 0.5s ease;
}
.navbuttons a:hover {
background-color: #5b5b5b;
transition: background-color 0.5s ease;
}
#webdsn-drop {
position: fixed;
left: 0px;
background-color: red;
width: 100%;
z-index: 9;
}
<div id="navbuttons-container">
<div id="navigation">
<h1 id="web-name">PORTFOLIO</h1>
<div class="navbuttons-container">
<div class="navbuttons">
Logo Design
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div class="navbuttons">
Art & Misc.
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div class="navbuttons">
Posters & Flyers
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div id="webdsn-menu" class="navbuttons">
Website Design
<div id="webdsn-drop">
<h1 class="subname">WEBSITE DESIGN
<h1>
</div>
</div>
</div>
</div>
</div>
Apply z-index: -1; to .webdsn-drop- since it's a child element of #navbuttons-container, you need to use a negative z-index in order to move it behind the parent.