Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body {
- margin: 0;
- padding: 0;
- }
- .logo {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 130px;
- height: 130px;
- border-radius: 50%;
- background: #368ffb;
- }
- .letter {
- color: white;
- position: fixed;
- top: 50%;
- left: 50%;
- font-family: sans-serif;
- font-size: 106px;
- width: auto;
- height: auto;
- margin-top: -166px;
- margin-left: -34px;
- }
- .logo::before {
- content: '';
- position: absolute;
- top: 40px;
- left: 38px;
- border-left: 0px solid #368ffb;
- border-right: 100px solid #368ffb;
- border-top: 100px solid transparent;
- border-radius: 50%;
- }
- .logo::after {
- content: '';
- position: absolute;
- top: -10px;
- left: -8px;
- border-left: 0px solid #2f8cfe;
- border-right: 100px solid #2f8cfe;
- border-top: 100px solid transparent;
- border-radius: 50%;
- }
- .element {
- animation:
- pulse 3s ease infinite alternate,
- nudge 5s linear infinite alternate;
- border-radius: 100%;
- }
- @keyframes pulse {
- 0%, 100% {
- background-color: red;
- }
- 50% {
- background-color: orange;
- }
- }
- @keyframes nudge {
- 0%, 100% {
- transform: translate(0, 0);
- }
- 50% {
- transform: translate(150px, 0);
- }
- 80% {
- transform: translate(-150px, 0);
- }
- }
- html, body {
- height: 100%;
- }
- body {
- display: flex;
- align-items: center;
- justify-content: center;
- }
Add Comment
Please, Sign In to add comment