Dasmoto's Arts & Crafts

I would be grateful if some one gave this the quick once over, Im confident it is correct but Ive been there before :joy:
please feel free to point out error or improvements. I reall could do with getting more social and part of the reason I joined codeacademy. thank you in advance Tommy
<-----github---->
repo
pages

or just use code here
<------ html ------>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Dasmoto's Arts & Crafts</title>
  </head>
  <body>
    <header>
      <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <main>
      <section>
        <h2 class="brushes">Brushes</h2>
        <img src="./images/hacksaw.webp" alt="">
        <h3>Hacksaw Brushes</h3>
        <p>
          Hacksaw Brushes 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>Starting at $3.00 / brush.</span>
        </p>
      </section>
      <section>
        <h2 class="frames">Frames</h2>
        <img src="./images/frames.webp" alt="">
        <h3>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. <span>Starting at $2.00 / frame.</span>
        </p>
      </section>
      <section>
        <h2 class="paint">Paint</h2>
        <img src="./images/finnish.jpeg" alt="">
        <h3>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.
          <span>Starting at $5.00 / tube.</span>
        </p>
      </section>
    </main>
  </body>
</html>

<-------------- css ---------->

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}
body {
  margin: 0 0.5rem;
}
h1 {
  background-image: url(./images/pattern.webp);
  font-size: 100px;
  font-weight: bold;
  color: khaki;
  text-align: center;
}

h1,
h2,
h3,
p {
  font-family: Helvetica;
  margin: 0.5rem 0;
}
h2 {
  font-size: 2rem;
  font-weight: bold;
  color: white;
  padding-left: 0.5rem;
}
h3 {
  font-size: 1.75rem;
  font-weight: bold;
}

.brushes {
  background-color: mediumspringgreen;
}

.frames {
  background-color: lightcoral;
}

.paint {
  background: skyblue;
}
section {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 250px;
}
span {
  font-weight: bold;
  color: blue;
}

@media screen and (min-width: 1000px) {
  p {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 3rem;
    font-weight: bold;https://github.com/tmccann/Off-Platform-Project
    color: white;
    padding-left: 0.5rem;
  }
  h3 {
    font-size: 2.75rem;
  }
}

hello! i want someone to review my code
vscode-----

+

Document
<link rel="stylesheet" href="./resource/css/index.css">

“Dasmoto's Arts & Crafts”

Brushes

Hacksaw Brushes

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.

Frames

Art Frames (assorted)

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.

Paint
Clean Finnish Paint

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.

css:

h1 {
font-family: Helvetica;
font-size: 100px;
font-weight: Bold;
color: khaki;

}

h2 {
background-color: mediumspringgreen;
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

h3 td {
font-family: Helvetica;
font-weight: bold;
color: blue;
}

h4 {
background-color: lightcoral;
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

h5 {
font-family: Helvetica;
font-weight: bold;
color: black;

}

h6 {
background-color: skyblue;
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

h5 {
font-family: Helvetica;
font-weight: bold;
color: black;
}

Hi Everyone,

Would like to get some reviews of my code for improvement!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Google font imported -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

    <!-- External Stylesheet -->
    <link rel="stylesheet" type="text/css" href="style.css">

    <title>Dasmoto Arts &amp Crafts</title>
</head>
<body>
    <header>
        <h1>Dasmoto's Arts &amp Crafts</h1>
    </header>

    <main>
        <section class="brushes card">
            <h2 class="item-heading">Brushes</h2>

            <article>
                <h3 class="text-heading">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. <span>Starting at $3.00 / brush.</span></p>
            </article>
        </section>

        <section class="frames card">
            <h2 class="item-heading">Frames</h2>
            <article>
                <h3 class="text-heading">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. <span>Starting at $2.00 / frame.</span></p>
            </article>
        </section>

        <section class="paints card">
            <h2 class="item-heading">Paint</h2>
            <article>
                <h3 class="text-heading">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.<span> Starting at $5.00 / tube.</span></p>
            </article>
        </section>
    </main>
    <footer>

    </footer>
</body>
</html>
/* Applying Font to entire webpage adn resetting webpage margins and padding */
* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
}

/* Styling the H1 element in the header section with the background image*/
header h1 {
    background: linear-gradient(rgba(255,255,255,0.7), rgba(0,0,0,0.7)), url(pattern.jpeg);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 80px;
    
    color: rgba(203, 250, 50, 1);
    text-shadow: 0 1px 2px rgba(255,255,255,1); 
    text-align: center;
    padding: 5% 0;
    font-weight: 700;
    font-size: 3rem;
}

main {
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    display: inline-block;
    border-radius: 10px;
    margin: 10px;
    width: 33%;
    padding: 20px;
    height: 400px;
    transition: transform 0.5s ease;
}

.card:hover {
    transform: scale(1.05);
}


.brushes {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)),url(hacksaw.jpeg);
    background-position: center;
    background-size: cover;
    margin-bottom: 20px;
}

.frames {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)) ,url(frames.jpeg);
    background-position: center;
    background-size: cover;
    margin-bottom: 20px;
}

.paints {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(finnish.jpeg);
    background-position: center;
    background-size: cover;
    margin-bottom: 20px;
}

h2.item-heading {
    color: #fff;
    font-size: 32px;
    padding: 10px 0;

}

article {
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

h3.text-heading {  
    color: #fff;
    font-size: 24px;
    padding-bottom: 10px;
}


p {
    color: #fff;
    font-size: 14px;
    font-style: italic;
}

p span {
    color: rgb(77, 221, 204);
    font-weight: 700;
}
1 Like

Good job! I am a total beginner and learned a ton by reviewing your code. Thanks for posting.

Kind Regards,
David Gutierrez