Profile
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
Download Resume Contact Me
Logout



HTML CODE:
<body>

<!-- LOGIN PAGE start-->
<div id="loginPage">
<div class="login-box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfIDXrn20QRg9fNhSCC2JzOMSZIHX-ROkvEnFnTcuJPwMk9F9q_A4DJQM8v6Hx9-Aa1-0bxBDH3CB19I_uRyT0mt4UuiZgp0eDn7FhaMqKfD-1hr5xxgTW-m2Rz6izUOYpwqMDJVYGsQ/s1600/My+PP+size.jpg" class="login-img">

<h2>SUDAN RAJBANSHI</h2>

<input type="password" id="password" placeholder="Please Enter PW to Access Portfolio">

<button onclick="checkPassword()">VIEW PORTFOLIO</button>

<p id="error"></p>
</div>
</div>

<!-- PORTFOLIO -->
<div id="portfolioPage" style="display:none;">

<!-- ===========================
PASTE YOUR COMPLETE
PORTFOLIO CODE HERE
=========================== -->

</div>

<style>

#loginPage{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg,#6457d8,#3f33b3);
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
}

.login-box{
background:#fff;
padding:40px;
width:360px;
border-radius:15px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,.2);
}

.login-img{
width:100px;
height:100px;
border-radius:50%;
object-fit:cover;
margin-bottom:20px;
border:5px solid #6457d8;
}

.login-box h2{
margin-bottom:20px;
color:#333;
}

.login-box input{
width:100%;
padding:14px;
border:1px solid #ddd;
border-radius:8px;
margin-bottom:20px;
font-size:16px;
outline:none;
}

.login-box input:focus{
border-color:#6457d8;
}

.login-box button{
width:100%;
padding:14px;
background:#6457d8;
color:#fff;
border:none;
border-radius:8px;
font-size:16px;
cursor:pointer;
transition:.3s;
}

.login-box button:hover{
background:#4d40d6;
}

#error{
margin-top:15px;
color:red;
font-size:14px;
}

</style>

<script>

const PASSWORD = "123456"; // Change password here

function checkPassword(){

let pass = document.getElementById("password").value;

if(pass===PASSWORD){

document.getElementById("loginPage").style.display="none";
document.getElementById("portfolioPage").style.display="block";

sessionStorage.setItem("loggedIn","true");

}else{

document.getElementById("error").innerHTML="Incorrect Password";

}

}

if(sessionStorage.getItem("loggedIn")=="true"){

document.getElementById("loginPage").style.display="none";
document.getElementById("portfolioPage").style.display="block";

}

document.getElementById("password").addEventListener("keypress",function(e){

if(e.key==="Enter") checkPassword();

});

</script>
<script>

function logout(){
sessionStorage.removeItem("loggedIn");
location.reload();
}
</script>

<!-- LOGIN PAGE end-->




<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;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{
width:90%;
max-width:1100px;
margin:50px auto;
background:#fff;
border:1px solid #e5e7eb;
border-radius:20px;
padding:40px;
box-shadow:0 15px 40px rgba(0,0,0,0.12);
overflow:hidden;
transition:.3s ease;
}

.container:hover{
transform:translateY(-0.5px);
box-shadow:0 20px 50px rgba(0,0,0,0.18);
}

/*======================
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:0.3s ease;
transform-origin:top center; /* Swing from top */
cursor:pointer;
}

.left img:hover{
animation:swingPhoto 1.5s ease-in-out infinite;
}

@keyframes swingPhoto{
0%{
transform:rotate(0deg) scale(1);
}
25%{
transform:rotate(7deg) scale(1.03);
}
50%{
transform:rotate(-7deg) scale(1.05);
}
75%{
transform:rotate(5deg) scale(1.03);
}
100%{
transform:rotate(0deg) scale(1);
}
}

/* 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:38px;
color:#303342;
margin-bottom:10px;
text-align:left;
}

.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{
font-size:15px;
color:#333;
line-height:1.8;
text-align:left;

}

.item i{
color:#6457d8;
margin-right:8px;
}

.item span{
color:#777;
}

.buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.btn{
display:inline-block;
text-decoration:none;
background:#6457d8;
color:#fff;
padding:13px 28px;
border-radius:40px;
font-size:15px;
transition:.3s;
}

.btn:hover{
background:#4c3fd2;
}

.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>
</a>
<a href="#" class="btn" onclick="logout()">
<i class="fa-solid fa-right-from-bracket"></i>
Logout
</a>
</div>

</div>

</div>

</div>