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" });
});
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);
}
I have made an about page for my class assignment. Everything worked fine until I used the inspect option to see if my webpage is responsive to other devices. It was not responsive, I tried to see what is wrong with the code but I could not find an error in my codes after 5 hrs. Help would be appreciated.
*{
margin: 0;
padding:0;
box-sizing: border-box;
color: white;
background-color: black;
}
.title12{
text-align: center;
font-size: 24px;
margin-top: 100px;
}
.p1{
text-align: center;
font-size: 20px;
margin-top: 200px;
}
h1{
text-align: center;
}
.h2{
margin-top: 400px;
}
.reviews{
margin-top: 400px;
margin-left: 300px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
padding: 16px;
text-align: center;
background-color: black;
}
.re1{
width: 250px;
}
.re3{
width:250px;
height: 350px;
}
.container2{
display: flex;
flex-direction: column;
justify-content: center;
align-items:justify;
text-align: center;
margin: 40px 20px 0 20px;
margin-top: 80px;
}
.container2 .heading{
width: 50%;
padding-bottom: 50px;
}
.container2 .heading h3{
font-size: 3em;
font-weight: bolder;
padding-bottom: 10px;
border-bottom: 3px solid white;
}
.container2 .heading h3 span{
font-weight: 100;
color: #fff;
}
.con2{
margin-top: auto;
margin-top: 900px;
}
.container{
max-width: 1280px;
margin: 2 auto;
display:flex;
align-items: center;
justify-content: space-between;
}
nav{
position:fixed;
top:0;
left:0;
right:0;
z-index: 99;
background-color: black;
padding: 16px 32px;
border-bottom: 3px solid blue ;
}
.menu{
display:flex;
justify-content: flex-end;
margin: 0 -16px;
flex: 1 1 0%;
}
.menu a{
color: white;
margin: 0 16px;
font-weight: 600;
text-decoration: none;
transition: 0.4s;
padding:8px 16px;
border-radius: 90px;
}
.menu a.highlight, .menu a:hover{
background-color:red;
}
a{
font-size: 25px;
text-decoration: none;
}
body {
margin: 0px;
font-weight: 400;
}
video {
width: 50%;
float: left;
margin-bottom: 35px;
}
.normal{
width: 100%;
}
.footer{
padding: 40px 0;
background-color: black;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color: white;
}
.footer .social a{
font-size: 24px;
color: white;
border: 1px solid white;
width: 40px;
height: 40px;
line-height: 38px;
display: inline-block;
text-align: center;
border-radius: 50%;
margin: 0 8px;
opacity: 0.75;
}
.footer .social a:hover{
opacity: 0.9;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a{
color: white;
text-decoration: none;
opacity: 0.8;
}
.footer ul li{
display: inline-block;
padding: 0 15px;
}
.footer ul li a:hover{
opacity: 1;
color: red;
}
.footer .copy{
margin-top: 15px;
text-align: center;
font-size: 13px;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="about.css">
<script src="https://kit.fontawesome.com/57160f5774.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css">
<title>About Us</title>
</head>
<body>
<nav>
<div class="container">
<div class="menu">
Home
Products
PC Designs
Support
Build Your PC
</div>
</div>
</nav>
<img style="float: left; height: 750px;" src ="About us/V388-SUPRIM.png">
<div class="title12">
<h1>SUPRIMX</h1>
</div>
<div class="p1">
<p>SUPRIMX is a world leader in gaming, content creation, business & productivity and AIoT solutions. </p>
<p>Bolstered by its cutting-edge R&D capabilities and customer-driven innovation, SUPRIMX has a wide-ranging global presence spanning over 120 countries. Its comprehensive lineup of laptops, graphics cards, monitors, motherboards, desktops, peripherals, and telematics systems are globally acclaimed.</p>
</div>
<div class="reviews">
<div class="container2">
<div class="heading">
<h3>Reviews<span> </span></h3>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<h3><img class="re1" src="About us/kayla.jpg"></h3>
<br>
<p>Kayla </p>
<br>
<p>
Amazing website to buy a lot of products!.
</p>
</div>
</div>
<div class="column">
<div class="card">
<br>
<br>
<h3><img class="re2" src="About us/Curtis.jpg"></h3>
<br>
<p>Curtis</p>
<br>
<p>5 stars!!</p>
</div>
</div>
<div class="column">
<div class="card">
<h3><img class="re3" src="About us/Tyler.jpg"></h3>
<br>
<p>Tyler</p>
<br>
<p>Incredible website!</p>
</div>
</div>
</div>
</div>
</div>
<hr>
<section class="footer">
<div class="social">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
<i class="fa fa-pinterest" aria-hidden="true"></i>
</div>
<ul class="list">
<li>
Home
</li>
<li>
About SUPRIMX
</li>
<li>
Forums
</li>
<li>
Products
</li>
<li>
Support
</li>
</ul>
<p class="copy">
SUPRIMX © 2022
</p>
</section>
</body>
</html>
:root {
--primary-color: #10b929ff;
--background-light-grey: #696969;
--background-dark-grey: #2f2f2f;
}
body {
background: var(--background-light-grey);
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.navbar {
background: var(--background-dark-grey);
padding: 1em;
font-family: 'Josefin Sans', sans-serif;
//position: fixed;
}
footer {
background: #2f2f2f;
}
nav {
display: none;
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top:0;
background-color: var(--background-dark-grey);
height: 100%;
padding: 2em;
ul.primary-nav {
margin-top: 5em;
}
li {
a{
color: white;
text-decoration: none;
display: block;
padding: .5em;
text-align: right;
font-size: 30px;
&:hover{
font-weight: bold;
}
}
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
}
nav.menu-btn {
display: block;
}
.website-logo {
display: flex;
place-content: space-between;
}
.mobile-menu{
cursor: pointer;
width: 2em;
//max-width: 10%;
}
#media only screen and (max-width: 400px){
nav{
width: 44%;
padding-right: 30px;
}
}
#media only screen and (max-width: 768px){
.mobile-menu{
cursor: pointer;
width: 2em;
max-width: 10%;
}
.website-logo {
display: flex;
place-content: space-between;
img{
width: 200px;
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
max-width: 10%;
}
}
a {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section {
padding: 10em 0em 5em 0em;
}
.hero {
text-align: center;
//padding-bottom: 160px;
}
.hero-image{
background-image: url("https://am3pap006files.storage.live.com/y4pNuJohtpUdzBTZoc4fAQHlLNdeLvEQERim4Rs1KspeWQaKszREazNg4Ljnl7YTmkR6Sgsa4MUN4kB4aAf-vbbEuFnP9EPp2tAExe-dH_9o45qLndBetYu64mzC8r1Ynb8pOgWBAoqfzUL6lgg-Oue0OCqK6PPNliLbVrv6A3Yhuqalg__GtCNUkfzHJbwEuEtMWtpMjsvc_zHKMDeI1jNt5lG7eLxLiR5TluSAml-UuQ/IMG_0560.jpg?psid=1&width=720&height=486");
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
background-size: cover;
text-align: center;
padding-bottom: 160px;
}
.centre-col {
color: white;
h1 {
text-transform: uppercase;
font-weight: 600;
font-size: 3em;
resize: horizontal;
margin-bottom: 10px;
}
h3 {
font-weight: 200;
font-size: 1.2em;
margin-bottom: 20px;
}
.primary-cta {
background: var(--primary-color);
padding: .6em 1.3em;
text-decoration: none;
border-radius: 5em;
display: inline-block;
font-size: 1.5em;
}
}
.instagram-feed {
padding-top: 00px;
padding-bottom: 10px;
z-index: 0;
}
.eapps-link img {
display:none !important;
}
.club-vision-values {
background: var(--background-light-grey);
z-index: 1;
top: 40%;
padding-top: 0px;
text-align: center;
color: white;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 10px;
padding-bottom: 20px;
margin-top: 10px;
position: relative;
}
.the-coaches{
padding: 20px;
ul{
max-width: 500px;
//padding-top: 10px;
display: gird;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
}
.coach-list {
column-count: 2;
max-width: 500px;
margin: auto;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
max-width: 800px;
margin: auto;
text-align: center;
background: var(--primary-color);
color: white;
margin-bottom: 40px;
h1 {
margin: 4px;
margin-top: 10px;
}
p {
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
//padding-top: 3px;
}
}
#media only screen and (min-width: 768px){
.coach-list {
column-count: 2;
max-width: 800px;
margin: auto;
}
}
#media only screen and (min-width: 1080px){
.coach-list {
display: inline;
max-width: 2600px;
display: flex;
justify-content: center;
}
.the-coaches{
padding: 20px;
padding-bottom: 40px;
margin: auto;
ul {
max-width: 2200px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 40px;
padding-right: 40px;
}
}
.card {
margin: 10px;
}
}
.footer{
margin:0;
padding: 0;
box-sizing: border-box;
}
.footer-container{
max-width: 1670px;
margin:auto;
}
.footer-col {
color: white;
width: 20%;
padding: 0 35px;
}
.footer-col h4{
font-size: 18px;
margin-bottom: 20px;
position: relative;
}
.about-us {
line-height: 25px;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: var(--primary-color);
height: 2px;
box-sizing: border-box;
width: 50px;
}
.row
{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
padding: 60px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #ffffff;
}
/*responsive*/
#media(max-width: 767px){
.footer-col{
width: 50%;
margin-bottom: 30px;
}
}
#media(max-width: 574px){
.footer-col{
width: 100%;
}
}
<!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>New Era Boxing</title>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="navbar">
<div class="website-logo">
<img id="logo" class="logo" src="Images/logo.svg" alt="The club logo">
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Exit Navigation">
<ul class="primary-nav">
<li>Classes</li>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<section class="hero-image">
<div class="container">
<!-- <img src="images/raul.JPG" alt="Raul"> -->
<div class="centre-col">
<h1>First-class boxing training<br>
for youths and adults alike</h1>
<h3>We provide a supportive and inclusive training environment</h3>
<div class="hero-cta">
View our timetable
</div>
</div>
</div>
</div>
</section>
<section class="instagram-feed">
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-a2b6cbed-0090-4fd3-9a99-b6ce405f0cbf"></div>
</section>
<section class="club-vision-values">
<div>
<h2>Our Club</h2>
<p>New-Era Boxing Club was formed in 2011 by Mark Bebbington and focuses on teaching core values as well as providing first class training for youths and adults alike</p>
</div>
<div>
<h2>Our Vision</h2>
<p>Our vision is to create opportunities for members through boxing, education and personal development in doing so we will provide a supportive and inclusive training environment.</p>
</div>
<div>
<h2>Our Values</h2>
<p>New Era Boxing emphasises the core value of Equality, Integrity, Compassion, Resilience and Humility at the heart of the clubs activities.</p>
</div>
</section>
<section class="the-coaches">
<div class="coach-list">
<ul class="left">
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-container">
<div class="row">
<div class="footer-col">
<h4>Phone Us</h4>
<ul>
<li>07830 085132</li>
</ul>
</div>
<div class="footer-col">
<h4>Email Us</h4>
<ul>
<li class="email">neweraboxing#hotmail.co.uk</li>
</ul>
</div>
<div class="footer-col">
<h4>About Us</h4>
<ul>
<li class="about-us"><a href="#">
FAQs
</a></li>
<li class="about-us"><a href="#">
Club Partners
</a></li>
<li class="about-us"><a href="#">
Timetable
</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-instagram"></i></i>
<i class="fab fa-twitter"></i></i>
<i class="fab fa-whatsapp"></i></i>
</div>
</div>
</div>
</div>
</footer>
<script>
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn');
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn');
})
</script>
</body>
</html>
I am viewing my website in the Developer tools but whenever I try to view it in a mobile resolution below 400px wide it seems to add this unwanted padding to the right side. Sometimes this disappears, but other times it just stays there. Is this a common issue and are there any suggestions on how to fix this please?
enter image description here
I was coding my website when I realized that my Type to search button is quite high on the Website. Is there a way that I can get that to come down a bit? Here is my code For this project. Also if you see anyway that I can improve this website please tell me, also could you please help give me some tips on how I can make my code neater and more readable. Over all the type to search is the biggest problem to fix but if you see some others please let me know. Thank you!
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<link href="context/styles.css" rel="stylesheet" type="text/css">
<link href="Webfonts/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul class="navbarlist">
<li class="navbarimg"><img class="navbarlogo" src="img/LOGO.png"></li>
<li class="navbarelementL">Browse</li>
<li class="navbarelementL">Today's Deals</li>
<li class="navbarelementR">Shopping Cart</li>
</ul>
<div class="searchbox">
<input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#"></a>
<i class="fas fa-search"></i>
</div>
</div>
<div class="banner">
<img class="titleimg" src="img/TITLE.jpg">
</div>
<div class="row">
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
</div>
</div>
<div class="bottomnav">
<div class="bottomlogo">
<img class="navbarlogo2" src="img/LOGO.png">
</div>
<div class='nav'>
<div class='left'>
<ul>
<li class="bottomelement">About Us</li>
<li class="bottomelement">Affiliates</li>
</ul>
</div>
<div class='right'>
<ul>
<li class="bottomelement">TOS</li>
<li class="bottomelement">Fourth </li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
/*General*/
h2{
font-family: 'Ubuntu', sans-serif;
justify-content: center;
margin: auto;
}
body{
margin:0;
padding:0;
}
/*Navbar*/
.navbar{
float: left;
width: 100%;
background-color: rgb(248, 138, 180);
}
.navbarlogo{
width: 60px;
height: auto;
}
.navbarlist{
list-style-type:none;
font-family: 'Ubuntu', sans-serif;
}
.navbarelementL{
display: inline-block;
margin-right: 10px;
transition-property: all;
transition-duration: 1s;
float: left;
}
.navbarelementL:hover{
display: inline-block;
margin-right: 10px;
font-size: 20px;
}
.navbarelementR{
display: inline-block;
margin-right: 10px;
transition-property: all;
transition-duration: 1s;
float:right;
}
.navbarelementR:hover{
display: inline-block;
margin-right: 10px;
font-size: 20px;
}
/*end*/
.navbarimg{
display: inline-block;
margin-right: 30px;
float:left;
}
.popupnavimg{
display: inline-block;
margin-right: 30px;
float:left;
}
.popupimg{
width: 40px;
height:auto;
}
.searchbox{
position: absolute;
top: 35px;
left: 50%;
transform: translate(-50%,-50%);
background: rgb(255, 255, 255);
height: 50px;
border-radius: 40px;
padding: 5px;
}
.searchbox:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.searchbox:hover > .search-btn{
background: white;
}
.search-btn{
color: black;
float: right;
width: 50px;
height: 50px;
border-radius: 50%;
background: skyblue;
display: flex;
justify-content: center;
align-items: center;
transition: 0.7s;
}
.search-txt{
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.7s;
line-height: 40px;
width: 0;
}
.fas{
position: absolute;
margin-left: 18.0px;
margin-top: 18.5px;
size: 40px;;
}
.titleimg{
width:100%;
}
/*grid1*/
/* Three image containers (use 25% for four, and 50% for two, etc) */
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 10px;
}
body {
margin:0
}
body {
margin:0
}
.bottomnav {
width: 100%;
background-color: rgb(248, 138, 180);
position: relative;
}
.navbarlogo2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 120px;
text-decoration: none;
position: absolute;
filter: brightness(10);
top: 15px;
left: calc(50% - 60px) /*center top left corner then remove half logo width (120px)*/
}
/*bottombar*/
.nav {
display: grid;
grid-gap: 120px;
grid-template-columns: 1fr 1fr;
}
.nav ul {
padding-left: 0;
}
.nav ul li {
list-style: none;
text-align: center;
padding-left: 0;
}
.left,
.right {
flex: 1;
}
.bottomelement{
font-size: 20px;
}
.bottomelement:hover{
font-size: 25px;
transition-duration: 1s;
}
Try adding margin-top to
.search-txt {
//...
margin-top: 7px;
}
Check the fiddle here
To answer your other questions, normally IDE's has formatting options included. Else you can use online sites like cleancss.com for CSS or htmlformatter.com for HTML or beautifier.io for JavaScript.
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!