Profile Card Css
PRÓXIMO
Botão 3D com Css3
ANTERIOR
Menu Responsivo com Jquery e Css
Postado: 16 de agosto de 2021
Tempo de Leitura: 2 Minutos
Neste artigo Veja como criar um Profile Card com css
vamos adicionar o Html:
<figure class="profile-user"> <figcaption> <img src="uploads/profile.jpg" title="Loop Nerd" alt="profile.jpg" class="profile" /> <p>Loop Nerd é um blog que posta artigos em formato de Códigos Html, css, Jquery e Design Responsivo. </p> <div class="social"> <a href="https://twitter.com/LoopNerd" target="_blank" title="Twitter" class="btn"> <i class="icon icon-twitter"></i> </a> <a href="#" class="btn" title="Facebook"> <i class="icon icon-facebook"></i> </a> <a href="#" class="btn" title="Instagram"> <i class="icon icon-instagram"></i> </a> </div> </figcaption> <h3>Loop Nerd<span>Front-End</span></h3> </figure>
Vamos Adicionar o CSS:
.profile-user { font-family:'open_sanslight'; position: relative; float: none; margin:auto; overflow: hidden; max-width: 320px; width: 100%; color: #ffffff; text-align: left; line-height: 1.4em; background-color: #23cad1; padding-top: 120px; border-radius:6px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.10); } .profile-user * { -webkit-box-sizing: border-box; box-sizing: border-box; } .profile-user img { max-width: 100%; vertical-align: top; opacity: 0.85; } .profile-user figcaption { width: 100%; height:auto; float:left; background-color: #fff; padding: 25px; position: relative; } .profile-user figcaption:before { position: absolute; content: ''; bottom: 100%; left: 0; width: 0; height: 0; border-style: solid; border-width: 55px 0 0 400px; border-color: transparent transparent transparent #fff; } .profile-user .profile { border-radius: 50%; position: absolute; bottom: 100%; left: 25px; z-index: 1; max-width: 90px; opacity: 1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.17); } .profile-user h3 { font-size: 1.3em; margin: 25px; font-weight: 300; position: absolute; top: 0; right: 0; text-align: right; } .profile-user h3 span { display: block; font-size: 0.65em; font-family:'open_sansregular'; color: #4d4d4d; } .profile-user p { margin: 0 0 12px; padding: 0 0 25px; float:left; font-family:'open_sanslight'; color:#4c4c4c; } .profile-user .social { float: left; width: 100%; text-align: center; border-top: 1px #f0f0f0 solid; padding-top: 20px; } .profile-user .social .btn { width: 40px; height:40px; line-height:30px; text-align: center; display: inline-block; border: 1px #00d0d9 solid; color:#00d0d9; padding: 0.3em; text-decoration: none; font-size: 1.2em; border-radius:50px; transition:0.3s; } .profile-user .social .btn:hover { background-color:#4c4c4c; border: 1px #4c4c4c solid; color:#fff; }
Veja o código Funcionando.
Deixe um comentário