A Pen by Pongstr

Developer
Pongstr
Size
4,239 Kb
Views
14,168
  1. A Pen by Pongstr Previews
  2. A Pen by Pongstr HTML Codes
  3. A Pen by Pongstr CSS Codes

How do I make an a pen by pongstr?

What is a a pen by pongstr? How do you make a a pen by pongstr? This script and codes were developed by Pongstr on 21 September 2022, Wednesday.

A Pen by Pongstr Previews
IQ Test

A Pen by Pongstr - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Pongstr</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Raleway:400,300,500|Roboto:400,300,500'> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<div class="container"> <div class="product-main"> <div class="product-main-inner">	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://i.warbyparker.com/d/f/4009f1bbe98d7934a51df811801c8a35c66cbdd8/1000x480" alt="..."> </div> <div class="item"> <img src="https://i.warbyparker.com/d/c/842d6b15fa3189abfef60426e6b8bf93909949ea/1000x480" alt="..."> </div> <div class="item"> <img src="https://i.warbyparker.com/d/f/ba2c26792abb87c3100565c78bfb4f9b1a935e18/1000x480" alt="..."> </div> </div>	</div> </div> <div class="product-thumbs">	<div class="product-thumb-col" data-target="#carousel-example-generic" data-slide-to="0">	<img src="https://i.warbyparker.com/d/f/4009f1bbe98d7934a51df811801c8a35c66cbdd8/1000x480" alt="...">	</div>	<div class="product-thumb-col" data-target="#carousel-example-generic" data-slide-to="1"> <img src="https://i.warbyparker.com/d/c/842d6b15fa3189abfef60426e6b8bf93909949ea/1000x480" alt="...">	</div>	<div class="product-thumb-col" data-target="#carousel-example-generic" data-slide-to="2"> <img src="https://i.warbyparker.com/d/c/842d6b15fa3189abfef60426e6b8bf93909949ea/1000x480" alt="...">	</div> </div> </div> <br> <div class="row"> <div class="col-xs-12 col-sm-5 col-md-4 pull-right"> <br> <div class="panel panel-default"> <div class="panel-heading"> <span class="pull-right"> <a href="#">100 Reviews</a> &nbsp;|&nbsp; <a href="#">Write Review</a> </span> <h5 class="panel-title">Reviews &amp; Ratings</h5> </div> <div class="list-group"> <div class="list-group-item text-right"> <span class="h1"> <sup>PRICE</sup> $110.00 </span> <span class="label label-success pull-left"> CLEARANCE SALE!!! </span> <div class="clearfix"></div> </div> </div> <div class="panel-body"> <div class="form-group"> <label for="frame-color">Select Frame Color</label> <select class="form-control input-lg" id="frame-color"> <option value="">Midnight Madness</option> </select> </div> <div class="row"> <div class="col-sm-4"> <input type="number" class="form-control input-sm" value="1"> <small class="help-block">Add Quantity</small> </div> <div class="col-sm-8"> <input type="text" class="form-control input-sm" placeholder="Add your Promo Code Here"> <small class="help-block">Apply Promo Code</small> </div> </div> <br> <div class="form-group"> <button class="btn btn-block btn-success btn-lg"> <i class="glyphicon glyphicon-shopping-cart"></i> Check Out </button> </div> </div> </div> </div> <div class="col-xs-12 col-sm-7 col-md-8"> <h2>Paxton <small>A must-have shape for the season. Offers an easy to wear trend-right aviator style.</small> </h2> <hr> <p> <span class="h3">Medium</span> <small class="help-block">WIDTH</small> </p> <p> <span class="h3">61-12-140</span> <small class="help-block">MEASUREMENTS</small> </p> <p class="h3">Lenses</p> <ul style="margin-left: -10px;"> <li><span class="h5">Prescription lenses are made from polycarbonatethe most impact-resistant material on the market</span></li> <li><span class="h5">Non-prescription lenses are made with CR-39 for maximum clarity and color. </span></li> <li><span class="h5">Anti-scratch and anti-reflective coating included </span></li> <li><span class="h5">Offer 100% UV protection </span></li> </ul> <p class="h3">Materials</p> <ul style="margin-left: -10px;"> <li><span class="h5">Made from custom cellulose acetate</span></li> <li><span class="h5">Akulon-coated screws for durability </span></li> <li><span class="h5">Cut from a single sheet of acetate to maintain color parity.</span></li> </ul> </div> </div>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>
</body>
</html>

A Pen by Pongstr - Script Codes CSS Codes

body { font-family: "Roboto", sans-serif; font-size: 13px; line-height: 1.6;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Raleway", sans-serif;
}
h1 small, h2 small, h3 small, h4, h5 small, h6 small,
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small { display: block; font-size: 65%; line-height: 1.4;
}
.h1 sup, .h2 sup { top: -15px; font-size: 45%; color: #666;
}
.lead span { font-size: 16px; line-height: 1;
}
.container { padding-top: 100px; padding-bottom: 100px;
}
.product-main { -moz-transition: padding-bottom 0.3s ease; -o-transition: padding-bottom 0.3s ease; -webkit-transition: padding-bottom 0.3s ease; transition: padding-bottom 0.3s ease; position: relative; border: 1px solid #ddd; overflow: hidden;
}
.product-main:hover + .product-thumbs { bottom: 0;
}
.product-main:hover { -moz-transition: padding-bottom 0.3s ease; -o-transition: padding-bottom 0.3s ease; -webkit-transition: padding-bottom 0.3s ease; transition: padding-bottom 0.3s ease;
}
@media (max-width: 767px) { .product-main:hover { padding-bottom: 90px; }
}
@media (min-width: 768px) { .product-main:hover { padding-bottom: 100px; }
}
@media (min-width: 970px) { .product-main:hover { padding-bottom: 122px; }
}
@media (min-width: 1170px) { .product-main:hover { padding-bottom: 144px; }
}
.product-main-inner { position: relative;
}
.product-main-inner:before, .product-main-inner:after { display: table; content: " ";
}
.product-main-inner:after { clear: both;
}
.product-main-inner img { width: 96%; height: auto; margin-left: auto; margin-right: auto;
}
.product-thumbs { position: absolute; left: 0; z-index: 1500; width: 100%; text-align: center; background-color: #fff; border-top: 1px solid #ddd;
}
.product-thumbs:before, .product-thumbs:after { display: table; content: " ";
}
.product-thumbs:after { clear: both;
}
@media (max-width: 767px) { .product-thumbs { height: 90px; }
}
@media (min-width: 768px) { .product-thumbs { height: 100px; }
}
@media (min-width: 970px) { .product-thumbs { height: 122px; }
}
@media (min-width: 1170px) { .product-thumbs { height: 144px; }
}
.product-thumbs .product-thumb-col { display: inline-block; width: 30%; padding: 15px;
}
.product-thumbs .product-thumb-col.active { background-color: #eee;
}
.product-thumbs img { width: 75%; max-width: 75%; height: auto;
}
A Pen by Pongstr - Script Codes
A Pen by Pongstr - Script Codes
Home Page Home
Developer Pongstr
Username pongstr
Uploaded September 21, 2022
Rating 3
Size 4,239 Kb
Views 14,168
Do you need developer help for A Pen by Pongstr?

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!

Pongstr (pongstr) Script Codes
Name
Github Commit List
Flexbox
Work in progress
Code Snippets Icon
Email Form
Off-Canvas
A Pen by Pongstr
User List
Spinner
Bootstrap Blank State
Create amazing Facebook ads 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!