limepotato/limepot-xyz
1
0
Fork 0
Code Issues 3 Pull requests Activity

UI elements

Browse source
This commit is contained in:
nelle 2022-12-19 14:18:58 -07:00
parent 1fcd5125de
commit 2dc60b6acf
3 changed files with 76 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/planet-outline.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Planet</title><path d="M413.48 284.46c58.87 47.24 91.61 89 80.31 108.55-17.85 30.85-138.78-5.48-270.1-81.15S.37 149.84 18.21 119c11.16-19.28 62.58-12.32 131.64 14.09" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><circle cx="256" cy="256" r="160" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 444 B

54
index.html
View file

@ -14,37 +14,36 @@
<div class="navigation">
<div class="menuToggle"></div>
<ul>
<li class="list">
<li class="list active" style="--clr:rgb(0, 196, 157);">
<a href="#">
<span class="icon"><script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script></span>
<span class="icon"><ion-icon name="planet"></ion-icon></span>
<span class="text">Home</span>
</a>
</li>
<li class="list">
<li class="list" style="--clr:rgb(0, 196, 157);">
<a href="#">
<span class="icon"></span>
<span class="icon"><ion-icon name="egg"></ion-icon></span>
<span class="text">About</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon"></span>
<span class="text">Projects</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon"></span>
<span class="text">Photography</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon"></span>
<span class="text">Videography</span>
</a>
</li>
<li class="list" style="--clr:rgb(0, 196, 157);">
<a href="#">
<span class="icon"><ion-icon name="code-slash"></ion-icon></span>
<span class="text">Projects</span>
</a>
</li>
<li class="list" style="--clr:rgb(0, 196, 157);">
<a href="#">
<span class="icon"><ion-icon name="camera"></ion-icon></span>
<span class="text">Photography</span>
</a>
</li>
<li class="list" style="--clr:rgb(0, 196, 157);">
<a href="#">
<span class="icon"><ion-icon name="videocam"></ion-icon></span>
<span class="text">Videography</span>
</a>
</li>
</ul>
</div>
@ -57,6 +56,15 @@
menuToggle.onclick = function(){
navigation.classList.toggle('open')
}
const list = document.querySelectorALl('.list');
function activeLink(){
list.forEach((item) =>
item.classList.remove('active'));
this.classList.add('active');
}
list.forEach((item) =>
item.addEventListener('click',activeLink))
</script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>

48
style.css
View file

@ -8,14 +8,14 @@
}
body
{
background:#2b272b;
background:#332e33;
}
.navigation
{
position: fixed;
inset: 20px 0 20px 20px;
width: 105px;
background: #332e33;
width: 140px;
background: #2b272b;
transition: 0.5s;
display: flex;
justify-content: center;
@ -68,4 +68,46 @@ body
{
transform: translateY(0px) rotate(-45deg);
box-shadow: 0 0 0 #413b41;
}
.navigation ul
{
display: flex;
flex-direction: column;
gap: 10px;
width: 100%
}
.navigation ul li
{
list-style: none;
position: relative;
width: 100%;
height: 60px;
padding: 0 10px;
transition: 0.5;
}
.navigation ul li a
{
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: center;
text-decoration: none;
}
.navigation ul li a .icon
{
position: relative;
display: block;
min-width: 55px;
height: 55px;
line-height: 60px;
transition: 05.s;
border-radius: 10px;
font-size: 1.75em;
color: #222;
}
.navigation ul li.active a .icon
{
color: #fff;
background: var(--clr);
}