2

This is my first full formatted webpage done while doing the odin project.

Is there any redundant divs? Can I reduce my css file by grouping some classes?

And how to give styles to a button under a specific div without using class?

html{
    font-family: 'Roboto',sans-serif;
}
body{
    margin:0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.header{
    background-color: #1f2937;
    padding-top:10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo{
    color:#f9faf8;
    font-size: 24px;
    padding-left: 35px;
    font-weight: bolder;
}
a{
    color:#e5e7eb;
    font-size: 18px;
    text-decoration: none;
    padding:7px;
}
.hero{
    background-color: #1f2937;
    display:flex;
    padding:70px 90px 80px 90px;
    gap:20px;
}
.hero-image{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: gray;
    height:30vh;
    width: 45vw;
    color: #e5e7eb;
}
h2{
    font-size: 48px;
    font-weight: bold;
    color:#f9faf8;
    margin:0;
}
.random{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:20px 20px 100px 20px;
}
.info{
    font-size: 32px;
    color: #1f2937;
    font-weight: bolder;
    padding-bottom: 30px;
}
.random-image{
    border-width: 2px;
    border-radius: 15px;
    border-color: #3882f6;
    height:105px;
    width:105px;
    border-style: solid;
}
.quote{
    background-color:#e5e7eb;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 60px 250px 60px 250px;
}
.quote-text{
    font-size: 32px;
    font-style: italic;
    color: #1f2937;
}
p{
    color:#e5e7eb;
    font-size: 18px;
    margin:0;
}
.action{
    background-color: #3882f6;
    margin: 80px 110px 80px 110px;
    padding: 50px 90px 50px 90px;
    color: #f9faf8;
    display: flex;
    gap:300px;
    border-radius: 10px;
}
button{
    background-color:#3882f6;
    color:#f9faf8;
    border-radius: 25px;
    padding:7px 25px 7px 25px;
}

.footer{
    background-color: #1f2937;
    color:#e5e7eb;
    font-size: 18px;
    display: flex;
    justify-content: center;
    padding:20px 0;
}
<!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">
    <link rel="stylesheet" href="styles.css">
    <title>Odin-Webpage</title>
</head>
<body>
    <div class='header'>
        <div class='logo'>
            <u>ONE PIECE</u>
        </div>
        <div>
            <a href="">Manga</a>
            <a href="">Anime</a>
            <a style="padding-right:35px" href="">About</a>
        </div>
    </div>
    <div class='hero'>
        <div style="width:80vh"> 
            <h2>One Piece is really awesome </h2>
            <p>One Piece written by Eichiro Oda is the most popular manga in the world, surpassing the likes of Batman and other 
                multi-author comics.
            </p>
            <button style="border-width: 0;margin-top: 4px;">Sign up</button>
        </div>
        <div  class='hero-image'>

            <img src='one-piece.jpg' style="height:45vh;width: 45vw;">
        </div> 
    </div>
    <div class='random'>
        <div class='info'>Some random information.</div>
        <div style="display: flex;justify-content: space-around;text-align: center;">
            <div style="padding-left: 100px;">
                <img class='random-image' src='luffy.png'>
                <div>The protaganist Monkey D.Luffy aka Rubber boy</div>
            </div>
            <div>
                <img class='random-image' src='wings.png'>
                <div>The wings of the future Pirate King</div>
            </div> 
            <div>
                <img class='random-image' src='whitebeard.png'>
                <div>The strongest man in the world</div>
            </div> 
            <div style="padding-right:100px;">
                <img class='random-image' src='usopp.png'>
                <div>The only God in one piece universe</div>
            </div> 
        </div>  
    </div>
    <div class='quote'>
        <div class='quote-text'>Pirates are evil? The Marines are righteous?… Justice will prevail, you say?
             But of course it will! Whoever wins this war becomes justice!</div>
        <div style="text-align:right;font-size: 25px;"><b>-Donquixote Doflamingo</b></div>
    </div>
    <div class='action'>
        <div>
            <b>Call to action! It's time!</b><br>
            Support one piece by clicking that button right over there!
        </div>
        <div>
            <button style="border-color: white;border-style: solid;">Sign up</button>
        </div>
    </div>
    <div class='footer'>
        Copyright Gagan Karanth 2021
    </div>
</body>
</html>

Is there any standard order in arranging the css classes among professionals?

1 Answer 1

3

And how to give styles to a button under a specific div without using class?

You can do this:

.action button {
    /* styles */
}

The selector selects all buttons that’re decendants of elements that have the class action.


Your HTML contains many inline styles (style="…"); it’s generally best to avoid doing that.

for instance:

<div class='info'>Some random information.</div>
<div style="display: flex;justify-content: space-around;text-align: center;">
…
</div>

Consider using a class for the 4-column section instead of inline styles.


<div class='header'>
…
</div>
…
<div class='footer'>
    Copyright Gagan Karanth 2021
</div>

These divs can be replaced with HTML5 <header> and <footer> tags.


<div>
    <a href="">Manga</a>
    <a href="">Anime</a>
    <a style="padding-right:35px" href="">About</a>
</div>
…
<div style="display: flex;justify-content: space-around;text-align: center;">
    <div style="padding-left: 100px;">
        <img class='random-image' src='luffy.png'>
        <div>The protaganist Monkey D.Luffy aka Rubber boy</div>
    </div>
    …
    <div style="padding-right:100px;">
        <img class='random-image' src='usopp.png'>
        <div>The only God in one piece universe</div>
    </div> 
</div>

padding-left and padding-right should usually be applied to parent elements rather than to the first children and to the last children.

I would change the navigation links’ (Manga, Anime, and About)’s container element from a div to a nav, then delete the inline style padding-right:35px from the "About" link and declare it in nav’s CSS.

<nav>
    <a href="">Manga</a>
    <a href="">Anime</a>
    <a href="">About</a>
</nav>

nav {
    padding-right: 35px;
}

Likewise to the 4-columns part (adding a class and moving the inline styles to the CSS per a previous suggestion):

<div class='images'>
    <div>
        <img class='random-image' src='luffy.png'>
        <div>The protaganist Monkey D.Luffy aka Rubber boy</div>
    </div>
    <div>
        <img class='random-image' src='wings.png'>
        <div>The wings of the future Pirate King</div>
    </div> 
    <div>
        <img class='random-image' src='whitebeard.png'>
        <div>The strongest man in the world</div>
    </div>
    <div>
        <img class='random-image' src='usopp.png'>
        <div>The only God in one piece universe</div>
    </div> 
</div>

.images {
    display: flex;
    justify-content: space-around;
    text-align: center;

    padding-left: 100px;
    padding-right: 100px;
}

Some colors in the CSS are repeated throughout the file. CSS variables are useful for keeping all colors’ definitions in 1 place.

:root {
    --dark-bg: #1f2937;
}
…
.header, .hero {
    background-color: var(--dark-bg);
}
.info, .quote-text {
    color: var(--dark-bg);
}

But old browsers can’t do CSS custom properties, or variables.

1
  • 1
    I'm using codereview for the first time. Should I apply your suggestions and edit the question here in website? Or should I leave it as it is? Commented Dec 28, 2021 at 17:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.