smartwatch product card using html and css

Smartwatch Product Card using HTML and CSS

Share your love
Welcome to Coding Torque! Are you looking for a fun and creative way to learn HTML and CSS? Then look no further! In this blog, we’ll be creating a stunning Smartwatch Product Card using HTML and CSS. Not only will you learn the basics of coding, but you’ll also have a beautiful product card to show off at the end. So what are you waiting for? Let’s get started!

Before we start, here are some cards you might like to create:

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code 

Starter Template

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Smartwatch product card - Coding Torque</title>
</head>
<body>
<!-- Further code here -->
</body>
</html>
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Font Awesome CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <!-- CSS --> <link rel="stylesheet" href="style.css"> <title>Smartwatch product card - Coding Torque</title> </head> <body> <!-- Further code here --> </body> </html>
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome CDN  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Smartwatch product card - Coding Torque</title>
</head>

<body>
   <!-- Further code here -->
</body>

</html>

Paste the below code in your <body> tag.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="wrapper">
<div class="overviewInfo">
<div class="actions">
<div class="backbutton ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.02698 11.9929L5.26242 16.2426L6.67902 14.8308L4.85766 13.0033L22.9731 13.0012L22.9728 11.0012L4.85309 11.0033L6.6886 9.17398L5.27677 7.75739L1.02698 11.9929Z"
fill="currentColor" />
</svg>
</div>
<div class="cartbutton neurobutton">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.79166 2H1V4H4.2184L6.9872 16.6776H7V17H20V16.7519L22.1932 7.09095L22.5308 6H6.6552L6.08485 3.38852L5.79166 2ZM19.9869 8H7.092L8.62081 15H18.3978L19.9869 8Z"
fill="currentColor" />
<path
d="M10 22C11.1046 22 12 21.1046 12 20C12 18.8954 11.1046 18 10 18C8.89543 18 8 18.8954 8 20C8 21.1046 8.89543 22 10 22Z"
fill="currentColor" />
<path
d="M19 20C19 21.1046 18.1046 22 17 22C15.8954 22 15 21.1046 15 20C15 18.8954 15.8954 18 17 18C18.1046 18 19 18.8954 19 20Z"
fill="currentColor" />
</svg>
</div>
</div>
<div class="productinfo">
<div class="grouptext">
<h3>BRAND</h3>
<p>Apple</p>
</div>
<div class="grouptext">
<h3>CASE SIZE</h3>
<p>40mm, 44mm</p>
</div>
<div class="grouptext">
<h3>PRICE</h3>
<p>Rs 59,900</p>
</div>
<div class="productImage">
<img src="https://user-images.githubusercontent.com/66505013/216373703-0f41a892-4778-4dff-b2f6-adc7b718a3cc.png"
alt="product: ps5 controller image">
</div>
</div>
</div>
<!-- overview info -->
<div class="productSpecifications">
<h1> Apple Series </h1>
<p> GPS + Cellular mode lets you call, text and get directions without your phone. <br> Measure your blood
oxygen with an all new sensor and app. <br> Check Your heart rhythm with ECG app. </p>
<div class="productFeatures">
<div class="feature">
<div class="featureIcon">
</div>
<div class="featureText">
<p> <strong>Futuristic</strong></p>
<p>Design</p>
</div>
</div>
<div class="feature">
<div class="featureIcon">
</div>
<div class="featureText">
<p> <strong>Built-in</strong></p>
<p>Microphone</p>
</div>
</div>
<div class="feature">
<div class="featureIcon">
</div>
<div class="featureText">
<p> <strong>Haptic</strong></p>
<p>Feedback</p>
</div>
</div>
<div class="feature">
<div class="featureIcon">
</div>
<div class="featureText">
<p> <strong>Fast charge</strong></p>
<p>USB-C port</p>
</div>
</div>
</div>
<div class="checkoutButton">
<div class="priceTag">
<span><i class="fa fa-rupee-sign"></i></span>59,900
</div>
<button class="preorder">
<p>Add to cart</p>
<div class="buttonaction">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.0677 11.9929L18.818 7.75739L17.4061 9.17398L19.2415 11.0032L0.932469 11.0012L0.932251 13.0012L19.2369 13.0032L17.4155 14.8308L18.8321 16.2426L23.0677 11.9929Z"
fill="currentColor" />
</svg>
</div>
</button>
</div>
</div>
<!-- product specificaiton -->
</div>
<!-- wrapper-->
<div class="wrapper"> <div class="overviewInfo"> <div class="actions"> <div class="backbutton "> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.02698 11.9929L5.26242 16.2426L6.67902 14.8308L4.85766 13.0033L22.9731 13.0012L22.9728 11.0012L4.85309 11.0033L6.6886 9.17398L5.27677 7.75739L1.02698 11.9929Z" fill="currentColor" /> </svg> </div> <div class="cartbutton neurobutton"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.79166 2H1V4H4.2184L6.9872 16.6776H7V17H20V16.7519L22.1932 7.09095L22.5308 6H6.6552L6.08485 3.38852L5.79166 2ZM19.9869 8H7.092L8.62081 15H18.3978L19.9869 8Z" fill="currentColor" /> <path d="M10 22C11.1046 22 12 21.1046 12 20C12 18.8954 11.1046 18 10 18C8.89543 18 8 18.8954 8 20C8 21.1046 8.89543 22 10 22Z" fill="currentColor" /> <path d="M19 20C19 21.1046 18.1046 22 17 22C15.8954 22 15 21.1046 15 20C15 18.8954 15.8954 18 17 18C18.1046 18 19 18.8954 19 20Z" fill="currentColor" /> </svg> </div> </div> <div class="productinfo"> <div class="grouptext"> <h3>BRAND</h3> <p>Apple</p> </div> <div class="grouptext"> <h3>CASE SIZE</h3> <p>40mm, 44mm</p> </div> <div class="grouptext"> <h3>PRICE</h3> <p>Rs 59,900</p> </div> <div class="productImage"> <img src="https://user-images.githubusercontent.com/66505013/216373703-0f41a892-4778-4dff-b2f6-adc7b718a3cc.png" alt="product: ps5 controller image"> </div> </div> </div> <!-- overview info --> <div class="productSpecifications"> <h1> Apple Series </h1> <p> GPS + Cellular mode lets you call, text and get directions without your phone. <br> Measure your blood oxygen with an all new sensor and app. <br> Check Your heart rhythm with ECG app. </p> <div class="productFeatures"> <div class="feature"> <div class="featureIcon"> </div> <div class="featureText"> <p> <strong>Futuristic</strong></p> <p>Design</p> </div> </div> <div class="feature"> <div class="featureIcon"> </div> <div class="featureText"> <p> <strong>Built-in</strong></p> <p>Microphone</p> </div> </div> <div class="feature"> <div class="featureIcon"> </div> <div class="featureText"> <p> <strong>Haptic</strong></p> <p>Feedback</p> </div> </div> <div class="feature"> <div class="featureIcon"> </div> <div class="featureText"> <p> <strong>Fast charge</strong></p> <p>USB-C port</p> </div> </div> </div> <div class="checkoutButton"> <div class="priceTag"> <span><i class="fa fa-rupee-sign"></i></span>59,900 </div> <button class="preorder"> <p>Add to cart</p> <div class="buttonaction"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M23.0677 11.9929L18.818 7.75739L17.4061 9.17398L19.2415 11.0032L0.932469 11.0012L0.932251 13.0012L19.2369 13.0032L17.4155 14.8308L18.8321 16.2426L23.0677 11.9929Z" fill="currentColor" /> </svg> </div> </button> </div> </div> <!-- product specificaiton --> </div> <!-- wrapper-->
<div class="wrapper">
    <div class="overviewInfo">
        <div class="actions">
            <div class="backbutton ">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M1.02698 11.9929L5.26242 16.2426L6.67902 14.8308L4.85766 13.0033L22.9731 13.0012L22.9728 11.0012L4.85309 11.0033L6.6886 9.17398L5.27677 7.75739L1.02698 11.9929Z"
                        fill="currentColor" />
                </svg>
            </div>
            <div class="cartbutton neurobutton">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M5.79166 2H1V4H4.2184L6.9872 16.6776H7V17H20V16.7519L22.1932 7.09095L22.5308 6H6.6552L6.08485 3.38852L5.79166 2ZM19.9869 8H7.092L8.62081 15H18.3978L19.9869 8Z"
                        fill="currentColor" />
                    <path
                        d="M10 22C11.1046 22 12 21.1046 12 20C12 18.8954 11.1046 18 10 18C8.89543 18 8 18.8954 8 20C8 21.1046 8.89543 22 10 22Z"
                        fill="currentColor" />
                    <path
                        d="M19 20C19 21.1046 18.1046 22 17 22C15.8954 22 15 21.1046 15 20C15 18.8954 15.8954 18 17 18C18.1046 18 19 18.8954 19 20Z"
                        fill="currentColor" />
                </svg>
            </div>
        </div>

        <div class="productinfo">
            <div class="grouptext">
                <h3>BRAND</h3>
                <p>Apple</p>
            </div>
            <div class="grouptext">
                <h3>CASE SIZE</h3>
                <p>40mm, 44mm</p>
            </div>
            <div class="grouptext">
                <h3>PRICE</h3>
                <p>Rs 59,900</p>
            </div>


            <div class="productImage">
                <img src="https://user-images.githubusercontent.com/66505013/216373703-0f41a892-4778-4dff-b2f6-adc7b718a3cc.png"
                    alt="product: ps5 controller image">
            </div>

        </div>

    </div>
    <!-- overview info -->

    <div class="productSpecifications">
        <h1> Apple Series </h1>
        <p> GPS + Cellular mode lets you call, text and get directions without your phone. <br> Measure your blood
            oxygen with an all new sensor and app. <br> Check Your heart rhythm with ECG app. </p>

        <div class="productFeatures">
            <div class="feature">
                <div class="featureIcon">
                </div>
                <div class="featureText">
                    <p> <strong>Futuristic</strong></p>
                    <p>Design</p>
                </div>
            </div>
            <div class="feature">
                <div class="featureIcon">
                </div>
                <div class="featureText">
                    <p> <strong>Built-in</strong></p>
                    <p>Microphone</p>
                </div>
            </div>
            <div class="feature">
                <div class="featureIcon">
                </div>
                <div class="featureText">
                    <p> <strong>Haptic</strong></p>
                    <p>Feedback</p>
                </div>
            </div>
            <div class="feature">
                <div class="featureIcon">
                </div>
                <div class="featureText">
                    <p> <strong>Fast charge</strong></p>
                    <p>USB-C port</p>
                </div>
            </div>
        </div>

        <div class="checkoutButton">
            <div class="priceTag">
                <span><i class="fa fa-rupee-sign"></i></span>59,900
            </div>
            <button class="preorder">
                <p>Add to cart</p>
                <div class="buttonaction">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M23.0677 11.9929L18.818 7.75739L17.4061 9.17398L19.2415 11.0032L0.932469 11.0012L0.932251 13.0012L19.2369 13.0032L17.4155 14.8308L18.8321 16.2426L23.0677 11.9929Z"
                            fill="currentColor" />
                    </svg>
                </div>
            </button>
        </div>
    </div>
    <!-- product specificaiton -->
</div>
<!-- wrapper-->

Output Till Now

CSS Code 

Create a file style.css and paste the code below.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
*,
button,
input {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
:root {
--bg-shape-color: linear-gradient(120deg, #343a4f, #0f1620);
--lightblue: #3d9dea;
--darkblue: #4a4eee;
--text-color: #d5e1ef;
}
html,
body {
width: 100%;
min-height: 100vh;
background-image: linear-gradient(90deg, #414850, #131720);
color: var(--text-color);
}
body {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 0px;
}
.wrapper {
width: 350px;
border-radius: 40px;
background-image: var(--bg-shape-color);
overflow: hidden;
}
.overviewInfo,
.productSpecifications {
padding: 24px;
}
.overviewInfo {
background-image: linear-gradient(176deg, var(--lightblue), var(--darkblue));
}
.actions {
display: flex;
justify-content: space-between;
margin-bottom: 32px;
}
.actions .cartbutton {
position: relative;
}
.actions .cartbutton::after {
content: "";
display: block;
width: 8px;
height: 8px;
background-image: linear-gradient(90deg, #489be2, #0f629c);
border-radius: 50%;
position: absolute;
top: 11px;
right: 8px;
}
.actions .cartbutton svg {
color: #ababab 73;
}
.actions .backbutton,
.actions .cartbutton {
width: 40px;
height: 40px;
border-radius: 50%;
}
.neurobutton {
background-image: var(--bg-shape-color);
display: flex;
justify-content: center;
align-items: center;
box-shadow: inset 3px 4px 5px 0px rgba(197, 197, 197, 0.1),
inset 3px 6px 6px 5px rgba(78, 77, 77, 0.1),
-2px -2px 8px 2px rgba(255, 255, 255, 0.1),
2px 2px 6px 3px rgba(0, 0, 0, 0.4);
}
.productinfo {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
min-height: 200px;
margin-bottom: 50px;
}
.productImage {
position: absolute;
width: 300px;
height: auto;
transform: translate(75px, 40px);
transition: ease 2s all;
}
.productImage img {
width: 90%;
height: auto;
}
.productImage:hover {
transition: ease 2s all;
animation: none;
transform: translate(75px, 40px) rotate(10deg);
}
h1 {
font-family: "Michroma", sans-serif;
}
.grouptext h3 {
letter-spacing: 3.2px;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
.grouptext p {
font-size: 12px;
opacity: 0.8;
}
/* product specifications */
.featureIcon {
width: 40px;
height: 40px;
background-image: var(--bg-shape-color);
border-radius: 8px;
margin-right: 16px;
}
.productSpecifications h1 {
margin-top: 10px;
margin-bottom: 16px;
font-size: 32px;
}
.productSpecifications p {
opacity: 0.8;
font-size: 15px;
line-height: 1.5;
}
.productSpecifications .productFeatures {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 20px;
grid-row-gap: 16px;
}
.productSpecifications .productFeatures .feature {
display: flex;
}
.checkoutButton {
display: flex;
width: 100%;
background-image: var(--bg-shape-color);
border-radius: 12px;
overflow: hidden;
box-shadow: -2px -2px 2px 0px rgba(80, 80, 80, 0.1),
2px 2px 3px 0px rgba(12, 12, 12, 0.3),
inset 0px 0px 0px 2px rgba(80, 80, 80, 0.2);
margin-top: 30px;
padding: 14px;
justify-content: space-between;
align-items: center;
}
.priceTag {
display: flex;
align-items: center;
font-size: 32px;
}
.priceTag span {
color: #488dc7;
font-size: 20px;
}
/* checkout button*/
button.preorder {
outline: 0;
border: 0;
border-radius: 6px;
display: flex;
align-items: center;
overflow: hidden;
background-image: linear-gradient(85deg, #61c7ef, #4833fb);
color: white;
}
.preorder p {
padding: 8px 17px;
border-right: 1px solid rgba(0, 0, 0, 0.4);
}
.buttonaction {
border-left: 1px solid rgba(255, 255, 255, 0.2);
padding: 5px 5px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.7);
}
/* animation */
@keyframes updowncontroller {
0% {
transform: rotate(-90deg) translate(-56px, 66px);
}
80%,
100% {
transform: rotate(-70deg) translate(10px, 66px);
}
}
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"); *, button, input { margin: 0px; padding: 0px; box-sizing: border-box; font-family: "Roboto", sans-serif; } :root { --bg-shape-color: linear-gradient(120deg, #343a4f, #0f1620); --lightblue: #3d9dea; --darkblue: #4a4eee; --text-color: #d5e1ef; } html, body { width: 100%; min-height: 100vh; background-image: linear-gradient(90deg, #414850, #131720); color: var(--text-color); } body { display: flex; justify-content: center; align-items: center; padding: 40px 0px; } .wrapper { width: 350px; border-radius: 40px; background-image: var(--bg-shape-color); overflow: hidden; } .overviewInfo, .productSpecifications { padding: 24px; } .overviewInfo { background-image: linear-gradient(176deg, var(--lightblue), var(--darkblue)); } .actions { display: flex; justify-content: space-between; margin-bottom: 32px; } .actions .cartbutton { position: relative; } .actions .cartbutton::after { content: ""; display: block; width: 8px; height: 8px; background-image: linear-gradient(90deg, #489be2, #0f629c); border-radius: 50%; position: absolute; top: 11px; right: 8px; } .actions .cartbutton svg { color: #ababab 73; } .actions .backbutton, .actions .cartbutton { width: 40px; height: 40px; border-radius: 50%; } .neurobutton { background-image: var(--bg-shape-color); display: flex; justify-content: center; align-items: center; box-shadow: inset 3px 4px 5px 0px rgba(197, 197, 197, 0.1), inset 3px 6px 6px 5px rgba(78, 77, 77, 0.1), -2px -2px 8px 2px rgba(255, 255, 255, 0.1), 2px 2px 6px 3px rgba(0, 0, 0, 0.4); } .productinfo { display: flex; flex-direction: column; justify-content: space-between; position: relative; min-height: 200px; margin-bottom: 50px; } .productImage { position: absolute; width: 300px; height: auto; transform: translate(75px, 40px); transition: ease 2s all; } .productImage img { width: 90%; height: auto; } .productImage:hover { transition: ease 2s all; animation: none; transform: translate(75px, 40px) rotate(10deg); } h1 { font-family: "Michroma", sans-serif; } .grouptext h3 { letter-spacing: 3.2px; font-size: 14px; font-weight: 500; margin-bottom: 8px; } .grouptext p { font-size: 12px; opacity: 0.8; } /* product specifications */ .featureIcon { width: 40px; height: 40px; background-image: var(--bg-shape-color); border-radius: 8px; margin-right: 16px; } .productSpecifications h1 { margin-top: 10px; margin-bottom: 16px; font-size: 32px; } .productSpecifications p { opacity: 0.8; font-size: 15px; line-height: 1.5; } .productSpecifications .productFeatures { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; grid-row-gap: 16px; } .productSpecifications .productFeatures .feature { display: flex; } .checkoutButton { display: flex; width: 100%; background-image: var(--bg-shape-color); border-radius: 12px; overflow: hidden; box-shadow: -2px -2px 2px 0px rgba(80, 80, 80, 0.1), 2px 2px 3px 0px rgba(12, 12, 12, 0.3), inset 0px 0px 0px 2px rgba(80, 80, 80, 0.2); margin-top: 30px; padding: 14px; justify-content: space-between; align-items: center; } .priceTag { display: flex; align-items: center; font-size: 32px; } .priceTag span { color: #488dc7; font-size: 20px; } /* checkout button*/ button.preorder { outline: 0; border: 0; border-radius: 6px; display: flex; align-items: center; overflow: hidden; background-image: linear-gradient(85deg, #61c7ef, #4833fb); color: white; } .preorder p { padding: 8px 17px; border-right: 1px solid rgba(0, 0, 0, 0.4); } .buttonaction { border-left: 1px solid rgba(255, 255, 255, 0.2); padding: 5px 5px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); } /* animation */ @keyframes updowncontroller { 0% { transform: rotate(-90deg) translate(-56px, 66px); } 80%, 100% { transform: rotate(-70deg) translate(10px, 66px); } }
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");

*,
button,
input {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

:root {
  --bg-shape-color: linear-gradient(120deg, #343a4f, #0f1620);
  --lightblue: #3d9dea;
  --darkblue: #4a4eee;
  --text-color: #d5e1ef;
}
html,
body {
  width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(90deg, #414850, #131720);
  color: var(--text-color);
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0px;
}
.wrapper {
  width: 350px;
  border-radius: 40px;
  background-image: var(--bg-shape-color);
  overflow: hidden;
}
.overviewInfo,
.productSpecifications {
  padding: 24px;
}
.overviewInfo {
  background-image: linear-gradient(176deg, var(--lightblue), var(--darkblue));
}
.actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
}
.actions .cartbutton {
  position: relative;
}
.actions .cartbutton::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-image: linear-gradient(90deg, #489be2, #0f629c);
  border-radius: 50%;
  position: absolute;
  top: 11px;
  right: 8px;
}
.actions .cartbutton svg {
  color: #ababab 73;
}
.actions .backbutton,
.actions .cartbutton {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.neurobutton {
  background-image: var(--bg-shape-color);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 3px 4px 5px 0px rgba(197, 197, 197, 0.1),
    inset 3px 6px 6px 5px rgba(78, 77, 77, 0.1),
    -2px -2px 8px 2px rgba(255, 255, 255, 0.1),
    2px 2px 6px 3px rgba(0, 0, 0, 0.4);
}
.productinfo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-height: 200px;
  margin-bottom: 50px;
}
.productImage {
  position: absolute;
  width: 300px;
  height: auto;
  transform: translate(75px, 40px);
  transition: ease 2s all;
}
.productImage img {
  width: 90%;
  height: auto;
}
.productImage:hover {
  transition: ease 2s all;
  animation: none;
  transform: translate(75px, 40px) rotate(10deg);
}
h1 {
  font-family: "Michroma", sans-serif;
}
.grouptext h3 {
  letter-spacing: 3.2px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}
.grouptext p {
  font-size: 12px;
  opacity: 0.8;
}
/* product specifications */
.featureIcon {
  width: 40px;
  height: 40px;
  background-image: var(--bg-shape-color);
  border-radius: 8px;
  margin-right: 16px;
}
.productSpecifications h1 {
  margin-top: 10px;
  margin-bottom: 16px;
  font-size: 32px;
}
.productSpecifications p {
  opacity: 0.8;
  font-size: 15px;
  line-height: 1.5;
}
.productSpecifications .productFeatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
  grid-row-gap: 16px;
}
.productSpecifications .productFeatures .feature {
  display: flex;
}
.checkoutButton {
  display: flex;
  width: 100%;
  background-image: var(--bg-shape-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: -2px -2px 2px 0px rgba(80, 80, 80, 0.1),
    2px 2px 3px 0px rgba(12, 12, 12, 0.3),
    inset 0px 0px 0px 2px rgba(80, 80, 80, 0.2);
  margin-top: 30px;
  padding: 14px;
  justify-content: space-between;
  align-items: center;
}
.priceTag {
  display: flex;
  align-items: center;
  font-size: 32px;
}
.priceTag span {
  color: #488dc7;
  font-size: 20px;
}
/* checkout button*/
button.preorder {
  outline: 0;
  border: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-image: linear-gradient(85deg, #61c7ef, #4833fb);
  color: white;
}
.preorder p {
  padding: 8px 17px;
  border-right: 1px solid rgba(0, 0, 0, 0.4);
}
.buttonaction {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding: 5px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
}
/* animation */
@keyframes updowncontroller {
  0% {
    transform: rotate(-90deg) translate(-56px, 66px);
  }
  80%,
  100% {
    transform: rotate(-70deg) translate(10px, 66px);
  }
}

Output Till Now

smartwatch product card using html and css
Written by: Piyush Patil
If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖

Share your love

Related Posts