Product Information Section

Developer
Marty Powell
Size
3,808 Kb
Views
12,144
  1. Product Information Section Previews
  2. Product Information Section HTML Codes
  3. Product Information Section CSS Codes

How do I make an product information section?

What is a product information section? How do you make a product information section? This script and codes were developed by Marty Powell on 20 December 2022, Tuesday.

Product Information Section Previews
IQ Test

Product Information Section - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Product Information Section</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="product__info"> <header> <h1 class="product__name">Product Name</h1> </header> <div class="product__content"> <div class="product__reviews yotpo" data-product-id="" data-name="" data-url="" data-image-url="" data-description=""> </div><!-- Yotop Markup is created on the fly by a script --> <div class="product__options"> <p>This will be a form custom to each product.</p> </div><!-- Product Options, this will be different for different types of products. --> <div class="product__pricing"> <p> <span class="product__pricing--label">ONLY...</span> <span class="product__pricing--default is-on-sale">$1.40</span> <span class="product__pricing--sale">$1.20</span> </p> </div><!-- Product Pricing --> <div class="product__turnover"> <p style="display: inline-block;" class="estimated-shipping-message "> <span class="product__turnover--label">In-lab time</span> <span class="product__turnover--time">: 1 - 2 business days</span> <img id="more-info" class="product__turnover--info-image" src="//s3.amazonaws.com/PNCGalleries/static/images/NPL_Info_BTN2.png" /> </p> </div><!-- Product Turnover Times --> </div> <footer> <a href="product__action" href="#">Action Button</a> <p class="product__action--optional">or, download <a href="/roes_professional.aspx">ROES Desktop Software</a></p> </footer>
</section>
</body>
</html>

Product Information Section - Script Codes CSS Codes

/*-- Existing --*/
body .learn-more { font-size: .9em; margin-left: 15px;
}
body #more-info-hover { position: absolute; top: -47px; right: 0; padding: 10px; border: 2px dotted #44a5bd; background-color: #fff; z-index: 20;
}
body #more-info-hover p { margin: 0; padding: 0;
}
body .estimated-shipping, body .modal-container { display: none;
}
body .estimated-shipping-message { padding-bottom: 10px;
}
body .estimated-shipping-message, body .estimated-shipping-message span { font-family: 'Futura', 'Open Sans', arial, sans-serif; font-size: 14px;
}
body .estimated-shipping-table { border-collapse: collapse; font-size: 1.25em; margin: 10px auto 20px; width: 80%;
}
body .estimated-shipping-table td { font-weight: 900; padding: 5px 0; text-align: left;
}
body .estimated-shipping-table tr { border-bottom: 2px dotted #939598;
}
body .estimated-shipping-table tr:last-child td { border-bottom: none;
}
body .estimated-shipping-table td.date { font-weight: 100; text-align: right;
}
body .estimated-shipping-notes { padding-left: 10px; min-width: 500px;
}
body .estimated-shipping-notes p { margin: 0; padding: 0; text-align: left;
}
body .fancybox-skin { background: white !important;
}
body .center-me { text-align: center; width: 100%;
}
body .center-me img { margin-left: -25px; width: 100%;
}
@media screen and (max-width: 600px) { body .estimated-shipping-notes { min-width: 0px; }
}
body .production-time-gray { background-color: #b2b3b5;
}
body .animate-background { -webkit-transition: background-color 2500ms linear; -moz-transition: background-color 2500ms linear; -o-transition: background-color 2500ms linear; -ms-transition: background-color 2500ms linear; transition: background-color 2500ms linear;
}
body .animate-background { background-color: white;
}
body .shipping-details { color: #333 !important; text-decoration: underline;
}
/*-- New --*/
.product__info { text-align: center;
}
.product__pricing { border-bottom: 2px dotted #939598; border-top: 2px dotted #939598; font-size: 30px; font-weight: 600; padding: 10px 0;
}
.product__pricing--label { color: #939598; font-size: 18px; line-height: 27px;
}
.product__pricing--default { color: #44a5bd;
}
.product__pricing--default.is-on-sale { text-decoration: line-through;
}
.product__pricing--sale { color: #de591f;
}
.product__turnover { padding: 10px 0; text-align: center;
}
.product__turnover--label { font-weight: 900;
}
.product__turnover--time { font-family: 'Futura', 'Open Sans', arial, sans-serif; font-size: 14px;
}
.product__turnover--info-image { cursor: pointer; display: inline; margin-bottom: -1px; padding-left: 5px; width: 14px;
}
/*-- PEN ONLY --*/
p { margin: 0;
}
Product Information Section - Script Codes
Product Information Section - Script Codes
Home Page Home
Developer Marty Powell
Username martypowell
Uploaded December 20, 2022
Rating 3
Size 3,808 Kb
Views 12,144
Do you need developer help for Product Information Section?

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!

Marty Powell (martypowell) Script Codes
Name
CSS Animation Grayscale to Color Photo
Slick Carousel Prototype
Animated Skip Nav
News Snippet
Donation Bar
A Pen by Marty Powell
Search and Filter
About Me
Side Navigation
John Deere News Release Redesign
Create amazing video scripts 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!