Skip to content

Commit

Permalink
updated nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@Brigidi
Brigidi committed Nov 16, 2024
1 parent 9af6dfd commit 89d7e6b
Show file tree
Hide file tree
Showing 5 changed files with 136 additions and 84 deletions.
29 changes: 25 additions & 4 deletions about/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
<link rel="icon" href="/assets/beau_spirit.png">
<link rel="stylesheet" href="/style/style.css">

<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<!--BODY-->
Expand All @@ -23,14 +26,20 @@
</a>

<!--NAV BAR-->
<nav class="topnav" id="nav">
<nav class="topnav" id="myTopnav">

<!--NAV OPTIONS-->
<!-- <li><a href="/"> Home</a></li>
<li>|</li> -->
<li><a href="/about/"> About</a></li>
<li><a href="/tutorials/"> Tutorials</a></li>
<li><a href="/contact/"> Contact</a></li>
<!-- Responsive Menu Icon -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<a href="/"> Home</a>
<a href="/about/"> About</a>
<a href="/tutorials/"> Tutorials</a>
<a href="/contact/"> Contact</a>

</nav>
</div>

Expand Down Expand Up @@ -220,5 +229,17 @@ <h1>


</div>


<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
30 changes: 25 additions & 5 deletions contact/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
<!--LINK-->
<link rel="icon" href="/assets/beau_spirit.png">
<link rel="stylesheet" href="../style/style.css">
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
Expand All @@ -20,15 +22,21 @@
<img class="me" src="/assets/brigidi_head_shot.jpg">
</a>

<!--NAV BAR-->
<nav class="topnav" id="nav">
<!--NAV BAR-->
<nav class="topnav" id="myTopnav">

<!--NAV OPTIONS-->
<!-- <li><a href="/"> Home</a></li>
<li>|</li> -->
<li><a href="/about/"> About</a></li>
<li><a href="/tutorials/"> Tutorials</a></li>
<li><a href="/contact/"> Contact</a></li>
<!-- Responsive Menu Icon -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<a href="/"> Home</a>
<a href="/about/"> About</a>
<a href="/tutorials/"> Tutorials</a>
<a href="/contact/"> Contact</a>

</nav>
</div>

Expand Down Expand Up @@ -127,6 +135,18 @@ <h1>
const fillDegree = (charsTyped / maxChars) * 360;
charCircle.style.background = `conic-gradient(#59b6b6 ${fillDegree}deg, lightgrey ${fillDegree}deg)`;
});


/* responsive function */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

</script>


Expand Down
28 changes: 23 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
<!--LINK-->
<link rel="icon" href="/assets/beau_spirit.png">
<link rel="stylesheet" href="/style/style.css">
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

Expand All @@ -24,16 +26,21 @@
</a>

<!--NAV BAR-->
<nav class="topnav" id="nav">
<nav class="topnav" id="myTopnav">

<!--NAV OPTIONS-->
<!-- <li><a href="/"> Home</a></li>
<li>|</li> -->
<li><a href="/about/"> About</a></li>
<li><a href="/tutorials/"> Tutorials</a></li>
<li><a href="/contact/"> Contact</a></li>
<!-- Responsive Menu Icon -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<a href="/about/"> About</a>
<a href="/tutorials/"> Tutorials</a>
<a href="/contact/"> Contact</a>

</nav>
</div>
</div>

<!--TEXT-->
<div class="container">
Expand Down Expand Up @@ -66,5 +73,16 @@ <h1>
Please <a href="contact.html"><b>reach out</b></a> if you have an idea that you're excited about — I love collaborating!
</p>
</div>

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
101 changes: 36 additions & 65 deletions style/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ body{
.header {
display: flex;
align-items: center;
justify-content: space-between; /* Pushes content to opposite sides */
padding: 20px;
/* background-color: #333; */
}
Expand Down Expand Up @@ -51,83 +52,53 @@ iframe{
}

/* NAV BAR */
.topnav{
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 22px;
overflow: hidden;
width: 100%;
margin-left: 0;
color: #f2f2f2;
list-style-type: none;

/* Top navigation styles */
.topnav {
background-color: #333;
overflow: hidden;
display: flexbox; /* Use flex for better alignment */
justify-content: flex-end; /* Align nav items to the right */
position: relative; /* Relative positioning for the dropdown */
}

.topnav a{
padding: 20px;
/* Style the links */
.topnav a {
color: #f2f2f2;
text-decoration: none;
display: flex;
color: white;
padding: 14px 16px;
font-size: 17px;
display: none; /* Hidden by default for smaller screens */
}

.non-bold{
font-weight:100;
/* Menu icon always visible */
.topnav a.icon {
display: block;
color: #f2f2f2;
padding: 14px 16px;
cursor: pointer;
}

.topnav a:hover{
font-weight: 900;
/* color: #f2f2f2; */
color: black;
background-color: white;
/* Show links when responsive class is added */
.topnav.responsive a {
display: block;
text-align: left;
background-color: #333;
border-bottom: 1px solid #444;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Optional shadow */
}

/* a:visited{
color: inherit;
} */

/* a:hover{
color: green;
} */

/* HOME PAGE */

/* .header{
text-align: center;
margin-top: 30px;
max-width: 600px;
padding-left: 250px;
display: block;
margin-left: auto;
margin-right: auto;
} */
/* Hover effect for links */
.topnav a:hover {
background-color: #ddd;
color: black;
}

/* ABOUT */
/* .collapse{
background-color: inherit;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: black dotted 1px;
font-size: 15px;
}
.active, .collapse:hover {
background-color: black;
/* Active link style */
.topnav a.active {
background-color: #04AA6D;
color: white;
outline: none;
} */

/* .content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f8f8f8;
outline: black dotted 1px;
} */

}

/* CONTACT */

Expand Down
32 changes: 27 additions & 5 deletions tutorials/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
<!--LINK-->
<link rel="icon" href="/assets/beau_spirit.png">
<link rel="stylesheet" href="/style/style.css">

<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
Expand All @@ -20,15 +23,21 @@
<img class="me" src="/assets/brigidi_head_shot.jpg">
</a>

<!--NAV BAR-->
<nav class="topnav" id="nav">
<!--NAV BAR-->
<nav class="topnav" id="myTopnav">

<!--NAV OPTIONS-->
<!-- <li><a href="/"> Home</a></li>
<li>|</li> -->
<li><a href="/about/"> About</a></li>
<li><a href="/tutorials/"> Tutorials</a></li>
<li><a href="/contact/"> Contact</a></li>
<!-- Responsive Menu Icon -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<a href="/"> Home</a>
<a href="/about/"> About</a>
<a href="/tutorials/"> Tutorials</a>
<a href="/contact/"> Contact</a>

</nav>
</div>

Expand Down Expand Up @@ -61,5 +70,18 @@ <h1>
</p>

</div>


<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

</body>
</html>

0 comments on commit 89d7e6b

Please sign in to comment.