Mountains Illustration

Developer
Michael Lee
Size
2,957 Kb
Views
6,072
  1. Mountains Illustration Previews
  2. Mountains Illustration HTML Codes
  3. Mountains Illustration CSS Codes
  4. Mountains Illustration JS Codes

How do I make an mountains illustration?

Mountains illustrations based on Jonathan Quintin's dribbble http://drbl.in/iPfE. What is a mountains illustration? How do you make a mountains illustration? This script and codes were developed by Michael Lee on 20 January 2023, Friday.

Mountains Illustration Previews
IQ Test

Mountains Illustration - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mountains Illustration</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="environment"> <div class="moon"></div> <div class="background-mountain"></div> <div class="foreground-mountain-shadow"></div> <div class="foreground-mountain"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mountains Illustration - Script Codes CSS Codes

body { background: #ececea;
}
.environment { height: 300px; width: 300px; background: #dfeff4; border-radius: 100%; position: absolute; overflow: hidden; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.environment:before { content: ''; height: 160px; width: 300px; position: absolute; background: #d5d5d5; top: 180px;
}
.environment:after { content: ''; height: 300px; width: 300px; -moz-box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.07); -webkit-box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.07); box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.07); position: absolute; border-radius: 100%;
}
.environment .moon { background: #0ec5dd; height: 40px; width: 40px; position: absolute; right: 82px; top: 46px; border-radius: 100%;
}
.environment .background-mountain { border-bottom: 60px solid #bddcec; position: absolute; bottom: 120px; z-index: 3; right: 100px; border-left: 50px solid transparent; border-right: 50px solid transparent;
}
.environment .background-mountain:before { content: ''; border-bottom: 40px solid #bddcec; position: absolute; top: 20px; z-index: 3; left: -78px; border-left: 35px solid transparent; border-right: 35px solid transparent;
}
.environment .background-mountain:after { content: ''; border-bottom: 40px solid #bddcec; position: absolute; top: 20px; z-index: 3; left: 10px; border-left: 35px solid transparent; border-right: 35px solid transparent;
}
.environment .foreground-mountain { border-bottom: 50px solid #d5d5d5; border-right: 40px solid transparent; position: absolute; left: 130px; z-index: 4; bottom: 120px;
}
.environment .foreground-mountain:before { content: ''; border-bottom: 35px solid #d5d5d5; border-right: 30px solid transparent; position: absolute; left: -40px; z-index: 4; top: 15px;
}
.environment .foreground-mountain:after { content: ''; border-bottom: 35px solid #d5d5d5; border-right: 30px solid transparent; position: absolute; left: 24px; z-index: 4; top: 15px;
}
.environment .foreground-mountain-shadow { border-bottom: 50px solid #cacccb; border-left: 40px solid transparent; position: absolute; left: 90px; z-index: 5; bottom: 120px;
}
.environment .foreground-mountain-shadow:before { content: ''; border-bottom: 35px solid #cacccb; border-left: 30px solid transparent; position: absolute; left: -70px; z-index: 5; top: 15px;
}
.environment .foreground-mountain-shadow:after { content: ''; border-right: 6px solid #cacccb; border-bottom: 8px solid transparent; border-top: 8px solid transparent; position: absolute; left: 18px; z-index: 5; top: 15px;
}

Mountains Illustration - Script Codes JS Codes

(function() {
}).call(this);
Mountains Illustration - Script Codes
Mountains Illustration - Script Codes
Home Page Home
Developer Michael Lee
Username michaellee
Uploaded January 20, 2023
Rating 4
Size 2,957 Kb
Views 6,072
Do you need developer help for Mountains Illustration?

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!

Michael Lee (michaellee) Script Codes
Name
Ringing bell
Illustrated CSS Switch
Hidden Social Media Share Buttons
Animated CSS Poly Drop
Admin Dropdown Menu
Axe the Hamburger, Hail the Tab Bar
My Daily Routine Visualized
Responsive C3.js chart
SVG Triforce
Reveal password toggle
Create amazing art & images 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!