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?