Hello everyone, I’m new to coding and i just finished the Dasmoto’s Arts And Crafts Project. Here is my solution, I’d appreciate any critiquing.
index.html below
<!DOCTYPE html>
<html>
<head>
<title>Dasmoto's Arts & Crafts</title>
<link href="./Resorces/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<h1 class="title">Dasmoto's Arts & Crafts</h1>
</header>
<main>
<h2 class="catagory brushes">Brushes</h2>
<h6></h6>
<h4 id="hb">Hacksaw Brushes</h4>
<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. <span class="price">Starting at $3.00 / brush.</span></p>
<h6></h6>
<h2 class="catagory frames">Frames</h2>
<h6></h6>
<h4 id="af">Art Frames</h4>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <span class="price">Starting at $2.00 / frame.</span></p>
<h6></h6>
<h2 class="catagory paint">Paint</h2>
<h6></h6>
<h4 id="cfp">Clean Finnish Paint</h4>
<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. <span class="price">Starting at $5.00 / tube.</span></p>
<h6></h6>
</main>
<footer>
<h3>Ryan Tomich</h3>
</footer>
</body>
</html>
index.css below
.title {
text-align: center;
font-weight: 300;
padding-bottom: 20px;
border-bottom: 5px solid white;
font-size: 50px;
color: white;
padding-top: 10px;
font-size: 60px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.catagory {
text-align: left;
font-family: Geneva, Tahoma, sans-serif;
border: rgb(255, 255, 255) solid 1px;
border-width: 6px;
font-size: 32px;
margin-left: 20px;
color: white;
padding-left: 5px;
}
.brushes {
background-image: url("file:///F:/Ryan_Tomich/Projects/Dasmoto's Arts & Crafts/Resorces/Images/hacksaw.webp");
background-size: cover;
height: 500px;
width: 500px;
}
.frames {
background-image: url("file:///F:/Ryan_Tomich/Projects/Dasmoto's Arts & Crafts/Resorces/Images/frames.webp");
background-size: cover;
height: 500px;
width: 500px;
}
.paint {
background-image: url("file:///F:/Ryan_Tomich/Projects/Dasmoto's Arts & Crafts/Resorces/Images/finnish.webp");
background-size: cover;
height: 500px;
width: 500px;
}
body {
background-image: url("file:///F:/Ryan_Tomich/Projects/Dasmoto's Arts & Crafts/Resorces/Images/pattern.webp");
}
p {
display: block;
padding: 10px;
position: relative;
top: 80%;
width: 60%;
background-color: rgb(255, 255, 255);
margin-left: 40px;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgb(0, 0, 0);
opacity: 0.7;
}
.price {
color: lime;
}
#hb {
border-left: white solid 2px;
margin-left: 40px;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgb(255, 255, 255);
font-size: 30px;
padding-left: 5px;
}
h6 {
border: white solid 2px;
margin-left: 40px;
}
#af {
border-left: white solid 2px;
margin-left: 40px;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgb(255, 255, 255);
font-size: 30px;
padding-left: 5px;
}
#cfp {
border-left: white solid 2px;
margin-left: 40px;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgb(255, 255, 255);
font-size: 30px;
padding-left: 5px;
}
h3 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
text-align: right;
}