I am currently trying to make a website. However, the problem that I am getting is that when I minimize the browser, Yes, it is being responsive, but the text is going over the other components on the website and I am unsure how to work around this issue as I am quite stumped at this error.
Image for more clarification:
Web error
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css" />
<link rel="stylesheet" href="jason.css">
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="main text">
<p>At Virgin Active, we do health and fitness differently. We have expertly crafted exercise experiences
that are the perfect blend of intelligent programming and feel-good movement. We've got everything from
Yoga to HIIT, so you can move your body any
way you want.
</p>
</div>
</div>
<section class="no.1" id="no.1">
<div class="section">
<img src="Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br>
Classes include: Align,Flow and Calm SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
</section>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
</body>
</html>
Css:
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1b1b1b;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li {
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: cyan;
}
nav ul ul li a:hover {
color: cyan;
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background {
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
/* USE FLEXBOX */
display: flex;
align-items: center;
justify-content: flex-start;
/* ADD SOME PADDING FOR BETTER UI */
padding-inline: 16px; /* LEFT and Right */
}
.overlay {
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
}
.overlay h3 {
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p {
font-size: 35px;
}
.main h1 {
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text {
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body {
margin: 0;
font-family: sans-serif;
}
.section {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img {
height: 250px;
}
.section h1 {
margin-left: 100px;
color: black;
}
.section p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer {
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social {
text-align: center;
padding-bottom: 25px;
color: #4b4c4d;
}
.footer .social a {
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover {
color: #24262b;
background-color: #ffffff;
}
.footer ul {
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a {
color: #fff;
text-decoration: none;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
}
.footer .copyright {
margin-top: 15px;
text-align: center;
font-size: 20px;
color: #fff;
}
you can use css media query create responsive web page.
#media only screen and (min-width: 768px) {
.overlay h3 {
font-size: 16px;
}
.overlay p {
font-size: 25px;
}
}
#media only screen and (min-width: 1200px) {
.overlay h3 {
font-size: 22px;
}
.overlay p {
font-size: 40px;
}
}
Another way that is not recommended using viewport width and height
.overlay p {
font-size: 1.5vw;
}
Related
I was just creating website with html and CSS with a responsive navigation bar and hamburger menu
and which has some content as well in the body of page
but after including contents inside the page the hamburger menu isn't showing
its transition are only you can see
i just wanted the hamburger menu to be shown without disturbing the contents of this page
code
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Simply add a z-index: 9999; to your nav ul and will see that.
It is hidden probably because it is out of the overflow of the parent block.
Try to add a background-color: #2f2f42; to your ul and job should be done.
DEMO
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999; /** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42; /** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
I am trying to have my iframe video center to page and also resize. I have tried setting the height to a viewpoint height and using 100% for the width. I have also tried to take in the padding to half of the page. When I give the div a height the video resizes to the div - even when the size is smaller. Right now setting the margin and adding a max width works but I am trying to resize the video with no resolve.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/a16d2517bd.js" crossorigin="anonymous"></script>
<title>Keith McDonald Plumbing | Commercial</title>
</head>
<body>
<nav>
<div class="logo_header">
<a href="./home.html"><img src="https://cdn-icons-png.flaticon.com/512/2301/2301541.png"
alt="Site Name" /></a>
<h1>Keith McDonald Plumbing</h1>
</div>
<ul class="navigation_links">
</li>
<!--Align skunk with menu items. Make sure it doesn't glow.-->
<li>ABOUT</li>
<li>COMMERCIAL</li>
<li>EMPLOYMENT</li>
<li>SERVICES</li>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="./app.js"></script>
<section id="hero">
<div class="container">
<div class="info">
<h2>Commercial</h2>
</div>
<div class="info">
<h3>We gotcha' covered!</h3>
</div>
<div class="info">
Request Service
</div>
</div>
</section>
<main>
<div class="vid_com">
<iframe src="https://www.youtube.com/embed/rVVsJa6LOeM" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</main>
<footer>
<section class="footer_social">
<div class="social"><i class="fa-brands fa-twitter-square"></i></div>
<div class="social"><i class="fa-brands fa-facebook-square"></i>
</div>
<div class="social"><a href="https://www.instagram.com/?hl=en"><i
class="fa-brands fa-instagram-square"></i></a></div>
</section>
<ul class="navigation_links_footer">
</li>
<!--Align skunk with menu items. Make sure it doesn't glow.-->
<li>ABOUT</li>
<li>COMMERCIAL</li>
<li>EMPLOYMENT</li>
<li>SERVICES</li>
</li>
</ul>
<h4>Contact Us</h4>
<p>keithmcdonald#plumbing.com</p>
</footer>
<div>
</div>
</body>
</html>
CSS
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html {
scroll-behavior: smooth;
margin: 0 auto;
}
/*
grey:#666666
dark blue: #204060
blue: #336699
red: #F20505
white: #FFFFFF
*/
/* NAV BAR */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 15vh;
background-color: white;
width: 100%;
}
.logo_header {
color: #204060;
text-transform: uppercase;
letter-spacing: 5px;
display: inline-flex;
padding-right: 10%;
width: 40%;
}
.logo_header a{
padding-right: 3%;
}
.logo_header img{
width: 2em;
padding-right: 3%;
}
.navigation_links {
display: flex;
text-decoration: none;
width: 30%;
background-color: white;
}
.navigation_links a {
color: #204060;
text-decoration: none;
}
.navigation_links a:hover {
font-weight: bold;
text-decoration: underline;
}
.navigation_links li {
list-style: none;
}
.burger {
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: #204060;
margin: 5px;
}
#media screen and (max-width:1736px){
.logo_header a{
padding-right: 3%;
padding-left: 5%;
}
}
#media screen and (max-width:1280px){
.navigation_links {
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.navigation_links {
position: absolute;
right: 0;
height: 26vh;
top: 15vh;
background-color: #204060;
color: #204060;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translatex(100%);
transition: transform 0.5s ease-in;
}
.navigation_links a {
color: white;
text-decoration: none;
}
.navigation_links li {
padding: 2vh;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav_active{
transform: translatex(0%);
}
/* HERO BOX */
#hero {
height: 65vh;
background: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), #336699), url(https://scontent-atl3-2.xx.fbcdn.net/v/t31.18172-8/28516625_1598055023650084_5608745362596556363_o.jpg?_nc_cat=101&ccb=1-7&_nc_sid=e3f864&_nc_ohc=ydWG8T9iKucAX8wEQ-V&_nc_ht=scontent-atl3-2.xx&oh=00_AT9aRGA5yl35nf6769WG8cFz8NlXwhqsaM9HxahErVehJA&oe=62EE5264) no-repeat center / cover;
background-color: #204060;
color: #F20505;
}
#hero img {
height: 80em;
}
#hero h2{
font-size: 50px;
}
#hero h3 {
color: white;
font-size: 25px;
}
.container {
width: 90%;
height: 100%;
max-height: 50px;
padding:8vw;
}
.info {
margin-top: 2vh;
}
.info a {
background-color: #F20505;
text-decoration: none;
color: white;
padding: 5px;
border-radius: 10px;
border: 1px solid #F20505;
}
.info a:hover {
font-weight: bold;
}
#media screen and (max-width:600px){
.logo_header {
display: none;
}
#hero {
height: 675px;
}
.about-column {
display: inline;
}
}
/* HOME INFO SECTION */
main {
height: min-content;
}
.service {
background-color: #336699;
height: min-content;
padding: 5vh 0vh 5vh 0vh;
color: white;
}
.row {
display: flex;
width: 70%;
}
.service-column {
flex: 30%;
text-align: right;
padding: 1em;
}
.about-column {
flex: 70%;
text-align: left;
margin: 3em;
}
main h1 {
margin-top: 2vh;
text-align: center;
height: 10%;
width: 100%;
padding: 1vw;
}
/* Location Section */
.location {
background-color: #336699;
height: min-content;
padding: 1vh 0vh 1vh 0vh;
color: #F20505;
}
.location h1 {
padding: 0 auto;
}
/* Member Logo Section */
.member {
text-align: center;
background-color: #c9dbed;
height: min-content;
padding: 5vh;
}
.member h4, h5 {
color: #F20505;
}
.member_logo img{
width: 300px;
padding: 1vw;
}
.top_button {
color:#F20505;
text-decoration: none;
}
.top_button:hover {
text-decoration: underline;
}
/* Footer */
footer{
background-color: #336699;
height: min-content;
padding: 2vh 0vh;
color: #F20505;
padding: 2vh;
color:#c9dbed;
}
footer .social {
text-align: center;
padding-bottom: 25px;
color:#c9dbed;
box-sizing: border-box;
margin: 0;
padding: 0;
display:inline-block;
}
footer .social i {
text-align: center;
padding-bottom: 25px;
color:#c9dbed;
}
footer .social a {
font-size: 24px;
text-align: center;
text-decoration: none;
list-style: none;
}
footer ul {
text-decoration: none;
list-style: none;
}
footer ul a {
text-decoration: none;
font-weight: 500;
color:#c9dbed;
}
footer ul a:hover {
text-decoration: none;
font-weight: 700;
}
footer h4 {
color:#c9dbed;
margin-top: 2em;
}
/* COMMERCIAL */
.vid_com {
margin: auto;
max-width: 300px;
}
iframe {
width: 100%;
height: 600px;
}
JS
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation_links');
burger.addEventListener('click',() =>{
nav.classList.toggle('nav_active');
});
}
navSlide();
I am trying to build my personal webpage but simply cant manage to make my footer not cover the two buttons.
This problem only occurs on my laptop. As soon as I switch to my external monitor, the two buttons arent covered anymore.
I have tried inserting html{overflow-y: scroll;} to my css but it doesnt seem to work :(
Any help would be awesome! Thank you.
HTML:
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
background-size: cover;
padding: 0;
margin: 0;
}
.navbar {
height: 80px;
width: 100%;
background-color: #808080;
}
.logo {
width: 140px;
height: auto;
padding: 15px 50px;
}
.navbar ul {
float: right;
margin-right: 20px;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
font-family: 'Roboto', sans-serif;
transition: .2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
user-select: none;
}
.center h1 {
color: black;
font-size: 70px;
font-weight: bold;
width: 900px;
text-align: center;
}
.center h2 {
color: black;
font-size: 70px;
font-weight: bold;
width: 885px;
margin-top: 10px;
text-align: center;
}
.center .buttons {
margin: 35px 280px;
}
.buttons button {
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons .btn {
margin-left: 25px;
}
.buttons button:hover {
background: #4b79b4;
}
footer {
position: absolute;
background-color: #808080;
height: auto;
width: 100%;
padding-top: 40px;
color: black;
bottom: 0px;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3 {
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p {
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li {
margin: 0 10px;
}
.socials a {
text-decoration: none;
color: lightsteelblue;
}
.socials a i {
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i {
color: #4b79b4;
}
.footer-bottom {
background-color: #737373;
width: 100%;
padding: 20px 0;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span {
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<!-- BEGIN NAVBAR -->
<nav class="navbar">
<img class="logo" src="logo.png">
<ul>
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<!-- END NAVBAR -->
<!-- BEGIN CONTENT -->
<div class="center">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
<!-- END CONTENT -->
</div>
<!-- BEGIN FOOTER -->
<footer>
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
<!-- END FOOTER -->
</body>
</html>
What you describe kind of feels like a grid to me using three "rows", one for the "navbar", one for the "content" and one for the "footer" such as:
display: grid;
grid-template-rows: auto 1fr auto;
Now given that we can put the containers for the rows in a wrapper .wrapper
Then we tall it which "row" each of the sections belongs in. grid-row: 2/2; for the content for example in row 2 (start and end)
I took a good bit of liberty with your CSS (it is still a "lot" just for this) specifically, I added borders to show where things are - you will want to remove those but I did it to illustrate where is "is" in the flow.
This is by no means "perfect" but just a very quick place to build from.
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
padding: 0;
margin: 0;
border: solid orange 3px;
}
.wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
border: lime 4px dashed;
}
.navbar-container {
border: red 4px solid;
grid-row: 1/1;
display: flex;
align-items: start;
margin: 0rem;
}
.content-container {
font-family: sans-serif;
display: grid;
place-items: center;
grid-row: 2/2;
border: blue 1px solid;
}
.footer-container {
padding-top: 2rem;
display: grid;
grid-template-rows: auto 1fr auto;
border: cyan 1px solid;
}
.footer-content {
display: grid;
grid-template-rows: 1fr auto 1fr;
align-items: center;
justify-items: center;
}
.footer-bottom {
grid-row: 3/3;
align-text: center;
padding: 0.25rem;
border: dashed blue 1px;
}
.navbar {
height: 5rem;
width: 100%;
background-color: #808080;
font-family: 'Roboto', sans-serif;
}
.navbar>.logo {
width: 140px;
height: auto;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 50px;
padding-right: 50px;
border: solid 1px green;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
transition: 0.2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
user-select: none;
}
.buttons {
display: flex;
flex-direction: row;
margin-top: 1rem;
margin-bottom: 1rem;
}
.buttons button {
margin: 1rem;
}
.buttons button {
flex: auto;
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons button:hover {
background: #4b79b4;
}
.socials {
list-style: none;
display: flex;
align-items: middle;
justify-content: center;
}
.socials li {
margin-right: 10px;
}
.footer-bottom {
font-size: 0.75rem;
background-color: #737373;
text-align: center;
width: 100%;
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-container">
<img class="logo" src="logo.png">
<ul class="menu-items">
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<div class="center content-container">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
</div>
<footer class="footer-container">
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
</body>
</html>
I am practicing my layout but I'm facing a problem with my layout. I'm a beginner with flex and grid CSS. As you can see in the picture the horizontal scrollbar shows when the screen width is 1440 or above. I don't want to show that. I also tried the overflow-x: hidden but it always shows. How can I fix that? Thanks so much!
This is my code:
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#100;300;400;500;600;800&display=swap");
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.5;
color: #262626;
}
a {
text-decoration: none;
color: #262626;
}
ul,
li,
ol {
list-style: none;
margin: 0;
padding: 0;
}
.btn {
width: 105px;
cursor: pointer;
height: 36px;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 36px;
border-radius: 20px;
text-transform: uppercase;
border: none;
}
.btn-none {
color: #037cff;
background: #fff;
}
.btn-primary {
color: #fff;
background: #037cff;
}
.btn-secondary {
color: #037cff;
background: #e6f2ff;
}
.section-title {
font-size: 32px;
}
.main-container {
position: relative;
width: 100%;
height: 100%;
max-width: 1200px;
margin: 0 auto;
align-items: center;
padding: 0 20px;
}
.main-container .nav-section {
position: absolute;
top: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
padding: 20px 0;
}
.main-container .nav-section .logo-container h2 {
font-size: 20px;
color: #007cff;
width: 128px;
margin: 0;
cursor: pointer;
}
.main-container .nav-section ul.menu-container {
display: flex;
}
.main-container .nav-section ul li {
padding: 0 10px;
}
.main-container .nav-section ul li a {
font-size: 14px;
}
.main-container .nav-section .btn-container {
display: flex;
align-items: center;
justify-content: flex-start;
}
.main-container .hero-container {
width: 100%;
display: grid;
height: calc(100vh - 80px);
grid-template-columns: repeat(2, 1fr);
padding-top: 100px;
column-gap: 12px;
align-items: center;
margin-bottom: 50px;
}
.main-container .hero-container .hero-text-container {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 580px;
}
.main-container .hero-container .hero-text-container h1 {
font-size: 48px;
font-weight: 800;
margin: 0;
}
.main-container .hero-container .hero-text-container h1 span {
color: #007cff;
}
.main-container .hero-container .hero-text-container p:last-child {
font-size: 16px;
font-weight: 400;
}
.main-container .hero-container .hero-image-container img {
max-width: 580px;
max-height: 560px;
height: auto;
width: 100%;
vertical-align: bottom;
margin-top: 25px;
}
.main-container .hero-container button {
width: 300px;
border-radius: 8px;
height: 55px;
margin-bottom: 100px;
}
<!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>Gadget Store</title>
</head>
<body>
<div class="main-container">
<!-- Nav Section -->
<nav class="nav-section">
<div class="logo-container">
<h2>Gadget <span>Zone</span></h2>
</div>
<ul class="menu-container">
<li>Home</li>
<li>Reviews</li>
<li>Deals</li>
<li>Gears</li>
<li>Gaming</li>
<li>Entertainment</li>
</ul>
<div class="btn-container">
<button class="btn btn-none">Sign In</button>
<button class="btn btn-primary btn-rad">Login</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-container">
<div class="hero-text-container">
<h1>
Best way to <br />
find your <span>gadget</span> needs.
</h1>
<p>
Find the latest technology news and expert tech product reviews.
<br />
Learn about the latest gadgets and consumer tech products for
entertainment, gaming, lifestyle and more.
</p>
<p>All gadgets are priced to be customer-friendly.</p>
</div>
<div class="hero-image-container">
<img src="https://svgshare.com/i/b9d.svg" alt="Hero" />
</div>
<button class="btn btn-secondary">Learn more</button>
</section>
<!-- Reviews Section -->
<section class="reviews-section">
<h1 class="section-title">Latest Reviews</h1>
</section>
</div>
</body>
</html>
Hiding overflow isn't usually a solution--it just masks problems. The best approach in cases like this is often to start removing widths from things. You're forcing some that don't help.
Here, set the left value of your navbar so it's in frame. You may need to add padding to move the logo and button over.
Then, remove the width rule from the main container element.
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#100;300;400;500;600;800&display=swap");
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.5;
color: #262626;
}
a {
text-decoration: none;
color: #262626;
}
ul,
li,
ol {
list-style: none;
margin: 0;
padding: 0;
}
.btn {
width: 105px;
cursor: pointer;
height: 36px;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 36px;
border-radius: 20px;
text-transform: uppercase;
border: none;
}
.btn-none {
color: #037cff;
background: #fff;
}
.btn-primary {
color: #fff;
background: #037cff;
}
.btn-secondary {
color: #037cff;
background: #e6f2ff;
}
.section-title {
font-size: 32px;
}
.main-container {
position: relative;
height: 100%;
max-width: 1200px;
margin: 0 auto;
align-items: center;
padding: 0 20px;
}
.main-container .nav-section {
position: absolute;
left: 0; /* <----------------------------------------- HERE */
top: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
padding: 20px 0;
}
.main-container .nav-section .logo-container h2 {
font-size: 20px;
color: #007cff;
width: 128px;
margin: 0;
cursor: pointer;
}
.main-container .nav-section ul.menu-container {
display: flex;
}
.main-container .nav-section ul li {
padding: 0 10px;
}
.main-container .nav-section ul li a {
font-size: 14px;
}
.main-container .nav-section .btn-container {
display: flex;
align-items: center;
justify-content: flex-start;
}
.main-container .hero-container {
display: grid;
height: calc(100vh - 80px);
grid-template-columns: repeat(2, 1fr);
padding-top: 100px;
column-gap: 12px;
align-items: center;
margin-bottom: 50px;
}
.main-container .hero-container .hero-text-container {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 580px;
}
.main-container .hero-container .hero-text-container h1 {
font-size: 48px;
font-weight: 800;
margin: 0;
}
.main-container .hero-container .hero-text-container h1 span {
color: #007cff;
}
.main-container .hero-container .hero-text-container p:last-child {
font-size: 16px;
font-weight: 400;
}
.main-container .hero-container .hero-image-container img {
max-width: 580px;
max-height: 560px;
height: auto;
width: 100%;
vertical-align: bottom;
margin-top: 25px;
}
.main-container .hero-container button {
width: 300px;
border-radius: 8px;
height: 55px;
margin-bottom: 100px;
}
<div class="main-container">
<!-- Nav Section -->
<nav class="nav-section">
<div class="logo-container">
<h2>Gadget <span>Zone</span></h2>
</div>
<ul class="menu-container">
<li>Home</li>
<li>Reviews</li>
<li>Deals</li>
<li>Gears</li>
<li>Gaming</li>
<li>Entertainment</li>
</ul>
<div class="btn-container">
<button class="btn btn-none">Sign In</button>
<button class="btn btn-primary btn-rad">Login</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-container">
<div class="hero-text-container">
<h1>
Best way to <br />
find your <span>gadget</span> needs.
</h1>
<p>
Find the latest technology news and expert tech product reviews.
<br />
Learn about the latest gadgets and consumer tech products for
entertainment, gaming, lifestyle and more.
</p>
<p>All gadgets are priced to be customer-friendly.</p>
</div>
<div class="hero-image-container">
<img src="https://svgshare.com/i/b9d.svg" alt="Hero" />
</div>
<button class="btn btn-secondary">Learn more</button>
</section>
<!-- Reviews Section -->
<section class="reviews-section">
<h1 class="section-title">Latest Reviews</h1>
</section>
</div>
I am working on a new site at the moment, and I'm wondering how I would go about making the sidebar responsive, meaning that:
it moves from the left to the top (not sticky);
the links turn into a hamburger icon;
when the hamburger icon is tapped, a full-screen menu appears (transparent colour), withthe available links centered on the screen, and an "X" to dismiss the menu in the top right;
both the hamburger icon and the logo are centered vertically in the nav, with the logo aligned to the left and the hamburger icon to the right;
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Maestoso Digital</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav id="nav">
<img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
<ul id="nav-links">
<li id="active">Home</li>
<li>Hosting</li>
<li>Cloud Deployment</li>
<li>System Administration</li>
<li>Contact</li>
</ul>
<form action="customers.html">
<input id="customers-button" type="submit" value="Existing Customers" />
</form>
</nav>
<main>
<div id="header">
<img id="header-img" src="img/header.png" alt="Picture of data centre">
<h1 id="header-title">Welcome</h1>
</div>
<div id="content">
<h1>We are an internet service provider for the modern digital age!</h1>
<p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>
<footer>
<p>© Maestoso Digital. All rights reserved.</p>
</footer>
</div>
</main>
</body>
</html>
And here's my CSS:
#import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
box-sizing: border-box;
font-family: "Share Tech", sans-serif;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #ed15ac;
}
a:hover {
font-weight: bold;
color: #ed1c51;
}
#content {
margin-top: 50px;
margin-left: 310px;
margin-right: 10px;
padding-bottom: 2.5rem;
}
p, ul, li {
font-size: 16pt;
}
#nav {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #dbdbdb;
align-items: center;
z-index: 10;
}
#media screen and (max-width: 700px) {
#nav {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
float: right;
}
#nav a {float: left;}
div#content {margin-left: 0; padding: 5px;}
}
#media screen and (max-width: 400px) {
#nav a {
text-align: center;
float: none;
}
}
nav img {
display: block;
margin-bottom: 35px;
padding-top: 20%;
max-width: 150px;
}
#nav-links {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16pt;
}
#nav-links:not(:last-child) {
margin-bottom: 50px;
}
p {
font-size: 16pt;
font-color: #1a1a1a;
}
h1 {
font-size: 24pt;
font-color: #000;
}
input {
background-color: #ed15ac;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
input:hover {
background-color: #ed1c51;
color: white;
cursor: pointer;
}
#header {
position: relative;
}
#header-title {
position: absolute;
bottom: 5px;
left: 310px;
color: white;
opacity: 60%;
font-size: 120px;
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
footer {
padding-top: 20px;
bottom: 0;
width: 100%;
height: 2.5rem;
text-align: center;
}
I have tried everything that I can think of, and just can't get it to work. Any suggestions would be hugely appreciated.
Yours, Antiquis
This is a very basic example of a toggleable menu, but you need at least a little bit of javascript to toggle an .open class on your navigation container. The .open adds display: block, while by default in the mobile css it's display:none so the menu is hidden at first.
Or if you want to animate the appearance of the menu you'd be toggling the visibility and height instead for example - there are different implementations for this, I suggest inspecting other website's menu codes at a small viewport size to see how they've implemented their mobile navs for ideas.
I have not put these styles inside media queries in my example so you can clearly see it in action, and not have to resize the window.
function navToggle() {
document.getElementById('nav-links').classList.toggle("open");
}
#import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
box-sizing: border-box;
font-family: "Share Tech", sans-serif;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #ed15ac;
}
a:hover {
font-weight: bold;
color: #ed1c51;
}
#content {
margin-top: 50px;
margin-left: 310px;
margin-right: 10px;
padding-bottom: 2.5rem;
}
p,
ul,
li {
font-size: 16pt;
}
#nav {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #dbdbdb;
align-items: center;
z-index: 10;
}
nav img {
display: block;
margin-bottom: 35px;
padding-top: 20%;
max-width: 150px;
}
#nav-links {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16pt;
}
#nav-links:not(:last-child) {
margin-bottom: 50px;
}
p {
font-size: 16pt;
font-color: #1a1a1a;
}
h1 {
font-size: 24pt;
font-color: #000;
}
input {
background-color: #ed15ac;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
input:hover {
background-color: #ed1c51;
color: white;
cursor: pointer;
}
#header {
position: relative;
}
#header-title {
position: absolute;
bottom: 5px;
left: 310px;
color: white;
opacity: 60%;
font-size: 120px;
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
footer {
padding-top: 20px;
bottom: 0;
width: 100%;
height: 2.5rem;
text-align: center;
}
/*for purposes of demonstration, normally you stick this code in a media query, hide the hamburger toggle on desktop! */
#nav-links {
display: none;
}
#nav-links.open {
display: block;
}
#media screen and (max-width: 700px) {
#nav {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
float: right;
}
#nav a {
float: left;
}
div#content {
margin-left: 0;
padding: 5px;
}
}
#media screen and (max-width: 400px) {
#nav a {
text-align: center;
float: none;
}
}
<nav id="nav">
<img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
<div class="hamburger-cont"><button id="hamburger-toggle" onclick="navToggle()">☰</button></div>
<ul id="nav-links">
<li id="active">Home</li>
<li>Hosting</li>
<li>Cloud Deployment</li>
<li>System Administration</li>
<li>Contact</li>
</ul>
<form action="customers.html">
<input id="customers-button" type="submit" value="Existing Customers" />
</form>
</nav>
<main>
<div id="header">
<img id="header-img" src="img/header.png" alt="Picture of data centre">
<h1 id="header-title">Welcome</h1>
</div>
<div id="content">
<h1>We are an internet service provider for the modern digital age!</h1>
<p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer
ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>
<footer>
<p>© Maestoso Digital. All rights reserved.</p>
</footer>
</div>
</main>
#import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
box-sizing: border-box;
font-family: "Share Tech", sans-serif;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #ed15ac;
}
a:hover {
font-weight: bold;
color: #ed1c51;
}
#content {
margin-top: 50px;
margin-left: 310px;
margin-right: 10px;
padding-bottom: 2.5rem;
}
p,
ul,
li {
font-size: 16pt;
}
#nav {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #dbdbdb;
align-items: center;
z-index: 10;
}
.nav-links {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.nav-links li {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.navigation a:hover,
.navigation a:focus {
color: #f1f1f1;
}
#hamburger {
display: none;
}
.navigation .closebtn {
display: none;
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-width: 700px) {
#nav {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
float: right;
}
#nav a {
float: left;
}
div#content {
margin-left: 0;
padding: 5px;
}
}
#media screen and (max-width: 400px) {
#hamburger {
display: block;
}
.navigation {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
#nav a {
text-align: center;
float: none;
}
.navigation a {
font-size: 20px
}
.navigation .closebtn {
display: block;
font-size: 40px;
top: 15px;
right: 35px;
}
li {
padding: 10px;
}
#nav-links {
text-align: center;
margin-top: 40%;
}
#header {
position: relative;
top: 167px;
left: -303px;
}
}
nav img {
display: block;
margin-bottom: 35px;
padding-top: 20%;
max-width: 150px;
}
#nav-links {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16pt;
}
#nav-links:not(:last-child) {
margin-bottom: 50px;
}
p {
font-size: 16pt;
color: #1a1a1a;
}
h1 {
font-size: 24pt;
color: #000;
}
input {
background-color: #ed15ac;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
input:hover {
background-color: #ed1c51;
color: white;
cursor: pointer;
}
#header {
position: relative;
}
#header-title {
position: absolute;
bottom: 5px;
left: 310px;
color: white;
opacity: 60%;
font-size: 95px;
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
footer {
padding-top: 20px;
bottom: 0;
width: 100%;
height: 2.5rem;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Maestoso Digital</title>
<link rel="stylesheet" type="text/css" href="stack.css" />
</head>
<body>
<nav id="nav">
<img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
<div id="myNav" class="navigation">
×
<ul id="nav-links">
<li id="active">Home</li>
<li>Hosting</li>
<li>Cloud Deployment</li>
<li>System Administration</li>
<li>Contact</li>
</ul>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()" id="hamburger">☰</span>
<form action="customers.html">
<input id="customers-button" type="submit" value="Existing Customers" />
</form>
</nav>
<main>
<div id="header">
<img id="header-img" src="img/header.png" alt="Picture of data centre">
<h1 id="header-title">Welcome</h1>
</div>
<div id="content">
<h1>We are an internet service provider for the modern digital age!</h1>
<p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer
ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>
<footer>
<p>© Maestoso Digital. All rights reserved.</p>
</footer>
</div>
</main>
<script>
function openNav() {
document.getElementById("myNav").style.display = "block";
}
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
</script>
</body>
</html>