Benefits definition - VPO

Developer
Luna Eye
Size
2,015 Kb
Views
18,216
  1. Benefits definition - VPO Previews
  2. Benefits definition - VPO HTML Codes
  3. Benefits definition - VPO CSS Codes

How do I make an benefits definition - vpo?

What is a benefits definition - vpo? How do you make a benefits definition - vpo? This script and codes were developed by Luna Eye on 16 October 2022, Sunday.

Benefits definition - VPO Previews
IQ Test

Benefits definition - VPO - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Benefits definition - VPO</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="steps"> <div class="circle circle1"> <p>text</p> </div> <div class="step1 step"> <strong>Step 1:</strong> text </div> <div class="circle circle2"> <p>here's a circle</p> </div> <div class="step2 step"> <strong>Step 2:</strong> text </div> <div class="circle circle3"> <p>here's a circle</p> </div> <div class="step3 step"> <strong>Step 3:</strong> text </div>
</div>
</body>
</html>

Benefits definition - VPO - Script Codes CSS Codes

.steps { height: 800px; background-color: white; position: relative;
}
.circle { left: 20px; position: absolute; z-index: 2; text-align: center; padding: 20px; background: #0085A1; border-radius: 50%; width: 100px; height: 100px; color: white;
}
.step { height: 150px; z-index: 1; position: absolute; background-color: #9CCDD7; color: white; padding: 80px 20px 40px 20px; text-align: center; width: 150px;
}
.step a { color: white;}
.step a:hover { color: black;}
.step:after { content: ""; position: absolute; width: 0; height: 0; left: 0; top: 100%; border-left: 75px solid rgba(0, 0, 0, 0); border-right: 75px solid rgba(0, 0, 0, 0); border-top: 35px solid #9CCDD7;
}
.step1 { left: 60px; top: 60px;
}
.circle1 { left: 90px; top: 10px;
}
.step2 { left: 60px; top: 300px;
}
.circle2 { left: 90px; top: 260px;
}
.step3 { left: 60px; top: 540px;
}
.circle3 { left: 90px; top: 500px;
}
@media all and (min-width: 699px) { .steps { height: 200px; } .circle { bottom: 40px; } .step { bottom: 10px; padding: 40px 40px 40px 60px; } .step:after { left: 100%; top: 0; border-top: 75px solid rgba(0, 0, 0, 0); border-left: 35px solid #9CCDD7; border-bottom: 75px solid rgba(0, 0, 0, 0); } .step1 { left: 60px; top: 10px; } .circle1 { left: 10px; top: 30px; } .step2 { left: 310px; top: 10px; } .circle2 { left: 260px; top: 30px; } .step3 { left: 560px; top: 10px; } .circle3 { left: 510px; top: 30px; }
}
Benefits definition - VPO - Script Codes
Benefits definition - VPO - Script Codes
Home Page Home
Developer Luna Eye
Username lunaman
Uploaded October 16, 2022
Rating 3
Size 2,015 Kb
Views 18,216
Do you need developer help for Benefits definition - VPO?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Luna Eye (lunaman) Script Codes
Name
JQuery Validate checkbox group
Toggle button
Transparent PNG overlay background image
CreateJS Particle Emitter for EG
Simple CSS overlay
Project management UX
Business Led Change
A Pen by Luna Eye
Bourbon overlay
Multiple YouTube modals - one function
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!