Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Process Steps</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="progress-step"> <label for="step-1">Start Order</label> </div>
<div class="progress-step"> <label for="step-2">Prepare Gift</label> </div>
<div class="progress-step"> <label for="step-3">Pack Gift</label> </div>
<div class="progress-step"> <label for="step-4">Decorate Box</label> </div>
<div class="progress-step"> <label for="step-5">Send Gift</label> </div>
<input type="radio" name="step" id="step-1" checked>
<input type="radio" name="step" id="step-2">
<input type="radio" name="step" id="step-3">
<input type="radio" name="step" id="step-4">
<input type="radio" name="step" id="step-5">
<div class="progress-inner"></div>
<div class="progress-completed"></div>
<div class="progress-detail-tabs">
<div class="tab tab-0">
<h1>Start Order</h1>
<p>Welcome to our order process! This is where the journey begins. You are about to create a memorable
gift experience. In this initial step, you'll provide us with the necessary details to get started.
Whether it's selecting the perfect gift or specifying delivery details, let's begin crafting a
special moment.</p>
</div>
<div class="tab tab-1">
<h1>Prepare Gift</h1>
<p>Now that you've initiated the order, it's time to prepare the gift. Our team of experts will
carefully select and assemble the item you've chosen. Each element of your gift will be thoughtfully
curated to ensure a delightful surprise for the recipient. We take great care in preparing every
detail.</p>
</div>
<div class="tab tab-2">
<h1>Pack Gift</h1>
<p>With the gift item selected and prepared, it's time to pack them into a beutiful package. We believe
presentation is key, so your gift will be lovingly placed into and elegant box. Our packaging
specialists ensure that everything fits perfectly, and it's ready for the next step adding a touch
of charm.</p>
</div>
<div class="tab tab-3">
<h1>Decorate Box</h1>
<p>A gift should not only be a treat on the inside but also a delight on the outside. In this step, we
add the finishing touches to your gift box. Our creative team will adorn th box with decorative
elements, ribbons, and a bow, turning it into a true work of art. Your gift is now a visual
masterpiece.</p>
</div>
<div class="tab tab-4">
<h1>Send Gift</h1>
<p>The final step is all about making your gift reach its destination. Once the box is beutifully
decorated, it's time time to send it on its way. Our trusted delivery partners will ensure that your
gift arrives at the specified location on the chosen date. The anticipation and excitement are
building as your thoughtful gesture is on its journey.</p>
</div>
</div>
<div class="progress-status">
<div class="box-base"></div>
<div class="box-lid"></div>
<div class="box-ribbon">
<div class="box-bow-left"></div>
<div class="box-bow-right"></div>
</div>
<div class="box-item"></div>
<div class="box-tag"></div>
<div class="box-string"></div>
</div>
</div>
</body>
</html>Below is the css code for this video.
style.css
@import url('https://fonts.googleapis.com/css2?family=Mooli&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #efdecd;
color: #702963;
font-family: 'Mooli', sans-serif;
text-align: center;
font-weight: 900;
}
.container {
height: 20vh;
width: 64vw;
}
@media only screen and (max-width: 768px) {
.container {
width: 96vw;
}
}
input[type=radio] {
display: none;
}
.progress-step {
position: relative;
width: 20%;
font-size: 14px;
text-align: center;
padding: 0 10px;
transition: all 0.5s;
float: left;
}
#step-1:checked+input+input+input+input+div+div+div+div>.box-base, #step-2:checked+input+input+input+div+div+div+div>.box-base,
#step-3:checked+input+input+div+div+div+div>.box-base, #step-4:checked+input+div+div+div+div>.box-base, #step-5:checked+div+div+div+div>.box-base {
top: 50%;
left: 0px;
opacity: 1;
}
#step-1:checked+input+input+input+input+div+div+div+div>.box-item, #step-2:checked+input+input+input+div+div+div+div>.box-item,
#step-3:checked+input+input+div+div+div+div>.box-item, #step-4:checked+input+div+div+div+div>.box-item, #step-5:checked+div+div+div+div>.box-item {
top: -30px;
left: 0px;
opacity: 0;
}
#step-2:checked+input+input+input+div+div+div+div>.box-lid, #step-4:checked+input+div+div+div+div>.box-lid, #step-5:checked+div+div+div+div>.box-lid {
top: -20px;
left: 0px;
opacity: 0;
}
#step-2:checked+input+input+input+div+div+div+div>.box-item, #step-4:checked+input+div+div+div+div>.box-item, #step-5:checked+div+div+div+div>.box-item {
top: -10px;
left: 0px;
opacity: 1;
}
#step-3:checked+input+input+div+div+div+div>.box-item, #step-4:checked+input+div+div+div+div>.box-item, #step-5:checked+div+div+div+div>.box-item {
top: 10px;
left: 0px;
opacity: 1;
}
#step-3:checked+input+input+div+div+div+div>.box-lid, #step-4:checked+input+div+div+div+div>.box-lid, #step-5:checked+div+div+div+div>.box-lid {
top: -1px;
left: 0px;
opacity: 1;
}
#step-3:checked+input+input+div+div+div+div>.box-ribbon, #step-4:checked+input+div+div+div+div>.box-ribbon, #step-5:checked+div+div+div+div>.box-ribbon {
top: 70%;
left: 0px;
opacity: 0;
}
#step-3:checked+input+input+div+div+div+div>.box-bow, #step-4:checked+input+div+div+div+div>.box-bow, #step-5:checked+div+div+div+div>.box-bow {
top: 0px;
left: 0px;
opacity: 0;
}
#step-4:checked+input+div+div+div+div>.box-ribbon, #step-5:checked+div+div+div+div>.box-ribbon {
top: 50%;
left: 0px;
opacity: 1;
}
#step-4:checked+input+div+div+div+div>.box-bow, #step-5:checked+div+div+div+div>.box-bow {
top: -10px;
left: 0px;
opacity: 1;
}
#step-5:checked+div+div+div+div>.box-tag,
#step-5:checked+div+div+div+div>.box-string {
top: 10px;
left: 20px;
opacity: 1;
}
.progress-status .box-string, .progress-status .box-tag, .progress-status .box-bow-right, .progress-status .box-bow-left, .progress-status .box-bow,
.progress-status .box-ribbon, .progress-status .box-item, .progress-status .box-base, .container, .progress-step::before {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
margin: auto;
}
.progress-completed, .progress-inner {
position: relative;
left: 10%;
height: 6px;
width: 0;
background: repeating-linear-gradient(45deg, #e9967a, #e9967a 4px, #b05f03 4px, #b05f03 10px);
border-radius: 6px;
z-index: -1;
transition: width 0.75s cubic-bezier(0.9, 0.015, 0.25, 1);
}
.progress-step::before {
top: 3px;
height: 30px;
width: 30px;
background: #ffffff;
color: #702963;
font-size: 12px;
line-height: 30px;
border: 3px solid #9966cc;
border-radius: 50%;
transition: all 0.5s;
cursor: pointer;
pointer-events: none;
}
.progress-step label {
position: relative;
top: -20px;
display: block;
padding-top: 50px;
cursor: pointer;
}
.progress-step:hover {
color: #9966cc;
}
.progress-step:hover::before {
background: #702963;
color: #ffffff;
}
#step-5:checked+div {
width: 80%;
}
#step-5:checked+div+div+div>.tab:nth-of-type(5), #step-4:checked+input+div+div+div>.tab:nth-of-type(4),
#step-3:checked+input+input+div+div+div>.tab:nth-of-type(3), #step-2:checked+input+input+input+div+div+div>.tab:nth-of-type(2),
#step-1:checked+input+input+input+input+div+div+div>.tab:nth-of-type(1) {
top: 0;
opacity: 1;
}
#step-5:checked+div+div+div+div {
right: 10%;
}
#step-4:checked+input+div {
width: 60%;
}
#step-4:checked+input+div+div+div+div {
right: 30%;
}
#step-3:checked+input+input+div {
width: 40%;
}
#step-3:checked+input+input+div+div+div+div {
right: 50%;
}
#step-2:checked+input+input+input+div {
width: 20%;
}
#step-2:checked+input+input+input+div+div+div+div {
right: 70%;
}
#step-1:checked+input+input+input+input+div {
width: 0%;
}
#step-1:checked+input+input+input+input+div+div+div+div {
right: 90%;
}
.progress-step:nth-of-type(1)::before {
content: "1";
}
.progress-step:nth-of-type(2)::before {
content: "2";
}
.progress-step:nth-of-type(3)::before {
content: "3";
}
.progress-step:nth-of-type(4)::before {
content: "4";
}
.progress-step:nth-of-type(5)::before {
content: "5";
}
.progress-completed {
position: relative;
top: -6px;
width: 80%;
background: #e9967a;
z-index: -2;
}
.progress-detail-tabs .tab {
position: absolute;
top: 40px;
background: #ffffff;
text-align: center;
border-radius: 8px;
margin-top: 80px;
opacity: 0;
box-shadow: 0 2px 1px #702963;
padding: 30px 20px;
transition: all 0.25s;
}
.progress-detail-tabs .tab h1 {
margin-bottom: 2%;
}
.progress-detail-tabs .tab p {
font-weight: 400;
opacity: 0.75;
}
.progress-status {
position: absolute;
top: -80px;
height: 40px;
width: 40px;
transform: translateX(50%);
transition: right 0.75s cubic-bezier(0.9, 0.015, 0.25, 1);
}
.progress-status div {
position: absolute;
opacity: 0;
transition: all 0.5s cubic-bezier(0.9, 0.015, 0.25, 1);
transition-delay: 0.25s;
}
.progress-status .box-base {
height: 40px;
width: 36px;
background: repeating-linear-gradient(45deg, #35431e, #35431e 2px, #749142 2px, #749142 4px);
border-radius: 2px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
z-index: 1;
}
.progress-status .box-lid {
top: 0;
height: 13.33px;
width: 40px;
background: #749142;
border-radius: 2px;
z-index: 2;
}
.progress-status .box-item {
height: 20px;
width: 20px;
background: #b3446c;
border-radius: 4px;
z-index: 0;
transform: rotate(45deg);
}
.progress-status .box-ribbon {
height: 42px;
width: 10px;
background: #9b111e;
border-radius: 2px;
z-index: 4;
}
.progress-status .box-bow-left, .progress-status .box-bow-right {
position: absolute;
height: 10px;
width: 6px;
background: #9b111e;
border-radius: 2px;
z-index: 3;
opacity: 1;
top: -6px;
z-index: 1;
transition-delay: 0.5s;
}
.progress-status .box-bow-left {
left: 6px;
transform: rotate(45deg);
}
.progress-status .box-bow-right {
left: -4px;
transform: rotate(-45deg);
}
.progress-status .box-tag {
height: 10px;
width: 20px;
background: #cd5c5c;
z-index: 4;
transform: rotate(-10deg) translateX(-40px) translateY(0px);
border-radius: 2px;
transition-delay: 0.5s;
}
.progress-status .box-string {
width: 17px;
height: 2px;
background: #35431e;
z-index: 4;
transform: rotate(-39deg) translateX(-22px) translateY(-12px);
}Thanks for visiting