The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Is my CSS ok?
mp3909
post Apr 17 2020, 12:14 PM
Post #1


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264
So I am quite new to HTML and CSS, still learning it.
But after watching a series of YouTube channels, I went ahead and created a webpage.

I am looking for experts in this field to look at my code below and give constructive criticism so that I can improve.
I could be doing certain things the wrong/bad way in my code so only someone who is an expert in this field will know.
Anything at all will help!
Thank you and much appreciated smile.gif

p.s. attached zip file contain the images referenced within the code.


HTML code

CODE
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type"css/text" href="website1.css">
    </head>
    <body>
        <div class="wrapper">
            <nav id="navbar">
                <ul>
                    <li><a href="#">bikes</a></li>
                    <li><a href="#">best buy</a></li>
                    <li><a href="#">offers</a></li>
                    <li><a href="#">accessories</a></li>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">about us</a></li>
                </ul>
            </nav>
            <section>
                <img src="../images/lead-banner.jpg" alt="main photo">
            </section>
            <main>
                <div class="container">
                    <img  src="../images/bike.jpg" alt="bike">
                    <h3>Bicycle RetroSyperb VII #1</h3>
                    <h1>$299.99</h1>
                    <div class="container-2">
                        <img src="../images/stars.png" alt="stars">
                    </div>
                    <h5>Add to shopping basket</h5>
                </div>
            </main>
            <footer>
                <img src="../images/footer.jpg" alt="footer">
            </footer>
        </div>
    </body>
</html>



CSS code

CODE
body {
    background-color: lightgrey;
    margin: 0;
}

.wrapper {
    width: 900px;
    margin: -16px auto;
}

nav {
    text-align: right;
    background-color: rgb(2, 21, 43);
    height: 50px;
    padding-right: 10px;
}


nav ul li {
    margin-left: 20px;
    list-style-type: none;
    display: inline-block;
    padding-top: 12px;
}

nav ul li a{
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: rgb(194, 164, 141);
}

section img {
    width: 100%;
    height: 380px;
}

main .container {
    text-align: center;
    background-color: white;
    margin-top: -5px;
    padding-top: 100px;
    height: 550px;
}


main .container h1 {
    font-size: 70px;
    margin-top: -20px;
}

main .container .container-2 {
    margin-top: -50px;
}

main .container h5 {
    border: 2px solid #af746c;
    color: rgb(194, 164, 141);
    padding: 10px;
    text-transform: uppercase;
    font-family: "Times New Roman";
    width: 200px;
    margin: 20px auto;
}

main .container h5:hover {
    background-color: rgb(194, 164, 141);
    color: white;
}

footer img{
    width: 100%;
}


This post has been edited by mp3909: Apr 17 2020, 12:15 PM


Attached File(s)
Attached File  images.zip ( 65.8k ) Number of downloads: 389
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
mp3909   Is my CSS ok?   Apr 17 2020, 12:14 PM
Christian J   <title></title> The TITLE text is mi...   Apr 17 2020, 04:43 PM

« Next Oldest · Site Review Requests · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 12:49 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC