A Pen by Cícero Joceilton on CodePen.
Created
December 13, 2021 12:10
-
-
Save joceilton/11c8b6adf101f12db592aa5daaf0927c to your computer and use it in GitHub Desktop.
Classificados
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <img class="logo" src="https://i.ibb.co/JxgSYWz/Whats-App-Image-2021-12-13-at-07-46-38-removebg-preview.png" alt="Classificados Juazeiro do Norte"> | |
| <div class="conteudo"> | |
| <img src="https://i.ibb.co/wCsKXT9/Creator-publishing-new-digital-content-removebg-preview.png"> | |
| <h2> Publique </h2> | |
| </div> | |
| <div class="btn-slider"> | |
| <div class="item-slider active"></div> | |
| <div class="item-slider"></div> | |
| <div class="item-slider"></div> | |
| </div> | |
| </div> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| width: 100vw; | |
| height: 100vh; | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Poppins', sans-serif; | |
| background-image: linear-gradient(#304D63, #2BE7E8); | |
| } | |
| .container { | |
| width: 100vw; | |
| height: 95vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| } | |
| @-webkit-keyframes snowman { | |
| from {-webkit-transform: rotate(4deg)} | |
| to {-webkit-transform: rotate(-4deg)} | |
| } | |
| @keyframes snowman { | |
| from {transform: rotate(4deg)} | |
| to {transform: rotate(-4deg)} | |
| } | |
| .container .logo { | |
| -webkit-animation: snowman 2s alternate infinite ease-in-out; | |
| animation: snowman 2s alternate infinite ease-in-out; | |
| position: absolute; | |
| top: -25px; | |
| } | |
| .container p.titulo strong { | |
| font-size: 48px; | |
| color: #F2D096; | |
| margin-right: -10px; | |
| } | |
| .container p.titulo { | |
| font-size: 30px; | |
| } | |
| .btn-slider { | |
| width: 100vw; | |
| position: absolute; | |
| bottom: 10px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .conteudo { | |
| width: 80vw; | |
| height: 300px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: transparent; | |
| padding: 5px; | |
| border: 1px RGB(143, 185, 170, 0.1) solid; | |
| border-radius: 20px; | |
| } | |
| .conteudo h2 { | |
| font-size: 2rem; | |
| color: #FFFFFF; | |
| letter-spacing: 1px; | |
| } | |
| .item-slider { | |
| width: 20px; | |
| height: 20px; | |
| background-color: #444; | |
| border-radius: 50%; | |
| margin-bottom : 20px; | |
| margin: 1em; | |
| } | |
| .item-slider.active { | |
| background-color: #F2D096; | |
| border: 1px #444 solid; | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Novo Projeto