CSS Summer vibes
How do I make an css summer vibes?
Set of colorful illustrations related with summer and chilled vibes.. What is a css summer vibes? How do you make a css summer vibes? This script and codes were developed by Jose Sentis on 30 August 2022, Tuesday.
CSS Summer vibes Previews
CSS Summer vibes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Summer vibes</title> <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <h1 class="title"> <span class="title__text">SUMMER VIBES</span> </h1> <div class="picto-container"> <div class="picto picto--rainbow"> <span class="picto--rainbow__circle picto--rainbow__circle--red"> <span class="picto--rainbow__circle picto--rainbow__circle--orange"> <span class="picto--rainbow__circle picto--rainbow__circle--yellow"> <span class="picto--rainbow__circle picto--rainbow__circle--green"> <span class="picto--rainbow__circle picto--rainbow__circle--skyblue"> <span class="picto--rainbow__circle picto--rainbow__circle--blue"> <span class="picto--rainbow__circle picto--rainbow__circle--purple"> <span class="picto--rainbow__circle picto--rainbow__circle--center"> </span> </span> </span> </span> </span> </span> </span> </span> </div> </div> <div class="picto-container"> <div class="picto picto--cactus"> <div class="picto--cactus__pot picto--cactus__pot--top"></div> <div class="picto--cactus__pot picto--cactus__pot--bottom"></div> <div class="picto--cactus__ball"> <div class="picto--cactus__ball__inner"></div> </div> </div> </div> <div class="picto-container"> <div class="picto picto--beer"> <div class="picto--beer__glass"> <span class="picto--beer__glass__foam"></span> <span class="picto--beer__glass__liq"></span> </div> </div> </div> <div class="picto-container"> <div class="picto picto--pencil"> <div class="picto--pencil__rubber"></div> <div class="picto--pencil__wood"></div> <div class="picto--pencil__tip"></div> </div> </div> <div class="picto-container"> <div class="picto picto--icecream"> <div class="picto--icecream__cone"> </div> </div> </div> <div class="picto-container"> <div class="picto picto--coco"> <div class="picto--coco__inside"></div> <div class="picto--coco__straw picto--coco__straw--top"></div> <div class="picto--coco__straw picto--coco__straw--bottom"></div> </div> </div> <div class="picto-container"> <div class="picto picto--cactus"> <div class="picto--cactus__pot picto--cactus__pot--top"></div> <div class="picto--cactus__pot picto--cactus__pot--bottom"></div> <div class="picto--cactus__tree picto--cactus__tree--main"></div> <div class="picto--cactus__tree picto--cactus__tree--right"></div> <div class="picto--cactus__tree picto--cactus__tree--left"></div> </div> </div> <div class="picto-container"> <div class="picto picto--cheese"> <div class="picto--cheese__yellow"> <div class="picto--cheese__yellow__hole picto--cheese__yellow__hole--top"></div> <div class="picto--cheese__yellow__hole picto--cheese__yellow__hole--right"></div> </div> </div> </div> <div class="picto-container"> <div class="picto picto--tee"> <div class="picto--tee__inner picto--tee__inner--chest"></div> <div class="picto--tee__inner picto--tee__inner--arms"></div> <div class="picto--tee__neck"></div> </div> </div> <p id="signature">Made with ♡ by <a href="http://www.josesentis.com" target="_blank">Jose Sentis</a></p> </div>
</body>
</html>
CSS Summer vibes - Script Codes CSS Codes
html, body { width: 100%; height: 100%; background-color: #e1e1e1; margin: 0; padding: 0;
}
#wrapper{ position: relative; max-width: 1200px; margin: 0 auto; padding: 20px;
}
.title{ text-align: center; margin: 100px auto;
}
.title__text{ color: rgb(255, 178, 219); font-family: 'Pacifico', cursive; font-size: 50px; display: inline; position: relative;
}
.title__text:after{ content: "SUMMER VIBES"; left: 7px; top: 3px; width: 100%; position: absolute; color: #00bbff; z-index: 0;
}
.picto-container{ padding:20px; width: 200px; box-sizing: border-box; margin: 0 auto; margin-bottom: 100px;
}
.picto{ position: relative; width: 160px; height: 160px;
}
.picto--rainbow{ position: relative; height: 80px; overflow: hidden; margin: 40px 0;
}
.picto--rainbow__circle{ padding: 10px; border-radius: 100%; display: inline-block;
}
.picto--rainbow__circle--center{ background-color: #e1e1e1;
}
.picto--rainbow__circle--red{ background-color: #ff0000;
}
.picto--rainbow__circle--orange{ background-color: #ff7f00;
}
.picto--rainbow__circle--yellow{ background-color: #ffff00;
}
.picto--rainbow__circle--green{ background-color: #00ff00;
}
.picto--rainbow__circle--skyblue{ background-color: #00ffff;
}
.picto--rainbow__circle--blue{ background-color: #0000ff;
}
.picto--rainbow__circle--purple{ background-color: #ff00ff;
}
.picto--beer{ position: relative; width: 80px; margin: 0px 40px; padding-top: 1px;
}
.picto--beer__glass{ margin-top: 29px; margin-bottom: 10px; height: 120px; box-sizing: border-box; padding: 5px 5px 10px; border-radius: 100%/25%; border-top-left-radius: 0; border-top-right-radius: 0; position: relative; box-shadow: 0px 0px 1px rgba(0,0,0,0.05);
}
.picto--beer__glass:after{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: inherit; background-color: rgba(128,200,240,0.2);
}
.picto--beer__glass:before { content: ''; width: 15%; height: 40%; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 100%; border-top-left-radius: 0; border-bottom-left-radius: 0; left: 100%; border: 7px solid; border-color: rgba(128,200,240,0.2); border-left-width: 0; box-shadow: 0px 0px 1px rgba(0,0,0,0.1);
}
.picto--beer__glass__foam{ background-color: #fff; display: inline-block; width: 100%; height: 30px; margin-top: -20px; border-top-left-radius: 15px; border-top-right-radius: 12px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; position: relative;
}
.picto--beer__glass__foam:before, .picto--beer__glass__foam:after{ content: ''; width: 100%; height: 7px; position: absolute; border-radius: 100%; transform: translateY(-50%); background-color: inherit;
}
.picto--beer__glass__foam:before{ top: 50%; z-index: 200;
}
.picto--beer__glass__foam:after{ top: 100%;
}
.picto--beer__glass__liq{ background-color: #ffc935; display: inline-block; width: 100%; height: 90px; border-radius: inherit; border-top-left-radius: 0; border-top-right-radius: 0;
}
.picto--icecream{ position: relative; width: 80px; margin: 0px 40px;
}
.picto--icecream__cone{ top: 5px; width: 60px; height: 60px; position: relative; margin: 0 auto; background-color: #ffb2db; border-radius: 100%; box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
.picto--icecream__cone:before{ content: ''; width: 100%; height: 20px; bottom: 0; position: absolute; background-color: inherit; border-radius: 100%; z-index: 50; box-shadow: 0px 2px 3px rgba(0,0,0,0.05);
}
.picto--icecream__cone:after{ content: ''; top: 100px; left: 2px; position: absolute; transform: translateY(-50%); border: 28px solid transparent; border-bottom: 0; border-top: 100px solid #ffcb85;
}
.picto--coco{ position: relative; width: 100px; height: 80px; margin: 40px 30px; border-radius: 50%/30%; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; background-color: #473134; box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}
.picto--coco__inside{ width: 84%; height: 40%; border-radius: 100%; position: relative; background-color: #f1eef1; left: 8%; top: 5%;
}
.picto--coco__straw{ background-color: #e90089; width: 4px; position: absolute; border-radius: 1px; box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
}
.picto--coco__straw--top{ height: 40px; left: 30px; top: -6px; transform: rotate(15deg);
}
.picto--coco__straw--bottom{ height: 24px; transform: rotate(-57deg); top: -22px; left: 24px;
}
.picto--cactus__pot{ background-color: #c46539; position: absolute;
}
.picto--cactus__pot--top{ bottom: 26px; height: 30px; width: 70px; left: 45px; border-radius: 50%/30%; z-index: 20; overflow: hidden; box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}
.picto--cactus__pot--top:after{ content: ''; background-color: rgba(0,0,0,0.2); width: 100%; height: 55%; position: absolute; top: 0px; left: 0; border-radius: 50%;
}
.picto--cactus__pot--bottom{ bottom: 0; height: 45px; width: 60px; left: 50px; border-radius: 50%/15%; box-shadow: inset -5px 0px 0px rgba(0,0,0,0.1), 0px 0px 3px rgba(0,0,0,0.2);
}
.picto--cactus__tree{ background-color: #5abb2c; position: absolute; z-index: 20; box-shadow: inset -3px 3px 0px rgba(0,0,0,0.2);
}
.picto--cactus__tree--main{ top:0; left: 65px; width: 30px; height: 114px; border-radius: 80%/5%; border-top-left-radius: 60%; border-top-right-radius: 60%; z-index: 21;
}
.picto--cactus__tree--left{ top: 20px; left: 50px; width: 20px; height: 90px; border-radius: 80%/5%; border-top-left-radius: 60%; border-top-right-radius: 60%; transform: rotate(-20deg);
}
.picto--cactus__tree--right{ top: 30px; left: 87px; width: 20px; height: 80px; border-radius: 80%/5%; border-top-left-radius: 60%; border-top-right-radius: 60%; transform: rotate(19deg);
}
.picto--cactus__ball{ width: 70px; height: 65px; position: absolute; bottom: 47px; z-index: 20; left: 45px; overflow: hidden;
}
.picto--cactus__ball__inner{ background-color: #5abb2c; border-radius: 100%; width: 70px; height: 70px; box-shadow: inset -3px 3px 0px rgba(0,0,0,0.2);
}
.picto--cheese{ width: 100px; height: 70px; margin: 30px; margin-top: 60px;
}
.picto--cheese__yellow{ width: 100px; height: 60px; transform: skewX(15deg) rotate(15deg); border-left: 3px solid #e72227; background-color: yellow;
}
.picto--cheese__yellow:after{ content: ''; position: absolute; bottom:100%; left: -3px; border-bottom: 22px solid #e72227; border-right: 74px solid transparent; border-left: 30px solid transparent; border-top: 0px solid transparent;
}
.picto--cheese__yellow__hole{ position: absolute; background-color: #e1e1e1; border-radius: 100%; width: 20px; height: 20px;
}
.picto--cheese__yellow__hole--top{ left: 50%; top:100%; transform: translateX(-50%) translateY(-50%);
}
.picto--cheese__yellow__hole--right{ left: 90%; top:50%; transform: translateY(-50%);
}
.picto--tee{ width: 120px;
height: 120px;
margin: 20px;
}
.picto--tee__inner{ background-color: #00bbff; position: absolute;
}
.picto--tee__inner--arms{ width: 100%; height: 40px; top: 0; left: 0;
}
.picto--tee__inner--chest{ width: 72%; height: 100%; top: 0; left: 14%;
}
.picto--tee__neck{ background-color: #e1e1e1; position: absolute; width: 40px; height: 40px; left: 40px; top: -20px; border-radius: 100%;
}
.picto--pencil{ width: 14px; height: 110px; margin: 25px 73px;
}
.picto--pencil__rubber{ background-color: #e72227; border-bottom: 8px solid #fff; box-shadow: inset -1px 1px 0px rgba(0,0,0,0.2); width: 14px; height: 14px; border-radius: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.picto--pencil__wood{ background-color: #00bbff; width: 14px; height: 65px; position: relative;
}
.picto--pencil__wood:after{ content: ''; position: absolute; top: 100%; width: 2px; border-top: 20px solid #fff; border-left: 6px solid transparent; ansparent; border-right: 6px solid transparent;
}
.picto--pencil__tip{ background-color: #000; position: relative; top: 20px; width: 2px; height: 3px; margin: 0 6px;
}
#signature{ font-family: monospace; font-size: 16px; position: absolute; right: 20px; bottom: 20px; color: #000; font-weight: normal; z-index: 150; margin: 0;
}
#signature a{ text-decoration: none; color: rgb(37,33,142); font-weight: bold;
}
#signature a:hover{ text-decoration: underline;
}
@media screen and (max-width: 768px) { #signature{ font-size: 10px; right: 10px; bottom: 5px; }
}
| Developer | Jose Sentis |
| Username | j0zelito |
| Uploaded | August 30, 2022 |
| Rating | 3.5 |
| Size | 3,846 Kb |
| Views | 34,408 |
Do you need developer help for CSS Summer vibes?
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!
Jose Sentis (j0zelito) Script Codes
| Name | Size |
| Speaker CSS illustration and animation. | 3,690 Kb |
| Shoe Box CSS illustrated | 5,209 Kb |
| TweetBox with React JS | 3,325 Kb |
| Refreshing CSS summer popsicles | 2,718 Kb |
| Burger CSS Illustration | 6,730 Kb |
| Old Cassette CSS illustration | 3,447 Kb |
| GameBoy CSS Illustration | 3,880 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| CSS Heart Loaders | Nourabusoud | 2,161 Kb |
| CSS Grid Test | Ajaykarwal | 2,377 Kb |
| Blockquote design | Sjmcpherson | 1,863 Kb |
| Animate elements with fixed gradient | Badabam | 4,406 Kb |
| Funny menu | AxeLVaisper | 4,671 Kb |
| Classy Blockquote Styling | Andrewwright | 3,212 Kb |
| Tooltip in table | Roine | 3,713 Kb |
| Add This API | ThatGuySam | 2,848 Kb |
| Pure CSS candle light animation by One element | Ksksoft | 2,193 Kb |
| Tree growth tests | Orchard | 3,818 Kb |
Do you want hide your ip address?
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!