Product Page

Developer
Kévin Joffard
Size
6,544 Kb
Views
16,192
  1. Product Page Previews
  2. Product Page HTML Codes
  3. Product Page CSS Codes
  4. Product Page JS Codes

How do I make an product page?

What is a product page? How do you make a product page? This script and codes were developed by Kévin Joffard on 11 October 2022, Tuesday.

Product Page Previews
IQ Test

Product Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Product Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- HEADER -->
<nav> <ul class="container ul-reset"> <li><a href='#'>LOGO</a></li> <li class='droppable'> <a href='#'>Solutions</a> <div class='mega-menu'>	<div class="container cf"> <ul class="ul-reset"> <h3><a href='#'>Mobile</a></h3> <li><a href='#'>iOS (iPhone & iPad)</a></li> <li><a href='#'>Android</a></li> <li><a href='#'>Windows</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3><a href='#'>BIM & CAD</a></h3> <li><a href='#'>FINALCAD For Revit</a></li>	<li><a href='#'>Colorizer</a></li>	<li><a href='#'>FINALCAD For AutoCAD</a></li>	<li><a href='#'>Clean & Fix</a></li>	<li><a href='#'>Easy Attach</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3><a href='#'>Services</a></h3> <li><a href='#'>Implementation</a></li> <li><a href='#'>Training</a></li> <li><a href='#'>Support</a></li> </ul> <ul class="ul-reset"> <h3><a href='#'>Pricing</a></h3> </ul> </div><!-- .container --> </div><!-- .mega-menu --> </li><!-- .droppable --> <li class='droppable'> <a href='#'>Industries</a> <div class='mega-menu'> <div class="container cf"> <ul class="ul-reset infra"> <h3><a href='#'>Construction</a></h3> <li><a href='#'>Structural Works</a></li> <li><a href='#'>Architectural Works</a></li> <li><a href='#'>Remodeling</a></li> <li><a href='#'>Facility Management</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset infra"> <h3><a href='#'>Infrastructure</a></h3> <li><a href='#'>Rail</a></li> <li><a href='#'>Road</a></li> <li><a href='#'>Civil Engineering</a></li>	<li><a href='#'>Concession</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset infra"> <h3><a href='#'>Energy</a></h3> <li><a href='#'>Gas / Oil</a></li> <li><a href='#'>Energy Transportation</a></li> <li><a href='#'>Building</a></li> <li><a href='#'>Facility Management</a></li> </ul><!-- .ul-reset --> </div><!-- .container --> </div><!-- .mega-menu--> </li><!-- .droppable --> <li><a href='#'>Customers</a></li> <li><a href='#'>Help Center</a></li> <li class='droppable'> <a href='#'>About us</a> <div class='mega-menu'> <div class="container cf"> <ul class="ul-reset"> <h3><a href='#'>FINALCAD Story</a></h3> <li><a href='#'>FINALCAD Manifesto</a></li> <li><a href='#'>Who we are</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3><a href='#'>Team</a></h3>	<li><a href='#'>FINALCAD Team</a></li>	<li><a href='#'>Careers</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3><a href='#'>Blogs</a></h3> <li><a href='#'>The Construction and Infrastructure Blog</a></li> <li><a href='#'>Newsroom</a></li> <li><a href='#'>Events</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset"> <h3><a href='#'>Partners</a></h3>	<li><a href='#'>Our partners</a></li>	<li><a href='#'>Become a FINALCAD Partner</a></li> </ul><!-- .ul-reset --> </div><!-- .container --> </div><!-- .mega-menu--> </li> <li><a href='#'>Contact</a></li> <li class='droppable'> <a href='#'><img src="https://www.iconfinder.com/data/icons/world-flags-circular-1/512/49-Great_Britain_United_Kingdom_UK_England_Union_Jack_country_flag_-128.png" height="24px"></a> <div class='mega-menu'> <div class="container cf"> <ul class="ul-reset language"> <h3>World</h3> <li><a href='#'>English</a></li> <li><a href='#'>French</a></li> <li><a href='#'>Spanish</a></li> </ul><!-- .ul-reset --> <ul class="ul-reset language"> <h3>Asia</h3> <li><a href='#'>Chinese</a></li> <li><a href='#'>Japanese</a></li> <li><a href='#'>Korean</a></li> <li><a href='#'>Indonesian</a></li> <li><a href='#'>Malaysian</a></li> </ul><!-- .ul-reset --> </div><!-- .container --> </div><!-- .mega-menu--> </li> </ul><!-- .container .ul-reset -->
</nav>
<!-- COVER -->
<section class="cover-home"> <div class="cover-home--filter"> <h1 class="title-cover">FINALCAD Infrastructure</h1> <p>Built for your engineering works : road, rail, bridge</p> <div class="container--app"> <h3>Download FINALCAD Infrastructure NOW</h3> <img class="cta-app" src="https://devimages.apple.com.edgekey.net/app-store/marketing/guidelines/images/badge-download-on-the-app-store.svg" alt="black App Store badge where download on the App Store is written" /> <img class="cta-app" src="https://play.google.com/intl/en_us/badges/images/badge_new.png" alt="black Google Play badge where get it on Google Play is written" /> <img class="cta-app" src="https://assets.windowsphone.com/85864462-9c82-451e-9355-a3d5f874397a/English_get-it-from-MS_InvariantCulture_Default.png" alt="black Microsoft badge where get it from Microsoft is written" /> </div> <div class="cover-home--mouse"> <svg version="1.1" width="40px" height="40px" viewBox="30.5 -9.5 554 813" enable-background="new 30.5 -9.5 554 813" xml:space="preserve"> <path d="M328,0h-44C271.68,0,42,5.28,42,242v308c0,9.9,3.96,242,242,242h44c13.86,0,242-6.16,242-242V242C570,232.1,566.04,0,328,0z M526,550c0,191.62-177.76,198-198,198h-44C92.38,748,86,570.24,86,550V242C86,50.82,263.54,44,284,44h44 c191.62,0,198,177.76,198,198V550z"/> <circle cx="306" cy="231" r="45"/> </svg> </div> </div>
</section>
<section class="container--main"> <div class="container--main-phone"> <span class="container--main-phone-info">Animated GIF/Video</span> <img src="https://www.android.com/static/2016/img/home/os-section/phone_1x.png" alt="" /> <div class="container--main-phone-text"> <h2>Ask efficiency for your daily tasks</h2> <ul class="container--main-phone-text--list"> <li>Short ribs <strong>jerky tongue pork</strong> tenderloin turducken.</li> <li>Sirloin pig <strong>andouille bresaola</strong>, shank beef swine.</li> <li> T-bone brisket venison pancetta tri-tip <strong>corned beef bacon frankfurter</strong> turkey drumstick prosciutto ribeye pastrami.</li> <li>Short loin <strong>prosciutto ball</strong> tip venison beef ribs bresaola pork turducken meatloaf.</li> </ul> </div> </div>
</section>
<!-- FOOTER -->
<footer> <div class="container-footer"> <div class="col-4"> <div class="content-footer"> <h3>Our last videos</h3> <ul class="footer-video"> <li><div class="footer-video-play">▶︎</div></li> <li><div class="footer-video-play">▶︎</div></li> <li><div class="footer-video-play">▶︎</div></li> </ul> <ul class="footer-video"> <li><div class="footer-video-play">▶︎</div></li> <li><div class="footer-video-play">▶︎</div></li> <li><div class="footer-video-play">▶︎</div></li> </ul> </div> </div> <div class="col-4"> <div class="content-footer content-footer-news"> <h3><a href='#'>Latest News</a></h3> <h4 class="footer-blog-article first-article"><a href='#'><span class="footer-date">10/06/2042</span> - Spicy jalapeno bacon ipsum dolor amet salami swine landjaeger brisket.</a></h4> <h4 class="footer-blog-article"><a href='#'><span class="footer-date">09/06/2042</span> Filet mignon strip steak bacon sausage tenderloin pork belly venison.</a></h4> <h4 class="footer-blog-article"><a href='#'><span class="footer-date">08/06/2042</span> Sausage ground round landjaeger shoulder frankfurter pig.</a></h4> <h4 class="footer-blog-article"><a href='#'><span class="footer-date">07/06/2042</span> Venison cow burgdoggen pork ham hock beef landjaeger ground round sausage flank.</a></h4> </div> </div> <div class="col-4"> <div class="content-footer"> <h3><a href='#'>Solutions</a></h3> <h4><a href='#'>Mobile</a></h4> <h4><a href='#'>BIM & CAD</a></h4> <h4><a href='#'>Services</a></h4> <h4><a href='#'>Pricing</a></h4> <h3><a href='#'>Industries</a></h3> <h4><a href='#'>Construction</a></h4> <h4><a href='#'>Infrastructure</a></h4> <h4><a href='#'>Energy</a></h4> </div> </div> <div class="col-4"> <div class="content-footer"> <h3><a href='#'>FINALCAD</a></h3> <p><i>FINALCAD is a leader in field service management software for the construction, infrastructure and energy industries</i></p> <h3>Follow FINALCAD</h3> <H4><a href='#'>Facebook</a></H4> <h4><a href='#'>Twitter</a></h4> <h4><a href='#'>LinkedIn</a></h4> <h4><a href='#'>YouTube</a></h4> </div> </div> </div> <div class="footer-bottom"> <div class="bottom-content"> <p><a href="#">Legal Info</a> <span class="footer-sep">∙</span></p> <p><a href="#">Terms of use</a> <span class="footer-sep">∙</span></p> <p><a href="#">Privacy Policy</a> <span class="footer-sep">∙</span></p> <p><a href="#">Piracy</a> <span class="footer-sep">∙</span></p> <p><a href="#">Sitemap</a> <span class="footer-sep"></span></p> </div> </div>
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Product Page - Script Codes CSS Codes

/* #Resets
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit; }
/* #Universal and Default Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html, body {min-height: 100%;}
body {	background: #FFF;	color: #071D49;	font-family: "Open Sans", sans-serif;	font-size: 14px;	line-height: 1;	margin: 0;	padding: 0;	text-align: center;
}
a {text-decoration: none;}
h1 {	font-size: 40px; font-weight: 700;	margin-bottom: 20px; margin-top: 20px;
}
h2 {	font-size: 15px;	font-weight: 600;	margin-bottom: 30px;	margin-top: 10px;
}
.container {	margin: auto;	width: 1028px;
}
.ul-reset {	padding-left: 0; margin: 0 auto;	list-style: none;
}
/* #Navigation Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {	background: #FFF;	font-size: 0;	position: fixed; width: 100%;
}
nav > ul > li {	display: inline-block;	font-size: 14px;	padding: 0 15px;	position: relative;
}
nav > ul > li:first-child {padding-left: 0;}
nav > ul > li:last-child {padding-right: 0;}
nav > ul > li > a {	color: #071D49;	display: block;	position: relative;	padding: 20px 0;	border-bottom: 3px solid transparent;	text-transform: uppercase;	font-weight: bold;
}
nav > ul > li:hover > a {	color: #071D49;	border-bottom: 3px solid #071D49;
}
nav > ul > li:hover:first-child > a {	color: #071D49;	border-bottom: 3px solid transparent;
}
/* #Mega Menu Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mega-menu {	background: #EFF0F2;	visibility: hidden;	left: 0;	position: absolute;	text-align: left;	width: 100%;	opacity: 0;	z-index: 9000;
}
.mega-menu h3 {color: #071D49;}
.mega-menu ul {	float: left;	margin-bottom: 20px;	margin-right: 40px;	width: 21%;
}
.mega-menu h3 > a {	border: 0;
}
.mega-menu ul:last-child {	margin-right: 0;
}
.mega-menu .language {	margin: auto;	margin-right: auto !important;	margin-bottom: 20px;	float: inherit !important;
}
.mega-menu .language { margin: auto; margin-right: auto !important; margin-bottom: 20px; width: 48%; display: inline-block; vertical-align: top;
}
.mega-menu li { display: block;
}
.mega-menu .infra { margin: auto; margin-right: 20px; margin-bottom: 20px; width: 31%; display: inline-block; vertical-align: top;
}
.mega-menu .language:first-child {	margin-right: 20px !important;
}
.mega-menu .language:last-child,
.mega-menu .infra:last-child{	margin-right: 0;
}
.mega-menu a {	border-bottom: 1px solid #CBC4BC;	color: #071D49;	display: block;	padding: 10px 0;
}
.mega-menu a:hover {color: #FFC72C;}
/* #Droppable Class Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.droppable {	position: static;
}
.droppable > a:after { content: "⌄";	font-family: "Open Sans";	font-size: 16px;	padding-left: 6px;	position: relative;	top: -1px;
}
.droppable:hover .mega-menu {	visibility: visible;	opacity: 1;	transition: opacity .15s ease-in;
}
.droppable img { margin-bottom: -5px;
}
/* SECTION ----------------------
*/
.cover-home { height: 80vh; min-height:700px; width: 100%; background: url(http://www.nssga.org/wp-content/uploads/2013/11/highways-interchange.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #FFF;
}
.cover-home--filter { background: rgba(1,1,1,0.4); height: 100%;
}
.cover-home h1 { font-size: 3rem; color: #FFF; margin: 0; padding-top: 12rem;
}
cover-home p { font-weight: 900;
}
.container--app { margin-top: 8rem;
}
.cta-app { width: 150px; height: 50px; display: inline-block;
}
.cta-app:hover { cursor: pointer;
}
.cover-home--mouse { margin: 0 auto; margin-top: 56px;
}
.cover-home--mouse svg { fill: #FFF;
}
circle { animation: scroll 1.5s ease infinite;
}
@keyframes scroll { 0% { opacity: 0; cy: 481; } 33% { opacity: 1; } 100% { opacity: 0; cy: 231; }
}
/* Main Container
__________________________________________________ */
.container--main { width: 1024px; padding: 24px 0; margin: 0 auto; text-align: left;
}
.container--main-phone > * { display: inline-block; vertical-align: top;
}
.container--main-phone-info { position: absolute; left: 350px; top: 1000px; text-transform: uppercase; font-weight: 700; z-index: -9999;
}
.container--main-phone-text { padding: 24px; float: right; display: block; width: 60%;
}
.container--main-phone-text h2 { font-size: 24px; text-transform: uppercase;
}
.container--main-phone-text--list li { margin-bottom: 24px;
}
.container--main-phone-text--list{ list-style-image: url(https://avatars2.githubusercontent.com/u/7592480?v=3&s=200);
}
.container--main-phone-text--list strong { color: #FFC72C; text-transform: uppercase; font-weight: 900;
}
/* #Browser Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cf:before,
.cf:after {	content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after {clear: both;}
/* FOOTER
---------------------------------
*/
.content { height: 100%;
}
.content-inside { padding: 20px; padding-bottom: 50px;
}
body { font: 16px Sans-Serif;
}
footer { background-color: #EFF0F2; color: #63666A; padding-top: 1rem; -webkit-transition: height .3s ease-out; -moz-transition: height .3s ease-out; -o-transition: height .3s ease-out; transition: height .3s ease-out; text-align:left;
}
.container-footer { width: 95%; height: 100%; margin: 0 auto;
}
.col-4 { width: 24%; min-height: 90%; display: inline-block; vertical-align: top; border-right: 1px solid #dedede; margin-bottom: 1rem;
}
.col-4:last-child { border-right: 0;
}
.content-footer > * { padding-left: 1rem; font-weight: 300;
}
.content-footer > h3 { width: 100%; text-transform: uppercase; font-weight: 500; line-height: 50px; font-size: 1rem;
}
.content-footer h4 { font-size: .9rem; line-height: 1.5; font-weight: 300; color: #CBCBCB;
}
.content-footer-news h3 { padding-left: 1rem;
}
.content-footer-news > * { padding-left: 0;
}
/* 1st Left Column */
.footer-video { width: 100%;
}
.footer-video li { display: inline-block; width: 25%; height: 5rem; background: #FFF; -webkit-transition: background .3s ease-out; -moz-transition: background .3s ease-out; -o-transition: background .3s ease-out; transition: background .3s ease-out; margin-bottom: 1rem;
}
.footer-video-play { font-size: 2rem; height: 2rem; width: 1.7rem; margin: 0 auto; margin-top: 1.2rem; -webkit-transition: background-color 2s ease-out; -moz-transition: background-color 2s ease-out; -o-transition: background-color 2s ease-out; transition: background-color 2s ease-out;
}
.footer-video li:hover { background: #071D49; cursor: pointer;
}
li:hover .footer-video-play { color: #FFC72C;
}
/* Footer Blog Articles */
.footer-date { font-weight: 500;
}
.footer-blog-article { border-bottom: 1px dashed; width: 90%; padding-bottom: .5rem; padding-top: .5rem; margin: auto;
}
.first-article { padding-top: 0;
}
.content-footer a { text-decoration: none; color: #63666A;
}
.content-footer a:hover { color: #FFC72C; text-decoration: underline;
}
.content-footer p { line-height: 1.2; font-size: .8rem; margin-bottom: 1rem;
}
li { list-style: none; display: inline-block; margin-right: 0.5rem;
}
.footer-menu > li { display: block; margin: 0; padding-left: .5rem;
}
.footer-menu a { color: #CBC4BC;
}
.content-footer img{ width:240px; margin: 0 auto;
}
/* Footer Bottom */
.footer-bottom { width: 100%; padding: 1rem 0; background: #63666A;
}
.bottom-content { text-align: center;
}
.bottom-content p { display: inline-block; color: #FFF; font-weight: 100;
}
.footer-sep { vertical-align: -2px !important;
}
.bottom-content p a { color: #FFF; font-size: .7rem; text-decoration: none; border-bottom: 1px dashed #FFF;
}
.bottom-content p a:hover { color: #FFC72C; border-bottom: 1px solid #FFC72C;
}
/* MEDIA */
@media (max-width:1330px) { footer { height: 26rem; }
}
@media (max-width:1115px) { footer { height: 30rem; }
}
@media (max-width:980px) { .col-4 { width: 100%; min-height: 0; display: block; margin-bottom: 1rem; border-right: 0; text-align: center; } footer { height: 44rem; } .content-footer h4 { display: inline-block; } .content-footer > h3 { width: 100%; } .footer-blog-article { margin-left: 1rem; text-align: left; } .footer-video:last-child { display: none; }
}
@media (max-width:760px) { footer { height: 40rem; } .col-4:first-child { display: none; }
}
@media (max-width:385px) { footer { height: 48rem; }
}

Product Page - Script Codes JS Codes

$(function() { $('a[href*=#]').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear'); });
});
Product Page - Script Codes
Product Page - Script Codes
Home Page Home
Developer Kévin Joffard
Username kejoff
Uploaded October 11, 2022
Rating 3
Size 6,544 Kb
Views 16,192
Do you need developer help for Product Page?

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!

Kévin Joffard (kejoff) Script Codes
Name
Landing Page 3 columns oblique
Animation iFrame Google maps - Vanilla Javascript
Footer new generation
Aframe - Hello Metaverse Testing
Footer Grid
Experimentation - Gmaps Colors
Grid 2 columns test
Vertical Accordeon Menu
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!