Description:-

Hello everyone! In this video, you are going to learn "How to create About us page with pop effect - Using HTML & CSS ".

Let's see!

About us page with pop effect - Codexbaba

You Might Also Like ➝

•Glowing Neon Button With Hover effect 

• Custom Select Box - Using HTML & CSS

• Awesome Web Page Preloader - Using HTML & CSS 

• Flame Effect Text - Using HTML & CSS 

• The Glassmorphism Social Button | Using HTML & CSS

All the source codes and source files and available to download from here. Copy and paste the code from the text editors. First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

Source code:-

About us page with pop effect    - USING HTML & CSS 

HTML 

<div class="person"> <div class="container"> <div class="container-inner"> <img class="circle" src="######" /> </div> </div> <div class="divider"></div> <div class="name">Alma</div> <div class="title">Product Manager</div> </div> <div class="person"> <div class="container"> <div class="container-inner"> <img class="circle" src="####" /> </div> </div> <div class="divider"></div> <div class="name">Irma</div> <div class="title">Senior Developer</div> </div> <div class="person"> <div class="container"> <div class="container-inner"> <img class="circle" src="###" /> </div> </div> <div class="divider"></div> <div class="name">Anton</div> <div class="title">Senior UX</div> </div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@900&family=Sumana:wght@700&display=swap"); body { align-items: center; background-color: #f2f2f2; display: flex; font-family: "Merriweather", serif; flex-wrap: wrap; justify-content: center; height: 100vh; margin: 0; } .person { align-items: center; display: flex; flex-direction: column; width: 280px; } .container { border-radius: 50%; height: 312px; -webkit-tap-highlight-color: transparent; transform: scale(0.48); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); width: 400px; } .container:after { background-color: #f2f2f2; content: ""; height: 10px; position: absolute; top: 390px; width: 100%; } .container:hover { transform: scale(0.54); } .container-inner { clip-path: path( "M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z" ); position: relative; transform-origin: 50%; top: -200px; } .circle { background-color: #fee7d3; border-radius: 50%; cursor: pointer; height: 380px; left: 10px; pointer-events: none; position: absolute; top: 210px; width: 380px; } .img { pointer-events: none; position: relative; transform: translateY(20px) scale(1.15); transform-origin: 50% bottom; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); } .container:hover .img { transform: translateY(0) scale(1.2); } .img1 { left: 22px; top: 164px; width: 340px; } .img2 { left: -46px; top: 174px; width: 444px; } .img3 { left: -16px; top: 144px; width: 466px; } .divider { background-color: #ca6060; height: 1px; width: 160px; } .name { color: #404245; font-size: 36px; font-weight: 600; margin-top: 16px; text-align: center; } .title { color: #6e6e6e; font-family: arial; font-size: 14px; font-style: italic; margin-top: 4px; }

× NOTE: Make sure that you follow us on Telegram ( our recommendation ). Some drives will be telegram exclusive.

Follow us

Telegram

Join Our Telegram Group of your batch and get Off-campus and Job updates.

Instagram

Join Our Instagaram channel of your batch and get Off-campus and Job updates.

full-width