Issue
I am practicing hands-on project with HTML & CSS using flex, this project has seven rows and 4 columns, I have used div to create columns and so far I am working on the first column which mentions price but I am unable to do so as per the image I have attached of the project. I have shared my code below of HTML and CSS.
#main-container {
display: flex;
background-color: rgb(24, 30, 30);
margin-top: 1%;
align-content: center;
justify-content: center;
width: 65%;
font-size: 1.5vmin;
}
#main-container div {
background-color: bisque;
align-items: center;
width: 65%;
}
#main-container button {
color: white;
background-color: #117CC0;
}
#main-container h1 {
text-align: center;
}<div id="main-container">
<div>
<h1>10.99</h1>
<p>UDS/DAY</p>
<button>SELECT</button>
<P>Total 76.93 USD</P>
</div>
<div>car image</div>
<div>capacity</div>
<div>features</div>
</div>If someone can please help me how to do it and also in making me understand the logic.
Solution
Just add display:flex; to every div in #main-container.
#main-container {
display: flex;
background-color: rgb(24, 30, 30);
margin-top: 1%;
align-content: center;
justify-content: center;
width: 65%;
font-size: 1.5vmin;
}
#main-container > div > img {
width: 100%;
}
#main-container > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#main-container > div:nth-of-type(1) {
width: 15%;
}
#main-container > div:nth-of-type(2) {
width: 25%;
}
#main-container > div:nth-of-type(3) {
width: 30%;
}
#main-container > div:nth-of-type(4) {
width: 30%;
}
#main-container div {
background-color: bisque;
align-items: center;
width: 65%;
}
#main-container button {
color: white;
background-color: #117CC0;
}
#main-container h1 {
text-align: center;
}
p, h1 {
margin: 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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main-container">
<div>
<h1>10.99</h1>
<p>UDS/DAY</p>
<button>SELECT</button>
<P>Total 76.93 USD</P>
</div>
<div>
<img src="green-car2.png" />
<p>Extra Small Car</p>
</div>
<div>
<p>x4 Passengers</p>
<p>x4 Passengers</p>
<p>x4 Passengers</p>
</div>
<div>
<p>Air Conditioning</p>
<p>Air Conditioning</p>
<p>Air Conditioning</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Answered By - Lukas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.