Css3 Shapely Dino...inspired by Dribbble shot by Jason Smith

Developer
Size
3,430 Kb
Views
8,096

How do I make an css3 shapely dino...inspired by dribbble shot by jason smith?

Css3 Shapely Dino...inspired by Dribbble shot by Jason Smith.https://dribbble.com/shots/2451039-Shapely-Dino. What is a css3 shapely dino...inspired by dribbble shot by jason smith? How do you make a css3 shapely dino...inspired by dribbble shot by jason smith? This script and codes were developed by Vijay Gupta on 10 November 2022, Thursday.

Css3 Shapely Dino...inspired by Dribbble shot by Jason Smith Previews

Css3 Shapely Dino...inspired by Dribbble shot by Jason Smith - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Css3 Shapely Dino...inspired by Dribbble shot by Jason Smith</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> <div class="landscape"> <div class="landscape__sun"></div> <div class="landscape__mount"> <span></span> <span></span> <span></span> <span></span> </div> <div class="landscape__cloud"> <span></span> <span></span> <span></span> </div> <div class="landscape__cloud left"> <span></span> <span></span> <span></span> </div>
</div>
<div class="dino"> <div class="dino__tail"></div> <div class="dino__neck"></div> <div class="dino__jaws"></div> <div class="dino__legs"> <span class="one"></span> <span class="two"></span> <span class="three"></span> <span class="four"></span> </div>
</div>
</body>
</html>

Css3 Shapely Dino...inspired by Dribbble shot by Jason Smith - Script Codes CSS Codes

body, html { width: 100%; height: 100%;
}
.landscape { width: 600px; height: 20px; background: #f9f6e2; position: relative; top: 40%; left: 30%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform: scale(0.7); transform: scale(0.7);
}
.landscape * { position: absolute;
}
.landscape__sun { width: 50px; height: 50px; border-radius: 50%; background: #E6DD8F; opacity: .2; top: -120px; left: 42%;
}
.landscape__mount { width: 500px; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.landscape__mount span { height: 0; width: 0; border-bottom: 50px solid #E6DD8F; border-right: 30px solid transparent; border-left: 30px solid transparent; bottom: 0; left: 20%; position: absolute; opacity: .5;
}
.landscape__mount span:nth-child(1) { left: 30%; -webkit-transform: scale(1.2); transform: scale(1.2);
}
.landscape__mount span:nth-child(2) { left: 40%; -webkit-transform: scale(2); transform: scale(2); bottom: 10px;
}
.landscape__mount span:nth-child(3) { left: 55%; bottom: -20px; -webkit-transform: scale(0.7); transform: scale(0.7);
}
.landscape__cloud { position: relative; -webkit-transform: scale(0.5); transform: scale(0.5);
}
.landscape__cloud span { height: 40px; width: 60px; left: 0; top: -250px; opacity: .3; border-radius: 60px 60px 0 0; background: #E6DD8F;
}
.landscape__cloud span:nth-child(1) { right: 0; left: 7%;
}
.landscape__cloud span:nth-child(2) { left: -7%;
}
.landscape__cloud span:nth-child(3) { left: 0; top: -258px; -webkit-transform: scale(1.5); transform: scale(1.5); bottom: -20px;
}
.dino { width: 100px; height: 100px; background: #2CC6EE; position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50% 50% 0 0; box-shadow: inset rgba(255, 255, 255, 0.2) 5px 5px 0;
}
.dino * { position: absolute;
}
.dino:after, .dino:before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); position: absolute; top: 30px; left: 30px;
}
.dino:before { left: 40px; top: 20px; -webkit-transform: scale(0.5); transform: scale(0.5);
}
.dino__tail { width: 0; height: 0; border-top: 30px solid transparent; border-right: 120px solid #20F099; border-bottom: 0 solid transparent; top: calc(100% - 30px); left: -125px;
}
.dino__neck { width: 25px; height: 130px; background: #FF2C82; right: -30px; bottom: 0; border-radius: 15px 0 15px 0;
}
.dino__jaws { width: 30px; height: 25px; background: #20F099; top: -30px; right: -65px; border-radius: 0 12px 12px 0;
}
.dino__legs { top: calc(100% + 5px);
}
.dino__legs span { width: 15px; height: 40px; background: #E6DD8F;
}
.dino__legs span:after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 5px; mix-blend-mode: multiply;
}
.dino__legs span.one { left: 0;
}
.dino__legs span.one:after { background: #2CC6EE; top: 40%; right: -5px;
}
.dino__legs span.two { left: 30px; background: #20F099;
}
.dino__legs span.two:after { background: #2CC6EE; top: 40%; right: -5px;
}
.dino__legs span.three { left: 60px; background: #2CC6EE;
}
.dino__legs span.three:after { background: #FF2C82; top: 40%; right: -5px;
}
.dino__legs span.four { left: 85px; background: #FF2C82;
}
.dino__legs span.four:after { background: #E6DD8F; top: 40%; right: -5px;
}
Css3 Shapely Dino...inspired by Dribbble shot by Jason Smith - Script Codes
Css3 Shapely Dino...inspired by Dribbble shot by Jason Smith - Script Codes
Home Page Home
Developer Vijay Gupta
Username ivijaygupta
Uploaded November 10, 2022
Rating 3.5
Size 3,430 Kb
Views 8,096
Do you need developer help for Css3 Shapely Dino...inspired by Dribbble shot by Jason Smith?

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!

Vijay Gupta (ivijaygupta) Script Codes
Create amazing web content 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!