Always be...

Developer
BROWNERD
Size
3,315 Kb
Views
30,360
  1. Always be... Previews
  2. Always be... HTML Codes
  3. Always be... CSS Codes
  4. Always be... JS Codes

How do I make an always be...?

You know the deal. These are the ABC of the web world!Always Be Closing Always Be Coding Always Be Creating. What is a always be...? How do you make a always be...? This script and codes were developed by BROWNERD on 29 August 2022, Monday.

Always be... Previews
IQ Test

Always be... - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Always be...</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>always be <div class="message"> <div class="word1">closing</div> <div class="word2">coding</div> <div class="word3">creating</div> </div>
</h1> <script src="js/index.js"></script>
</body>
</html>

Always be... - Script Codes CSS Codes

@import url("http://fonts.googleapis.com/css?family=Pacifico");
@import url("http://fonts.googleapis.com/css?family=Permanent+Marker");
@import url("http://fonts.googleapis.com/css?family=Abril\+Fatface");
* { box-sizing: border-box;
}
body { background-image: -webkit-radial-gradient(#fff 25%, #bbb 75%); background-image: radial-gradient(#fff 25%, #bbb 75%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh; width: 100vw;
}
h1 { color: #333; font-family: source sans pro; font-size: 3rem; font-weight: 100; line-height: 1.5; text-transform: uppercase; white-space: nowrap; overflow: hidden; position: relative; width: 500px;
}
.message { background-color: #fc0; color: #333; display: block; font-weight: 900; overflow: hidden; position: absolute; padding-left: 0.5rem; top: 0.2rem; left: 220px; -webkit-animation: openclose 5s ease-in-out infinite; animation: openclose 5s ease-in-out infinite;
}
.word1 { font-family: Abril Fatface;
}
.word2 { font-family: source code pro;
}
.word3 { font-family: Permanent Marker;
}
@-webkit-keyframes openclose { 0% { top: 0.2rem; width: 0; } 5% { width: 0; } 15% { width: 230px; } 30% { top: 0.2rem; width: 230px; } 33% { top: 0.2rem; width: 0; } 38% { top: -4.5rem; width: 0; } 48% { width: 190px; } 62% { top: -4.5rem; width: 190px; } 66% { top: -4.5rem; width: 0; text-indent: 0; } 71% { top: -9rem; width: 0; text-indent: 5px; } 86% { width: 285px; } 98% { top: -9rem; width: 285px; } 99% { text-indent: 5px; top: -9rem; width: 0; } 100% { text-indent: 0; top: 0; width: 0; }
}
@keyframes openclose { 0% { top: 0.2rem; width: 0; } 5% { width: 0; } 15% { width: 230px; } 30% { top: 0.2rem; width: 230px; } 33% { top: 0.2rem; width: 0; } 38% { top: -4.5rem; width: 0; } 48% { width: 190px; } 62% { top: -4.5rem; width: 190px; } 66% { top: -4.5rem; width: 0; text-indent: 0; } 71% { top: -9rem; width: 0; text-indent: 5px; } 86% { width: 285px; } 98% { top: -9rem; width: 285px; } 99% { text-indent: 5px; top: -9rem; width: 0; } 100% { text-indent: 0; top: 0; width: 0; }
}

Always be... - Script Codes JS Codes

(function() {
}).call(this);
Always be... - Script Codes
Always be... - Script Codes
Home Page Home
Developer BROWNERD
Username brownerd
Uploaded August 29, 2022
Rating 4.5
Size 3,315 Kb
Views 30,360
Do you need developer help for Always be...?

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!

BROWNERD (brownerd) Script Codes
Name
Parellogram button
FCC Tribute page
Lego Ziggy Stardust RIP David Bowie
Offset button - layered 60fps
Chunky Nav buttons, centered, no floats
Potted pastel flowers
Circle
PICADILLY CIRCUS
R EVOL UTION
Venn diagram animation
Create amazing marketing copy 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!