Skip to content

Commit

Permalink
Logo - Bluesky
Browse files Browse the repository at this point in the history
  • Loading branch information
natalia-fs committed Nov 2, 2024
1 parent 68efab7 commit da0b652
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 0 deletions.
5 changes: 5 additions & 0 deletions Logos/bluesky/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Logo do Bluesky

<div align="center">
<img src="preview.png" alt="Logo da rede social Bluesky, centralizada em um fundo branco">
</div>
21 changes: 21 additions & 0 deletions Logos/bluesky/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="top">
<div></div>
<div></div>
</div>
<div class="bottom">
<div></div>
<div></div>
</div>
</div>
</body>
</html>
Binary file added Logos/bluesky/preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 49 additions & 0 deletions Logos/bluesky/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 70vmin;
aspect-ratio: 1;
background: linear-gradient(180deg, #1285fe 0, #0065cf);
border-radius: 25%;
}

.top, .bottom{
display: flex;
justify-content: center;
}

.top>div{
background: #fff;
width: 24vmin;
height: 24vmin;
border-radius: 15% 90% 0 25%/15% 100% 0 50%;
transform: skewY(15deg) rotateZ(-10deg);
}

.top>div:last-child{
transform: skewY(-15deg) rotateZ(10deg) rotateY(180deg);
}

.bottom>div{
background: #fff;
width: 16vmin;
aspect-ratio: 1;
border-radius: 80% 0 50% 80% / 50% 0 80% 80%;
}
.bottom>div:last-child{
transform: rotateY(180deg);
}

0 comments on commit da0b652

Please sign in to comment.