Skip to content

Commit

Permalink
responsive navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akanksha-202
Akanksha-202 committed Dec 29, 2023
1 parent 99c7036 commit 8d5082a
Show file tree
Hide file tree
Showing 3 changed files with 386 additions and 119 deletions.
227 changes: 129 additions & 98 deletions index.html
View file
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
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

0 comments on commit 8d5082a

Please sign in to comment.