Skip to content

Commit

Permalink
Merge pull request #58 from PiyushhBansal/navbarmodify
Browse files Browse the repository at this point in the history 
Modified the Navbar
  • Loading branch information
@codingkatty
codingkatty authored Oct 13, 2024
2 parents e6c503a + fe7a906 commit c113c6e
Show file tree
Hide file tree
Showing 6 changed files with 129 additions and 25 deletions.
30 changes: 23 additions & 7 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
<link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">

<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
Expand Down Expand Up @@ -69,6 +71,19 @@

</head>
<body>

<div class="navbar">

<h1 class="title">MathPyLearn</h1>
<div class="theme-toggle-wrapper">
<button style="cursor: pointer;" id="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</button>
</div>

<div class="nav-links">

<div class="navbar">
<!-- Hamburger Menu for Mobile -->
<div class="hamburger" id="hamburger">
Expand All @@ -85,16 +100,17 @@
<a href="challenge.html">Challenge</a>
<a href="faq.html">FAQs</a>
</div>
<div class="theme-toggle-wrapper">
<button style="cursor: pointer;" id="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</button>
</div>
<a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>

<!-- <a href="learn.html" class="active">Learn</a>
<a href="challenge.html">Challenge</a> -->
</div>



<div class="container">

<div class="about-container">

<div class="banner">
<h1 class="about-h1">About Math 4 Python</h1>
</div>
Expand Down
26 changes: 19 additions & 7 deletions challenge.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,24 @@
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="hamburger_menu.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap" rel="stylesheet">
</head>
<body id="challenge">

<div class="navbar">

<h1 class="title">MathPyLearn</h1>
<div class="theme-toggle-wrapper">
<button style="cursor: pointer;" id="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</button>
</div>

<div class="nav-links">

<div class="navbar">
<!-- Hamburger Menu for Mobile -->
<div class="hamburger" id="hamburger">
Expand All @@ -27,15 +42,12 @@
<a href="challenge.html" class="active">Challenge</a>
<a href="faq.html">FAQs</a>
</div>
<div class="theme-toggle-wrapper">
<button id="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</button>
</div>
<a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>

<!-- <a href="learn.html" class="active">Learn</a>
<a href="challenge.html">Challenge</a> -->
</div>


<div class="content">
<h2><i class="fas fa-trophy"></i> Python Challenges</h2>
<p>Welcome to the challenges section! Test your skills with various coding challenges.</p>
Expand Down
27 changes: 20 additions & 7 deletions faq.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,24 @@
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="hamburger_menu.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap" rel="stylesheet">
</head>
<body id="faq">

<div class="navbar">

<h1 class="title">MathPyLearn</h1>
<div class="theme-toggle-wrapper">
<button style="cursor: pointer;" id="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</button>
</div>

<div class="nav-links">

<div class="navbar">
<!-- Hamburger Menu for Mobile -->
<div class="hamburger" id="hamburger">
Expand All @@ -22,21 +37,19 @@

<!-- Hamburger Menu for Desktop -->
<div class="nav-links" id="nav-links">

<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="learn.html" >Learn</a>
<a href="challenge.html">Challenge</a>
<a href="faq.html" class="active">FAQs</a>
</div>
<div class="theme-toggle-wrapper">
<button id="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</button>
</div>
<a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>

<!-- <a href="learn.html" class="active">Learn</a>
<a href="challenge.html">Challenge</a> -->
</div>


<div class="content">
<h2><i class="fas fa-question-circle"></i> Frequently Asked Questions</h2>
<div class="faq-container">
Expand Down
23 changes: 23 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,30 @@
<!-- <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">-->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">


<!-- Adding CSS for making the website responsive -->
<link rel="stylesheet" href="hamburger_menu.css">

</head>

<body id="home">
<div class="navbar">

<!-- <a href="learn.html">Learn</a>
<a href="challenge.html">Challenge -->
</a>
<h1 class="title">MathPyLearn</h1>
<div class="theme-toggle-wrapper">
<button style="cursor: pointer;" id="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</button>
</div>
<div class="nav-links">

<!-- Hamburger Menu for Mobile -->
<div class="hamburger" id="hamburger">
<div></div>
Expand All @@ -28,12 +46,17 @@

<!-- Hamburger Menu for Desktop -->
<div class="nav-links" id="nav-links">

<a href="index.html" class="active">Home</a>
<a href="about.html">About</a>
<a href="learn.html">Learn</a>
<a href="challenge.html">Challenge</a>
<a href="faq.html">FAQs</a>
</div>




<div class="theme-toggle-wrapper">
<button style="cursor: pointer;" id="theme-toggle">
<i class="fas fa-sun"></i>
Expand Down
26 changes: 26 additions & 0 deletions learn.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,17 @@
<link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<script src="https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap" rel="stylesheet">
</head>
<body id="learn" onload="showEditor('Untitled')">


<div class="navbar">

<h1 class="title">MathPyLearn</h1>

<div class="navbar">
<!-- Hamburger Menu for Mobile -->
<div class="hamburger" id="hamburger">
Expand All @@ -29,15 +37,33 @@
<a href="challenge.html">Challenge</a>
<a href="faq.html">FAQs</a>
</div>

<div class="theme-toggle-wrapper">
<button style="cursor: pointer;" id="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</button>
</div>


<div class="nav-links">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="learn.html" class="active">Learn</a>
<a href="challenge.html">Challenge</a>
<a href="faq.html">FAQs</a>
</div>

<!-- <a href="learn.html" class="active">Learn</a>
<a href="challenge.html">Challenge</a> -->
</div>

<div class="content">

<a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>
</div>
<div class="content">

<h2>Python Lessons</h2>
<p>Welcome to the Python lessons! Choose a lesson below to get started.</p>
<div id="question-container">
Expand Down
22 changes: 18 additions & 4 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,29 +24,43 @@ body {

.nav-links {
display: flex;
gap: 1rem;
gap: 6rem;
}
.title {
color: black;
font-family: 'Lobster', cursive;
font-size: 40px;
margin-left: 15px; /* Adjust this margin as per your layout */
margin-top: 8px;
position: relative; /* Use relative positioning to keep it in normal flow */
top: 0;
}

.theme-toggle-wrapper {
margin-left: 600px; /* Push to the right */
}
.navbar a {
color: #ecf0f1;
color: #050c0e;
text-decoration: none;
padding: 0.5rem 1rem;
font-size: 1rem;
font-size: 25px;
font-weight: 500;
border-radius: 4px;
transition: background-color 0.3s, color 0.3s;
font-family: 'Lobster', cursive;
}

.navbar a:hover, .navbar a.active {
background-color: #34495e;
color: #3498db;
color: #e4e8eb;
}

/* Logo */
.navbar .logo img {
height: 40px;
width: auto;
transition: transform 0.3s ease;
border: 2px solid black;
}

.navbar .logo img:hover {
Expand Down

0 comments on commit c113c6e

Please sign in to comment.