"Instagram Like "
Bootstrap 4.1.1 Snippet by iammohitverma

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"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> <link rel="stylesheet" href="style.css"> <title>Instagram Like
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* Designer: MOHIT VERMA */ * { margin: 0px; padding: 0px; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { width: 100%; min-height: 100vh; padding: 100px; background-color: gold; display: flex; justify-content: center; align-self: center; } main { text-align: center; } main h1 { font-size: 44px; font-weight: 600; margin-bottom: 40px; } main h2 { font-size: 24px; font-weight: 500; } main h2 .likeCount { color: sienna; font-weight: 700; font-size: 32px; letter-spacing: 1px; } main .instaPost { position: relative; width: 400px; height: 500px; margin: 50px auto; border-radius: 5px; overflow: hidden; box-shadow: 0 10px 6px -6px #000; display: flex; justify-content: center; align-items: center; cursor: pointer; } main .instaPost img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; } .instaPost .fa-heart { color: red; font-size: 55px; position: relative; z-index: 1; animation: heartanim 0.8s linear; } @keyframes heartanim { 0%{ transform: scale(1); opacity: 1; } 100% { transform: scale(5); opacity: 0; } } @media (max-width:991px) { main h1 { font-size: 34px; } } @media (max-width:768px) { body { padding: 100px 20px; } main h1 { font-size: 20px; margin-bottom: 20px; } main h2 { font-size: 16px; } main h2 .likeCount { font-size: 22px; } main .instaPost { margin: 30px auto; } main .instaPost { width: 100%; height: 300px; } } @media (max-width: 399px) { main h1 { font-size: 16px; } main h2 { font-size: 14px; } }

Related: See More

Rubik Presentation Page
Instagram Style User Online

Questions / Comments: