Here is my code:
https://codepen.io/malyikaj/pen/QWKNVzN
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
/* * { border: 1px solid black; } */
html {}
* {
box-sizing: border-box;
}
.slutty-title {
text-align: font-size: 40px;
font-family: 'Dancing Script', cursive;
color: #d98695;
font-size: 40px;
font-weight: bold;
padding-left: 120px;
}
.brownie-title {
font-size: 30px;
font-weight: bold;
color: #76341e;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 440px;
font-family: arial;
margin-left: 50px;
}
.italic {
font-style: italic;
font-weight: bolder;
}
.bold {
font-weight: bold;
color: #76341e;
letter-spacing: 1.5px;
}
p {
line-height: 1.4;
padding: 0px 20px;
}
.price {
font-size: 28px;
text-align: center;
color: #d98695;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #d98695;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
body {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
nav {
background: #d98695;
height: 80px;
width: 100vw;
}
label.logo {
color: white;
font-size: 65px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
font-family: 'Dancing Script', cursive;
letter-spacing: 3px;
}
label.logo-2 {
margin: -100px;
line-height: 80px;
color: white;
font-size: 25px;
padding: 0px;
font-family: 'Dancing Script', cursive;
letter-spacing: 1px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-decoration: none;
}
a:hover {
transition: .3s;
text-transform: none;
background: #df99a6;
}
.checkbtn {
font-size: 30px;
color: #df99a6;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#page-container {
position: relative;
min-height: 100vh;
}
footer {
box-sizing: border-box;
place-items: center;
font-family: 'Poppins', sans-serif;
text-align: right;
background-color: #d98695;
color: white;
padding: 0px;
position: absolute;
bottom: 0;
height: 60px;
width: 100vw;
/* position: fixed;
z-index: 1; */
}
#media (max-width: 952px) {
label.logo {
font-size: 30px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background: none;
color: #e18e96;
}
#check:checked~ul {
left: 0;
}
}
section {
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Sweet T's Vegan Bakery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Montserrat:wght#100;400&family=Nerko+One&display=swap" rel="stylesheet">
</head>
<body>
<div>
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Sweet T's </label>
<label class="logo-2">Vegan Bakery</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Order</li>
<li>About</li>
<li>FAQ's</li>
<li>Contact </li>
</ul>
</nav>
</header>
<main>
<h2></h2>
<div class="card">
<img src="http://placeimg.com/440/280/any">
<alt="Denim Jeans" style="width:100%">
<div class=fonts>
<span class="slutty-title">Slutty</span>
<span class="brownie-title">Brownie</span>
<p>One layer of chocolate chip cookie, Oreo cookie center, topped with a dense layer of brownie.
<br>
<br> You may not be its <span class="italic">first</span>, but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
<br>
<br>
<span class="bold">Gluten free. Nut free. Vegan.</span>
<p class="price">$5.00</p>
</p>
<p><button>Add to Cart</button></p>
</div>
<!--
background-color: #434a52;
Slutty Brownie
Bite into a base layer of chocolate chip cookie, middle layer of Oreo Cookie, and decadent a top layer of brownie. Gluten free. Nut Free. Vegan.
You may not be its first…but this is THE first ever product from Sweet T’s. Heart shaped, because it was made with love!
Slutty Blondie
Vegan white Chocolate Blondie with vanilla Oreo style in the middle and cookie on the bottom. Blondes have more fun.Decadent.
Slutty Pumpkin Cheesecake
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Caramel Apple Pie Cookie
Sugar cookie dough baked with apple pie filling. Topped with sugar cookie lattice pie top. These are the newest homemade sweets that makes an utterly divine dessert. A great desert when you’re craving apple pie—but not the ENTIRE apple pie.
Pumpkin Cheesecake Muffin
Came for the fall and stayed a favorite. *Seasonal* #NomNom
S’Mores Cookies
Chocolate chip cookie with melted vegan marshmallow in the middle. Outrageously good.
Chocolate Chip Cookies
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Birthday? Anniversary? Work Event? Customizable orders available, just contact us.
Find us:
Uber Eats
GrubHub
Bougie Brews: 52 Main St, Yonkers, NY 10701
VeganDale Food Fest
Baked a cake for Wikipedia
Cupcake cutie boutique: 8 S 6th Ave, Mt Vernon, NY 10550 (Enjoy two dollar Tuesdays)
Vegan Grille 1201 1201 Castle Hill Ave, The Bronx, NY 10462
Pizza Gusta Super Foodtown of Throggs Neck : 2945-65 Bruckner Blvd, The Bronx, NY 10465
Plantega
Stay sweet my friends.
Instagram : sweet_teees
Phone: 914-297-9439
Email Us: sweettvegan#gmail.com
Sweet simple vegan included my sweets in their 2020 holiday gift guide.
made with all natural and wholesome ingredients.
</main>
Email Code
Email Us
Email sign up
<input type="text" placeholder="Enter email">
<input type="submit" value="Signup">
-->
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer">
<p class=c opyright>©2021 Sweet T's Vegan Bakery</p>
</footer>
</div>
</body>
</html>
My footer is also not expanding to the full length of the viewport. And my product card is going all the way to the bottom of the page. Any ideas?
The footer tag was inside the #card div and the #card div had a margin on the left side. This is why it was not using the entire screen width.
You would need to move it to inside the <body> tag and just after the #card div. But after doing it the footer would go on a crazy position because it had a position: absolute, just remove the position property and it will work. I'll just put in the snippet.
And your card heigh problem was that you were using height 100vh in the #page-container this was making the div expand beyond necessary. Changing it to height: 100% would work. And I also would suggest setting margin and padding in the bottom of the #page-container.
Like this:
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
/* * { border: 1px solid black; } */
html {
}
* {
box-sizing: border-box;
}
.slutty-title {
text-align: font-size: 40px;
font-family: 'Dancing Script', cursive;
color: #d98695;
font-size: 40px;
font-weight: bold;
padding-left: 120px;
}
.brownie-title {
font-size: 30px;
font-weight: bold;
color: #76341e;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 440px;
font-family: arial;
margin-left: 50px;
}
.italic {
font-style: italic;
font-weight: bolder;
}
.bold {
font-weight: bold;
color: #76341e;
letter-spacing: 1.5px;
}
p {
line-height: 1.4;
padding: 0px 20px;
}
.price {
font-size: 28px;
text-align: center;
color: #d98695;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #d98695;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
body{
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
nav{
background: #d98695;
height: 80px;
width: 100vw;
}
label.logo {
color: white;
font-size: 65px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
font-family: 'Dancing Script', cursive;
letter-spacing: 3px;
}
label.logo-2 {
margin: -100px;
line-height: 80px;
color: white;
font-size: 25px;
padding: 0px;
font-family: 'Dancing Script', cursive;
letter-spacing: 1px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 16px 24px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-decoration: none;
}
a:hover{
transition: .3s;
text-transform: none;
background: #df99a6;
}
.checkbtn{
font-size: 30px;
color: #df99a6;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
<!-- changed -->
#page-container {
position: relative;
min-height: 100%;
padding-bottom: 15px;
margin-bottom: 15px;
}
<!-- changed -->
footer {
box-sizing: border-box;
place-items: center;
font-family: 'Poppins', sans-serif;
text-align: right;
background-color: #d98695;
color: white;
padding: 0px;
bottom: 0;
height: 60px;
width: 100vw;
z-index: 1; */
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #e18e96;
}
#check:checked ~ ul{
left: 0;
}
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Sweet T's Vegan Bakery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Montserrat:wght#100;400&family=Nerko+One&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Sweet T's </label>
<label class="logo-2">Vegan Bakery</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Order</li>
<li>About</li>
<li>FAQ's</li>
<li>Contact </li>
</ul>
</nav>
</header>
<main>
<h2></h2>
<div class="card">
<img src="http://placeimg.com/440/280/any"><alt="Denim Jeans" style="width:100%">
<div class =fonts>
<span class ="slutty-title">Slutty</span>
<span class ="brownie-title">Brownie</span>
<p>One layer of chocolate chip cookie, Oreo cookie center, topped with a dense layer of brownie.
<br>
<br>
You may not be its <span class="italic">first</span>, but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
<br>
<br>
<span class="bold">Gluten free. Nut free. Vegan.</span>
<p class="price">$5.00</p>
</p>
<p><button>Add to Cart</button></p>
</div>
<div id="page-container">
</div>
<div id="content-wrap">
<!-- all other page content -->
</div>
</div>
<!-- changed location -->
<footer id="footer">
<p class= copyright>©2021 Sweet T's Vegan Bakery</p>
</footer>
</body>
</html>
For more tips how to improve your code I would suggest:
CSS Units and How to debug your front-end
You just forgot to close your <div> tag. Once you fix that, your problem goes away.
<div class="card">
<img src="http://placeimg.com/440/280/any">
<alt="Denim Jeans" style="width:100%">
<div class=fonts>
<span class="slutty-title">Slutty</span>
<span class="brownie-title">Brownie</span>
<p>One layer of chocolate chip cookie, Oreo cookie center, topped with a dense layer of brownie.
<br>
<br> You may not be its <span class="italic">first</span>, but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
<br>
<br>
<span class="bold">Gluten free. Nut free. Vegan.</span>
<p class="price">$5.00</p>
</p>
<p><button>Add to Cart</button></p>
</div>
</div>
I've added </div> at the end.
Related
I need my work done soon, but I don't have access to my bigger monitor. I assume the teacher also has a big monitor where he'll look at my work, so it shouldn't be a problem.
But my site only looks normal on 70% and I'm having a big headache trying to make it work so I have to work on 70%.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 50%;
height: 8vh;
margin: auto;
align-items: center;
}
.nav-links,
.search-container {
display: flex;
}
nav {
position: relative;
flex: 1;
}
.nav-links {
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link {
color: #ffffff;
font-size: 18px;
text-decoration: none;
}
.search-container {
flex: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
background-color: #c4c4c4;
display: flex;
width: 50%;
height: 30vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
width: 500px;
height: 30px;
margin: 20px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
text-align: justify;
width: 70%;
font-size: 13px;
}
.sideimage {
position: absolute;
right: 640px;
top: 390px;
}
.polygon {
position: absolute;
right: 960px;
bottom: 260px;
width: 0;
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
background-color: #222222;
display: flex;
width: 50%;
height: 29vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.piirkonnad p {
position: absolute;
left: 554px;
bottom: 270px;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
.copyright p {
position: absolute;
right: 803px;
bottom: 24px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
position: absolute;
right: 550px;
bottom: -2px;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</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>
<style>
body {
background-color: #000000;
}
</style>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</nav>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance" ;>
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer" ;>
</div>
<div class="polygon"></div>
</div>
</main>
<section>
<div class="piirkonnad">
<p>Piirkonnad</p>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
I've heard about responsive design already, but I can't figure it out. I'm not the greatest at coding and it was hard to achieve what I have so help is appreciated a ton.
Your code has some mistakes on it, you have ; on your img element and your style element should be in the head tag, and the reason why your website is not responsive is because you are using position:absolute, keep your website simple, or if you really want to still use position:absolute, then that div should be contained on another div but set it it to position:relative.
Anyways, I fixed it and now totally responsive, here it is:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
padding-top:20px;
}
header{
display:flex;
justify-content:space-evenly;
width: 50%;
margin: auto;
flex-wrap:wrap;
}
.nav-links{
display: flex;
}
.nav-links{
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link{
color: #ffffff;
font-size: 18px;
padding:10px;
text-decoration: none;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
padding:10px;
background-color: #c4c4c4;
width: 50%;
margin: auto;
}
.search-container{
min-width:30px
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
padding:5px;
margin: 10px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
width: 70%;
font-size: 13px;
}
.polygon {
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
position:relative;
display:flex;
background-color: #222222;
display: flex;
width: 50%;
padding-top:30px;
height: 29vh;
margin: auto;
justify-content:space-evenly;
}
.piirkonnad p {
text-align:center;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
footer{
margin-top:1em;
}
.copyright p {
text-align:center;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
display:flex;
justify-content:center;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</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">
<style>
body {
background-color: #000000;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
</nav>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance">
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
</div>
</div>
<section>
<div class="piirkonnad">
<div class="polygon"></div>
<p>Piirkonnad</p>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer">
</div>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
</main>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
For make a website responsive you need to avoid px and use %, vw (viewport width) or vh (viewport height).
After in your css you need to declare #media only screen and (max-width: screenSizepx) and inside make the responsive layout for each screen.
Usually i make this with:
#media only screen and (max-width: 1000)
#media only screen and (max-width: 550px)
#media only screen and (max-width: 400px)
Here is the HTML. It looks correct in full screen. When resizing the browser, specifically making it smaller, the nav bar elements overlap each other. I can't figure out how to fix it. I've also included the CSS. I'm guessing it has to do with the positioning? I tried adding relative position to the nav element, but it didn't fix the problem. Any input is appreciated. Thank you.
#mainNav {
margin-left: 20px;
margin-top: 40px;
}
.dropButton {
background-color: #F4D35E;
color: #083D77;
font-weight: bold;
font-family: Futura, sans-serif;
text-decoration: none;
padding: 16px;
font-size: 28px;
border: none;
cursor: pointer;
}
.dropButton a {
text-decoration: none;
}
.dropDown a:hover {
color: #ED2E07;
}
.dropDown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #F4D35E;
color: #083D77;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-top: 15px;
}
.dropdown-content a {
padding: 12px 16px;
text-align: center;
text-decoration: none;
display: block;
color: #083D77;
}
.featRecipe {
display: flex;
flex-wrap: nowrap;
margin-left: 75px;
}
.drink1,
.drink2 {
margin-right: 110px;
}
.featRecipe li {
max-width: 300px;
}
.drinkOfTheDay {
display: flex;
flex-wrap: nowrap;
margin-left: 75px;
}
.imgOTD,
.image,
.ingr {
margin-right: 75px;
}
#libNav li {
display: inline;
padding-right: 10px;
}
.library {
margin-left: 20px;
margin-top: 40px;
}
.drink {
display: flex;
flex-wrap: nowrap;
}
.top {
text-align: center;
margin-bottom: 40px;
}
html {
background: #EBEBD3;
}
#siteTitle {
font-family: "Brush Script MT", sans-serif;
text-align: center;
font-weight: bold;
font-size: 70px;
color: #ED2E07;
margin-bottom: 0;
margin-top: 20px;
}
#pageTitle {
margin-top: 40px;
margin-bottom: 50px;
text-align: center;
font-size: 40px;
font-family: Andale Mono, monospace;
color: #ED2E07;
}
.body {
color: #083D77;
text-align: center;
}
main {
color: #083D77;
font-family: Andale Mono, monospace;
}
main h2,h3,h4 {
color: #F95738;
}
.featRecipe h3 {
text-align: center;
color: #083D77;
font-family: Andale Mono, monospace;
}
.dir li {
max-width: 500px;
}
#libNav a {
font-size: 20px;
color: #083D77;
}
.library h3 {
font-size: 24px;
font-weight: bold;
}
.dropdown-content a:hover {
background-color: #EBEBD3;
}
.dropDown:hover .dropdown-content {
display: block;
}
.dropDown:hover .dropButton {
background-color: #EE964B;
}
img {
border: solid 5px #F95738;
}
#libNav a:visited {
color: #083D77;
}
.top a, a:visited {
color: #083D77;
font-size: 16px;
}
.dropButton a:visited {
color: #083D77;
}
.dropdown-content a:hover {
color: #ED2E07;
}
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta name="author" content="Roman Kudryashov" />
<meta name="description" content="Drinkmastery.com provides a library of cocktails for drink enthusiasts, connoisseurs, and restaurant professionals." />
<meta name="keywords" content="coktails, drinks, bar, bartending, mixology, vodka, rum, gin, tequila, whiskey, mixed drinks, recipes, liquor, liquer" />
<title>Drink Mastery</title>
<link rel="stylesheet" href="../styles/layout.css">
<link rel="stylesheet" href="../styles/format.css">
<link rel="stylesheet" href="../styles/effects.css">
<script>
function con() {
var ans = window.confirm("Are you 21+ years old?\n\nPress \"OK\" if Yes, \"Cancel\" if NO");
if (ans == false) {
window.location = "http://www.google.com";
}
}
window.setTimeout("con()", 2000);
</script>
</head>
<body>
<h1 id="siteTitle">Drink Mastery</h1>
<nav id="mainNav">
<div class="dropDown">
Home
</div>
<div class="dropDown">
Featured Cocktails
</div>
<div class="dropDown">
Seasonal Cocktails
<div class="dropdown-content">
Christmas Drinks
Spring Favorites
Summer Drinks
Fall Specials
</div>
</div>
<div class="dropDown">
Drink Library
<div class="dropdown-content">
Vodka
Rum
Gin
Tequila
Whiskey
Miscellaneous
</div>
</div>
<div class="dropDown">
Resources
<div class="dropdown-content">
Bartending Tips & Tricks
Educational Articles
</div>
</div>
<div class="dropDown">
About Us
</div>
</nav>
<h2 id="pageTitle">Welcome to Drink Mastery!</h2>
<p class="body">We strive to provide you with a complete library of various cocktail recipes! Happy mixing!</p>
<main>
<h3 id="dotd" style="font-size: 24px; font-weight: bold; color: #EE964B">Drink of the Day</h3>
<div class="drinkOfTheDay">
<img src="../images/mojito.jpg" alt="Mojito" height="300" class="imgOTD">
<div class="ingr">
<h4>Ingredients</h4>
<ul>
<li>10 fresh mint leaves</li>
<li>1/2 lime, cut into 4 wedges</li>
<li>2 ablespoons of white sugar</li>
<li>1.5 oz white rum</li>
<li>1/2 cup club soda</li>
</ul>
</div>
<div>
<h4>Directions</h4>
<ol class="dir">
<li>Place mint leaves and 1 lime wedge into a sturdy glass. Use a muddler to crush the mint and lime to release the mint oils and lime juice.</li>
<li>Add 2 more lime wedges and the sugar, and muddle again to release the lime juice.</li>
<li>Fill the glass almost to the top with ice.</li>
<li>Pour the rum over the ice, and fill the glass with carbonated water.</li>
<li>Stir, taste, and add more sugar if desired. Garnish with the remaining lime wedge.</li>
</ol>
</div>
</div>
</main>
<footer>
<p>© Created by Roman Kudryashov</p>
</footer>
</body>
</html>
Change your CSS for dropDown to
.dropDown {
position: relative;
display: inline-flex;
}
Then add some padding or margin to that so they're not touching.
When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot
Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}
Problem: The code in the css stylesheet under .row is suppose to center the navigation menu (nav) so it has the same space from left side as the title. However, it doesn't work.
I tried to use the same css properties on the nav section and that works (that part is commented out). I'm also using the .row class for the features section further down so need to get it to work, but I haven't found any solutions to it. Thanks in advance for any help.
Underneath is my code:
/*
Orange color: #e67e22
*/
/* ---------------------------------------------- */
/* Basic setup */
/* ---------------------------------------------- */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
/* border: 1px solid;*/
}
html,
body {
background-color: #fff;
color: #555;
font-family: "Lato", "Arial", "sans-serif";
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
}
/* ---------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------- */
.row { /* SITE DOESNT ADDJUST TO ROW; WORKS WITH NAV */
max-width: 1140px;
margin: 0 auto;
}
nav{
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
.box {
padding: 1%;
}
/* ---------HEADINGS-------- */
h1,
h2,
h3 {
font-weight: 300;
text-transform: uppercase;
}
h1 { /* H1 doesnt adjust according to relative font-size, nor margins */
font-size: 240%;
margin-top: 0;
margin-bottom: 30px;
color: #fff;
word-spacing: 4px;
letter-spacing: 1px;
}
h2 {
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1px;
}
h2:after {
display: block;
height: 2px;
background-color: #e67e22;
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 30px;
}
h3 {
font-size: 110%;
margin-bottom: 15px;
}
/* ---------PARAGRAPHS-------- */
.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
}
.box p {
font-size: 90%;
line-height: 145%;
}
/* ---------ICONS-------- */
.icon-big {
font-size: 350%;
display: block;
color: #e67e22;
margin-bottom: 10px;
}
/* ---------BUTTONS-------- */
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
color: #fff;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #cf6d17;
color: #fff;
}
/* ---------------------------------------------- */
/* HEADER */
/* ---------------------------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-textbox{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 60px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding-bottom: 8px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0,2;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid #e67e22;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400&display=swap" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
<title>Omnifood</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood logo"class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-textbox">
<h1>Goodbye junk food. <br> Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not fast food</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-2-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-3-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-4-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
</body>
</html>
The answer is - extra }, closing html,body
/*
Orange color: #e67e22
*/
/* ---------------------------------------------- */
/* Basic setup */
/* ---------------------------------------------- */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
/* border: 1px solid;*/
}
html,
body {
background-color: #fff;
color: #555;
font-family: "Lato", "Arial", "sans-serif";
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
/* ---------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------- */
.row { /* SITE DOESNT ADDJUST TO ROW; WORKS WITH NAV */
max-width: 1140px;
margin: 0 auto;
}
nav{
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
.box {
padding: 1%;
}
/* ---------HEADINGS-------- */
h1,
h2,
h3 {
font-weight: 300;
text-transform: uppercase;
}
h1 { /* H1 doesnt adjust according to relative font-size, nor margins */
font-size: 240%;
margin-top: 0;
margin-bottom: 30px;
color: #fff;
word-spacing: 4px;
letter-spacing: 1px;
}
h2 {
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1px;
}
h2:after {
display: block;
height: 2px;
background-color: #e67e22;
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 30px;
}
h3 {
font-size: 110%;
margin-bottom: 15px;
}
/* ---------PARAGRAPHS-------- */
.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
}
.box p {
font-size: 90%;
line-height: 145%;
}
/* ---------ICONS-------- */
.icon-big {
font-size: 350%;
display: block;
color: #e67e22;
margin-bottom: 10px;
}
/* ---------BUTTONS-------- */
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
color: #fff;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #cf6d17;
color: #fff;
}
/* ---------------------------------------------- */
/* HEADER */
/* ---------------------------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-textbox{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 60px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding-bottom: 8px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0,2;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid #e67e22;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400&display=swap" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
<title>Omnifood</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood logo"class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-textbox">
<h1>Goodbye junk food. <br> Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not fast food</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-2-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-3-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-4-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
</body>
</html>
hi there just change the style of .row like this :
.row {
width: 100%;
position: absolute;
text-align: center;
display: inline-grid;
margin-top: -147px;
right: 70px;
}
I am trying to align everything up, making the sections align and so forth. But I can't seem to get each section to line up.
Here is the link: https://codepen.io/pmurtagh4/pen/GXNzrJ
* {
box-sizing: border-box;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 14px;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-right: 30%;
margin-left: 10%;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: #74737a;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-right: 20px;
padding-left: 20px;
display: block;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 120%;
padding: 14px 28px;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800px;
color: #033048;
margin-bottom: 40px;
}
.about-book p {
font-size: 22px;
font-weight: 600px;
}
.aboutus {
background-color: pink;
margin: auto;
}
footer {
background-color: blue;
}
<!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>Raijin Studios</title>
</head>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" max-length="256" reguired="" class="field"><input class="button" type="submit" value="Get Notified"></form>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns
to the help of a strange girl who finds him and helps him remeber who he was and where he came from.</p> </section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section <footer>
<p>This will be the footer, thanking our users and readers and will display social media icons and copyright.
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
Setting margin: auto, removing display: block and setting width to 100% instead of 120% makes it look quite okay. Is this what you were looking for?
https://codepen.io/anon/pen/PdmKWQ
The main issue you are having is because of .sign-up-form width styling. It is currently set to 120%, which is making the content weird. Remove it or change it to 100%.
Second issue I found is related to font-weight. The value of it is never in px. Review doc for more info.
Third issue remove the default margin on the page.
Updated code snippet -
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 14px;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 50%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin: 5%;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: #74737a;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 100%;
height: 54px;
padding-right: 20px;
padding-left: 20px;
display: block;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
padding: 14px 28px;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
background-color: pink;
margin: auto;
}
footer {
background-color: blue;
}
<!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>Raijin Studios</title>
</head>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" max-length="256" reguired="" class="field"><input class="button" type="submit" value="Get Notified"></form>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns
to the help of a strange girl who finds him and helps him remeber who he was and where he came from.</p> </section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>This will be the footer, thanking our users and readers and will display social media icons and copyright.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
P.S. A lot of your tags don't have a closing tag. You should fix them as well.