Dasmotos Arts and Craft: Feedback!

I am totally new to this and just completed my first project off of code academy. Any feedback is appreciated or any tips anyone has. I added a navbar because I never did one on my own and shadow to the banners to just add a simple design to it.

IMAGES:


index.html:

<!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="stylesheet" href="./resources/css/index.css">
</head>
<body>
    <!-- NAV BAR -->
    <nav class="nav">
        <ul>
            <li><a href="">HOME</a></li>
            <li><a class="khaki" href="">PRODUCTS</a></li>
            <li><a href="">ABOUT</a></li>
        </ul>
    </nav>
    <!-- BANNER SECTION -->
    <div class="banner">
        <p>Dasmoto's Arts & Crafts</p>
    </div>
    <!-- PRODUCT SECTION-->
    <div class=products>
        
        <!-- BRUSHES -->
        <p class="product" id="brushes">Brushes</p>
        <img src="resources/images/hacksaw.webp" alt="Hacksaw Brushes by Dasmoto's Arts & Crafts">
        <p class="productname">Hacksaw Brushes</p>
        <p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Avaliable in different sizes.<span class="price">Starting at $3.00 / brush.</span></p>
        
        <!-- FRAMES -->
        <p class="product" id="frames">Frames</p>
        <img src="resources/images/frames.webp" alt="Frames by Dasmoto's Arts & Crafts">
        <p class="productname">Art Frames (assorted)</p>
        <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>
    
        <!-- PAINT -->
        <p class="product" id="paint">Paint</p>
        <img src="resources/images/finnish.webp" alt="Paint by Dasmoto's Arts & Crafts">
        <p class="productname">Clean Finnish Paint</p>
        <p>Imported paint from Finland. Over 256 colors avaliable in-store, varying in quantitiy (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>
    </div>
</body>
</html>

index.css:

* {
    font-family: Helvetica;
    
}

nav {
    background-color: rgb(212, 203, 255);
    position: fixed;
    top: 0;
    width: 100%;
    color:rgb(212, 203, 255);
}

.nav li {
    display: inline-block;
    padding: 0px 20px;
    filter: drop-shadow(1px 1px 1px black)
}

.nav a {
    text-decoration:rgb(212, 203, 255);
}

a.khaki {
    color: khaki;
}

.banner {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-image: url('../images/pattern.webp');
    filter: drop-shadow(1px 1px 1px black);
}

.product {
    font-size: 32px;
    font-weight: bold;
    color: white;
    filter: drop-shadow(1px 1px 1px black);
}

#brushes {
    background-color: mediumspringgreen;
}

#frames {
    background-color: lightcoral;
}

#paint {
    background-color: skyblue;
}

.productname {
    font-weight: bold;
    font-size: 20px;
}

.price {
    font-weight: bold;
    color: blue;
}

Feedback appreciated!

1 Like

I see you created this post two weeks ago an no one has responded yet. Did you get it all straightened out?

Looking at your screenshot I see your “Frames” section seems duplicated and the home nav bar runs thru one of them (as well as at the top.) Then again, perhaps what I’m seeing is two screenshots stitched together. :thinking:

I’m working on this project now and it is not going as smoothly as I thought it would. The HTML isn’t so much the problem as the CSS is. I’m about to the point of totally wiping my CSS clean and starting over on it.

EDIT\UPDATE
I’m looking over your code comparing to mine. Dang, mine looks a mess. I notice you did yours without a “Header.” But yours appears to work out better than mine.

What I’m trying to do is create nav links below the header banner. Somehow they ended up IN the banner (which I did not use the “banner” function,) but after a lot of tinkering I’ve got them ALMOST satisfactory. But it did not occur to me to use “nav” tags. I just created links. You’ve given me a perhaps better way to do this. Thanks.

1 Like

Glad I could help, I appreciate the feedback. Gonna definitely revamp this project and redo it soon with more customization and features that I learned. I did do it without a header, could’ve added it but for some reason totally forgot. So sorry about the confusion about the duplicated frames, I took screenshots and should’ve left the files, it is not duplicated on the actual page just from the screenshots sorry about that. The Navbar does also glitch too and go through the images sometimes as well which you are correct. Gonna do this project over with more experience!

1 Like

I’m working on it right now. I’m ALMOST happy with it, just have one last problem I’m bangin my head over. I have a footer with a link with hidden text, just something I added for fun. It appears text when you click it followed by a “rehide” link.

I want them all to appear in-line but no matter what I try they keep dropping into a list. I can’t get a “nowrap” function to happen. I’ll figure it out soon, but sheesh. I thought this was gonna be easier. When I’m done I’ll swap ya code if you’re interested.
J

1 Like

Yeah, I’d be very interested to see what you did with this project and I could learn a thing or two from yours.

1 Like

Here’s my github repo:

I’m still not sure WTH I’m doing with Github. I pushed it from VS Code and it uploaded other test/tutorial projects with it. I deleted them, I thought. I no longer see them in one place, but I do in another.

Here’s screenshots in case Git makes less sense to you than it does me. These things are never done. Since I began writing this reply I’ve made 3 more changes and had to resave my screenshots. LMAO I’m getting pretty tired of ol Dasmoto.

The bottom “Attribute” is a clickable button. It makes the “Attribute” appear and disappear. It’s still not exactly like I want though. I wanted it center with the text to replace it onclick with a new button to return to the previous state. But… I’m about ready to move on to the next section.

And, as you might can tell, I borrowed some tips from you. Yours helped me clean mine up some. Much obliged. :+1:





Dasmoto_HTML_02


Dasmoto_webpage_03

2 Likes

Really cool. Glad I helped out in the slightest way. I like what you did, thank you for sharing. The code looks nice and clean!

1 Like