Git logo with CSS

Developer
Diéssica Gurskas
Size
3,138 Kb
Views
4,048
  1. Git logo with CSS Previews
  2. Git logo with CSS HTML Codes
  3. Git logo with CSS CSS Codes
  4. Git logo with CSS JS Codes

How do I make an git logo with css?

The Git software logo (http://git-scm.com/) with pure CSS.. What is a git logo with css? How do you make a git logo with css? This script and codes were developed by Diéssica Gurskas on 10 January 2023, Tuesday.

Git logo with CSS Previews
IQ Test

Git logo with CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Git logo with CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .box { padding: 80px 0; background: #F05033; border-radius: 25px; width: 300px; height: 300px; transform: rotate(45deg); float: left;
}
.box .line, .box .different-line { background: #202020; display: inline-block; height: 28px;
}
.box .line:after, .box .different-line:after { border-radius: 50%; background: #202020; content: ""; width: 63px; height: 63px; display: inline-block; transform: translate(100%, -28%);
}
.box .line { width: 115px;
}
.box .different-line { transform: rotate(45deg) translate(65px, -65px); width: 165px;
}
.box .different-line:after { transform: translate(170%, -28%);
}
.git { color: #fff; font-size: 30em; float: right; font-weight: bold; margin-top: -150px;
}
* { box-sizing: border-box;
}
body { background: #202020; margin: 5em auto;
}
#gitlogo { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 940px; height: 270px; margin: auto;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id='gitlogo'> <div class='box'> <div class='line'></div> <div class='line'></div> <div class='different-line'></div> </div> <div class='git'>git</div>
</div> <script src="js/index.js"></script>
</body>
</html>

Git logo with CSS - Script Codes CSS Codes

.box { padding: 80px 0; background: #F05033; border-radius: 25px; width: 300px; height: 300px; transform: rotate(45deg); float: left;
}
.box .line, .box .different-line { background: #202020; display: inline-block; height: 28px;
}
.box .line:after, .box .different-line:after { border-radius: 50%; background: #202020; content: ""; width: 63px; height: 63px; display: inline-block; transform: translate(100%, -28%);
}
.box .line { width: 115px;
}
.box .different-line { transform: rotate(45deg) translate(65px, -65px); width: 165px;
}
.box .different-line:after { transform: translate(170%, -28%);
}
.git { color: #fff; font-size: 30em; float: right; font-weight: bold; margin-top: -150px;
}
* { box-sizing: border-box;
}
body { background: #202020; margin: 5em auto;
}
#gitlogo { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 940px; height: 270px; margin: auto;
}

Git logo with CSS - Script Codes JS Codes

//
Git logo with CSS - Script Codes
Git logo with CSS - Script Codes
Home Page Home
Developer Diéssica Gurskas
Username diessica
Uploaded January 10, 2023
Rating 3
Size 3,138 Kb
Views 4,048
Do you need developer help for Git logo with CSS?

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!

Diéssica Gurskas (diessica) Script Codes
Name
A CSS curve
CSS Sine Waves
Hover to show the text
Tooltip with title attribute
How checkbox hack works
CSS Lasers
Colunas de mesma altura
Pure CSS Waves
Floating labels with CSS only
Equal Height Columns Sass mixin
Create amazing blog posts 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!