Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

responsive navbar #22

Merged
merged 3 commits into from
Jan 2, 2024
Merged

responsive navbar #22

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8d5082a
responsive navbar
Akanksha-202 Dec 29, 2023
9102438
Merge branch 'main' of https://github.com/SnowScriptWinterOfCode/Port…
Akanksha-202 Jan 1, 2024
4b07db6
Merge branch 'main' into navbar
ayushichoudhary-19 Jan 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 129 additions & 98 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,110 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Your Name - Portfolio</title>
</head>
<body>

<nav>
<div class="container">
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<!--link bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<title>Your Name - Portfolio</title>
</head>

<body>
<nav class="navbar navbar-expand-custom navbar-mainbg">
<a class="navbar-brand navbar-logo" href="#">Navbar</a>
<button class="navbar-toggler" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars text-white"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<div class="hori-selector"><div class="left"></div><div class="right"></div></div>
<li class="nav-item active">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>

</ul>
</div>
</nav>
<header>
<div class="container">
<p>Hey there👋 !
<p>
<h1> I am &lt;Your Name&gt;</h1>

</div>
</header>

<section id="about" class="about-me">
<div class="container">
<h1>About Me</h1>
<p>A passionate web developer currently in my second year at IGDTUW. My journey in the world of technology
began with a deep curiosity for how things work on the web.
In my courses at IGDTUW, I've gained a solid foundation in programming languages like HTML, CSS, and
JavaScript. I'm enthusiastic about creating responsive and visually appealing websites that not only
meet functional requirements but also deliver a delightful user experience.
My interest in web development extends beyond the classroom. I actively participate in coding
competitions, hackathons, and collaborative projects, continuously enhancing my skills and staying
abreast of the latest industry trends.</p>
As a second-year student, I look forward to further expanding my knowledge, tackling challenging projects,
and contributing to the dynamic field of web development. Let's connect and explore the possibilities
together!</p>
</div>
</section>

<section id="projects" class="projects">
<div class="container">
<h1>Projects</h1>

<div class="project">
<h3>Project 1</h3>
<p>A dynamic web application showcasing my skills in HTML, CSS, and JavaScript. Implemented responsive
design for optimal user experience.</p>
<p>Skills and Tools: HTML, CSS, JavaScript</p>
<button><a href="https://example-project1-live-website.com" target="_blank">Live Website</a></button>
<button><a href="https://github.com/your-username/project1" target="_blank">GitHub Repo</a></button>
</div>
</nav>
<header>
<div class="container">
<p>Hey there👋 ! <p>
<h1> I am &lt;Your Name&gt;</h1>

<div class="project">
<h3>Project 2</h3>
<p>Developed a full-stack web application using Node.js and MongoDB. Implemented user authentication and
integrated third-party APIs for enhanced functionality.</p>
<p>Skills and Tools: HTML, CSS, JavaScript, Node.js, MongoDB</p>
<button><a href="https://example-project1-live-website.com" target="_blank">Live Website</a></button>
<button><a href="https://github.com/your-username/project1" target="_blank">GitHub Repo</a></button>
</div>
</header>

<section id="about" class="about-me">
<div class="container">
<h1>About Me</h1>
<p>A passionate web developer currently in my second year at IGDTUW. My journey in the world of technology began with a deep curiosity for how things work on the web.
In my courses at IGDTUW, I've gained a solid foundation in programming languages like HTML, CSS, and JavaScript. I'm enthusiastic about creating responsive and visually appealing websites that not only meet functional requirements but also deliver a delightful user experience.
My interest in web development extends beyond the classroom. I actively participate in coding competitions, hackathons, and collaborative projects, continuously enhancing my skills and staying abreast of the latest industry trends.</p>
As a second-year student, I look forward to further expanding my knowledge, tackling challenging projects, and contributing to the dynamic field of web development. Let's connect and explore the possibilities together!</p>

<div class="project">
<h3>Project 3</h3>
<p>Built a mobile-responsive website using React.js. Integrated state management for a seamless user
interface and employed RESTful API communication.</p>
<p>Skills and Tools: HTML, CSS, JavaScript, React.js</p>
<button><a href="https://example-project1-live-website.com" target="_blank">Live Website</a></button>
<button><a href="https://github.com/your-username/project1" target="_blank">GitHub Repo</a></button>
</div>
</section>

<section id="projects" class="projects">
<div class="container">
<h1>Projects</h1>

<div class="project">
<h3>Project 1</h3>
<p>A dynamic web application showcasing my skills in HTML, CSS, and JavaScript. Implemented responsive design for optimal user experience.</p>
<p>Skills and Tools: HTML, CSS, JavaScript</p>
<button><a href="https://example-project1-live-website.com" target="_blank">Live Website</a></button>
<button><a href="https://github.com/your-username/project1" target="_blank">GitHub Repo</a></button>

</div>
</section>


<section id="contact" class="contact">
<div class="container">
<h1>Contact Me</h1>

<div class="contact-info">
<div class="contact-item">
<img src="" alt="Email Icon">
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</div>

<div class="project">
<h3>Project 2</h3>
<p>Developed a full-stack web application using Node.js and MongoDB. Implemented user authentication and integrated third-party APIs for enhanced functionality.</p>
<p>Skills and Tools: HTML, CSS, JavaScript, Node.js, MongoDB</p>
<button><a href="https://example-project1-live-website.com" target="_blank">Live Website</a></button>
<button><a href="https://github.com/your-username/project1" target="_blank">GitHub Repo</a></button>
<div class="contact-item">
<img src="" alt="Phone Icon">
<p>Phone: <a href="tel:+123456789">+123 456 789</a></p>
</div>

<div class="project">
<h3>Project 3</h3>
<p>Built a mobile-responsive website using React.js. Integrated state management for a seamless user interface and employed RESTful API communication.</p>
<p>Skills and Tools: HTML, CSS, JavaScript, React.js</p>
<button><a href="https://example-project1-live-website.com" target="_blank">Live Website</a></button>
<button><a href="https://github.com/your-username/project1" target="_blank">GitHub Repo</a></button>
<div class="contact-item">
<img src="" alt="Address Icon">
<p>Address: 123 Main St, Cityville, Country</p>
</div>

</div>
</section>


<section id="contact" class="contact">
<div class="container">
<h1>Contact Me</h1>

<div class="contact-info">
<div class="contact-item">
<img src="" alt="Email Icon">
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</div>

<div class="contact-item">
<img src="" alt="Phone Icon">
<p>Phone: <a href="tel:+123456789">+123 456 789</a></p>
</div>

<div class="contact-item">
<img src="" alt="Address Icon">
<p>Address: 123 Main St, Cityville, Country</p>
</div>

<div class="contact-item">
<img src="" alt="LinkedIn Icon">
<p>LinkedIn: <a href="https://www.linkedin.com/in/yourusername/" target="_blank">Your LinkedIn</a></p>
</div>

<div class="contact-item">
<img src="" alt="Twitter Icon">
<p>Twitter: <a href="https://twitter.com/yourusername" target="_blank">Your Twitter</a></p>
</div>
<div class="contact-item">
<img src="" alt="LinkedIn Icon">
<p>LinkedIn: <a href="https://www.linkedin.com/in/yourusername/" target="_blank">Your LinkedIn</a>
</p>
</div>
</div>
</section>
<footer>
<div class="container">
<p>&copy; 2023 Your Name. All rights reserved.</p>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>
<div class="contact-item">
<img src="" alt="Twitter Icon">
<p>Twitter: <a href="https://twitter.com/yourusername" target="_blank">Your Twitter</a></p>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p>&copy; 2023 Your Name. All rights reserved.</p>
</div>
</footer>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>

</html>
77 changes: 77 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,78 @@
// ---------Responsive-navbar-active-animation-----------
function test(){
var tabsNewAnim = $('#navbarSupportedContent');
var selectorNewAnim = $('#navbarSupportedContent').find('li').length;
var activeItemNewAnim = tabsNewAnim.find('.active');
var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
var itemPosNewAnimTop = activeItemNewAnim.position();
var itemPosNewAnimLeft = activeItemNewAnim.position();
$(".hori-selector").css({
"top":itemPosNewAnimTop.top + "px",
"left":itemPosNewAnimLeft.left + "px",
"height": activeWidthNewAnimHeight + "px",
"width": activeWidthNewAnimWidth + "px"
});
$("#navbarSupportedContent").on("click","li",function(e){
$('#navbarSupportedContent ul li').removeClass("active");
$(this).addClass('active');
var activeWidthNewAnimHeight = $(this).innerHeight();
var activeWidthNewAnimWidth = $(this).innerWidth();
var itemPosNewAnimTop = $(this).position();
var itemPosNewAnimLeft = $(this).position();
$(".hori-selector").css({
"top":itemPosNewAnimTop.top + "px",
"left":itemPosNewAnimLeft.left + "px",
"height": activeWidthNewAnimHeight + "px",
"width": activeWidthNewAnimWidth + "px"
});
});
}
$(document).ready(function(){
setTimeout(function(){ test(); });
});
$(window).on('resize', function(){
setTimeout(function(){ test(); }, 500);
});
$(".navbar-toggler").click(function(){
$(".navbar-collapse").slideToggle(300);
setTimeout(function(){ test(); });
});



// --------------add active class-on another-page move----------
jQuery(document).ready(function($){
// Get current path and find target link
var path = window.location.pathname.split("/").pop();

// Account for home page with empty path
if ( path == '' ) {
path = 'index.html';
}

var target = $('#navbarSupportedContent ul li a[href="'+path+'"]');
// Add active class to target link
target.parent().addClass('active');
});




// Add active class on another page linked
// ==========================================
// $(window).on('load',function () {
// var current = location.pathname;
// console.log(current);
// $('#navbarSupportedContent ul li a').each(function(){
// var $this = $(this);
// // if the current path is like this link, make it active
// if($this.attr('href').indexOf(current) !== -1){
// $this.parent().addClass('active');
// $this.parents('.menu-submenu').addClass('show-dropdown');
// $this.parents('.menu-submenu').parent().addClass('active');
// }else{
// $this.parent().removeClass('active');
// }
// })
// });
Loading