nikhildhawan/nikhil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "/"

Browse Source
This commit is contained in:
nikhildhawan
2025-01-11 02:23:30 +00:00
commit e6dd96dbd6
3 changed files with 982 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
index.html Normal file
View File

@ -0,0 +1,198 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NIKHIL DHAWAN</title>
<link rel="stylesheet" href="styles.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<!-- *************************Navbar************************* -->
<header class="header">
<a href="#" class="logo">NIKHIL</a>
<i class='bx bx-menu' id="menu" style='color:#ffffff'></i>
<nav class="navbar">
<a href="#home" style="--vlr:1" class="active">Home</a>
<a href="#about" style="--vlr:2">About Me</a>
<a href="#education" style="--vlr:3">Education</a>
<a href="#skills" style="--vlr:4">Skills</a>
<a href="#contact" style="--vlr:5">Contact Me</a>
</nav>
</header>
<!-- *************************Home Section************************* -->
<section class="home" id="home">
<div class="text-content">
<h1>I'm</h1>
<div class="text-animation">
<h2>Student , Developer & Cracker</h2>
</div>
<p>HELLO WELCOME TO MY PROFILE . I AM A STUDENT , CRACKER , WEB DEVELOPER , APP MODDER . THANKS FOR VISITING MY PROFILE ❤️ .</p>
<div class="btn-section">
<button class="btn">Hire me</button>
<button class="btn">Let's Talk</button>
</div>
<div class="social-media">
<a href="https://x.com/inikhildhawan" style="text-decoration: none;"> <i class='bx bxl-twitter'></i> </a>
<a href="https://www.instagram.com/inikhildhawan" style="text-decoration: none"><i class='bx bxl-instagram' style="--vlr:8"></i></a>
<a href="https://t.me/nikhildhawan" style="text-decoration: none"><i class='bx bxl-telegram' style="--vlr:8"></i></a>
<a href="https://youtube.com/@inikhildhawan" style="text-decoration: none;" > <i class='bx bxl-youtube' style="--vlr:9"></i> </a>
</div>
</div>
<img src="https://logos.flamingtext.com/Name-Logos/Nikhil-design-hogwarts-name.gif" alt="">
</section>
<!-- *************************About Section************************* -->
<section class="about" id="about">
<h2 class="title">About <span>Me</span></h2>
<img src="https://logos.flamingtext.com/Name-Logos/Nikhil-design-hogwarts-name.gif" alt="">
<div class="text-content2">
<h2>PROFF</h2>
<p>HEY I'M NIKHIL FROM DELHI.
I HAVE SO MANY SKILLS LIKE CODING, WEB DEVELOPING , CRACKING ETCC . APART FROM THIS I AM A STUDENT.
</p>
<button class="btn">Keep Scrolling ⬇️
</div>
</section>
<!-- *************************Education Section************************* -->
<section class="education" id="education">
<h2 class="title">My <span>Education</span></h2>
<div class="row">
<div class="column">
<h2>Education</h2>
<div class="box">
<div class="education-content">
<div class="content">
<div class="year">2019-20<i class='bx bxs-calendar'></i></div>
<h3>MATRICULATION</h3>
<p>I HAVE COMPLETED MY 10TH STANDARD WITH 100 PERCENCT MARKS 💀. </p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year">2021-22 <i class='bx bxs-calendar'></i></div>
<h3>SENIOR SECONDARY</h3>
<p>I HAVE SUCCESSFULLY COMPLETED MY 12TH CLASS WITH FLYING COLORS</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year">2024-25 <i class='bx bxs-calendar'></i></div>
<h3>currently preparing for upsc 🤧</h3>
<p></p>
</div>
</div>
</div>
</div>
<div class="column">
<h2>ADDRESS</h2>
<div class="box">
<div class="education-content">
<div class="content">
<div class="year">📍<i class='bx bxs-calendar'></i></div>
<h3>I'M FROM </h3>
<p>DELHI 🗾</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year">2026-2030 <i class='bx bxs-calendar'></i></div>
<h3>COMING SOON</h3>
<p </p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- *************************Skills Section************************* -->
<section class="skills" id="skills">
<h2 class="title">My <span>Skills</span></h2>
<div class="wrapper">
<div class="skill-content">
<h3 class="skill-title">PERSONAL </h3>
<div class="skill-box skill-box1">
<div class="single-skill">
<span class="topic">CODING</span>
<span class="topic">90%</span>
</div>
<div class="bar-side">
<div class="bar bar-1"></div>
</div>
<div class="single-skill">
<span class="topic">CSS</span>
<span class="topic">80%</span>
</div>
<div class="bar-side">
<div class="bar bar-2"></div>
</div>
<div class="single-skill">
<span class="topic">JavaScript</span>
<span class="topic">70%</span>
</div>
<div class="bar-side">
<div class="bar bar-3"></div>
</div>
</div>
</div>
<div class="skill-content">
<h3 class="skill-title">OTHER</h3>
<div class="skill-box skill-box2">
<div class="single-skill">
<span class"topic">CRACKING</span>
<span class="topic">90%</span>
</div>
<div class="bar-side">
<div class="bar bar-1"></div>
</div>
<div class="single-skill">
<span class="topic">MODDING</span>
<span class="topic">80%</span>
</div>
<div class="bar-side">
<div class="bar bar-2"></div>
</div>
<div class="single-skill">
<span class="topic">STUDYING</span>
<span class="topic">70%</span>
</div>
<div class="bar-side">
<div class="bar bar-3"></div>
</div>
</div>
</div>
</div>
</section>
<!-- *************************Contact Section************************* -->
<section class="contact" id="contact">
<h2 class="title">Contact<span>Me</span></h2>
<form action="https://api.web3forms.com/submit" method="POST">
<input type="hidden" name="access_key" value="bf6c3dfb-7022-488f-2003-b603c02b2169">
<div class="input-box">
<input type="text" name="Name" required placeholder="Full Name">
<input type="email" name="Email" required placeholder="Email">
</div>
<div class="input-box">
<input type="tel" name="Number" required placeholder="Mobile Number">
<input type="text" name="Subject" required placeholder="Subject For">
</div>
<textarea name="Meaasage" id="" cols="30" rows="10" placeholder="Message" required></textarea>
<input type="submit" value="Send Message" class="btn">
</form>
</section>
<footer>
<div class="text">
<p>Copyright 2025 by @Nikhil</p>
</div>
<a href="#"> <i class='bx bx-up-arrow-alt'></i></a>
</footer>
<script src="script.js"></script>
</body>
</html>

28
script.js Normal file
View File

@ -0,0 +1,28 @@
const menubar = document.querySelector('#menu');
const Navbar = document.querySelector('.navbar');
menubar.onclick=()=>{
menubar.classList.toggle('bx-x');
Navbar.classList.toggle('active')
}
const section=document.querySelectorAll('section');
const navlink = document.querySelectorAll('header nav a')
window.onscroll = ()=>{
section.forEach(sec=>{
let top = window.scrollY;
let offset = sec.offsetTop - 150;
let height = sec.offsetHeight;
let id = sec.getAttribute('id')
if(top>offset && top < offset + height){
sec.classList.add('start-animation');
navlink.forEach(links=>{
links.classList.remove('active')
document.querySelector('header nav a[href*='+id+']').classList.add('active')
})
}
})
var header = document.querySelector('.header');
header.classList.toggle('sticky',window.scrollY>100)
menubar.classList.remove('bx-x');
Navbar.classList.remove('active')
}

756
styles.css Normal file
View File

File diff suppressed because it is too large Load Diff