Profile Card

Espectacular Profile Card solo con CSS y HTML para insertar en nuestro Blog sobre un fondo oscuro el cual es responsive.

CODIGO HTML

<div id="gradient"></div> <div id="card"> <img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-prn1/1011835_1391406511073536_1527932704_n.jpg"/> <h2>Nuri Özdoğan'dan..</h2> <p>Öğrenciyim ama bunlarla ilgileniyorum.</p> <p>Web teknolojileri ile ilgilendiklerim HTML, HTML5, CSS, CSS3, Photoshop.</p> <p>Nuri Özdoğan codepen.io'yu seviyor. ;)</p> <span class="left bottom">tel: 530 283 ****</span> <span class="right bottom">Adres:Türkiye/Şanlıurfa</span> </div>

CODIGO CSS

<style> body { margin: 0 auto; padding: 0; background: #222; } .left { left: 25px; } .right { right: 25px; } .center { text-align: center; } .bottom { position: absolute; bottom: 25px; } #gradient { background: #999955; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.2, #DAB046), color-stop(0.2, #D73B25), color-stop(0.4, #D73B25), color-stop(0.4, #C71B25), color-stop(0.6, #C71B25), color-stop(0.6, #961A39), color-stop(0.8, #961A39), color-stop(0.8, #601035)); background-image: -webkit-linear-gradient(#CCC 20%, #CCC 20%, #CCC 40%, #CCC 40%, #CCC 60%, #961A39 60%, #CCC 80%, #CCC 80%); background-image: -moz-linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%); background-image: -o-linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%); background-image: linear-gradient(#CCC 20%, #333 20%, #333 40%, #CCC 40%, #CCC 60%, #333 60%, #333 80%, #CCC 80%); margin: 0 auto; margin-top: 100px; width: 100%; height: 150px; } #gradient:after { content: ""; position: absolute; background: #E9E2D0; left: 50%; margin-top: -67.5px; margin-left: -270px; padding-left: 20px; border-radius: 5px; width: 520px; height: 275px; z-index: -1; } #card { position: absolute; width: 450px; height: 225px; padding: 25px; padding-top: 0; padding-bottom: 0; left: 50%; top: 67.5px; margin-left: -250px; background: #E9E2D0; box-shadow: 0 0 5px black; box-shadow: -20px 0 35px -25px black, 20px 0 35px -25px black; z-index: 5; } #card img { width:125px; height:125px; float: left; border-radius: 0px; margin-right: 20px; -webkit-filter: sepia(1); -moz-filter: sepia(1); filter: sepia(1); border:solid 2px #ccc; } #card h2 { font-family: courier; color: #333; margin: 0 auto; padding: 0; font-size: 15pt; } #card p { font-family: courier; color: #555; font-size: 12px; } #card span { font-family: courier; } </style>

REALIZADO POR: Nuri Özdoğan

ORIGEN DE LA ENTRADA: https://codepen.io/nuriozdogan/pen/AbrbeB