Skip to content

Commit

Permalink
Merge pull request #149 from Sneha123-zudo/hamburger
Browse files Browse the repository at this point in the history 
Closes Issue #112
  • Loading branch information
@swarnade
swarnade authored Jan 31, 2024
2 parents ff1814a + 7794074 commit 743645d
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 44 deletions.
105 changes: 62 additions & 43 deletions infopage/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,31 @@
<!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="style.css">
<title>Web Button Design - Info</title>
<link rel="icon" href="../FavIcon.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

<header>
<!-- <h1>Info.. </h1> -->
<nav>
<div class="left-nav">
<a href="../index.html">Web Button Design</a>
</div>
<!-- <div class="left-nav"> -->
<a href="../index.html" class="left-nav">Web Button Design</a>
<label for="toggler">
<i class="fa fa-bars"></i>
</label>
<input type="checkbox" id="toggler" name="">
<!-- </div> -->
<div class="right-nav">
<ul>
<ul class="list">
<li><a href="../index.html">Home</a></li>
<li><a href="../index.html">Designs</a></li>
<li><a href="../infopage/index.html" id="info">Info</a></li>
Expand All @@ -33,84 +41,94 @@ <h3>Information about Web Button Design</h3>
<div class="container">
<section id="about-app">
<h2>About the App</h2>
<p>The Button Web Design app is meticulously crafted to delve into the intricate world of web buttons. Often overlooked, buttons play a crucial role in web development. Whether you're a novice or a seasoned developer, this platform aims to enrich your understanding of button design. It provides valuable tips, tutorials, and resources to ensure your web buttons are not only visually appealing but also highly functional.</p>
<p>The Button Web Design app is meticulously crafted to delve into the intricate world of web buttons. Often
overlooked, buttons play a crucial role in web development. Whether you're a novice or a seasoned developer,
this platform aims to enrich your understanding of button design. It provides valuable tips, tutorials, and
resources to ensure your web buttons are not only visually appealing but also highly functional.</p>
</section>

<section id="why-made">
<h2>Why is This Made?</h2>
<p>In the expansive realm of web development, buttons are pivotal in user interaction. Recognizing the need for a dedicated resource, Swarnadeep Saha Poddar created this platform. Button Web Design fills the gap by offering a centralized space for developers to learn, share, and elevate their button design skills.</p>
<p>In the expansive realm of web development, buttons are pivotal in user interaction. Recognizing the need for a
dedicated resource, Swarnadeep Saha Poddar created this platform. Button Web Design fills the gap by offering a
centralized space for developers to learn, share, and elevate their button design skills.</p>
</section>

<section id="about-owner">
<h2>About the Owner</h2>
<p>Swarnadeep Saha Poddar, a passionate BTech CSE student, is the visionary behind Button Web Design. His commitment to web development led him to acknowledge the importance of details like button design. Beyond being the creator of this platform, Swarnadeep is an avid learner and contributor to the developer community.</p>
<p>Swarnadeep Saha Poddar, a passionate BTech CSE student, is the visionary behind Button Web Design. His
commitment to web development led him to acknowledge the importance of details like button design. Beyond being
the creator of this platform, Swarnadeep is an avid learner and contributor to the developer community.</p>
</section>

<section id="connect">
<h2>Connect with Swarnadeep Saha Poddar</h2><div class="person">
<a href="https://github.com/swarnade" target="_blank">
<img src="/assets/github.png" alt="GitHub icon">
</a>
<a href="https://www.linkedin.com/in/swarnadeep-saha-poddar/" target="_blank">
<img src="/assets/linkedin.png" alt="LinkedIn icon">
</a>
<span>Swarnadeep Saha Poddar</span></div>
<p>Feel free to explore the platform, delve deeper into button web design, and connect with Swarnadeep Saha Poddar on LinkedIn and GitHub for insightful discussions and potential collaborations. Happy coding!</p>
<h2>Connect with Swarnadeep Saha Poddar</h2>
<div class="person">
<a href="https://github.com/swarnade" target="_blank">
<img src="/assets/github.png" alt="GitHub icon">
</a>
<a href="https://www.linkedin.com/in/swarnadeep-saha-poddar/" target="_blank">
<img src="/assets/linkedin.png" alt="LinkedIn icon">
</a>
<span>Swarnadeep Saha Poddar</span>
</div>
<p>Feel free to explore the platform, delve deeper into button web design, and connect with Swarnadeep Saha Poddar
on LinkedIn and GitHub for insightful discussions and potential collaborations. Happy coding!</p>
</section>
<section id="button-makers">
<section id="button-makers">
<h2>Button-makers</h2><br>
<div class="button-makers">
<div class="person">
<div class="button-makers">
<div class="person">
<a href="https://github.com/ratnojitsaha" target="_blank">
<img src="/assets/github.png" alt="GitHub icon">
<img src="/assets/github.png" alt="GitHub icon">
</a>
<a href="https://www.linkedin.com/in/ratnojit-saha-854057268/" target="_blank">
<img src="/assets/linkedin.png" alt="LinkedIn icon">
<img src="/assets/linkedin.png" alt="LinkedIn icon">
</a>
<span>Ratnojit Saha</span>
</div>
<div class="person">
</div>

<div class="person">
<a href="https://github.com/nandita27iitp/" target="_blank">
<img src="/assets/github.png" alt="GitHub icon">
<img src="/assets/github.png" alt="GitHub icon">
</a>
<a href="https://www.linkedin.com/in/nandita27iitp/" target="_blank">
<img src="/assets/linkedin.png" alt="LinkedIn icon">
<img src="/assets/linkedin.png" alt="LinkedIn icon">
</a>
<span>Nandita Gupta</span>
</div>
<div class="person">
</div>

<div class="person">
<a href="https://github.com/shahil-afroz" target="_blank">
<img src="/assets/github.png" alt="GitHub icon">
<img src="/assets/github.png" alt="GitHub icon">
</a>
<a href="https://www.linkedin.com/in/shahil-afroz/" target="_blank">
<img src="/assets/linkedin.png" alt="LinkedIn icon">
<img src="/assets/linkedin.png" alt="LinkedIn icon">
</a>
<span>Sahil Afroz</span>
</div>
<div class="person">
</div>

<div class="person">
<a href="https://github.com/kom-senapati" target="_blank">
<img src="/assets/github.png" alt="GitHub icon">
<img src="/assets/github.png" alt="GitHub icon">
</a>
<a href="https://www.linkedin.com/in/kom-senapati/" target="_blank">
<img src="/assets/linkedin.png" alt="LinkedIn icon">
<img src="/assets/linkedin.png" alt="LinkedIn icon">
</a>
<span> K Om Senaparti</span>
</div>
<div class="person">
</div>

<div class="person">
<a href="https://github.com/zul132" target="_blank">
<img src="/assets/github.png" alt="GitHub icon">
<img src="/assets/github.png" alt="GitHub icon">
</a>
<a href="https://www.linkedin.com/in/fathima-zulaikha-2741a4217/" target="_blank">
<img src="/assets/linkedin.png" alt="LinkedIn icon">
<img src="/assets/linkedin.png" alt="LinkedIn icon">
</a>
<span> Fathima Zulaikha</span>
</div>
</div>
</div>
</div>

<footer>
<div class="foot-head">
Expand Down Expand Up @@ -141,4 +159,5 @@ <h2>Quick Links</h2>
</footer>

</body>
</html>

</html>
36 changes: 35 additions & 1 deletion infopage/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,16 +77,29 @@ body {
}
nav{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
justify-content: space-between;
font-family: "Audiowide", Cantarell;
}
.left-nav a{
.list{
display: flex;
list-style: none;

}
#toggler , label{
display: none;
}
.left-nav{
text-decoration: none;
color: rgb(158, 210, 107);
font-size: 1.34rem;
}
.left-nav:hover{
text-decoration: none;
color: rgb(30, 181, 131);
}
.right-nav ul{
display: flex;
justify-content: center;
Expand Down Expand Up @@ -137,4 +150,25 @@ body {
}
.links ul li{
list-style: none;
}
label i{
color: white;
}
@media screen and (max-width: 650px) {
.right-nav{
width: 100%;
max-height: 0;
overflow: hidden;
}
label{
display: inline-flex;
}
#toggler:checked~.right-nav{
max-height: 100%;
}
.list{
flex-direction: column;
align-items: center;
padding: 20px;
}
}

0 comments on commit 743645d

Please sign in to comment.