Good evening,
I am currently in the process of developing an online shopping website.
I would like to adjust the positioning of a specific div on the page to align it similarly to another class called card div.
Please refer to the image below for better understanding:
https://i.sstatic.net/3VvGe.png
As you can see, I want the div containing "Yopro" to be slightly elevated and not aligned with the first one.
Here is the snippet of my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Online Shopping Website</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<!-- More CSS and JS links go here -->
</head>
<body>
<header class="header_area">
<!-- Header content details go here -->
</header>
<main class="site-main">
<section class="hero-banner">
<!-- Hero banner content goes here -->
<div class="container">
<h1>Welcome to our Online Shop</h1>
</div>
</section>
<section id="section_all_produit">
<!-- Product cards displayed here -->
</section>
<footer class="footer">
<!-- Footer section details go here -->
</footer>
<script src="js/main.js"></script>
</body>
</html>
Above is just a portion of my complete HTML file. I'm also utilizing some CSS which includes styling for different elements like headings and buttons.
#h1_all_product {
text-align: center;
font-size: 250%;
text-transform: uppercase;
color: #2a2b75;
}
.prix{
color: red;
font-size: 150%;
display:inline-block;
margin-right: 65px;
}
.btn-achat{
margin-bottom: 30px;
margin-top: 15px;
}
#card2{
display: inline-block;
}
.cardcss{
display: inline-block;
}
Your assistance in achieving this layout adjustment will be highly appreciated. Thank you!