Cloudy Header

Developer
Kevin Bertram
Size
3,946 Kb
Views
66,792
  1. Cloudy Header Previews
  2. Cloudy Header HTML Codes
  3. Cloudy Header CSS Codes

How do I make an cloudy header?

What is a cloudy header? How do you make a cloudy header? This script and codes were developed by Kevin Bertram on 08 September 2022, Thursday.

Cloudy Header Previews
IQ Test

Cloudy Header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cloudy Header</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> <div class="nav-wrap"> <div class="inner-con"> <div class="clip-text clip-text_one"> <h1 class="logo">E+D</h1> </div> </div>
</div>
<div class="main-wrap"> <div class="inner-con"> <h1>This is the title</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione totam nobis odio repellendus alias, commodi, amet delectus similique nostrum ad ea ullam fugit necessitatibus inventore a facere voluptatibus ipsa consequatur dolor. Animi voluptatibus doloribus saepe. </p> <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi voluptate nam vitae aspernatur maxime dolorum asperiores id aliquam magnam amet, odit voluptas modi eligendi veritatis vel totam quam doloremque ullam, minima dolores harum. Praesentium esse accusantium necessitatibus sit facilis veniam in corrupti incidunt natus officia quos, dolores, fuga mollitia cupiditate.</pre> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis incidunt, voluptatem eos nesciunt expedita doloremque deserunt, saepe maiores? Illo!</p> <h2>This is a subtitle</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt recusandae, error ab id tempora aspernatur autem similique, dolore ullam repellat ipsum numquam vitae ipsa laborum optio tenetur dicta eveniet dolorem asperiores. Odit mollitia aperiam eaque nihil, repellendus id dolor nemo.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, nostrum sint labore delectus dignissimos numquam rerum? Sed non, aliquid magni.</p> </div>
</div>
</body>
</html>

Cloudy Header - Script Codes CSS Codes

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/*Lobotomized Owls*/
* + * { margin-top: 1.5em;
}
body { background: #fff; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1.1em; line-height: 1.4;
}
.nav-wrap { background: #000; min-height: 200px; color: #fff;
}
.inner-con { max-width: 700px; margin: 0 auto; padding: 20px;
}
h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5em;
}
h1.logo { margin: 0; font-size: 8em; margin-left: -10px;
}
/*Adjusting p flow*/
p + p { margin-top: 0.5em;
}
.title { font-size: 3em; position: relative; margin: 0 auto 1em; padding: 1em 1em .25em 1em; text-align: center; text-transform: uppercase;
}
.title:after { position: absolute; top: 100%; left: 50%; width: 240px; height: 4px; margin-left: -120px; content: ''; background-color: #fff;
}
/* Clip text element */
.clip-text { font-weight: bold; line-height: 1; position: relative; display: inline-block; text-align: center; /* Color fallback */ color: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.clip-text:before,
.clip-text:after { position: absolute; content: '';
}
/* Background */
.clip-text:before { z-index: -2; top: 0; right: 0; bottom: 0; left: 0; background-image: inherit; background-size: 120%; background-position: -100px;
}
/* Text Background (black zone) */
.clip-text:after { position: absolute; z-index: -1; top: .125em; right: .125em; bottom: .125em; left: .125em; background-color: #000;
}
/* Change the background position to display letter when the black zone isn't here */
.clip-text--no-textzone:before { background-position: -.5em 0;
}
.clip-text--no-textzone:after { content: none;
}
@keyframes animatedBackground { 0% { background-position: 0 0; } 100% { background-position: -500px 0; }
}
@-moz-keyframes animatedBackground { 0% { background-position: 0 0; } 100% { background-position: -500px 0; }
}
@-webkit-keyframes animatedBackground { 0% { background-position: 0 0; } 100% { background-position: -500px 0; }
}
@-ms-keyframes animatedBackground { 0% { background-position: 0 0; } 100% { background-position: -500px 0; }
}
@-o-keyframes animatedBackground { 0% { background-position: 0 0; } 100% { background-position: -500px 0; }
}
.clip-text_one { background-image: url(https://38.media.tumblr.com/c6a1f5c5c4b32b196b56976696525a58/tumblr_nd1a4sBzDZ1rlguk5o1_500.jpg); background-position: 0px; animation: animatedBackground 20s linear infinite; -moz-animation: animatedBackground 20s linear infinite; -webkit-animation: animatedBackground 20s linear infinite; -ms-animation: animatedBackground 20s linear infinite; -o-animation: animatedBackground 20s linear infinite;
}
Cloudy Header - Script Codes
Cloudy Header - Script Codes
Home Page Home
Developer Kevin Bertram
Username kbrtrm
Uploaded September 08, 2022
Rating 3
Size 3,946 Kb
Views 66,792
Do you need developer help for Cloudy Header?

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!

Kevin Bertram (kbrtrm) Script Codes
Name
Email Template
Happy Worm Exploring Space on Hover
Theme Customization Preview
Full text preview
You blockhead
Random dot generation
Full Width Peppered
Just white dots in space
Tail rose iris lined
Sheet Ripple on Hover
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!