Parallex website using html and css
Create a parallex website using html and css
Code 👇🏻
<!doctype html>
<html>
<head>
<title>parallex web</title>
<style>
body {
background-color: white;
margin: 0;
padding: 0;
font-size: 25px;
}
.main {
font-size: 3em;
color: white;
margin-top: 2%;
background-color: black;
margin-bottom: 2%;
box-shadow: 5px 5px 15px red;;
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
@keyframes move {
50% {padding-left: 30%}
100% {padding-left: 70%}
}
.fixed-bg {
background-image: url("https://cdn.pixabay.com/photo/2016/05/14/12/58/butterfly-1391809_640.jpg");
min-height: 75vh;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
box-shadow: 10px 10px 20px #797979;
}
.fixed-bg2 {
background-image: url("https://cdn.pixabay.com/photo/2018/03/10/12/14/animal-world-3213947_640.jpg");
min-height: 80vh;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
box-shadow: 10px 10px 20px #797979;
}
.fixed-bg3 {
background-image: url("https://cdn.pixabay.com/photo/2017/03/29/19/24/dragonfly-2186186_640.jpg");
min-height: 80vh;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
box-shadow: 10px 10px 20px #797979;
}
.fixed-bg4 {
background-image: url("https://cdn.pixabay.com/photo/2016/08/14/17/04/ladybugs-1593406_640.jpg");
min-height: 80vh;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
box-shadow: 20px 20px 20px #797979;
}
.content {
height: 600px;
background-color: #EBFF2A;
line-height: 2.5;
font-family: Times New Roman;
}
.content2 {
height: 690px;
background-color: #329DBF;
line-height: 2.5;
font-family: Times New Roman;
}
.content3 {
height: 950px;
background-color: #ED1D3F;
line-height: 2.5;
font-family: Times New Roman;
}
.content4 {
height: 600px;
background-color: #2DED1D;
line-height: 2.5;
font-family: Times New Roman;
}
h1 {
font-family: verdana;
text-align: center;
color: #0E00FF;
}
.thankyou {
color: #E50000;
font-family: courier;
}
.button {
width: 10em;
height: 3em;
background-color: blue;
color: white;
font-weight: bold;
margin-left: auto;
margin-right: auto;
display: block;
}
.button:hover {
background-color: black;
color: red;
}
</style>
</head>
<body>
<div class="main">
Nature
</div>
<div class="fixed-bg"></div>
<div class="content">
<h1 class="heading1"> BUTTERFLY</h1> Butterflies are insects in the macrolepidopteran clade Rhopalocera from the order Lepidoptera, which also includes moths. Adult butterflies have large, often brightly coloured wings, and conspicuous, fluttering flight. The group comprises the large superfamily Papilionoidea, which contains at least one former group, the skippers (formerly the superfamily "Hesperioidea"), and the most recent analyses suggest it also contains the moth-butterflies (formerly the superfamily "Hedyloidea"). Butterfly fossils date to the Paleocene, about 56 million years ago.
</div>
<div class="fixed-bg2"></div>
<div class="content2">
<h1 class="heading2"> SPARROW </h1> The house sparrow (Passer domesticus) is a bird of the sparrow family Passeridae, found in most parts of the world. It is a small bird that has a typical length of 16 cm (6.3 in) and a mass of 24–39.5 g (0.85–1.39 oz). Females and young birds are coloured pale brown and grey, and males have brighter black, white, and brown markings. One of about 25 species in the genus Passer, the house sparrow is native to most of Europe, the Mediterranean Basin, and a large part of Asia. Its intentional or accidental introductions to many regions, including parts of Australasia, Africa, and the Americas, make it the most widely distributed wild bird.
</div>
<div class="fixed-bg3"></div>
<div class="content3">
<h1 class="heading3"> DRAGONFLY </h1> A dragonfly is a flying insect belonging to the order Odonata, infraorder Anisoptera (from Greek ἄνισος anisos, "unequal" and πτερόν pteron, "wing", because the hindwing is broader than the forewing). Adult dragonflies are characterized by a pair of large, multifaceted compound eyes, two pairs of strong, transparent wings, sometimes with coloured patches, and an elongated body. Dragonflies can be mistaken for the closely related damselflies, which make up the other odonatan infraorder (Zygoptera) and are similar in body plan though usually lighter in build; however, the wings of most dragonflies are held flat and away from the body, while damselflies hold their wings folded at rest, along or above the abdomen. Dragonflies are agile fliers, while damselflies have a weaker, fluttery flight. Many dragonflies have brilliant iridescent or metallic colours produced by structural colouration, making them conspicuous in flight. An adult dragonfly's compound eyes have nearly 24,000 ommatidia each.
</div>
<div class="fixed-bg4"></div>
<div class="content4">
<h1 class="heading4"> LADYBUGS </h1> Coccinellidae is a widespread family of small beetles ranging in size from 0.8 to 18 mm (0.03 to 0.71 in).The family is commonly known as ladybugs in North America and ladybirds in Great Britain and other parts of the English-speaking world. Entomologists prefer the names ladybird beetles or lady beetles as these insects are not classified as true bugs.
<h1 class="thankyou">THANK YOU</h1>
</div>
</body>
</html>
