"Untitled"
Bootstrap 4.1.1 Snippet by josecd

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Card con efecto hover - Magtimus</title> <link rel="stylesheet" href="css/estilos.css"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> </head> <body> <div class="container"> <div class="card"> <div class="llamada"> <h2>Llamada entrante <button type="button" class="close" (click)="close()"> <span aria-hidden="true">×</span> </button></h2> </div> <img src="https://www.google.com.mx/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwikxebch6PnAhXvtlkKHaLcD7AQjRx6BAgBEAQ&url=https%3A%2F%2Ficon-icons.com%2Ficon%2Favatar-business-executive-man-person-people-tie-black-hair%2F120519&psig=AOvVaw0fpfYDlFUsU-KbrRdN_HGU&ust=1580189708789101"> <h4>Naturaleza</h4> <button class="button button3">Rechazar</button> <button class="button button2">Rechazar con un mensaje</button> </div> </div> </body> </html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto'); html, body{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; font-family: sans-serif; letter-spacing: 0.03em; line-height: 1.6; font-family: 'Open Sans', sans-serif; } .title{ text-align: center; font-size: 40px; color: #6a6a6a; margin-top: 100px; font-weight: 100; font-family: 'Roboto', sans-serif; } .container{ width: 100%; max-width: 1200px; height: 430px; display: flex; flex-wrap: wrap; justify-content: center; margin: auto; } .llamada { background: rgb(221, 220, 218); } .llamada h2 { text-align: center; font-size: 20px; margin-top: 0px; height: 30px; padding: 8px; } .container .card{ width: 330px; height: 430px; border-radius: 8px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); overflow: hidden; margin: 20px; text-align: center; transition: all 0.25s; background: rgb(238, 235, 235); } .container .card img{ width: 150px; height: 150px; border-radius: 100px; border-color: white; border-width: 3px; border-style: solid; } .container .card h4{ font-weight: 600; } .container .card p{ padding: 0 1rem; font-size: 16px; font-weight: 300; } .container .card a { font-weight: 500; text-decoration: none; color: #3498db; } .button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; margin: 4px 2px; cursor: pointer; } .button3 { background-color: #f44336; width: 310px; height: 40px; border-radius: 5px; border-color: black; border-width: 1px; border-style: solid; padding: 8px; } .button2 { background-color: white; width: 310px; height: 40px; border-radius: 5px; color: black; padding: 8px; } .button1 { background-color: rgb(221, 220, 218); color: rgb(179, 177, 177); text-decoration: none; display: inline-block; font-size: 15px; cursor: pointer; margin-left: 130px; margin-top: -50px; position: absolute; }

Related: See More

Now UI Dashboard Angular

Questions / Comments: