A Pen by JasonPark

Developer
JasonPark
Size
3,087 Kb
Views
8,096
  1. A Pen by JasonPark Previews
  2. A Pen by JasonPark HTML Codes
  3. A Pen by JasonPark CSS Codes

How do I make an a pen by jasonpark?

What is a a pen by jasonpark? How do you make a a pen by jasonpark? This script and codes were developed by JasonPark on 19 December 2022, Monday.

A Pen by JasonPark Previews
IQ Test

A Pen by JasonPark - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by JasonPark</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"rel="stylesheet"'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="nav nav-progress"> <li class="step active"><a href="#1">Prescription</a></li> <li class="step"><a href="#2">Shipping</a></li> <li class="step"><a href="#3">Pament & Review</a></li>
</ul>
<div class="column"> <form id="prescription-form"> <div class="enter-prescription title"> Enter your prescription </div> <div id="choose-lense-selector"> <div class="label"> What kind of glasses do you need? </div> <ul class="option-box-wrapper"> <li class="option-box"> <div class="sub-title">Prescription</div> <div class="description">I need prescription for my lenses</div> </li> <li class="option-box"> <div class="sub-title">Non-Prescription</div> <div class="description">I need Non-prescription lenses for my glasses</div> </li> </ul> <ul class="prescription-type-radios"> <li> <input type="radio" id="manually" name="selector"> <label for="manually">I would like to enter my prescription</label> <div class="check"></div> </li> <li> <input type="radio" id="reading-glasses" name="selector"> <label for="reading-glasses">I need reading glasses</label> <div class="check"> <div class="inside"></div> </div> </li> <li> <input type="radio" id="upload-photo" name="selector"> <label for="upload-photo">I would like to upload a photo of prescription</label> <div class="check"> <div class="inside"></div> </div> </li> </ul> </div> <div class="prescription-information"> <div class="information" id="reading-glasses"><p>The prescription of reading glasses contains a plus (+) before the strength value, ranging from +0.25 to +4.00. If you have a prescription which includes cylinder and axis values,<br> please use the 'I would like to enter my prescription.' option.<br> Please contact us if you have a value for 'Addition' or 'ADD' on your prescription.<br> We would be happy to help you out with your details.<br>
Warning! The strength of your contact lenses is not the same as the strength of your glasses. </p></div> <label>Reading glasses strength</label> <select> <option selected disabled>Please choose</option> <option value="1">1.0</option> <option value="2">2.0</option> </select></div> </div> </div> </form>
</div>
<div class="aside"> <div class="order-summary"> <div class="title">Order Summary</div> <div> <div class="product-name">Tobias</div> <ul class="attirubtes"> <li class="attribute">Grey</li> <li class="attribute">Progressive Lens</li> </ul> <div class="qty-subtotal-wrapper"> <div class="qty">Qty : 1</div> <div class="subtotal">Euro 249</div> </div> </div> </div>
</div>
</body>
</html>

A Pen by JasonPark - Script Codes CSS Codes

body { font-family:Roboto, sans-serif; font-weight: 300;
}
ul, li { list-style:none; margin:0; padding:0;
}
a { color:black; text-decoration:none;
}
.column { width: 60%; float:left;
}
.aside{ width: 30%; float:right;
}
.nav-progress { counter-reset: checkout-counter;
}
.nav.nav-progress .step{ display:inline-block; padding:20px; opacity:0.6;
}
.nav .step:before{ content:counter(checkout-counter) '. '; counter-increment:checkout-counter;
}
.nav .step.active{ font-weight:700; opacity:1.0;
}
#prescription-form{ padding-left:20px; padding-right:20px;
}
.title { font-size:18px; font-weight:400; padding-top:10px; padding-bottom:10px; border-bottom:1px solid #bbb; margin-bottom:15px;
}
.enter-prescription.title{
}
#choose-lense-selector > .label { padding-top:10px; padding-bottom:10px;
}
.option-box-wrapper { width:100%; padding-top:10px; padding-bottom:10px;
}
.option-box-wrapper .option-box { vertical-align:top; display:inline-block; text-align:center; border:1px solid #e3b6a4; padding-top:100px; padding-bottom:100px; width:40%;
}
.option-box-wrapper .option-box:first-child{ margin-right:30px;
}
.option-box-wrapper .option-box .sub-title{ border-bottom:1px dashed #bbb; font-weight:400; padding-bottom:25px; width:70%; margin:0 auto;
}
.option-box-wrapper .option-box .description{ padding-top:30px; padding-bottom:30px; height:50px;
}
.prescription-type-radios li{ position:relative;
}
.prescription-type-radios li input[type=radio]{ position:absolute; visibility:hidden;
}
.prescription-type-radios li label{ display: block; position: relative; font-weight: 300; margin: 10px auto; height: 30px; padding-left:30px; z-index: 9; cursor: pointer;
}
.prescription-type-radios li .check{ display: block; position: absolute; border: 1px solid black; border-radius: 100%; height: 16px; width: 16px; top: 0px; left: 0px;	z-index: 5;
}
.prescription-type-radios li .check::before { display: block; position: absolute;	content: ''; border-radius: 100%; height: 10px; width: 10px; top: 3px;	left: 3px; margin: auto;
}
input[type=radio]:checked ~ .check { border: 1px solid black;
}
input[type=radio]:checked ~ .check::before{ background: black;
}
input[type=radio]:checked ~ label{ color: black;
}
.information p{ font-size:10px; color:#e3b5a4;
}
A Pen by JasonPark - Script Codes
A Pen by JasonPark - Script Codes
Home Page Home
Developer JasonPark
Username wooljs
Uploaded December 19, 2022
Rating 3
Size 3,087 Kb
Views 8,096
Do you need developer help for A Pen by JasonPark?

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!

JasonPark (wooljs) Script Codes
Name
Cs
Search popup
Counter Example 001
Popup-modal
Polar Coordinate - Rose shape
Polar Coordinate - Archimedean spiral
Guidepopup
Digital Calculator
Javascript Queue
Lookbook module
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!