Mock up health chart with pop ups.
How do I make an mock up health chart with pop ups.?
CSS only.. What is a mock up health chart with pop ups.? How do you make a mock up health chart with pop ups.? This script and codes were developed by Eric Franklin on 25 July 2022, Monday.
Mock up health chart with pop ups. Previews
Mock up health chart with pop ups. - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mock up health chart with pop ups.</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h2>Executive Wellness Health Chart</h2> <div class="box1" onclick=""> <h1> Heart </h1> <ul class="heart"> <li>Cholesterol Panel </li> <li>EKG </li> <li>Treadmill Stress Test </li> <li>Cardio CRP * </li> <li>Coronary Calcium Score </li> </ul><a class="pop-up-link" href="#">Annually</a> </div> <div class="box2" onclick=""> <h1> Lungs </h1> <ul class="lungs"> <li>Chest X-Ray </li> <li>Pulmonary Function Testing </li> </ul><a class="pop-up-link" href="#">Age 40</a> </div> <div class="box3" onclick=""> <h1> Skin </h1> <ul class="skin"> <li>Dermatological Skin Check </li> </ul><a class="pop-up-link" href="#">Annually</a> </div> <div class="box4" onclick=""> <h1> Men's Health </h1> <ul class="men"> <li>Prostate-specific Antigen(PSA) </li> <li>Digital Rectal Examination </li> </ul><a class="pop-up-link" href="#">Age 50</a> </div> <p>* Not actual health advice...</p>
</div>
</body>
</html>Mock up health chart with pop ups. - Script Codes CSS Codes
body, html { background-color: #ccc; height: 100%;
}
h1 { color: white;
margin: 0 auto;
padding-left: 35px;
position: relative;
top: 35%;
font-size: 24px;
}
h2 { position: relative; margin: 0 auto; top: 8%; padding-left: 25%; color: white; font-size: 22px;
}
p { position: relative; margin: 0 auto; top: 12%; padding-left: 55%; font-style: italic; font-size: 12px;
}
.container { height: 100%; position: relative; float: left; left: -80px;
}
.box1 { width: 450px; height: 150px; position: relative; background-color: #ec9f13; left: 25%; top: 10%;
}
.box2 { width: 450px; height: 100px; position: relative; background-color: #ee8118; left: 25%; top: 10%;
}
.box3 { width: 450px; height: 60px; position: relative; background-color: #b7c611; left: 25%; top: 10%;
}
.box4 { width: 450px; height: 100px; position: relative; background-color: #9bc114; left: 25%; top: 10%;
}
.box1:hover .pop-up-link, .box1:active .pop-up-link { opacity: .8; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);
}
.box1:hover .pop-up-link, .box1:hover .pop-up-link:active, .box1:active .pop-up-link:hover, .box1:active .pop-up-link:active { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);
}
.box2:hover .pop-up-link, .box2:active .pop-up-link { opacity: .8; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);
}
.box2:hover .pop-up-link, .box2:hover .pop-up-link:active, .box2:active .pop-up-link:hover, .box2:active .pop-up-link:active { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);
}
.box3:hover .pop-up-link, .box3:active .pop-up-link { opacity: .8; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);
}
.box3:hover .pop-up-link, .box3:hover .pop-up-link:active, .box3:active .pop-up-link:hover, .box3:active .pop-up-link:active { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);
}
.box4:hover .pop-up-link, .box4:active .pop-up-link { opacity: .8; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);
}
.box4:hover .pop-up-link, .box4:hover .pop-up-link:active, .box4:active .pop-up-link:hover, .box4:active .pop-up-link:active { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);
}
.pop-up-link { position: absolute; top: 0; right: 0; width: 90px; height: 90px; line-height: 90px; margin-top: -45px; margin-right: -45px; text-align: center; background: #757474; border-radius: 50%; color: white; text-decoration: none; opacity: 0; -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); -webkit-transform: scale(0.7); transform: scale(0.7); -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s;
}
.heart { position: relative; float: right; right: 15%; bottom: 15%; color: white;
}
.lungs { position: relative; float: right; right: 11%; bottom: 10%; color: white;
}
.skin { position: relative; float: right; right: 11%; bottom: 35%; color: white;
}
.men { position: relative; float: right; right: 6%; bottom: 20%; color: white;
}
| Developer | Eric Franklin |
| Username | FDfranklin |
| Uploaded | July 25, 2022 |
| Rating | 3 |
| Size | 2,352 Kb |
| Views | 48,576 |
Do you need developer help for Mock up health chart with pop ups.?
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!
Eric Franklin (FDfranklin) Script Codes
| Name | Size |
| Animated Image | 1,649 Kb |
| Portfolio Landing Page | 3,585 Kb |
| Lightning Vs. Penguins Hover Thingy | 3,000 Kb |
| A Pen by Eric Franklin | 3,491 Kb |
| Fun nav bar blog style | 4,813 Kb |
| Donation Counter | 2,994 Kb |
| Responsive Wedding Page | 7,425 Kb |
| Iguana Blog - LESS | 3,430 Kb |
| Responsive Table Idea | 2,358 Kb |
| Auto Loan Calculator | 3,728 Kb |
Create amazing SEO content 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!
Similar Scripts & Codes
| Name | Username | Size |
| Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
| Clock with full screen background | Owebboy | 2,415 Kb |
| Clock Face Idea | Chrisburnell | 3,196 Kb |
| Button fills | Zubfatal | 5,205 Kb |
| NgEasyModal | Lorenzodianni | 4,159 Kb |
| Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
| My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
| Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
| A Pen by Ben Babics | Benbabics | 2,957 Kb |
| Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!