My Introduction
SUDAN RAJBANSHI
Committed to excellence in everything I do.
Full Name:
Sudan Rajbanshi
Phone:
+977 9819512345
Email:
sudanrajbanshi@gmail.com
Date of Birth:
5 Oct 1994
Address:
Nepalgunj, Nepal
Nationality:
Nepali
Languages:
English, Nepali, Hindi, Tharu,
Skills:
html, css, javascript
HTML CODE:
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
background:transparent;
}
.container{
position:relative;
width:90%;
max-width:1150px;
margin:60px auto;
padding:45px;
border-radius:25px;
background:rgba(255,255,255,.96);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
overflow:hidden;
z-index:1;
box-shadow:
0 15px 35px rgba(0,0,0,.08),
0 35px 70px rgba(100,87,216,.18);
transition:.4s ease;
}
.container::before{
content:"";
position:absolute;
inset:0;
padding:2px;
border-radius:25px;
background:linear-gradient(
135deg,
#6457d8,
#8b7cff,
#5f9cff,
#6457d8
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
pointer-events:none;
}
.container::after{
content:"";
position:absolute;
width:250px;
height:250px;
background:rgba(100,87,216,.08);
border-radius:50%;
top:-120px;
right:-120px;
filter:blur(15px);
z-index:-1;
}
.container:hover{
transform:translateY(0px);
box-shadow:
0 20px 45px rgba(0,0,0,.12),
0 45px 90px rgba(100,87,216,.25);
}
/*======================
ABOUT SECTION
=======================*/
.about{
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
}
/* LEFT */
.left{
flex:0.5;
display:flex;
justify-content:center;
}
.left img{
width:100%;
max-width:300px;
border-radius:20px;
border:6px solid #fff;
box-shadow:
0 15px 35px rgba(0,0,0,.15),
0 0 0 5px rgba(100,87,216,.12);
transition:.4s;
}
.left img:hover{
transform:scale(1.50) rotate(-380deg);
}
/* RIGHT */
.right{
flex:1.5;
}
.tag{
display:block;
width:fit-content;
background:#6457d8;
color:#fff;
padding:7px 18px;
font-size:14px;
font-weight:600;
position:relative;
margin:0 auto 20px 0; /* Left align */
text-align:left;
}
.tag::after{
content:"";
position:absolute;
left:18px;
bottom:-10px;
border-top:10px solid #6457d8;
border-left:10px solid transparent;
}
h1{
font-size:42px;
font-weight:700;
background:linear-gradient(90deg,#6457d8,#3f8cff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:8px;
}
.subtitle{
font-size:18px;
color:#666;
margin-bottom:25px;
text-align:left;
}
hr{
border:none;
border-top:1px solid #ddd;
margin-bottom:25px;
}
.info{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px 35px;
margin-bottom:30px;
}
.item{
display:flex;
align-items:center;
gap:12px;
padding:14px 18px;
background:#f8f9ff;
border-radius:12px;
border-left:4px solid #6457d8;
transition:.3s;
}
.item:hover{
transform:translateX(6px);
background:#eef1ff;
box-shadow:0 10px 25px rgba(100,87,216,.15);
}
.item i{
width:34px;
height:34px;
background:#6457d8;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-right:0;
}
.item span{
color:#777;
}
.buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}
.btn{
padding:14px 32px;
border-radius:50px;
background:linear-gradient(135deg,#6457d8,#8b7cff);
color:#fff;
font-weight:600;
text-decoration:none;
box-shadow:0 12px 25px rgba(100,87,216,.30);
transition:.35s;
}
.btn:hover{
transform:translateY(-4px);
box-shadow:0 18px 35px rgba(100,87,216,.45);
}
.btn i{
margin-right:8px;
}
/*======================
TABLET
=======================*/
@media(max-width:991px){
.about{
flex-direction:column;
text-align:center;
}
.left img{
max-width:250px;
}
h1{
font-size:32px;
}
.subtitle{
font-size:16px;
}
.info{
grid-template-columns:1fr;
text-align:left;
}
.buttons{
justify-content:center;
}
}
/*======================
MOBILE
=======================*/
@media(max-width:576px){
.container{
width:95%;
margin:30px auto;
}
.left img{
max-width:200px;
}
.tag{
font-size:12px;
padding:6px 14px;
}
h1{
font-size:26px;
}
.subtitle{
font-size:15px;
}
.info{
gap:15px;
}
.item{
font-size:14px;
}
.buttons{
flex-direction:column;
}
.btn{
width:100%;
text-align:center;
font-size:15px;
}
}
</style>
<div class="container">
<div class="about">
<!-- LEFT -->
<div class="left">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfIDXrn20QRg9fNhSCC2JzOMSZIHX-ROkvEnFnTcuJPwMk9F9q_A4DJQM8v6Hx9-Aa1-0bxBDH3CB19I_uRyT0mt4UuiZgp0eDn7FhaMqKfD-1hr5xxgTW-m2Rz6izUOYpwqMDJVYGsQ/s1600/My+PP+size.jpg" alt="Profile" />
</div>
<!-- RIGHT -->
<div class="right">
<div class="tag" >My Introduction</div>
<h1>SUDAN RAJBANSHI</h1>
<p class="subtitle">
Committed to excellence in everything I do.
</p>
<hr />
<div class="info">
<div class="item">
<i class="far fa-dot-circle"></i>
<strong>Full Name:</strong>
<span> Sudan Rajbanshi</span>
</div>
<div class="item">
<i class="far fa-dot-circle"></i>
<strong>Phone:</strong>
<span> +977 9819512345</span>
</div>
<div class="item">
<i class="far fa-dot-circle"></i>
<strong>Email:</strong>
<span> sudanrajbanshi@gmail.com</span>
</div>
<div class="item">
<i class="far fa-dot-circle"></i>
<strong>Date of Birth:</strong>
<span> 5 Oct 1994</span>
</div>
<div class="item">
<i class="far fa-dot-circle"></i>
<strong>Address:</strong>
<span> Nepalgunj, Nepal</span>
</div>
<div class="item">
<i class="far fa-dot-circle"></i>
<strong>Nationality:</strong>
<span> Nepali</span>
</div>
<div class="item">
<i class="far fa-dot-circle"></i>
<strong>Languages:</strong>
<span> English, Nepali, Hindi, Tharu,</span>
</div>
<div class="item">
<i class="far fa-dot-circle"></i>
<strong>Skills:</strong>
<span> html, css, javascript</span>
</div>
</div>
<div class="buttons">
<a href="#" class="btn">
<i class="fa-solid fa-file-arrow-down"></i>
Download Resume
</a>
<a href="#" class="btn">
<i class="fa-solid fa-envelope"></i>
Contact Me
</a>
</div>
</div>
</div>
</div>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<!-- Floating WhatsApp Button -->
<a href="https://wa.me/9779812345678?text=Hello"
class="floating-whatsapp"
target="_blank"
aria-label="Chat on WhatsApp">
<i class="fab fa-whatsapp"></i>
<span>Chat with us</span>
</a>
<style>
.floating-whatsapp{
position:fixed;
right:20px;
bottom:20px;
z-index:99999;
display:flex;
align-items:center;
gap:10px;
padding:14px 18px;
background:#25D366;
color:#fff;
text-decoration:none;
border-radius:50px;
font-family:'Poppins',sans-serif;
font-size:15px;
font-weight:600;
box-shadow:0 10px 30px rgba(37,211,102,.4);
transition:all .3s ease;
animation:whatsappPulse 2s infinite;
}
.floating-whatsapp i{
font-size:28px;
}
.floating-whatsapp:hover{
background:#1EBE5D;
transform:translateY(-5px) scale(1.05);
box-shadow:0 15px 35px rgba(37,211,102,.55);
}
@keyframes whatsappPulse{
0%{
box-shadow:0 0 0 0 rgba(37,211,102,.6);
}
70%{
box-shadow:0 0 0 18px rgba(37,211,102,0);
}
100%{
box-shadow:0 0 0 0 rgba(37,211,102,0);
}
}
/* Mobile */
@media (max-width:600px){
.floating-whatsapp{
right:15px;
bottom:15px;
padding:12px;
border-radius:50%;
}
.floating-whatsapp span{
display:none;
}
.floating-whatsapp i{
font-size:30px;
}
}
</style>
0 Comments