PROWAREtech
JavaScript: Whole Website Example
An idea for a whole website using mostly HTML/CSS with just a little JavaScript.
This code creates a modern website that is not dependent on JQuery, Bootstrap, Tailwind, or other large libraries/frameworks.
Below, the code is all combined into one file for easy viewing. Download the website with the code separated into separate files: HTMLCSSWEBSITE.zip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Photography Website</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,900&display=swap" rel="stylesheet" />
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
font-family: Roboto, sans-serif;
color: #789;
background-color: white;
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
/* BEGIN CAROUSEL */
.slide a {
text-decoration: none;
color: white;
}
.slide-btn {
display: none;
}
.carousel {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.carousel h1 {
font-size: 10vmin;
text-shadow: 1vmin 1vmin rgba(0,0,0,0.33);
margin: 0;
}
.carousel h3 {
font-size: 4vmin;
text-shadow: .5vmin .5vmin rgba(0,0,0,0.33);
margin: 2vmin 0;
}
.labels {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
z-index: 1;
transition: z-index 0s 1s;
}
#menu-icon:checked ~ .carousel .labels {
transition: z-index 0s;
z-index: 0;
}
.labels label {
display: inline-block;
background-color: rgba(0,0,0,0.25);
width: 25px;
height: 25px;
border-radius: 25px;
margin: .5vmin 2vmin;
border: 3px solid rgba(255,255,255,0.5);
}
.slide {
float: left;
height: 100%;
width: 0;
transition: width .3s linear;
padding: 0;
overflow: hidden;
white-space: nowrap;
background-position: center center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slide > * {
color: white;
transition: .15s linear;
opacity: 0;
}
.slide > *:nth-child(1) {
transform: translateY(50%);
}
.slide > *:nth-child(2) {
transform: translateX(100%);
}
.carousel .one {
/* linear-gradient optional */
background-image: linear-gradient(rgba(119, 136, 153, 0.5),rgba(119, 136, 153, 0.5)),
url(https://picsum.photos/id/196/1920/1080);
}
.carousel .two {
background-image: linear-gradient(rgba(119, 136, 153, 0.5),rgba(119, 136, 153, 0.5)),
url(https://picsum.photos/id/1057/1920/1080);
}
.carousel .three {
background-image: linear-gradient(rgba(119, 136, 153, 0.5),rgba(119, 136, 153, 0.5)),
url(https://picsum.photos/id/1067/1920/1080);
}
.carousel .four {
background-image: linear-gradient(rgba(119, 136, 153, 0.5),rgba(119, 136, 153, 0.5)),
url(https://picsum.photos/id/1081/1920/1080);
}
.carousel .five {
background-image: linear-gradient(rgba(119, 136, 153, 0.5),rgba(119, 136, 153, 0.5)),
url(https://picsum.photos/id/219/1920/1080);
}
#slide-btn-1:checked ~ .one,
#slide-btn-2:checked ~ .two,
#slide-btn-3:checked ~ .three,
#slide-btn-4:checked ~ .four,
#slide-btn-5:checked ~ .five {
width: 100%;
}
#slide-btn-1:checked ~ .one > *,
#slide-btn-2:checked ~ .two > *,
#slide-btn-3:checked ~ .three > *,
#slide-btn-4:checked ~ .four > *,
#slide-btn-5:checked ~ .five > * {
transition: 1s ease .5s;
opacity: 1;
transform: none;
}
#slide-btn-1:checked ~ .labels label[for="slide-btn-1"],
#slide-btn-2:checked ~ .labels label[for="slide-btn-2"],
#slide-btn-3:checked ~ .labels label[for="slide-btn-3"],
#slide-btn-4:checked ~ .labels label[for="slide-btn-4"],
#slide-btn-5:checked ~ .labels label[for="slide-btn-5"] {
border-color: rgba(255,255,255,0.75);
background-color: rgba(0,0,0,0.75);
}
/* END CAROUSEL; BEGIN MENU */
.flex-nav {
position: absolute;
display: flex;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: -1;
transition: z-index 0s 1s;
}
.links {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 0;
top: 0;
right: 0;
transform: translateY(-100%);
transition: .5s cubic-bezier(1, 0, 0, 1);
visibility: hidden;
overflow: hidden;
}
.links ul {
padding: 0;
margin: 0;
}
#menu-icon {
display: none;
}
#menu-icon ~ label {
display: block;
position: absolute;
top: 10px;
right: 10px;
padding: 19px 10px;
border-radius: 4px;
background-color: #456;
transition: .5s .5s;
cursor: pointer;
}
#menu-icon ~ label span,
#menu-icon ~ label span::before,
#menu-icon ~ label span::after {
content: "";
position: relative;
display: block;
width: 21px;
height: 2px;
background-color: white;
transition: .5s cubic-bezier(1, 0, 0, 1) .5s;
}
#menu-icon ~ label span::before {
top: -8px;
}
#menu-icon ~ label span::after {
top: 6px;
}
#menu-icon:checked ~ label {
background-color: white;
transition: background-color .2s cubic-bezier(1, 0, 0, 1);
}
#menu-icon:checked ~ label span {
background-color: #456;
transform: rotate(.375turn);
transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.33);
}
#menu-icon:checked ~ label span::before,
#menu-icon:checked ~ label span::after {
background-color: #456;
top: 0;
transform: rotate(90deg);
transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.33);
}
#menu-icon:checked ~ label span::after {
top: -2px;
}
.links li {
text-align: center;
list-style: none;
}
.links a {
display: block;
font-size: 4vmin;
line-height: 5vmin;
text-decoration: none;
color: white;
text-transform: uppercase;
}
.flex-nav .box {
transition: flex .5s cubic-bezier(1, 0, 0, 1) .5s;
}
.flex-nav .box:nth-child(1),
.flex-nav .box:nth-child(3) {
flex: 1;
background-color: #456;
}
.flex-nav .box:nth-child(2) {
flex: 1 0 100%;
background-color: transparent;
}
#menu-icon:checked ~ .flex-nav {
transition: z-index 0s 0s;
z-index: 0;
}
#menu-icon:checked ~ .flex-nav .box {
transition: flex .5s ease-in-out;
}
#menu-icon:checked ~ .links {
transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.5) .5s;
top: 50%;
transform: translateY(-50%);
visibility: visible;
}
#menu-icon:checked ~ .flex-nav .box:nth-child(2) {
flex: 0;
}
/* END MENU */
nav {
position: sticky;
top: 0;
z-index: 1;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
background-color: black;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 10px;
color: #789;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
background-color: crimson;
color: white;
}
.hero-1,
.hero-2 {
height: 25vh;
width: 100%;
background-size: cover;
background-position: center center;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero-1 {
/* linear-gradient optional */
background-image: linear-gradient(rgba(119, 136, 153, 0.5),rgba(119, 136, 153, 0.5)),
url(https://picsum.photos/id/189/1920/270);
}
.hero-2 {
background-image: linear-gradient(rgba(119, 136, 153, 0.5),rgba(119, 136, 153, 0.5)),
url(https://picsum.photos/id/167/1920/270);
}
.hero-1 + div,
.hero-2 + div {
padding: 10px;
}
.hero-h1 {
font-size: 5vmin;
color: white;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: 1s;
}
.hero-h3 {
font-size: 2vmin;
color: white;
transform: translateY(150%);
opacity: 0;
visibility: hidden;
transition: 1s;
}
.hero-h1-ani,
.hero-h3-ani {
transform: none;
opacity: 1;
visibility: visible;
}
.about-container {
min-height: 100vh;
}
.about {
transform: translateX(-100%);
opacity: 0;
visibility: hidden;
transition: 1s;
}
.services-container {
min-height: 100vh;
}
.services {
transform: translateX(-100%);
opacity: 0;
visibility: hidden;
transition: 1s;
}
.about-ani,
.services-ani {
transform: none;
opacity: 1;
visibility: visible;
transition: 1s;
}
.portfolio-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.portfolio > div {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.pf-1,
.pf-2,
.pf-3,
.pf-4,
.pf-5,
.pf-6,
.pf-7,
.pf-8,
.pf-9 {
width: 500px;
height: 300px;
margin: 5px;
opacity: 0;
visibility: hidden;
transition: 1s;
background-size: cover;
background-position: center center;
}
.pf-1,
.pf-2,
.pf-3,
.pf-4 {
transform: translateY(-100%);
}
.pf-6,
.pf-7,
.pf-8,
.pf-9 {
transform: translateY(100%);
}
.pf-1 {
background-image: url(https://picsum.photos/id/213/500/300);
}
.pf-2 {
background-image: url(https://picsum.photos/id/214/500/300);
}
.pf-3 {
background-image: url(https://picsum.photos/id/168/500/300);
}
.pf-4 {
background-image: url(https://picsum.photos/id/170/500/300);
}
.pf-5 {
background-image: url(https://picsum.photos/id/179/500/300);
}
.pf-6 {
background-image: url(https://picsum.photos/id/190/500/300);
}
.pf-7 {
background-image: url(https://picsum.photos/id/218/500/300);
}
.pf-8 {
background-image: url(https://picsum.photos/id/229/500/300);
}
.pf-9 {
background-image: url(https://picsum.photos/id/261/500/300);
}
.pf-1-ani,
.pf-2-ani,
.pf-3-ani,
.pf-4-ani,
.pf-5-ani,
.pf-6-ani,
.pf-7-ani,
.pf-8-ani,
.pf-9-ani {
transform: none; /* BESURE TO USE transform: none; */
opacity: 1;
visibility: visible;
}
.pf-1-ani {
transition: .7s;
}
.pf-2-ani {
transition: .9s;
}
.pf-3-ani {
transition: 1.1s;
}
.pf-4-ani {
transition: 1.3s;
}
.pf-5-ani {
transition: 1.5s 1s;
}
.pf-6-ani {
transition: 1.5s .2s;
}
.pf-7-ani {
transition: 1.5s .4s;
}
.pf-8-ani {
transition: 1.5s .6s;
}
.pf-9-ani {
transition: 1.5s .8s;
}
.testimonial-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.testimonial-pic {
transform: translateY(-67%);
opacity: 0;
visibility: hidden;
transition: 1s;
}
.testimonial-pic-ani {
transform: none;
opacity: 1;
visibility: visible;
transition: 1s .7s;
}
.testimonial-pic img {
border-radius: 50%;
}
.testimonial-text {
background-color: #789;
color: white;
margin-left: -25px;
font-size: 20px;
width: 275px;
padding: 5px;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
transition: .2s 1s;
}
.testimonial-text-ani {
transform: none;
opacity: 1;
visibility: visible;
transition: 1s 1s;
}
.testimonial-text::before {
content: "\201c";
font-family: serif;
}
.testimonial-text::after {
content: "\201d";
font-family: serif;
}
footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 20vh;
}
footer div:last-of-type {
margin-top: 10px;
font-size: 12px;
}
footer ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
footer li {
display: inline-block;
}
footer li a {
display: block;
padding: 10px;
color: #789;
text-decoration: none;
text-transform: uppercase;
}
/* SEARCH */
.search-box {
display: inline-flex;
padding: 2px;
border: 2px solid #456;
outline: none;
border-radius: 30px;
background-color: white;
}
.search-box:focus-within {
border-color: #789;
}
.search-box input {
outline: none;
border: none;
width: 0;
background-color: transparent;
color: black;
font-size: 16px;
line-height: 30px;
padding: 0;
transition: width .4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.search-box input::placeholder {
color: lightgray;
}
.search-box:hover input,
.search-box input:focus,
.search-box input:valid {
margin-left: 5px;
width: 250px;
}
.search-box button {
outline: none;
border: none;
cursor: pointer;
background-color: #456;
padding: 8px 8px 7px 7px;
border-radius: 50%;
color: white;
}
.search-box:focus-within button {
background-color: #789;
}
.search-box input:focus + button {
background-color: #789;
}
.search-box input:valid + button {
background-color: #090;
}
/* LOGIN/REGISTER */
.login-page {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #456;
visibility: hidden;
opacity: 0;
transition: .5s ease .5s;
z-index: 2;
}
.login-page .form {
position: absolute;
left: 50%;
top: -500px;
transform: translate(-50%, -50%);
transition: .5s ease;
width: 95%;
max-width: 400px;
padding: 10px;
color: white;
}
.login-page:target .form {
transition: .5s ease .5s;
top: 50%;
}
.login-page:target {
visibility: visible;
opacity: 1;
transition: .5s ease;
}
.login-page .form .close {
text-align: right;
}
.login-page .form .close h1 {
display: inline-block;
margin: 0;
padding: 0;
width: 40px;
text-align: center;
border-radius: 50%;
box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
}
.login-page .form .close a {
text-decoration: none;
color: white;
}
.login-page .form #register {
display: none;
}
.login-page .form input,
.login-page .form button {
width: 95%;
padding: 10px;
margin: 5px 0;
border: none;
outline: none;
letter-spacing: 1px;
border-radius: 100vmax;
background-color: #456;
color: inherit;
}
.login-page .form input::placeholder {
color: #678;
}
.login-page .form button:active,
.login-page .form input {
-webkit-appearance: none; /* fixes bug in Safari on iOS */
box-shadow: inset -2px -2px 6px rgba(255,255,255,.2), inset 2px 2px 6px rgba(0,0,0,.8);
}
.login-page .form button {
width: 50%;
margin-top: 8px;
box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
letter-spacing: 3px;
background-color: transparent;
}
.login-page .form #register + label {
width: 100%;
display: block;
}
.login-page .form #register + label span {
display: inline-block;
width: 49%;
padding: 10px;
margin: 10px 0;
text-align: center;
border-radius: 100vmax;
letter-spacing: 3px;
transition: .5s;
cursor: pointer;
border: none;
outline: none;
}
.login-page .form #register + label .login {
box-shadow: inset -2px -2px 6px rgba(255,255,255,.2), inset 2px 2px 6px rgba(0,0,0,.8);
}
.login-page .form #register + label .register {
box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
}
.login-page .form #register:checked + label .login {
box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
}
.login-page .form #register:checked + label .register {
box-shadow: inset -2px -2px 6px rgba(255,255,255,.2), inset 2px 2px 6px rgba(0,0,0,.8);
}
.login-page .form .card {
position: relative;
width: 100%;
height: 280px;
}
.login-page .form .wrap {
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.login-page .form .front,
.login-page .form .back {
position: absolute;
top: 5%;
width: 100%;
height: 90%;
overflow: hidden;
backface-visibility: hidden;
transition: transform .5s;
background-color: transparent;
padding: 10px;
box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
border-radius: 30px;
background-image: linear-gradient(135deg,#456,#567,#456);
}
.login-page .form .front {
transform: perspective(100vmax) rotateY(0deg);
}
.login-page .form .back {
transform: perspective(100vmax) rotateY(180deg);
}
.login-page .form #register:checked ~ .card .front {
transform: perspective(100vmax) rotateY(-180deg);
}
.login-page .form #register:checked ~ .card .back {
transform: perspective(100vmax) rotateY(0deg);
}
/* CONTACT */
.contact-page {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #456;
visibility: hidden;
opacity: 0;
transition: .5s ease .5s;
z-index: 2;
}
.contact-page .form {
position: absolute;
left: 50%;
top: -500px;
transform: translate(-50%, -50%);
transition: .5s ease;
width: 95%;
max-width: 500px;
padding: 10px;
color: white;
}
.contact-page:target .form {
transition: .5s ease .5s;
top: 50%;
}
.contact-page:target {
visibility: visible;
opacity: 1;
transition: .5s ease;
}
.contact-page .form .close {
text-align: right;
}
.contact-page .form .close h1 {
display: inline-block;
margin: 0;
padding: 0;
width: 40px;
text-align: center;
border-radius: 50%;
box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
}
.contact-page .form .close a {
text-decoration: none;
color: white;
}
.contact-page .form input,
.contact-page .form textarea,
.contact-page .form button {
width: 95%;
padding: 10px;
margin: 5px 0;
border: none;
outline: none;
letter-spacing: 1px;
border-radius: 20px;
background-color: #456;
color: inherit;
}
.contact-page .form input::placeholder,
.contact-page .form textarea::placeholder {
color: #678;
}
.contact-page .form button:active,
.contact-page .form textarea,
.contact-page .form input {
-webkit-appearance: none; /* fixes bug in Safari on iOS */
box-shadow: inset -2px -2px 6px rgba(255,255,255,.2), inset 2px 2px 6px rgba(0,0,0,.8);
}
.contact-page .form textarea {
overflow: auto;
height: 100px;
resize: none;
font-family: inherit;
}
.contact-page .form button {
width: 50%;
margin-top: 8px;
box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
letter-spacing: 3px;
background-color: transparent;
}
.contact-page .form .card {
position: relative;
width: 100%;
height: 305px;
}
.contact-page .form .wrap {
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.contact-page .form .face {
position: absolute;
top: 5%;
width: 100%;
height: 90%;
overflow: hidden;
background-color: transparent;
padding: 10px;
box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8);
border-radius: 30px;
background-image: linear-gradient(135deg,#456,#567,#456);
}
@media (max-width: 768px) {
#menu-icon ~ label {
font-size: 30px;
}
.links a {
font-size: 25px;
line-height: 50px;
}
nav {
display: none;
}
.testimonial-container {
flex-direction: column;
}
.testimonial-text {
margin-left: 0;
}.hero-h1 {
font-size: 25px;
}
.hero-h3 {
font-size: 18px;
}
}
@media (max-width: 415px) {
.pf-1,
.pf-2,
.pf-3,
.pf-4,
.pf-5,
.pf-6,
.pf-7,
.pf-8,
.pf-9 {
width: 300px;
height: 180px;
transform: translateY(100%);
}
.pf-1-ani,
.pf-2-ani,
.pf-3-ani,
.pf-4-ani,
.pf-5-ani,
.pf-6-ani,
.pf-7-ani,
.pf-8-ani,
.pf-9-ani {
transform: none;
transition: 1s;
}
}
</style>
</head>
<body>
<header>
<input type="checkbox" id="menu-icon" />
<div class="carousel">
<input type="radio" name="carousel" id="slide-btn-1" class="slide-btn" onclick="setInt();" checked />
<input type="radio" name="carousel" id="slide-btn-2" class="slide-btn" onclick="setInt();" />
<input type="radio" name="carousel" id="slide-btn-3" class="slide-btn" onclick="setInt();" />
<input type="radio" name="carousel" id="slide-btn-4" class="slide-btn" onclick="setInt();" />
<input type="radio" name="carousel" id="slide-btn-5" class="slide-btn" onclick="setInt();" />
<div class="slide one parallax-effect">
<h1><a href="#portfolio">Acme Photo</a></h1>
<h3>Consectetur dolorem eum</h3>
</div>
<div class="slide two parallax-effect">
<h1><a href="#portfolio">TOWNS</a></h1>
<h3>Rerum illum culpa</h3>
</div>
<div class="slide three parallax-effect">
<h1><a href="#portfolio">CITIES</a></h1>
<h3>Veniam expedita tempora</h3>
</div>
<div class="slide four parallax-effect">
<h1><a href="#portfolio">ARCHITECTURE</a></h1>
<h3>Consequatur voluptatum atque</h3>
</div>
<div class="slide five parallax-effect">
<h1><a href="#portfolio">NATURE</a></h1>
<h3>Animi suscipit natus</h3>
</div>
<div class="labels">
<label for="slide-btn-1"></label>
<label for="slide-btn-2"></label>
<label for="slide-btn-3"></label>
<label for="slide-btn-4"></label>
<label for="slide-btn-5"></label>
</div>
</div>
<div class="flex-nav">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="links">
<ul>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#login-form">Login</a></li>
<li><a href="#contact-form">Contact</a></li>
</ul>
</div>
<label for="menu-icon"><span></span></label>
</header>
<nav>
<ul>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#login-form">Login</a></li>
<li><a href="#contact-form">Contact</a></li>
</ul>
</nav>
<main>
<div class="portfolio-container" id="portfolio"><!-- this container added post video -->
<div>
<div class="portfolio">
<div>
<div><!-- MUST WRAP EVERY animate-on-scroll ELEMENT IN A DIV -->
<div class="animate-on-scroll pf-1" animate-page-ratio="0.3" animate-class="pf-1-ani"></div>
</div>
<div>
<div class="animate-on-scroll pf-2" animate-page-ratio="0.3" animate-class="pf-2-ani"></div>
</div>
<div>
<div class="animate-on-scroll pf-3" animate-page-ratio="0.3" animate-class="pf-3-ani"></div>
</div>
</div>
<div>
<div>
<div class="animate-on-scroll pf-4" animate-page-ratio="0.5" animate-class="pf-4-ani"></div>
</div>
<div>
<div class="animate-on-scroll pf-5" animate-page-ratio="0.5" animate-class="pf-5-ani"></div>
</div>
<div>
<div class="animate-on-scroll pf-6" animate-page-ratio="0.5" animate-class="pf-6-ani"></div>
</div>
</div>
<div>
<div>
<div class="animate-on-scroll pf-7" animate-page-ratio="0.7" animate-class="pf-7-ani"></div>
</div>
<div>
<div class="animate-on-scroll pf-8" animate-page-ratio="0.7" animate-class="pf-8-ani"></div>
</div>
<div>
<div class="animate-on-scroll pf-9" animate-page-ratio="0.7" animate-class="pf-9-ani"></div>
</div>
</div>
</div>
</div>
</div>
<div class="about-container" id="about"><!-- this container added post video -->
<div class="hero-1">
<h1 class="animate-on-scroll hero-h1" animate-page-ratio="0.5" animate-class="hero-h1-ani">About</h1>
<h3 class="animate-on-scroll hero-h3" animate-page-ratio="0.5" animate-class="hero-h3-ani">Lorem ipsum dolor sit</h3>
</div>
<div>
<div class="animate-on-scroll about" animate-page-ratio="0.7" animate-class="about-ani">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dolor nesciunt aspernatur! Iusto culpa esse maiores cum accusantium commodi qui ad dolorem, asperiores eius nesciunt. Eos sint, accusantium ipsa id a nesciunt ex voluptate explicabo officiis odit in quasi assumenda, quod et voluptatibus expedita adipisci facilis deserunt aut reiciendis voluptatem!</p>
<p>Dicta iste quasi, voluptates a possimus atque corporis itaque optio numquam officia esse sunt. Fugiat tempora libero ratione pariatur. Dolorum dicta voluptates aliquid vero consequatur earum, pariatur cumque, accusamus mollitia molestias sint, possimus perferendis et quo culpa a harum nisi hic itaque iure? Magnam dignissimos suscipit modi quos, architecto consequatur!</p>
<p>Fugit ipsum animi dolor assumenda vel laborum ea mollitia. Corporis autem tempora minus, voluptatem reprehenderit, officia libero voluptatum molestiae error blanditiis accusantium ad inventore hic vitae necessitatibus atque. Quia sed maxime facilis saepe ducimus pariatur recusandae quisquam mollitia aspernatur nisi culpa voluptatibus, eligendi placeat corporis nihil, sit suscipit cumque aperiam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto hic dolorem magni fugit mollitia voluptates vel, laboriosam nihil eius blanditiis deserunt maxime molestias, esse necessitatibus repellat temporibus. Error cumque tenetur, quae quod nam sint reprehenderit consectetur exercitationem corporis, accusantium sit dicta pariatur? Quaerat natus expedita architecto eius tempora. Necessitatibus facilis animi consequuntur beatae debitis, ratione delectus nostrum maxime quaerat aliquam optio amet doloribus repellat. Quam assumenda perferendis officia fuga autem, asperiores ipsum vel minus totam, atque repellat debitis, labore corrupti odio omnis est cum dolore nulla? Incidunt, ipsa eligendi! Deleniti, placeat. Dolore beatae deleniti repellendus aspernatur eligendi aliquid maxime incidunt suscipit officiis magnam, perspiciatis nulla inventore natus at voluptates animi dolorem in numquam? Dolores tempora facilis omnis exercitationem, amet sint ratione sit quas similique obcaecati placeat aperiam facere porro, ad libero laboriosam maxime, laborum nulla inventore debitis eligendi minima consectetur ipsum assumenda! Ullam, aut suscipit accusamus deserunt earum porro.</p>
<p>Eum ea blanditiis odit nobis debitis aut, a nostrum facilis doloribus nisi amet deleniti ratione non architecto fugit nulla consequatur porro! Sed necessitatibus quaerat possimus eum perspiciatis, iure nam! Itaque ullam voluptate aliquid doloribus tempore quibusdam, sequi iusto nesciunt dolorum architecto corrupti quisquam, cumque quod error fuga? Voluptatem, porro autem!</p>
</div>
</div>
<div class="testimonial-container">
<div class="animate-on-scroll testimonial-pic" animate-page-ratio="0.85" animate-class="testimonial-pic-ani">
<img class="" width="250" height="250" src="data:image/jpeg;base64,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" />
</div>
<div class="animate-on-scroll testimonial-text" animate-page-ratio="0.85" animate-class="testimonial-text-ani">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, maiores!
</div>
</div>
</div>
<div class="services-container" id="services"><!-- this container added post video -->
<div class="hero-2">
<h1 class="animate-on-scroll hero-h1" animate-page-ratio="0.5" animate-class="hero-h1-ani">Services</h1>
<h3 class="animate-on-scroll hero-h3" animate-page-ratio="0.5" animate-class="hero-h3-ani">Fugit ipsum animi dolor</h3>
</div>
<div>
<div class="animate-on-scroll services" animate-page-ratio="0.7" animate-class="services-ani">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus officia, veritatis enim quibusdam expedita ratione magni ipsa voluptatem laborum adipisci accusamus animi et nobis, est unde consectetur accusantium eos libero mollitia? Voluptatibus, earum! Maxime, magni voluptatibus? Repellendus deleniti nihil omnis dignissimos dolorem vero, at quam delectus cupiditate sit officiis iusto dolor voluptatibus tenetur est facilis beatae natus ea totam vel cumque! Deleniti deserunt veritatis unde consectetur cum molestias cupiditate aliquid aliquam corrupti accusamus quia excepturi, esse aspernatur soluta voluptatum praesentium perferendis nobis eius ea id dicta rem quis doloremque. Dolores iste ipsa facere reprehenderit nulla omnis, corrupti eius voluptates error laborum porro voluptatibus laudantium officiis adipisci quisquam! Molestias voluptates saepe quae, iste libero laboriosam! Enim est quas, ea, velit aliquid voluptatibus assumenda suscipit dolores quidem sed consequatur cupiditate sapiente aliquam eos porro excepturi quisquam molestiae dolore veritatis cumque repellat? Impedit placeat est neque vitae hic, inventore cum accusantium minus pariatur beatae, itaque facilis! Itaque sit, recusandae ex odio quibusdam velit sunt eaque soluta. Earum nihil ducimus commodi quisquam facere laudantium nobis doloremque rerum quidem! Dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dolor nesciunt aspernatur! Iusto culpa esse maiores cum accusantium commodi qui ad dolorem, asperiores eius nesciunt. Eos sint, accusantium ipsa id a nesciunt ex voluptate explicabo officiis odit in quasi assumenda, quod et voluptatibus expedita adipisci facilis deserunt aut reiciendis voluptatem!</p>
<p>Dicta iste quasi, voluptates a possimus atque corporis itaque optio numquam officia esse sunt. Fugiat tempora libero ratione pariatur. Dolorum dicta voluptates aliquid vero consequatur earum, pariatur cumque, accusamus mollitia molestias sint, possimus perferendis et quo culpa a harum nisi hic itaque iure? Magnam dignissimos suscipit modi quos, architecto consequatur!</p>
<p>Fugit ipsum animi dolor assumenda vel laborum ea mollitia. Corporis autem tempora minus, voluptatem reprehenderit, officia libero voluptatum molestiae error blanditiis accusantium ad inventore hic vitae necessitatibus atque. Quia sed maxime facilis saepe ducimus pariatur recusandae quisquam mollitia aspernatur nisi culpa voluptatibus, eligendi placeat corporis nihil, sit suscipit cumque aperiam?</p>
<p>Eum ea blanditiis odit nobis debitis aut, a nostrum facilis doloribus nisi amet deleniti ratione non architecto fugit nulla consequatur porro! Sed necessitatibus quaerat possimus eum perspiciatis, iure nam! Itaque ullam voluptate aliquid doloribus tempore quibusdam, sequi iusto nesciunt dolorum architecto corrupti quisquam, cumque quod error fuga? Voluptatem, porro autem!</p>
</div>
</div>
</div>
</main>
<footer>
<div>
<form action="https://www.bing.com/search" class="search-box">
<input type="text" name="q" autocomplete="off" placeholder="enter search" required />
<button type="submit"><svg width="18px" height="16px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
</svg></button>
</form>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#login-form">Login</a></li>
<li><a href="#contact-form">Contact</a></li>
</ul>
<div>
Copyright ©<script type="text/javascript">document.write(new Date().getFullYear());</script> Acme Photography
</div>
</footer>
<div class="login-page" id="login-form">
<div class="form">
<div class="close">
<h1><a href="#!">×</a></h1>
</div>
<input type="checkbox" id="register" />
<label for="register">
<span class="login">LOGIN</span>
<span class="register">REGISTER</span>
</label>
<div class="card">
<div class="front">
<form action="/login" method="post" onsubmit="return false;"><!-- LOGIN FORM -->
<div class="wrap">
<input type="email" name="email" autocomplete="off" placeholder="EMAIL" required />
<input type="password" name="pwd" placeholder="PASSWORD" required />
<button type="submit">LOGIN</button>
</div>
</form>
</div>
<div class="back">
<form action="/register" method="post" onsubmit="return false;"><!-- REGISTER FORM -->
<div class="wrap">
<input type="text" name="name" autocomplete="off" placeholder="NAME" required />
<input type="email" name="email" autocomplete="off" placeholder="EMAIL" required />
<input type="password" name="pwd" placeholder="PASSWORD" required />
<input type="password" name="confirm" placeholder="CONFIRM PASSWORD" required />
<button type="submit">REGISTER</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="contact-page" id="contact-form">
<div class="form">
<div class="close">
<h1><a href="#!">×</a></h1>
</div>
<div class="card">
<div class="face">
<form action="/ajax/email" method="post" onsubmit="return false;">
<div class="wrap">
<input type="text" name="name" autocomplete="off" placeholder="NAME" required />
<input type="email" name="email" autocomplete="off" placeholder="EMAIL" required />
<textarea name="message" placeholder="MESSAGE" required></textarea>
<button type="submit">SEND</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- ALWAYS LOAD THESE LIBRARIES AT THE END OF THE HTML DOCUMENT -->
<script src="/js/parallax-effect.min.js"></script>
<script src="/js/animate-on-scroll.min.js"></script>
<script type="text/javascript"> // THIS CODE CAUSES THE CAROUSEL TO CIRCULATE
var intv;
function setInt() {
clearInterval(intv);
intv = setInterval(function() {
var btns = document.getElementsByName("carousel");
for(var i = 0; i < btns.length; i++) {
if(btns[i].checked) {
btns[i].checked = false;
if(i + 1 == btns.length) {
btns[0].checked = true;
}
else {
btns[i + 1].checked = true;
}
return;
}
}
}, 5000); // 5000 milliseconds
}
setInt();
</script>
</body>
</html>
Coding Video
Comment
