Git is a distributed version control system DVCS designed for efficient source code management, suitable for both small and large projects. It allows multiple developers to work on a project simultaneously without overwriting changes, supporting collaborative work, continuous integration, and deployment. This Git and GitHub tutorial is designed for beginners to learn fundamentals and advanced concepts, including branching, pushing, merging conflicts, and essential Git commands. Prerequisites include familiarity with the command line interface CLI, a text editor, and basic programming concepts. Git was developed by Linus Torvalds for Linux kernel development and tracks changes, manages versions, and enables collaboration among developers. It provides a complete backup of project history in a repository. GitHub is a hosting service for Git repositories, facilitating project access, collaboration, and version control. The tutorial covers topics such as Git installation, repository creation, Git Bash usage, managing branches, resolving conflicts, and working with platforms like Bitbucket and GitHub. The text is a comprehensive guide to using Git and GitHub, covering a wide range of topics. It includes instructions on working directories, using submodules, writing good commit messages, deleting local repositories, and understanding Git workflows like Git Flow versus GitHub Flow. There are sections on packfiles, garbage collection, and the differences between concepts like HEAD, working tree, and index. Installation instructions for Git across various platforms Ubuntu, macOS, Windows, Raspberry Pi, Termux, etc. are provided, along with credential setup. The guide explains essential Git commands, their usage, and advanced topics like debugging, merging, rebasing, patch operations, hooks, subtree, filtering commit history, and handling merge conflicts. It also covers managing branches, syncing forks, searching errors, and differences between various Git operations e.g., push origin vs. push origin master, merging vs. rebasing. The text provides a comprehensive guide on using Git and GitHub. It covers creating repositories, adding code of conduct, forking and cloning projects, and adding various media files to a repository. The text explains how to push projects, handle authentication issues, solve common Git problems, and manage repositories. It discusses using different IDEs like VSCode, Android Studio, and PyCharm, for Git operations, including creating branches and pull requests. Additionally, it details deploying applications to platforms like Heroku and Firebase, publishing static websites on GitHub Pages, and collaborating on GitHub. Other topics include the use of Git with R and Eclipse, configuring OAuth apps, generating personal access tokens, and setting up GitLab repositories. The text covers various topics related to Git, GitHub, and other version control systems Key Pointers Git is a distributed version control system DVCS for source code management. Supports collaboration, continuous integration, and deployment. Suitable for both small and large projects. Developed by Linus Torvalds for Linux kernel development. Tracks changes, manages versions, and provides complete project history. GitHub is a hosting service for Git repositories. Tutorial covers Git and GitHub fundamentals and advanced concepts. Includes instructions on installation, repository creation, and Git Bash usage. Explains managing branches, resolving conflicts, and using platforms like Bitbucket and GitHub. Covers working directories, submodules, commit messages, and Git workflows. Details packfiles, garbage collection, and Git concepts HEAD, working tree, index. Provides Git installation instructions for various platforms. Explains essential Git commands and advanced topics debugging, merging, rebasing. Covers branch management, syncing forks, and differences between Git operations. Discusses using different IDEs for Git operations and deploying applications. Details using Git with R, Eclipse, and setting up GitLab repositories. Explains CI/CD processes and using GitHub Actions. Covers internal workings of Git and its decentralized model. Highlights differences between Git version control system and GitHub hosting platform.
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Codegyan - Minion in Pure CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="minion">
<ul class="hair back">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="minion-body">
<div class="dungarees-bottom"></div>
<div class="dungarees-front"></div>
<div class="dungarees-pocket">
<div class="logo"><span></span></div>
</div>
<div class="dungarees-strap left">
<div class="button"></div>
</div>
<div class="dungarees-strap right">
<div class="button"></div>
</div>
</div>
<ul class="hair front">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="goggle-strap left"></div>
<div class="goggle-strap right"></div>
<div class="goggle-strap-link left"></div>
<div class="goggle-strap-link right"></div>
<div class="goggle-frame left">
<div class="goggle">
<div class="eye">
<div class="pupil">
<div class="dot"></div>
</div>
</div>
</div>
</div>
<div class="goggle-frame right">
<div class="goggle">
<div class="eye">
<div class="pupil">
<div class="dot"></div>
</div>
</div>
</div>
</div>
<div class="goggle-shadow left"></div>
<div class="goggle-shadow right"></div>
<div class="mouth"></div>
<div class="arm-shadow left"></div>
<div class="arm-shadow right"></div>
<div class="arm left"></div>
<div class="arm right"></div>
<div class="glove left">
<div class="finger"></div>
</div>
<div class="glove right">
<div class="finger"></div>
</div>
<div class="wrist front left"></div>
<div class="wrist front right"></div>
<div class="wrist back left"></div>
<div class="wrist back right"></div>
<div class="leg left"></div>
<div class="leg right"></div>
<div class="shoe left"></div>
<div class="shoe right"></div>
<div class="shadow"></div>
</div>
</div>
<div class="movie-logo">
<img src="http://static2.wikia.nocookie.net/__cb20130816092518/despicableme/images/a/a7/DespicableMe.png">
<h1>Minion in Pure CSS</h1>
<!-- partial -->
</body>
</html>
CSS
:before, :after {
content: "";
position: absolute;
}
.container {
max-width: 550px;
padding: 0;
margin: 0 auto;
min-height: 450px;
display: inline;
perspective: 800px;
perspective-origin: 50% 50%;
}
.minion {
position: absolute;
top: calc(48% - (250px / 2));
left: calc(50% - (140px / 2));
height: 250px;
width: 140px;
}
.minion * {
position: absolute;
}
.minion .hair {
top: -15px;
margin: 0;
padding: 0;
}
.minion .hair.back li:nth-of-type(1) {
transform: rotate(-70deg);
margin-top: 36px;
}
.minion .hair.back li:nth-of-type(2) {
transform: rotate(-50deg);
margin-top: 19px;
}
.minion .hair.back li:nth-of-type(3) {
transform: rotate(-30deg);
margin-top: 12px;
}
.minion .hair.back li:nth-of-type(4) {
transform: rotate(-10deg);
margin-top: 3px;
}
.minion .hair.back li:nth-of-type(5) {
transform: rotate(2deg);
border-left: 1px solid #333333;
border-radius: 80% 0 0 0;
}
.minion .hair.back li:nth-of-type(6) {
transform: rotate(10deg);
margin-top: 3px;
}
.minion .hair.back li:nth-of-type(7) {
transform: rotate(30deg);
margin-top: 12px;
}
.minion .hair.back li:nth-of-type(8) {
transform: rotate(50deg);
margin-top: 19px;
}
.minion .hair.back li:nth-of-type(9) {
transform: rotate(70deg);
margin-top: 36px;
}
.minion .hair.front {
margin-top: 3px;
z-index: 4;
}
.minion .hair.front li:nth-of-type(1) {
transform: rotate(-60deg);
margin-top: 21px;
}
.minion .hair.front li:nth-of-type(2) {
transform: rotate(-46deg);
margin-top: 12px;
}
.minion .hair.front li:nth-of-type(3) {
transform: rotate(-28deg);
margin-top: 7px;
}
.minion .hair.front li:nth-of-type(4) {
transform: rotate(-12deg);
margin-top: 5px;
}
.minion .hair.front li:nth-of-type(5) {
transform: rotate(-2deg);
border-right: 1px solid #333333;
border-radius: 0 80% 0 0;
margin-top: 3px;
}
.minion .hair.front li:nth-of-type(6) {
transform: rotate(12deg);
margin-top: 6px;
}
.minion .hair.front li:nth-of-type(7) {
transform: rotate(28deg);
margin-top: 7px;
}
.minion .hair.front li:nth-of-type(8) {
transform: rotate(46deg);
margin-top: 12px;
}
.minion .hair.front li:nth-of-type(9) {
transform: rotate(60deg);
margin-top: 21px;
}
.minion .hair li {
list-style: none;
height: 30px;
width: 10px;
float: left;
}
.minion .hair li:nth-of-type(1) {
transform: rotate(-70deg);
position: absolute;
left: 8px;
height: 30px;
}
.minion .hair li:nth-of-type(2) {
transform: rotate(-50deg);
left: 18px;
}
.minion .hair li:nth-of-type(3) {
transform: rotate(-30deg);
left: 30px;
}
.minion .hair li:nth-of-type(4) {
transform: rotate(-10deg);
left: 45px;
}
.minion .hair li:nth-of-type(5) {
left: 60px;
}
.minion .hair li:nth-of-type(6) {
transform: rotate(10deg);
left: 76px;
}
.minion .hair li:nth-of-type(7) {
transform: rotate(30deg);
left: 93px;
}
.minion .hair li:nth-of-type(8) {
transform: rotate(50deg);
left: 107px;
}
.minion .hair li:nth-of-type(9) {
transform: rotate(70deg);
left: 119px;
height: 30px;
}
.minion .hair li:nth-of-type(n+6) {
border-left: 1px solid #333333;
border-radius: 80% 0 0 0;
}
.minion .hair li:nth-of-type(-n+4) {
border-right: 1px solid #333333;
border-radius: 0 80% 0 0;
}
.minion .minion-body {
position: relative;
height: 250px;
width: 140px;
border-radius: 80px 80px 50px 50px;
background: #FFCB4F;
overflow: hidden;
}
.minion .minion-body:after, .minion .minion-body:before {
top: 0;
left: 0;
}
.minion .minion-body:before {
width: 80%;
height: 100%;
border-radius: 20px;
background-image: radial-gradient(rgba(250, 250, 250, 0.6) 0%, rgba(250, 250, 250, 0) 60%);
filter: blur(5px);
z-index: 1;
left: -10px;
}
.minion .minion-body:after {
height: 250px;
width: 140px;
border-radius: 80px 80px 50px 50px;
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%);
filter: blur(5px);
z-index: 1;
}
.minion .minion-body .dungarees-front {
bottom: 0;
height: 90px;
width: 140px;
overflow: hidden;
border-top: 1px solid #4883b8;
}
.minion .minion-body .dungarees-front:before {
left: -30px;
border-radius: 0 0 35% 0;
box-shadow: 40px -40px 30px 40px #6D9CC6;
}
.minion .minion-body .dungarees-front:after {
right: -30px;
box-shadow: -40px -40px 30px 40px #6D9CC6;
border-radius: 0 0 0 35%;
}
.minion .minion-body .dungarees-front:before, .minion .minion-body .dungarees-front:after {
width: 56px;
height: 75%;
top: 0;
border: 1px solid #4883b8;
}
.minion .minion-body .dungarees-pocket {
bottom: 35px;
left: 50%;
margin-left: -17.5px;
height: 35px;
width: 35px;
border-radius: 0 0 15px 15px;
border-left: 1px solid #4883b8;
border-right: 1px solid #4883b8;
border-bottom: 1px solid #4883b8;
}
.minion .minion-body .dungarees-pocket:before {
top: -13px;
left: -2px;
height: 15px;
width: 37px;
border-bottom: 1px solid #4883b8;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-radius: 20px;
}
.minion .minion-body .dungarees-pocket .logo {
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -10.5px;
height: 25px;
width: 25px;
background: #333333;
border-radius: 50%;
}
.minion .minion-body .dungarees-pocket .logo:before {
top: 50%;
left: 50%;
margin-left: -7.5px;
margin-top: -7.5px;
height: 15px;
width: 15px;
background: #6D9CC6;
transform: rotate(45deg);
}
.minion .minion-body .dungarees-pocket .logo:after {
top: 50%;
left: 50%;
margin-left: -3.5px;
margin-top: -3.5px;
height: 7px;
width: 7px;
background: #333333;
border-radius: 50%;
z-index: 5;
}
.minion .minion-body .dungarees-pocket .logo span {
height: 2px;
background: #333333;
border-bottom: 1px solid #6D9CC6;
width: 12.5px;
right: 0;
top: 48%;
margin-top: -1px;
z-index: 6;
}
.minion .minion-body .dungarees-bottom {
bottom: 0;
height: 40px;
width: 140px;
background-color: #6d9cc6;
background-image: linear-gradient(top, #6d9cc6 45%, #4b6587 100%);
border-top: 1px solid #4883b8;
}
.minion .minion-body .dungarees-strap {
top: 127px;
height: 60px;
width: 12px;
background: #6D9CC6;
border: 1px solid #4883b8;
}
.minion .minion-body .dungarees-strap.left {
left: 5px;
transform: rotate(-65deg);
}
.minion .minion-body .dungarees-strap.right {
right: 5px;
transform: rotate(65deg);
}
.minion .minion-body .dungarees-strap .button {
bottom: 0;
left: 2px;
height: 8px;
width: 8px;
border-radius: 50%;
background: #333333;
}
.minion .goggle-strap {
top: 68px;
height: 3px;
background: black;
width: 16px;
z-index: 6;
}
.minion .goggle-strap.left {
left: -2px;
}
.minion .goggle-strap.left:before, .minion .goggle-strap.left:after {
border-right: 16px solid #444444;
}
.minion .goggle-strap.right {
right: -2px;
}
.minion .goggle-strap.right:before, .minion .goggle-strap.right:after {
border-left: 16px solid #444444;
}
.minion .goggle-strap:before, .minion .goggle-strap:after {
height: 6px;
}
.minion .goggle-strap:before {
top: -7px;
border-top: 2px solid transparent;
}
.minion .goggle-strap:after {
top: 3px;
border-bottom: 2px solid transparent;
}
.minion .goggle-strap-link {
top: 58px;
height: 25px;
width: 5px;
background: #999999;
z-index: 7;
}
.minion .goggle-strap-link.left {
left: 12px;
}
.minion .goggle-strap-link.right {
right: 12px;
}
.minion .goggle-frame {
top: 40px;
height: 50px;
width: 50px;
border: 5px solid #CCCCCC;
border-radius: 50%;
overflow: hidden;
z-index: 8;
}
.minion .goggle-frame.left {
left: 30%;
margin-left: -30px;
}
.minion .goggle-frame.left .goggle {
left: -1px;
}
.minion .goggle-frame.left .goggle .pupil {
right: 40%;
}
.minion .goggle-frame.right {
right: 30%;
margin-right: -30px;
}
.minion .goggle-frame.right .goggle {
right: -1px;
}
.minion .goggle-frame.right .goggle .pupil {
left: 40%;
}
.minion .goggle-frame .goggle {
height: 50px;
width: 50px;
border: 3px solid #666666;
border-radius: 50%;
}
.minion .goggle-frame .goggle .eye {
background: whitesmoke;
height: 46px;
width: 50px;
border-radius: 50%;
margin: 1px 0;
box-shadow: inset 0px 2px 10px 0px rgba(51, 51, 51, 0.5), inset 0px -1px 5px 0px rgba(51, 51, 51, 0.3);
}
.minion .goggle-frame .goggle .eye .pupil {
top: 50%;
margin: -7.5px;
height: 15px;
width: 15px;
background-color: #e7a452;
background-image: radial-gradient(#e7a452 0%, #91695c 49%, #91695c 74%, #000000 99%);
border-radius: 50%;
}
.minion .goggle-frame .goggle .eye .pupil .dot {
top: 50%;
left: 50%;
margin-top: -2.5px;
margin-left: -2.5px;
height: 5px;
width: 5px;
background: #333333;
border-radius: 50%;
}
.minion .goggle-shadow {
height: 75px;
top: 45px;
border-radius: 50%;
background-image: radial-gradient(rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%);
z-index: 5;
}
.minion .goggle-shadow.left {
left: 5px;
width: 130px;
}
.minion .goggle-shadow.right {
left: 55px;
width: 100px;
}
.minion .mouth {
top: 110px;
left: 50%;
margin-left: -30px;
height: 20px;
width: 60px;
border-bottom: 2px solid #DE9A33;
border-right: 1px solid tranparent;
border-left: 1px solid tranparent;
border-radius: 70%;
z-index: 5;
box-shadow: inset 0 -1px 2px -1px rgba(0, 0, 0, 0.3);
}
.minion .arm {
top: 160px;
height: 80px;
width: 12px;
z-index: -1;
background: #FFCB4F;
overflow: hidden;
}
.minion .arm.left {
left: -12px;
border-radius: 20px 0 0 20px/80px 0 0 20px;
transform: rotate(0deg);
}
.minion .arm.left:before {
background-image: linear-gradient(left, rgba(250, 250, 250, 0.3) 20%, rgba(0, 0, 0, 0) 100%);
}
.minion .arm.right {
right: -12px;
border-radius: 0 20px 20px 0/0 80px 20px 0;
transform: rotate(0deg);
}
.minion .arm.right:before {
background-image: linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 90%);
}
.minion .arm:before {
height: 100%;
width: 100%;
filter-gradient: #000000, #000000, horizontal;
}
.minion .arm-shadow {
top: 180px;
height: 30px;
width: 5px;
border-radius: 50%;
}
.minion .arm-shadow.left {
left: 0px;
box-shadow: inset 2px 0 3px -1px rgba(0, 0, 0, 0.3);
transform: rotate(5deg);
}
.minion .arm-shadow.right {
right: 0px;
box-shadow: inset -2px 0 3px -1px rgba(0, 0, 0, 0.3);
transform: rotate(-5deg);
}
.minion .glove {
bottom: 0;
width: 17px;
height: 18px;
background: #333333;
border-radius: 0 0 30px 30px;
}
.minion .glove.left {
left: -14px;
transform: rotate(-10deg);
}
.minion .glove.left:before {
left: -2px;
transform: rotate(20deg);
}
.minion .glove.left:after {
left: 13px;
transform: rotate(-30deg);
}
.minion .glove.left .finger {
left: 5px;
transform: rotate(0deg);
}
.minion .glove.right {
right: -14px;
transform: rotate(10deg);
}
.minion .glove.right:before {
right: -2px;
transform: rotate(-20deg);
}
.minion .glove.right:after {
right: 13px;
transform: rotate(30deg);
}
.minion .glove.right .finger {
right: 5px;
transform: rotate(0deg);
}
.minion .glove:before {
bottom: 0px;
height: 20px;
width: 10px;
background: #333333;
border-radius: 0 0 20px 20px;
}
.minion .glove:after {
bottom: -4px;
height: 20px;
width: 10px;
background: #333333;
border-radius: 0 0 20px 20px;
}
.minion .glove .finger {
bottom: -6px;
height: 20px;
width: 10px;
background: #333333;
border-radius: 0 0 20px 20px;
z-index: 10;
}
.minion .wrist {
height: 30px;
width: 16px;
border-radius: 40%;
}
.minion .wrist.front {
bottom: 15px;
border-bottom: 5px solid #333333;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.minion .wrist.back {
bottom: -11px;
border-top: 5px solid #333333;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
z-index: -2;
}
.minion .wrist.left {
left: -19px;
}
.minion .wrist.right {
right: -19px;
}
.minion .leg {
bottom: -15px;
height: 15px;
width: 25px;
background: #4B6587;
z-index: -1;
border-left: 1px solid #4883b8;
border-right: 1px solid #4883b8;
}
.minion .leg.left {
left: 40px;
border-radius: 0 0 10% 20%/0 0 80% 80%;
}
.minion .leg.left:after {
transform: rotate(55deg);
left: -12px;
}
.minion .leg.right {
right: 40px;
border-radius: 0 0 20% 10%/0 0 80% 80%;
}
.minion .leg.right:after {
transform: rotate(-55deg);
right: -12px;
}
.minion .leg:after {
top: -10px;
background: #4B6587;
height: 10px;
width: 20px;
border-bottom: 1px solid #4883b8;
}
.minion .shoe {
bottom: -26px;
width: 30px;
height: 10px;
background: #222222;
z-index: -2;
}
.minion .shoe.left {
right: 74px;
border-radius: 50px 20px 15px 10px;
transform: rotate(-3deg);
}
.minion .shoe.left:before {
right: 0px;
}
.minion .shoe.left:after {
right: 0;
border-radius: 10px 0 0 10px;
}
.minion .shoe.right {
left: 74px;
border-radius: 20px 50px 10px 15px;
transform: rotate(3deg);
}
.minion .shoe.right:before {
left: 0px;
}
.minion .shoe.right:after {
left: 0;
border-radius: 0 10px 10px 0;
}
.minion .shoe:before {
top: -10px;
height: 15px;
width: 22px;
background: #222222;
}
.minion .shoe:after {
bottom: -3px;
height: 3px;
width: 30px;
background-image: linear-gradient(top, #666666 0%, #222222 58%);
}
.minion .shadow {
bottom: -38px;
left: -10%;
width: 140%;
height: 30px;
background: radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
z-index: -5;
}
.movie-logo {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 20;
}
.movie-logo img {
margin: 0 0 -10px -10px;
width: 150px;
height: auto;
}
.movie-logo h1, .movie-logo h2 {
font-family: "helvetica neue", helvetica, arial, sans-serif;
margin: 0;
font-size: 26px;
letter-spacing: 1px;
color: #666666;
font-weight: 100;
}Also Read : Santa Animation With HTML & CSSIf you wann to check the demo of this code, then you can check using below demo button. Click on the following download button to download all source code files of minion directly on your computer.
