Skip to content

Commit

Permalink
added github logo and arranged in grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@VirajS00
VirajS00 committed Jan 31, 2021
1 parent 0d46a13 commit 45ba400
Show file tree
Hide file tree
Showing 4 changed files with 248 additions and 62 deletions.
1 change: 0 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1 +0,0 @@
Futura-Medium.ttf
Binary file added Futura-Medium.ttf
View file
Binary file not shown.
159 changes: 102 additions & 57 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,69 +3,114 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Logos 2</title>
<title>CSS App Logos</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="shape-container among-us">
<div class="a-us-body"></div>
<div class="face-shield"></div>
</div>
<div class="shape-container weather-app">
<div class="cloud"></div>
<div class="sun"></div>
</div>
<div class="shape-container google-photos">
<div class="half-circle hc1"></div>
<div class="half-circle hc2"></div>
<div class="half-circle hc3"></div>
<div class="half-circle hc4"></div>
</div>
<div class="shape-container google">
<div class="google-g">
<div class="g">
<div class="g1"></div>
<section class="logos-container">
<h1 class="title">CSS App Logos</h1>
<div class="logo-container">
<div class="shape-container among-us">
<div class="a-us-body"></div>
<div class="face-shield"></div>
</div>
<h2 class="logo-title">Among Us</h2>
</div>
<div class="rect rect-1"></div>
<div class="rect rect-2"></div>
<div class="rect rect-3"></div>
</div>
<div class="shape-container ppt">
<div class="ppt-circle"></div>
<div class="ppt-p">P</div>
</div>
<div class="shape-container word">
<div class="word-box"></div>
<div class="word-w">W</div>
</div>
<div class="shape-container excel">
<div class="excel-box"></div>
<div class="word-w xl-x">X</div>
</div>
<div class="shape-container teams-logo">
<div class="word-w teams-t">T</div>
<div class="teams-person-1"></div>
<div class="teams-person-2"></div>
</div>
<div class="shape-container google-meet">
<div class="green-meet">
<div class="tri-meet"></div>
<div class="logo-container">
<div class="shape-container weather-app">
<div class="cloud"></div>
<div class="sun"></div>
</div>
<h2 class="logo-title">Apple Weather App</h2>
</div>
<div class="logo-container">
<div class="shape-container apple-podcasts">
<div class="circles-podcasts"></div>
<div class="body-border"></div>
<div class="body-podcasts">
<div class="head"></div>
</div>
</div>
<h2 class="logo-title">Apple Podcasts</h2>
</div>
<div class="logo-container">
<div class="shape-container google">
<div class="google-g">
<div class="g">
<div class="g1"></div>
</div>
</div>
<div class="rect rect-1"></div>
<div class="rect rect-2"></div>
<div class="rect rect-3"></div>
</div>
<h2 class="logo-title">Google</h2>
</div>
<div class="logo-container">
<div class="shape-container google-photos">
<div class="half-circle hc1"></div>
<div class="half-circle hc2"></div>
<div class="half-circle hc3"></div>
<div class="half-circle hc4"></div>
</div>
<h2 class="logo-title">Google Photos</h2>
</div>
<div class="logo-container">
<div class="shape-container google-meet">
<div class="green-meet">
<div class="tri-meet"></div>
</div>
<div class="yellow-meet"></div>
<div class="blue-meet"></div>
</div>
<h2 class="logo-title">Google Meet</h2>
</div>
<div class="logo-container">
<div class="shape-container google-docs">
<div class="yellow-square"></div>
<div class="blue-square-docs"></div>
<div class="green-square-docs"></div>
</div>
<h2 class="logo-title">Google Docs</h2>
</div>
<div class="logo-container">
<div class="shape-container github">
<div class="cat-head"></div>
<div class="cat-body"></div>
<div class="cat-tail"></div>
</div>
<h2 class="logo-title">GitHub</h2>
</div>
<div class="logo-container">
<div class="shape-container word">
<div class="word-box"></div>
<div class="word-w">W</div>
</div>
<h2 class="logo-title">Microsoft Word</h2>
</div>
<div class="yellow-meet"></div>
<div class="blue-meet"></div>
</div>
<div class="shape-container google-docs">
<div class="yellow-square"></div>
<div class="blue-square-docs"></div>
<div class="green-square-docs"></div>
</div>
<div class="shape-container apple-podcasts">
<div class="circles-podcasts"></div>
<div class="body-border"></div>
<div class="body-podcasts">
<div class="head"></div>
<div class="logo-container">
<div class="shape-container excel">
<div class="excel-box"></div>
<div class="word-w xl-x">X</div>
</div>
<h2 class="logo-title">Microsoft Excel</h2>
</div>
<div class="logo-container">
<div class="shape-container ppt">
<div class="ppt-circle"></div>
<div class="ppt-p">P</div>
</div>
<h2 class="logo-title">Microsoft Power Point</h2>
</div>
<div class="logo-container">
<div class="shape-container teams-logo">
<div class="word-w teams-t">T</div>
<div class="teams-person-1"></div>
<div class="teams-person-2"></div>
</div>
<h2 class="logo-title">Microsoft Teams</h2>
</div>
</div>
</section>
<footer>&copy; Viraj Shukla 2020</footer>
</body>
</html>
150 changes: 146 additions & 4 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -537,6 +537,7 @@ rect {

.google-docs {
background-color: #fff;
width: calc(var(--shape-size) * 0.6);
}

.yellow-square {
Expand Down Expand Up @@ -569,22 +570,21 @@ rect {

.blue-square-docs {
position: absolute;
width: 25%;
width: 41%;
height: 55%;
background-color: #2785fe;
top: 24%;
left: calc(var(--shape-size) * 0.49);
left: calc(var(--shape-size) * 0.5);
}

.blue-square-docs::after {
content: '';
position: absolute;
height: 42%;
width: 95%;
width: 100%;
background-color: #1066da;
top: 100%;
z-index: 3;
left: 4%;
border-bottom-right-radius: calc(var(--shape-size) * 0.05);
}

Expand Down Expand Up @@ -743,3 +743,145 @@ rect {
transform: translateX(-50%);
z-index: 1;
}

.github {
border-radius: calc(var(--shape-size) * 0.18);
background-color: #1c1817;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}

.cat-head {
height: 50%;
width: 70%;
background-color: #fff;
border-radius: 45%;
position: absolute;
top: 19%;
}

.cat-head::before,
.cat-head::after {
content: '';
border: calc(var(--shape-size) * 0.16) solid transparent;
border-bottom-color: #fff;
border-left-width: calc(var(--shape-size) * 0.1);
border-right-width: calc(var(--shape-size) * 0.1);
position: absolute;
top: -50%;
left: 4%;
transform: rotate(-20deg);
}

.cat-head::after {
transform: rotate(20deg);
top: -50%;
left: 67%;
}

.cat-body {
height: 30%;
width: 30%;
background-color: #fff;
position: absolute;
bottom: 2%;
border-top-left-radius: 30%;
border-top-right-radius: 30%;
}

.cat-body::after {
content: '';
width: 130%;
height: 14%;
background-color: #fff;
position: absolute;
bottom: -10%;
left: 50%;
transform: translateX(-50%);
border-top-left-radius: 80%;
border-top-right-radius: 80%;
}

.cat-tail {
height: 5%;
width: 15%;
background-color: #fff;
position: absolute;
left: 20%;
bottom: 13%;
border-bottom-left-radius: 30%;
border-top-left-radius: 30%;
}

.cat-tail::before {
content: '';
height: 90%;
width: 70%;
background-color: #fff;
position: absolute;
right: 70%;
bottom: 20%;
transform: rotate(20deg);
border-radius: 30%;
}

.cat-tail::after {
content: '';
height: 80%;
width: 95%;
background-color: #fff;
position: absolute;
right: 110%;
bottom: 116%;
transform: rotate(40deg);
border-radius: 30%;
}

/* logos grid start */

.logos-container {
display: grid;
grid-template-columns: repeat(auto-fit, calc(var(--shape-size) * 1.5));
gap: 1rem;
justify-content: center;
padding: 3% 0;
}

.logo-container {
background-color: #fff;
box-shadow: 0 6px 10px 2px #ccc;
height: calc(var(--shape-size) * 1.5);
width: calc(var(--shape-size) * 1.5);
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 2.5rem;
align-items: center;
}

.title {
font-family: 'futura01', sans-serif;
grid-column: 1/-1;
text-align: center;
font-size: 3.3rem;
padding-bottom: 3%;
}

.logo-title {
font-family: 'futura01', sans-serif;
}

/* logos grid end */

footer {
height: 50px;
display: block;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'futura01', sans-serif;
}

0 comments on commit 45ba400

Please sign in to comment.