Pride Flags
How do I make an pride flags?
Happy Pride Month!! 🌈🌈. What is a pride flags? How do you make a pride flags? This script and codes were developed by Rachel McGrane on 18 September 2022, Sunday.
Pride Flags - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pride Flags</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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='flags'> <div class='flag flag--pride'> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> </div> <div class='flag flag--trans'> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> </div> <div class='flag flag--bi'> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> </div> <div class='flag flag--ace'> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> </div> <div class='flag flag--pan'> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> </div> <div class='flag flag--lesbian'> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> </div> <div class='flag flag--nb'> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> </div> <div class='flag flag--genderqueer'> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> </div> <div class='flag flag--polysexual'> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> </div> <div class='flag flag--pride'> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> <div class='stripe'></div> </div>
</div>
</body>
</html>
Pride Flags - Script Codes CSS Codes
.flags { animation: scroll 22.5s linear infinite;
}
.flag { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.flag--pride .stripe:nth-child(1) { background: #F90000; height: 16.66667vh;
}
.flag--pride .stripe:nth-child(2) { background: #FF8600; height: 16.66667vh;
}
.flag--pride .stripe:nth-child(3) { background: #FFEE00; height: 16.66667vh;
}
.flag--pride .stripe:nth-child(4) { background: #00830D; height: 16.66667vh;
}
.flag--pride .stripe:nth-child(5) { background: #0046FF; height: 16.66667vh;
}
.flag--pride .stripe:nth-child(6) { background: #81008C; height: 16.66667vh;
}
.flag--trans .stripe:nth-child(1) { background: #00D0FF; height: 20vh;
}
.flag--trans .stripe:nth-child(2) { background: #FFA5B8; height: 20vh;
}
.flag--trans .stripe:nth-child(3) { background: #FFF; height: 20vh;
}
.flag--trans .stripe:nth-child(4) { background: #FFA5B8; height: 20vh;
}
.flag--trans .stripe:nth-child(5) { background: #00D0FF; height: 20vh;
}
.flag--bi .stripe:nth-child(1) { background: #D60270; height: 33.33333vh;
}
.flag--bi .stripe:nth-child(2) { background: #9B4F96; height: 33.33333vh;
}
.flag--bi .stripe:nth-child(3) { background: #0038A8; height: 33.33333vh;
}
.flag--ace .stripe:nth-child(1) { background: #000; height: 25vh;
}
.flag--ace .stripe:nth-child(2) { background: #a3a3a3; height: 25vh;
}
.flag--ace .stripe:nth-child(3) { background: #fff; height: 25vh;
}
.flag--ace .stripe:nth-child(4) { background: #800080; height: 25vh;
}
.flag--pan .stripe:nth-child(1) { background: #ff218e; height: 33.33333vh;
}
.flag--pan .stripe:nth-child(2) { background: #fcd800; height: 33.33333vh;
}
.flag--pan .stripe:nth-child(3) { background: #0194fc; height: 33.33333vh;
}
.flag--lesbian .stripe:nth-child(1) { background: #A40062; height: 14.28571vh;
}
.flag--lesbian .stripe:nth-child(2) { background: #B75592; height: 14.28571vh;
}
.flag--lesbian .stripe:nth-child(3) { background: #D063A6; height: 14.28571vh;
}
.flag--lesbian .stripe:nth-child(4) { background: #EDEDEB; height: 14.28571vh;
}
.flag--lesbian .stripe:nth-child(5) { background: #E4ABCF; height: 14.28571vh;
}
.flag--lesbian .stripe:nth-child(6) { background: #C54F55; height: 14.28571vh;
}
.flag--lesbian .stripe:nth-child(7) { background: #8A1F03; height: 14.28571vh;
}
.flag--nb .stripe:nth-child(1) { background: #FFF434; height: 25vh;
}
.flag--nb .stripe:nth-child(2) { background: #fff; height: 25vh;
}
.flag--nb .stripe:nth-child(3) { background: #9A5ACF; height: 25vh;
}
.flag--nb .stripe:nth-child(4) { background: #2D2D2D; height: 25vh;
}
.flag--genderqueer .stripe:nth-child(1) { background: #b57edc; height: 33.33333vh;
}
.flag--genderqueer .stripe:nth-child(2) { background: #fff; height: 33.33333vh;
}
.flag--genderqueer .stripe:nth-child(3) { background: #4A8123; height: 33.33333vh;
}
.flag--polysexual .stripe:nth-child(1) { background: #F61EB9; height: 33.33333vh;
}
.flag--polysexual .stripe:nth-child(2) { background: #06D569; height: 33.33333vh;
}
.flag--polysexual .stripe:nth-child(3) { background: #1E92F6; height: 33.33333vh;
}
.flag:nth-child(1) { transform: translateX(0%);
}
.flag:nth-child(2) { transform: translateX(100%);
}
.flag:nth-child(3) { transform: translateX(200%);
}
.flag:nth-child(4) { transform: translateX(300%);
}
.flag:nth-child(5) { transform: translateX(400%);
}
.flag:nth-child(6) { transform: translateX(500%);
}
.flag:nth-child(7) { transform: translateX(600%);
}
.flag:nth-child(8) { transform: translateX(700%);
}
.flag:nth-child(9) { transform: translateX(800%);
}
.flag:nth-child(10) { transform: translateX(900%);
}
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-900%); }
}
Developer | Rachel McGrane |
Username | rachelmcgrane |
Uploaded | September 18, 2022 |
Rating | 3 |
Size | 3,069 Kb |
Views | 36,432 |
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!
Name | Size |
Angular-Meteor Showcase | 2,336 Kb |
Gmail Icon Animation | 3,424 Kb |
Kerbal Space Program Buy Button | 2,911 Kb |
Data Input Form | 8,406 Kb |
Greensock Light Switch | 3,271 Kb |
A Pen by Rachel McGrane | 16,843 Kb |
Site Header | 2,985 Kb |
SVG Audio Wave Loader | 2,547 Kb |
Rainbow Preloader with Offset-Path | 2,721 Kb |
Audio Player WIP | 4,845 Kb |
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!
Name | Username | Size |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
Android Logo with HTML and CSS | Wifi | 2,000 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
Day 1 - Portfolio | Chpecson | 3,532 Kb |
Twitch API | Coderpilot | 3,412 Kb |
Awesome | Samarthpd | 2,901 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!