Hey, developers welcome to Day 8 of our 90Days 90Projects challenge. And in Day 8 we are going to create an Item Card using HTML and CSS.
So to run the code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
HTML Code
index.html
<!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> Item Card </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="item-container">
<div class="item-top">
<div class="top-left-logo">
<img src="./logo.png" alt="">
</div>
<div class="top-right-cart">
<i class="fa-solid fa-cart-shopping"></i>
</div>
</div>
<div class="main-item">
<img src="./item.png" alt="">
</div>
<h2 class="item-heading">
XRay Jr Dark
</h2>
<p class="item-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit labore quae quaerat eaque.
</p>
<ul class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</ul>
<p class="item-price"><sup>$</sup>5.00/-</p>
<button class="item-cart-btn">Add To Cart</button>
</div>
<!-- Item Card using HTML and CSS by raju_webdev -->
</body>
</html>
CSS Code
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&family=Ubuntu&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: rgb(200, 142, 254);
}
.item-container {
background-color: #fff;
width: 20rem;
margin: 1rem;
padding: 1rem;
border-radius: 1rem;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.item-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-left-logo {
width: 60px;
margin-left: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.top-left-logo img {
width: 100%;
}
.top-right-cart {
font-size: 1.4rem;
margin-right: 1rem;
}
.main-item {
width: 200px;
display: block;
margin: 0 auto;
}
.item-heading {
text-transform: capitalize;
}
.item-description {
margin: .5rem 0;
font-size: .9rem;
font-weight: 200;
}
.item-price {
text-align: center;
font-size: 2rem;
margin-bottom: 1rem;
}
.item-price sup {
color: green;
}
.rating i {
color: rgb(200, 142, 254);
margin-bottom: 1rem;
}
.item-cart-btn {
border: none;
background-color: transparent;
margin: 0 auto;
width: 100%;
border: 1px;
font-weight: bold;
padding: .5rem 1rem;
background-color: rgb(200, 142, 254);
color: #fff;
border-radius: 2rem;
font-size: 1.2rem;
font-weight: 200;
position: relative;
cursor: pointer;
transition: all .3s linear;
}
.item-cart-btn:hover {
color: #fff;
background-color: rgb(160, 110, 206);
}
Welcome
ReplyDelete