JerrDan Home page

Developer
Delano
Size
3,684 Kb
Views
14,168
  1. JerrDan Home page Previews
  2. JerrDan Home page HTML Codes

How do I make an jerrdan home page?

What is a jerrdan home page? How do you make a jerrdan home page? This script and codes were developed by Delano on 19 October 2022, Wednesday.

JerrDan Home page Previews
IQ Test

JerrDan Home page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JerrDan Home page</title>
</head>
<body> <head>
<html lang="en-US">
<title> Welcome to the JerrDan Shop</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:700, 300' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" type="image/png" href="images/JerrDan_Favicon.png"/>
<style>
body { background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(244, 244, 244, 1) 0%, rgba(240, 240, 240, 1) 100%) repeat scroll 0 0; min-height: 100%; min-width: 100%;
}
html { font-size: 62.5%;
}
body { color: #444444; font-family: Open Sans, sans-serif; font-size: 1.4rem; font-size: 100%; font-weight: normal;
}
#contentWrapper { margin: 0px 0px 0px 0px;
}
.siteContainer { margin: 0 auto; max-width: 100%; width: 100%;
}
.clearFix::before,
.clearFix::after { content: ""; display: table;
}
.clearFix::after { clear: both;
}
.clearFix::before,
.clearFix::after { content: ""; display: table;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video { border: 0 none; font: inherit; margin: 0; padding: 0; vertical-align: baseline; }
/* HomePage Slider */
.main_slider { max-width: 1000px; height: 470px; margin: 50px auto; position: relative; margin-bottom: 5px;
}
.slide1,.slide2,.slide3,.slide4,.slide5 { position: absolute; width: 100%; height: 100%; background-repeat:no-repeat; background-size: contain;
background-position: center;
}
.slide1 { background-image: url("https://adform.imgix.net/Slide1.jpg"); animation:fade 15s infinite;
-webkit-animation:fade 15s infinite;
}
.slide2 { background-image: url("https://adform.imgix.net/Slide2.jpg"); animation:fade2 15 infinite;
-webkit-animation:fade2 15s infinite;
}
.slide3 { background-image: url("https://adform.imgix.net/Slide3.jpg"); animation:fade3 15s infinite;
-webkit-animation:fade3 15s infinite;
}
@keyframes fade
{ 0% {opacity:1} 33.333% { opacity: 0} 66.666% { opacity: 0} 100% { opacity: 1}
}
@keyframes fade2
{ 0% {opacity:0} 33.333% { opacity: 1} 66.666% { opacity: 0 } 100% { opacity: 0}
}
@keyframes fade3
{ 0% {opacity:0} 33.333% { opacity: 0} 66.666% { opacity: 1} 100% { opacity: 0}
}
#spotlightSection { background: #ffffff none repeat scroll 0 0; padding: 15px 0px 0px 0px;
}
.clearFix {}
.clearFix { clear: both;
}
/*Scrolling Text */
/*html, body {margin:0; padding: 0; width: 100%;}*/
#promo-notifications{
background: #FF0000;
font-size: 20px;
width: 100%;
font-family: 'Oswald', sans-serif;
font-weight: 300;
}
#promo-notifications ul {
width: 100%;
height: 45px;
position: relative;
overflow: hidden;
}
#promo-notifications li {
text-transform: uppercase;
width: 100%;
color: #fff;
line-height: 43px;
height: 35px;
position: relative;
top: 0;
left: 100%;
text-align: center;
list-style: none;
text-decoration: none;
}
/*Animation and feature images*/
/* generic css */
.view { /*margin : 1.3%;*/ width: 33.33%; height: auto; float: left; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; /*background: #fff url(../images/bgimg.jpg)*/. no-repeat center center
}
.view .mask,
.view .content { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0;
}
.view img { /*display: block;*/ position: relative;
}
.view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-family: 'Oswald', sans-serif; font-size: 35px; font-weight: 1000; padding: 10px; /*background: rgba(0, 0, 0, 0.8);*/ margin: 20px 0 0 0
}
.view p { font-family: 'Oswald', sans-serif; font-weight: 300; font-style: italic; font-size: 24px; position: relative; color: #fff; padding: 0px 20px 10px; text-align: center
}
.view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #fff; color: #fff; font-family: 'Oswald', sans-serif; text-transform: uppercase; box-shadow: 0 0 1px #000
}
.view a.info:hover { background: #ffffff; color: #ff0000; box-shadow: 0 0 0px #fff
}
/*1*/
.view-first img { transition: all 0.2s linear; width: 100%; height: 100%;
}
.view-first .mask { opacity: 0; background-color: rgba(255, 0, 0, 0.3); transition: all 0.4s ease-in-out;
}
.view-first h2 { transform: translateY(-100px); opacity: 0; font-family: 'Oswald', sans-serif; transition: all 0.2s ease-in-out;
}
.view-first p { transform: translateY(100px); opacity: 0; transition: all 0.2s linear;
}
.view-first a.info { opacity: 0; transition: all 0.2s ease-in-out;
}
/* */
.view-first:hover img { transform: scale(1.1);
}
.view-first:hover .mask { opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info { opacity: 1; transform: translateY(0px);
}
.view-first:hover p { transition-delay: 0.1s;
}
.view-first:hover a.info { transition-delay: 0.2s;
}
@media only screen and (min-width:480px) and (max-width: 640px) { .view {width: 50%; height: auto;}
.view h2 {margin: 4px 0 0 0; font-size: 20px;}
.view p {font-size: 20px; padding-bottom: 30px;}
.slide1 { background-image: url("http://adform.imgix.net/JerrDan_SmallSlide1.png"); background-size : cover;
}
.slide2 { background-image: url("http://adform.imgix.net/JerrDan_SmallSlide2.png"); background-size : cover;
}
.slide3 { background-image: url("http://adform.imgix.net/JerrDan_SmallSlide3.png"); background-size : cover;
}}
@media only screen and (max-width: 479px) { .view {width: 100%; height: auto;}
.view p {font-size: 20px; padding-bottom: 15px;}
.view h2 {margin: 4px 0 0 0; font-size: 20px;}
.slide1 { background-image: url("http://adform.imgix.net/JerrDan_VerySmallSlide12.png"); background-size : cover;
}
.slide2 { background-image: url("http://adform.imgix.net/JerrDan_VerySmallSlide22.png"); background-size : cover;
}
.slide3 { background-image: url("http://adform.imgix.net/JerrDan_VerySmallSlide32.png"); background-size : cover;
}}
}
</style>
</head>
<body> <div id="contentWrapper" class="siteContainer"> <div id="NavPicture">
<div class='main_slider'> <div class='slide1'></div> <div class='slide2'></div> <div class='slide3'></div>
</div>
</div>
</div>
<div id="promo-notifications">
<ul> <li>Welcome to the brand new JerrDanShop.com</li> <li>The place for all your JerrDan Gear!</li> <li>Initial Orders will ship on or before the last week of November.</li> </ul>
</div>
<div id="all"> <div class="view view-first"> <img src="http://adform.imgix.net/Mens1.png" /> <div class="mask"> <h2>Men's T-Shirts</h2> <a href="/ProductListing.aspx?_Category=344&_Master=View%20All&_ID=100" class="info">SHOP NOW ></a> </div>
</div>
<div id="all"> <div class="view view-first"> <img src="http://adform.imgix.net/Ladies1.png" /> <div class="mask"> <h2>Ladies T-Shirts</h2> <a href="/ProductListing.aspx?_Category=345&_Master=View%20All&_ID=100" class="info">SHOP NOW ></a> </div>
</div>
<div id="all"> <div class="view view-first"> <img src="http://adform.imgix.net/Junior1.png" /> <div class="mask"> <h2>Youth T-Shirts</h2> <a href="/ProductListing.aspx?_Category=346&_Master=View%20All&_ID=100" class="info">SHOP NOW ></a> </div>
</div>
<div id="all"> <div class="view view-first"> <img src="http://adform.imgix.net/Hoodie1.png" /> <div class="mask"> <h2>Signature Hoodie</h2> <a href="/DynamicItemDetail.aspx?_Category=132&Partno=JDS-1850-JD&Decorloc=" class="info">SHOP NOW ></a> </div>
</div>
<div id="all"> <div class="view view-first"> <img src="http://adform.imgix.net/Caps1.png" /> <div class="mask"> <h2>Headwear</h2> <a href="/ProductListing.aspx?_Category=130" class="info">SHOP NOW ></a> </div>
</div>
<div id="all"> <div class="view view-first"> <img src="http://adform.imgix.net/Accessories1.png" /> <div class="mask"> <h2>Accessories</h2> <a href="ProductListing.aspx?_Category=350" class="info">SHOP NOW ></a> </div>
</div>
</div>	</div>	</div>
</body>
</body>
</html>
JerrDan Home page - Script Codes
JerrDan Home page - Script Codes
Home Page Home
Developer Delano
Username Delano83
Uploaded October 19, 2022
Rating 3
Size 3,684 Kb
Views 14,168
Do you need developer help for JerrDan Home 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!

Delano (Delano83) Script Codes
Name
Pagination in pure Js
Treehouse Full Stack Javascript
My Adform Revised May 2017
Label for Estes
MyAdform.com
Label Estes With Corrections
Nav
My Adform Revised
Search Bar in pure Js
JerrDan New Horizontal Navigation
Create amazing love letters 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!