Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/HimanshuDhingra2003/Himansh…
Browse files Browse the repository at this point in the history 
…uDhingra2003.github.io
  • Loading branch information
@himanshuwiz
himanshuwiz committed Sep 30, 2023
2 parents b4755c3 + 1a35da4 commit d251c39
Show file tree
Hide file tree
Showing 3 changed files with 742 additions and 96 deletions.
59 changes: 37 additions & 22 deletions Portfolio1/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,44 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css"> <!--box icons link-->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet"><!--Remix icon-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><!--Google-Font-->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/9f40da6f74.js" crossorigin="anonymous"></script>


<title>Portfolio</title>
</head>
<body>

<header>
<a href="#" class="logo">Himanshu <span>Dhingra</span></a>

<div class="bx bx-menu" id="menu-icon"></div>

<a href="#about" class="logo">Himanshu <span>Dhingra</span></a>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>

<ul class="navlist">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

<div class="top-btn">
<a href="#contactme" class="h-btn">Contact me</a>
</div>
</header>







<section class="hero" id="home">
<div class="main-content">
<h4>Hi, There!</h4>
Expand Down Expand Up @@ -134,58 +146,60 @@ <h2>My <span>Portfolio</span></h2>

<div class="portfolio-content">
<div class="box">

<img src="images/ImageSE.png" alt="">
<div class="text">
<h3>Image Search Engine</h3>

<a href="https://himanshudhingra2003.github.io/Image_search_engine/index.html" target="_blank"><h3>Image Search Engine</h3></a>
<p>HTML, CSS, Javascript</p>
</div>
<div class="icon1">
<a href="#"><i class="ri-github-fill"></i></a>
<a href="https://github.com/HimanshuDhingra2003/WebDev26Projects/tree/main/Project26/Project%2026" target="_blank"><i class="ri-github-fill"></i></a>
</div>

</div>

<div class="box">
<img src="images/QR-Generator.png" alt="">
<img src="images/QR-Generator.png" alt="">
<div class="text">
<h3>QR Code Generator</h3>
<a href="https://himanshudhingra2003.github.io/QR_generator/index.html" target="_blank"><h3>QR Code Generator</h3></a>
<p>HTML, CSS, Javascript</p>
</div>
<div class="icon1">
<a href="#"><i class="ri-github-fill"></i></a>
<a href="https://github.com/HimanshuDhingra2003/WebDev26Projects/tree/main/Project8/Project%208" target="_blank"><i class="ri-github-fill"></i></a>
</div>
</div>

<div class="box">
<img src="images/QuoteG.png" alt="">
<div class="text">
<h3>Quote Generator</h3>
<a href="https://himanshudhingra2003.github.io/Quote_generator/index.html"> <h3>Quote Generator</h3></a>
<p>HTML, CSS, Javascript</p>
</div>
<div class="icon1">
<a href="#"><i class="ri-github-fill"></i></a>
<a href="https://github.com/HimanshuDhingra2003/WebDev26Projects/tree/main/Project7/Project%207" target="_blank"><i class="ri-github-fill"></i></a>
</div>
</div>

<div class="box">
<img src="images/T2S Converter.png" alt="">
<div class="text">
<h3>Text to Speech Converter</h3>
<a href="https://himanshudhingra2003.github.io/TS_converter/inner.html" target="_blank"><h3>Text to Speech Converter</h3></a>
<p>HTML, CSS, Javascript</p>
</div>
<div class="icon1">
<a href="#"><i class="ri-github-fill"></i></a>
<a href="https://github.com/HimanshuDhingra2003/WebDev26Projects/tree/main/Project20" target="_blank"><i class="ri-github-fill"></i></a>
</div>
</div>

<div class="box">
<img src="images/Weather.png" alt="">
<div class="text">
<h3>Weather</h3>
<a href="https://himanshudhingra2003.github.io/Weather/index.html"><h3>Weather App</h3></a>
<p>HTML, CSS, Javascript</p>
</div>
<div class="icon1">
<a href="#"><i class="ri-github-fill"></i></a>
<a href="https://github.com/HimanshuDhingra2003/WebDev26Projects/tree/main/Project1/Project%201" target="_blank"><i class="ri-github-fill"></i></a>
</div>
</div>
</section>
Expand All @@ -196,9 +210,9 @@ <h2>Contact <span>Me</span></h2>
</div>

<div class="contact-form">
<form action="">
<input type="text" placeholder="Your name" required>
<input type="email" placeholder="Email Address" required>
<form method="post" action="https://api.sheetmonkey.io/form/p6sdQ3KjPAJmJDkHeCW4PA" name="contact-form">
<input name="text" type="text" placeholder="Your name" required>
<input name="email" type="email" placeholder="Email Address" required>
<textarea name="message" id="" cols="30" rows="10" placeholder="Message" required></textarea>
<input type="submit" name="" value="Submit Message" class="send-btn">
</form>
Expand All @@ -207,11 +221,12 @@ <h2>Contact <span>Me</span></h2>

<div class="footer">
<div class="copyright">
<p>2023 Himanshu Dhingra, All Rights Reserved</p>

<p>2023 Himanshu Dhingra &copy; All Rights Reserved</p>
</div>
<a href="#home" class="scroll-top"><i class="ri-arrow-up-s-fill"></i></a>
</div>

<script src="main.js"></script>
</body>
</html>
</html>
63 changes: 61 additions & 2 deletions Portfolio1/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,64 @@
const header = document.querySelector("header");

window.addEventListener("scroll", function(){
header.classList.toggle("sticky", window.scrollY >120)
})
header.classList.toggle("sticky", window.scrollY > 120);
});

const menuIcon = document.getElementById('menu-icon');
const navList = document.querySelector('.navlist');

// Media query for screens with a maximum width of 680px
if (window.matchMedia('(max-width: 950px)').matches) {
menuIcon.addEventListener('click', () => {
navList.classList.toggle('active');
menuIcon.classList.toggle('active');
});
}
if (window.matchMedia('(max-width: 680px)').matches) {
menuIcon.addEventListener('click', () => {
navList.classList.toggle('active');
menuIcon.classList.toggle('active');
});
}


if (window.matchMedia('(max-width: 470px)').matches) {
menuIcon.addEventListener('click', () => {
navList.classList.toggle('active');
menuIcon.classList.toggle('active');
});
}
if (window.matchMedia('(max-width: 430px)').matches) {
menuIcon.addEventListener('click', () => {
navList.classList.toggle('active');
menuIcon.classList.toggle('active');
});
}

document.addEventListener('DOMContentLoaded', () => {

navList.classList.remove('active');


const navItems = document.querySelectorAll('.navlist a');
navItems.forEach((item) => {
item.addEventListener('click', () => {

navList.classList.remove('active');
menuIcon.classList.remove('active');
});
});
});



const checkbox = document.getElementById('check');
const navlist = document.querySelector('.navlist');

checkbox.addEventListener('change', () => {
if (checkbox.checked) {
navlist.style.right = '0';
} else {
navlist.style.right = '-100%';
}
});
Loading

0 comments on commit d251c39

Please sign in to comment.