Hi everyone,
I have just completed Dasmoto’s Arts & Crafts - off platform project. Any feedback would be greatly appreciated. here is my code
<!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>Dasmoto's Arts & Crafts</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];200;300;700&display=swap" rel="stylesheet">
<link href="./resources/css/index.css" rel='stylesheet' type='text/css'/>
</head>
<body>
<nav class="navigation">
<ul>
<li><a href="#main-header" class="link">Home</a></li>
<li><a href="#art-section" class="link">Paint</a></li>
<li><a href="#art-section" class="link">Brushes</a></li>
<li><a href="#art-section" class="link">Frames</a></li>
<li><a href="#foot" class="link">Contacts</a></li>
</ul>
</nav>
<header id="main-header">
<div class="head-img">
<h1>Dasmoto's Arts & Crafts</h1>
<a href="#art-section" class="btn">Discover Our Art Section</a>
</div>
</header>
<section id="art-section">
<div class="container">
<header>
<h2>Art Selection</h2>
<p>Enjoy great prices, with fast delivery and efficient customer service.
</p>
</header>
<div class="gallery">
<div>
<h3>Brushes</h2>
<img src="./resources/images/hacksaw.webp" alt="paint Brushes">
<h4>Hacksaw Brushes</h3>
<p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability
to hold paint in large amounts. Available in different sizes. Starting at $3.00 / brush.</p>
<a href="" class="shop">Shop now</a>
</div>
<div>
<h3>Frames</h2>
<img src="./resources/images/frames.webp" alt="Painting Frames">
<h4>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE.
Select frames can be sanded and painted according to your needs. Starting at $2.00 / frame.</p>
<a href="" class="shop">Shop now</a>
</div>
<div>
<h3>Paint</h2>
<img src="./resources/images/finnish.jpeg" alt="Paint">
<h4>Clean Finnish Paint</h3>
<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.).
Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.
Starting at $5.00 / tube.</p>
<a href="" class="shop">Shop now</a>
</div>
</div>
</div>
</section>
<footer id="foot">
<div class="contact">
<p class="small">Find me on Twitter, Facebook and Instagram</p>
<h6>© Copyright. All Rights Reserved.</h6>
</div>
</footer>
</body>
</html>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 16px;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.55;
}
.head-img {
height: 730px;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg");
background-size: cover;
margin: auto;
}
.navigation {
background-color: aliceblue;
height: 100px;
margin: 0 auto;
position: fixed;
width:100%;
z-index: 1;
text-align: center;
}
.navigation li {
display: inline-block;
margin: 20px 20px;
font-size: 14px;
padding-top: 20px;
padding-bottom: 20px;
}
.link {
font-size: 14px;
color: black;
text-decoration: none;
}
#main-header {
text-align: center;
position: relative;
}
h1 {
color: rgb(249, 241, 192);
font-family: 'Poppins', sans-serif;
font-weight: bold;
font-size: 60px;
margin: auto;
padding: 300px 40px 60px;
text-align: centers;
}
.head-img a {
text-decoration: none;
font-size: 14px;
color: aliceblue;
background-color: rgb(205, 133, 63);
padding: 16px 40px;
font-weight: 600;
}
h2 {
font-size: 30px;
font-weight: 600;
margin: auto;
padding-top: 60px;
text-align: center;
}
h3 {
background-color: lightcoral;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
width: 250px;
margin: 0 auto;
}
h4 {
font-size: 16px;
font-weight: bold;
padding-top: 20px;
padding-bottom: 20px;
}
.container header p {
font-size: 16px;
padding: 10px;
text-align: center;
}
#art-section {
background-color: floralwhite;
height: 950px;
margin-left: 0 auto;
margin-right: 0 auto;
text-align: center;
position: relative;
overflow: scroll;
}
.gallery {
width: 90%;
margin-left: 40px;
margin-right: 40px;
}
.gallery div {
width: 350px;
height: 650px;
display: inline-block;
padding: 40px;
margin-top: 20px;
vertical-align: top;
}
.gallery div p {
font-size: 16px;
height: 200px;
padding-bottom: 20px;
}
.shop {
background-color: transparent;
color: peru;
box-sizing: border-box;
display: inline-flex;
padding-top: 30px;
padding-bottom: 30px;
text-decoration: underline;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
}
footer .contact {
background-color: white;
text-align: center;
height: 580px;
}
.small {
font-size: 30px;
padding-top: 200px;
padding-bottom: 40px;
}