Hello everyone! I am hoping to get some feedback on the webpage I created for the Dasmoto’s Arts & Crafts project. I’m honestly SUPER proud of it, but I know its very much not perfect. Please feel free to drop any suggestions or other feedback!
I appreciate any feedback I can get. Thanks in advance!
Here’s the html:
<!DOCTYPE html>
<html>
<head>
<title>Dasmoto's Arts & Crafts</title>
<meta charset="UTF-8">
<link href="./style.css" type="text/css" rel="stylesheet"/>
</head>
<body id="top">
<header class="background-image">
<h1 class="store-name">Dasmoto's Arts & Crafts</h1>
<nav class="navbar">
<ul>
<li class="nav-item"><a href="#brushes">Brushes</a></li>
<li class="nav-item"><a href="#frames">Frames</a></li>
<li class="nav-item"><a href="#paint">Paints</a></li>
<li class="nav-item"><a href="#top">Back to Top</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h3 class="section-head" id="brushes">Brushes</h3>
<div class="image">
<img src="./images/hacksaw.webp"/>
</div>
<div class="copy">
<h4 class="title">Hacksaw Brushes</h4>
<p class="paragraph">
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. <br><br><span class="price"> Starting at $3.00 / brush.</span>
</p>
</div>
</section>
<section>
<h3 class="section-head" id="frames">Frames</h3>
<div class="image">
<img src="./images/frames.webp"/>
</div>
<div class="copy">
<h4 class="title">Art Frames (Assorted)</h4>
<p class="paragraph">
Assorted frames made of different material, including MDF, birchwood, and
PDE. Select frames can be sanded and painted according to your needs.
<br><br><span class="price"> Starting at $2.00 / frame.</span>
</p>
</div>
</section>
<section id="bottom">
<h3 class="section-head" id="paint">Paints</h3>
<div class="image">
<img src="./images/finnish.jpeg"/>
</div>
<div class="copy">
<h4 class="title" id="paints">Clean Finnish Paint</h4>
<p class="paragraph">
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. <br><br><span class="price"> Starting at $5.00 /
tube.</span>
</p>
</div>
</section>
</main>
</body>
</html>
And here’s the CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: grey;
width: 100%;
height: 100%;
border: none;
}
header{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
}
.background-image {
background-image: url(./images/pattern.webp);
height: 100vh;
width: 100%;
border: none;
position: relative;
top: 0;
background-size: cover;
}
.store-name{
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
.navbar {
height: 10vh;
width: 100%;
position: fixed;
left: 0;
top: 90vh;
z-index: 10;
background: rgba(15, 214, 228, 0.6)
}
.nav-item {
text-decoration: none;
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
float: left;
width: 25%;
height: 10vh;
}
li a {
text-decoration: none;
font-family: Helvetica;
font-size: 2vw;
color: rgb(240, 230, 140)
}
li:hover {
background: rgba(15, 214, 228, 0.9)
}
section {
height: 100vh;
}
.section-head {
display: flex;
align-items: center;
justify-content: center;
height: 15vh;
width: 100%;
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}
.image {
display: flex;
align-items: center;
justify-content: center;
float: left;
width: 40%;
height: 90vh;
clear: none;
}
img {
height: 250px;
width: 250px;
border: 5px solid whitesmoke;
border-radius: 125px;
}
.copy {
float: right;
width: 60%;
height: 90vh;
}
.title {
position: relative;
display: flex;
align-items: center;
justify-content: center;
top: 0;
width: 100%;
height: 40%;
line-height: 40%;
text-align: center;
font-family: Helvetica;
font-weight: bold;
font-size: 3vw;
color:rgb(240, 230, 140)
}
.paragraph {
position: relative;
bottom: 0;
width: 100%;
height: 60%;
padding-left: 20%;
padding-right: 20%;
text-align: center;
font-family: Helvetica;
font-size: 2vw;
color: whitesmoke;
}
span {
font-weight: bold;
color: blue;
}
#brushes {
background-color: rgb(0, 250, 154);
}
#frames {
background-color: lightcoral;
}
#paint {
background-color: skyblue;
}
And here are some screenshots of the final product: