A Pen by Damien Flandrin
How do I make an a pen by damien flandrin?
What is a a pen by damien flandrin? How do you make a a pen by damien flandrin? This script and codes were developed by Damien Flandrin on 12 June 2022, Sunday.
A Pen by Damien Flandrin - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Damien Flandrin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="world"> <div class="sky"> <div class="montagne"> <img src="https://damienflandrin.fr/storage/codepen/montagne.png" alt="montagne" /> </div> <div class="sun"></div> <img class="petale" src="https://damienflandrin.fr/storage/codepen/petale.png" alt="petale" /> <img class="petale" src="https://damienflandrin.fr/storage/codepen/petale.png" alt="petale" /> <img class="petale" src="https://damienflandrin.fr/storage/codepen/petale.png" alt="petale" /> <img class="petale" src="https://damienflandrin.fr/storage/codepen/petale.png" alt="petale" /> </div> <div class="ground"> <img src="https://damienflandrin.fr/storage/codepen/ground.png" alt="ground" /> <div class="arbre"> <img src="https://damienflandrin.fr/storage/codepen/silhouette-cerisier.png" alt="arbre" /> </div> </div>
</div>
<div class="author"> <a href="https://www.damienflandrin.fr" target="blank">A pen by Damien Flandrin<br/> https://www.damienflandrin.fr </a>
</div>
</body>
</html>
A Pen by Damien Flandrin - Script Codes CSS Codes
/* VARIABLES */
* { box-sizing: border-box;
}
html, body { width: 100%; height: 100%;
}
body { background: #111; margin: 0px; display: flex; flex-direction: column; justify-content: center; font-family: Helvetica, Arial, Sans-Serif;
}
.author, .world { border-top: 5px solid #fcaf56; border-left: 5px solid #fcaf56; border-bottom: 5px solid #fb9724; border-right: 5px solid #fb9724;
}
.author { width: 250px; height: 80px; line-height: 35px; margin: 0px auto auto auto; background: #E87E04; background: linear-gradient(135deg, #fb8b0b 0%, #cf7004 100%); text-align: center;
}
.author a { color: white; text-decoration: none;
}
.world { width: 500px; height: 300px; margin: auto auto 20px auto; overflow: hidden;
}
.sky { background: #910101; background-image: radial-gradient(ellipse farthest-corner at center bottom, #f28d0f 20%, #910101 100%); height: 60%; position: relative;
}
.montagne { width: 100%; opacity: .2; position: absolute; top: 50px;
}
.montagne img { width: 100%;
}
.sun { width: 50%; height: 100%; margin: auto; display: block; background-image: radial-gradient(ellipse farthest-corner at center center, #fffbbe 10%, #fde07c 44%, rgba(0, 0, 0, 0) 47.2%, rgba(0, 0, 0, 0) 100%); position: absolute; left: 30px; right: 0px; bottom: -50%;
}
.ground { height: 120px; background: black; backgrond-position: center top; position: relative; z-index: 2;
}
.ground > img { width: 100%; position: absolute; top: -8px;
}
.arbre { position: absolute; bottom: 90%; width: 30%; left: 20px;
}
.arbre img { width: 100%;
}
.petale { width: 4px; position: absolute; top: 45%; left: 30%; animation-name: fly; animation-duration: 5s; animation-iteration-count: infinite; animation-timing: ease; z-index: 10;
}
.petale + .petale { animation-delay: 1s; margin-top: 30px; margin-right: 0px;
}
.petale + .petale + .petale { animation-delay: 1.5s; margin-top: -20px; margin-right: 25px;
}
.petale + .petale + .petale + .petale { animation-delay: 2.5s; margin-top: 15px; margin-right: 40px;
}
@keyframes fly { 0% { top: 45%; left: 30%; transform: rotate(0deg); } 100% { top: 125%; left: 500px; transform: rotate(-180deg); }
}
Developer | Damien Flandrin |
Username | dam62500 |
Uploaded | June 12, 2022 |
Rating | 3 |
Size | 3,438 Kb |
Views | 131,560 |
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 |
Card UI CSS | 2,897 Kb |
Menu responsive avec Flexbox - 1 | 2,667 Kb |
LAMP PURE CSS with Animation | 2,911 Kb |
Menu responsive avec Flexbox - 2 | 3,955 Kb |
Description list inline | 1,741 Kb |
Make a grid with Neat 2.0 | 5,522 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 |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
Out of the blue | Giaco | 2,537 Kb |
Welcome | Nakome | 6,076 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
Side Sliding Menu CSS | EduardL | 4,388 Kb |
Flexbox playground | Enxaneta | 5,418 Kb |
Responsive Menu I | Rodericksandoval | 3,045 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Full page table inside the grid | Twikito | 1,864 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!