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

gallery attemp, link attempt

Browse source
This commit is contained in:
nelle 2022-12-19 18:37:00 -07:00
parent 6aa4f3c51d
commit 7d29f615c5
50 changed files with 167 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
about.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset = "utf-8" /> <meta charset = "utf-8" />
<title> <title>
Home About Me
</title> </title>
<!-- add icon link --> <!-- add icon link -->
<link rel = "icon" href = "assets/obo-icon.png" <link rel = "icon" href = "assets/obo-icon.png"

BIN
assets/photogallery/japan-2018/PSX_1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 MiB

BIN
assets/photogallery/japan-2018/PSX_10.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
assets/photogallery/japan-2018/PSX_11.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
assets/photogallery/japan-2018/PSX_12.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 MiB

BIN
assets/photogallery/japan-2018/PSX_13.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.4 MiB

BIN
assets/photogallery/japan-2018/PSX_14.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.7 MiB

BIN
assets/photogallery/japan-2018/PSX_15.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.2 MiB

BIN
assets/photogallery/japan-2018/PSX_16.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.2 MiB

BIN
assets/photogallery/japan-2018/PSX_17.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.4 MiB

BIN
assets/photogallery/japan-2018/PSX_18.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.6 MiB

BIN
assets/photogallery/japan-2018/PSX_19.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.1 MiB

BIN
assets/photogallery/japan-2018/PSX_2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.6 MiB

BIN
assets/photogallery/japan-2018/PSX_20.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.2 MiB

BIN
assets/photogallery/japan-2018/PSX_21.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 MiB

BIN
assets/photogallery/japan-2018/PSX_22.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 MiB

BIN
assets/photogallery/japan-2018/PSX_23.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 MiB

BIN
assets/photogallery/japan-2018/PSX_24.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 MiB

BIN
assets/photogallery/japan-2018/PSX_25.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 MiB

BIN
assets/photogallery/japan-2018/PSX_26.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 MiB

BIN
assets/photogallery/japan-2018/PSX_27.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 MiB

BIN
assets/photogallery/japan-2018/PSX_28.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 MiB

BIN
assets/photogallery/japan-2018/PSX_29.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 MiB

BIN
assets/photogallery/japan-2018/PSX_3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.8 MiB

BIN
assets/photogallery/japan-2018/PSX_30.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 23 MiB

BIN
assets/photogallery/japan-2018/PSX_31.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 MiB

BIN
assets/photogallery/japan-2018/PSX_32.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.3 MiB

BIN
assets/photogallery/japan-2018/PSX_33.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 MiB

BIN
assets/photogallery/japan-2018/PSX_34.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 MiB

BIN
assets/photogallery/japan-2018/PSX_35.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 MiB

BIN
assets/photogallery/japan-2018/PSX_36.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.7 MiB

BIN
assets/photogallery/japan-2018/PSX_37.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.6 MiB

BIN
assets/photogallery/japan-2018/PSX_38.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 MiB

BIN
assets/photogallery/japan-2018/PSX_39.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 MiB

BIN
assets/photogallery/japan-2018/PSX_4.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
assets/photogallery/japan-2018/PSX_40.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 MiB

BIN
assets/photogallery/japan-2018/PSX_41.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 MiB

BIN
assets/photogallery/japan-2018/PSX_42.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 MiB

BIN
assets/photogallery/japan-2018/PSX_43.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 MiB

BIN
assets/photogallery/japan-2018/PSX_44.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 MiB

BIN
assets/photogallery/japan-2018/PSX_5.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.9 MiB

BIN
assets/photogallery/japan-2018/PSX_6.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.4 MiB

BIN
assets/photogallery/japan-2018/PSX_7.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
assets/photogallery/japan-2018/PSX_8.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
assets/photogallery/japan-2018/PSX_9.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 MiB

1
index.html
View file

@ -13,6 +13,7 @@
<body> <body>
<div class="head"></div> <div class="head"></div>
<div class="navigation"> <div class="navigation">
<div class="mTitle"></div>
<div class="menuToggle"></div> <div class="menuToggle"></div>
<ul> <ul>
<li class="list active" style="--clr:rgb(0, 196, 157);"> <li class="list active" style="--clr:rgb(0, 196, 157);">

38
photography.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset = "utf-8" /> <meta charset = "utf-8" />
<title> <title>
Home Photography - ALPHA
</title> </title>
<!-- add icon link --> <!-- add icon link -->
<link rel = "icon" href = "assets/obo-icon.png" <link rel = "icon" href = "assets/obo-icon.png"
@ -59,6 +59,41 @@
</ul> </ul>
</div> </div>
<div class="content"> <div class="content">
<a href="#japan2018">
<span class="icon"><ion-icon name="airplane-outline"></ion-icon></span>
<span class="text">Japan Trip - 2018</span>
</a>
</div>
<div class="gallery">
<div id="japan2018">
<figure class=”gallery__item gallery__item--1>
<img src="assets/photogallery/japan-2018/PSX_1.jpg" class="gallery__img" alt="Image 1">
</figure>
<figure class=”gallery__item gallery__item--2>
<img src="assets/photogallery/japan-2018/PSX_2.jpg" class="gallery__img" alt="Image 2">
</figure>
<figure class=”gallery__item gallery__item--3>
<img src="assets/photogallery/japan-2018/PSX_3.jpg" class="gallery__img" alt="Image 3">
</figure>
<figure class=”gallery__item gallery__item--4>
<img src="assets/photogallery/japan-2018/PSX_4.jpg" class="gallery__img" alt="Image 4">
</figure>
<figure class=”gallery__item gallery__item--5>
<img src="assets/photogallery/japan-2018/PSX_5.jpg" class="gallery__img" alt="Image 5">
</figure>
<figure class=”gallery__item gallery__item--6>
<img src="assets/photogallery/japan-2018/PSX_6.jpg" class="gallery__img" alt="Image 6">
</figure>
<figure class=”gallery__item gallery__item--7>
<img src="assets/photogallery/japan-2018/PSX_7.jpg" class="gallery__img" alt="Image 7">
</figure>
<figure class=”gallery__item gallery__item--8>
<img src="assets/photogallery/japan-2018/PSX_8.jpg" class="gallery__img" alt="Image 8">
</figure>
<figure class=”gallery__item gallery__item--9>
<img src="assets/photogallery/japan-2018/PSX_9.jpg" class="gallery__img" alt="Image 9">
</figure>
</div>
</div> </div>
@ -78,7 +113,6 @@
list.forEach((item) => list.forEach((item) =>
item.addEventListener('click',activeLink)) item.addEventListener('click',activeLink))
</script> </script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <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> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body> </body>

6
projects.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset = "utf-8" /> <meta charset = "utf-8" />
<title> <title>
Home Projects
</title> </title>
<!-- add icon link --> <!-- add icon link -->
<link rel = "icon" href = "assets/obo-icon.png" <link rel = "icon" href = "assets/obo-icon.png"
@ -28,13 +28,13 @@
</a> </a>
</li> </li>
<li class="list active" style="--clr:rgb(0, 196, 157);"> <li class="list active" style="--clr:rgb(0, 196, 157);">
<a href="projects.html"> <a href="#">
<span class="icon"><ion-icon name="code-slash"></ion-icon></span> <span class="icon"><ion-icon name="code-slash"></ion-icon></span>
<span class="text">Projects</span> <span class="text">Projects</span>
</a> </a>
</li> </li>
<li class="list" style="--clr:rgb(0, 196, 157);"> <li class="list" style="--clr:rgb(0, 196, 157);">
<a href="#"> <a href="photography.html">
<span class="icon"><ion-icon name="camera"></ion-icon></span> <span class="icon"><ion-icon name="camera"></ion-icon></span>
<span class="text">Photography</span> <span class="text">Photography</span>
</a> </a>

179
style.css
View file

@ -1,4 +1,14 @@
/*GENERAL*/
@import url('https://fonts.googleapis.com/css2?family=Martian+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Martian+Mono&display=swap');
a:link {
color: rgb(173, 173, 173);
}
a:visited{
color:rgb(173, 173, 173);
}
/*GENERAL*/
/*NAVIGATION BAR*/
* *
{ {
margin: 0; margin: 0;
@ -6,12 +16,10 @@
box-sizing: border-box; box-sizing: border-box;
font-family: 'Martian', monospace; font-family: 'Martian', monospace;
} }
body body{
{
background:#332e33; background:#332e33;
} }
.navigation .navigation{
{
position: fixed; position: fixed;
inset: 20px 0 20px 20px; inset: 20px 0 20px 20px;
width: 80px; width: 80px;
@ -21,11 +29,45 @@ body
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.navigation.open .navigation.open{
{
width: 250px; width: 250px;
} }
.navigation .menuToggle .navigation .menuToggle{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
border-bottom: 1px solid rgba(0,0,0,0.25);
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 23px;
}
.navigation .menuToggle::before{
content: '';
position: absolute;
width: 30px;
height: 2px;
background: #413b41;
transform: translateY(-8px);
transition: 0.5s;
}
.navigation.open .menuToggle::before{
transform: translateY(0px) rotate(45deg);
}
.navigation .menuToggle::after{
content: '';
position: absolute;
width: 30px;
height: 2px;
background: #413b41;
transform: translateY(8px);
transition: 0.5s;
box-shadow: 0 -8px 0 #413b41;
}
.navigation .mTitle
{ {
position: absolute; position: absolute;
top: 0; top: 0;
@ -39,45 +81,20 @@ body
justify-content: flex-start; justify-content: flex-start;
padding: 0 23px; padding: 0 23px;
} }
.navigation .menuToggle::before .navigation.mTitle .menuToggle::after{
{ content:'Limepot';
content: '';
position: absolute;
width: 30px;
height: 2px;
background: #413b41;
transform: translateY(-8px);
transition: 0.5s;
} }
.navigation.open .menuToggle::before .navigation.open .menuToggle::after{
{
transform: translateY(0px) rotate(45deg);
}
.navigation .menuToggle::after
{
content: '';
position: absolute;
width: 30px;
height: 2px;
background: #413b41;
transform: translateY(8px);
transition: 0.5s;
box-shadow: 0 -8px 0 #413b41;
}
.navigation.open .menuToggle::after
{
transform: translateY(0px) rotate(-45deg); transform: translateY(0px) rotate(-45deg);
box-shadow: 0 0 0 #413b41; box-shadow: 0 0 0 #413b41;
} }
.navigation ul .navigation ul{
{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
width: 100% width: 100%
} }
.navigation ul li .navigation ul li{
{
list-style: none; list-style: none;
position: relative; position: relative;
width: 100%; width: 100%;
@ -85,16 +102,13 @@ body
padding: 0 10px; padding: 0 10px;
transition: 0.5s; transition: 0.5s;
} }
.navigation ul li.active .navigation ul li.active{
{
transform: translateX(30px) transform: translateX(30px)
} }
.navigation.open ul li.active .navigation.open ul li.active{
{
transform: translateX(10px) transform: translateX(10px)
} }
.navigation ul li a .navigation ul li a{
{
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
@ -102,8 +116,7 @@ body
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
} }
.navigation ul li a .icon .navigation ul li a .icon{
{
position: relative; position: relative;
display: block; display: block;
min-width: 55px; min-width: 55px;
@ -114,13 +127,11 @@ body
font-size: 1.75em; font-size: 1.75em;
color: rgb(90, 90, 90); color: rgb(90, 90, 90);
} }
.navigation ul li.active a .icon .navigation ul li.active a .icon{
{
color: #fff; color: #fff;
background: var(--clr); background: var(--clr);
} }
.navigation ul li a .icon::before .navigation ul li a .icon::before{
{
content: ''; content: '';
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -132,12 +143,10 @@ body
opacity: 0; opacity: 0;
transition: 0.5s; transition: 0.5s;
} }
.navigation ul li.active a .icon::before .navigation ul li.active a .icon::before{
{
opacity: 0.5; opacity: 0.5;
} }
.navigation ul li a .text .navigation ul li a .text{
{
position: relative; position: relative;
padding: 0 15px; padding: 0 15px;
height: 60px; height: 60px;
@ -148,17 +157,69 @@ body
visibility: hidden; visibility: hidden;
transition: 0.5s; transition: 0.5s;
} }
.navigation.open ul li a .text .navigation.open ul li a .text{
{
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.navigation ul li.active a .text .navigation ul li.active a .text{
{
color: var(--clr); color: var(--clr);
} }
.content /*NAVIGATION BAR*/
{
/*PAGE CONTENT*/
.content{
color: rgb(173, 173, 173); color: rgb(173, 173, 173);
text-align: center; text-align: center;
padding-top: 60px;
} }
.content .icon{
display: block;
min-width: 55px;
height: 55px;
transition: 05.s;
border-radius: 10px;
font-size: 2.75em;
}
.content .text{
height: 60px;
align-items: center;
color: rgb(173, 173, 173);
opacity: 0;
visibility: visible;
transition: 0.5s;
padding-left: 500px;
}
.content.text a:link{
visibility: hidden;
}
/*PAGE CONTENT*/
/*AWFUL FUCKING GALLERY BULLSHIT FUCK FUCK FUCK FUCK FUCK FUCK*/
.gallery {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 5vw);
grid-gap: 15px;
padding-left: 280px;
}
.gallery__img {
width: 200%;
height: 100%;
object-fit: cover;
}
.gallery__item--1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.gallery__item--2 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
/*AWFUL FUCKING GALLERY BULLSHIT FUCK FUCK FUCK FUCK FUCK FUCK*/

8
videography.html
View file

@ -3,12 +3,13 @@
<head> <head>
<meta charset = "utf-8" /> <meta charset = "utf-8" />
<title> <title>
Home Videography
</title> </title>
<!-- add icon link --> <!-- add icon link -->
<link rel = "icon" href = "assets/obo-icon.png" <link rel = "icon" href = "assets/obo-icon.png"
type = "image/x-icon"> type = "image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
</head> </head>
<body> <body>
<div class="head"></div> <div class="head"></div>
@ -59,7 +60,10 @@
</ul> </ul>
</div> </div>
<div class="content"> <div class="content">
<a href="https://www.youtube.com/channel/UCk_yKIpDnMv_DvuDb9RGfcA">
<span class="icon"><ion-icon name="logo-youtube"></ion-icon></span>
<span class="text">YouTube</span>
</a>
</div> </div>
<script> <script>