Creating a cart page for an eCommerce website using simple HTML and CSS involves several steps. Here's a detailed description:
1. Start by creating a new HTML file and naming it "cart.html".
2 .In the head section, include a title for your page and any relevant meta tags, such as keywords and descriptions.
3. Next, create a navigation bar at the top of your page to make it easy for users to move around your site. This can be done using HTML lists and CSS styling.
4. In the body section, create a container to hold the items in the user's shopping cart. You can use HTML tables for this purpose.
5. Within the table, create individual rows for each item in the cart. Each row should include a product image, name, quantity, price, and a button to remove the item from the cart. You can use HTML images, headings, paragraphs, and buttons for this purpose.
6. Use CSS to style the table and its elements, making sure to use consistent colors, fonts, and spacing throughout the page. You can use CSS classes and IDs to target specific elements and apply styles to them.
7. Add a total price section to the bottom of the table to display the total cost of all items in the cart. You can use HTML headings and paragraphs for this purpose.
8. Finally, test your page to make sure it looks and functions as expected on different devices and browsers. You can use web developer tools or online testing services to do this.
To create a visually appealing and effective cart page, it's important to focus on the user experience. Make sure the page is easy to navigate, the information is clearly presented, and the call-to-action buttons or links are prominently displayed. Use high-quality images and graphics to make the page more engaging, and choose a color scheme that aligns with your brand. With these tips in mind, you can create a great cart page for your eCommerce website using simple HTML and CSS.
HTML CODE
<div class="main" id="main">
<div class="box box1">
<span class="spane">
<div class="img"> <img src="img1.png" alt=""></div>
<div class="content">
<h2>Nike ZoomX Streakfly</h2>
<p>Available at a lower price from other
sellers that may not offer free Prime shipping.</p>
<h4>
<hr>₹14,995 <span>₹7,450(50%)</span>
</h4>
<button class="custom-btn btn-2"><b>Buy Now</b></button>
<button class="custom-btn btn-2"><b>Add To Cart</b></button>
<img src="logo.png" class="logo">
</div>
</span>
</div>
<div class="box box2">
<span class="spane">
<div class="img"> <img src="img2.png" alt=""></div>
<div class="content">
<h2>Nike Court Zoom Pro</h2>
<p>Available at a lower price from other
sellers that may not offer free Prime shipping.</p>
<h4>
<hr> ₹10,895 <span>₹5,499(50%)</span>
</h4>
<button class="custom-btn btn-2"><b>Buy Now</b></button>
<button class="custom-btn btn-2"><b>Add To Cart</b></button>
<img src="logo.png" class="logo">
</div>
</span>
</div>
<div class="box box3">
<span class="spane">
<div class="img"> <img src="img4.png" alt=""></div>
<div class="content">
<h2>Nike Men's Running Shoe</h2>
<p>Available at a lower price from other
sellers that may not offer free Prime shipping.</p>
<h4>
<hr>₹12,995 <span>₹6,450(50%)</span>
</h4>
<button class="custom-btn btn-2"><b>Buy Now</b></button>
<button class="custom-btn btn-2"><b>Add To Cart</b></button>
<img src="logo.png" class="logo">
</div>
</span>
</div>
</div>
CSS CODE
:root {
--gd: linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,
#1098ad,#07b39b,#6fba82);
--box-sh: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1),
4px 4px 5px 0px rgba(0, 0, 0, .1);
--before-bkg: linear-gradient(90deg, rgba(237, 249, 3, 0) 0%, rgb(255, 0, 0) 50%,
rgba(2, 248, 56, 0) 100%);
--box-sh1: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1),
4px 4px 5px 0px rgba(0, 0, 0, .1);
--box-sh2: 4px 4px 6px 0 rgba(255, 255, 255, .5), -4px -4px 6px 0 rgba(116, 125, 136, .5),
inset -4px -4px 6px 0 rgba(255, 255, 255, .2), inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}
* {
font-family: Calibri Light;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
text-decoration: none;
text-transform: capitalize;
transition: .3s linear;
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
.main {
width: 100%;
height: 630px;
position: absolute;
background: var(--gd);
border-radius: calc(2 * var(--borderWidth));
z-index: 1;
animation: animat 3s ease alternate infinite;
background-size: 300% 300%;
display: inline-block;
}
@keyframes animat {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.box {
width: 350px;
height: 480px;
backdrop-filter: blur(1px);
display: inline-block;
border-radius: 5px;
margin: -60px 20px 0 20px;
overflow: hidden;
box-shadow: var(--box-sh)
}
.box::before {
content: "";
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: transparent;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: var(--before-bkg);
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
}
@-webkit-keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
.box .spane {
width: 98%;
height: 98%;
position: absolute;
background: #e5e5e5;
z-index: 999999;
border-radius: 5px;
margin: auto;
margin: 1.3% 1% 1% 1%;
}
.box:hover img {
transform: rotate(-20deg);
}
.box1 {
margin-left: 120px;
}
.box3 {
margin-top: 120px;
}
.img {
width: 300px;
height: 130px;
margin: auto;
margin-top: 20px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.img img {
width: 300px;
height: 300px;
margin-bottom: 40px;
}
.content {
width: 100%;
height: 320px;
position: relative;
top: 20px;
margin: auto;
text-align: center;
color: black;
z-index: 9999;
}
.content:hover h2 {
text-decoration-line: underline;
}
.content h2 {
padding-top: 20px;
}
.content p {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
.content h4 {
font-size: 25px;
font-weight: 300;
padding-top: 20px;
}
.content h4 span {
margin-left: 10px;
}
.content h4 hr {
width: 90px;
position: relative;
top: 18px;
left: 55px;
border: 1px solid black;
}
.box:hover h4 span {
background: yellow;
}
button {
margin: 60px 20px 20px 20px;
float: left;
}
.custom-btn {
width: 130px;
height: 40px;
color: black;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow: var(--box-sh1);
outline: none;
}
.btn-2 {
text-decoration-style: solid;
border: none;
z-index: 9999;
}
.btn-2:before {
height: 0%;
width: 2px;
}
.btn-2:hover {
box-shadow: var(--box-sh2);
}
.content .logo {
width: 70px;
height: 70px;
position: absolute;
top: -170px;
right: 270px;
transform: none;
}
Comments
Post a Comment