diff --git a/about.html b/about.html index a82f17c..dcd80a0 100644 --- a/about.html +++ b/about.html @@ -3,7 +3,7 @@ - Home + About Me
+
+ + + Japan Trip - 2018 + +
+
+
+
+ Image 1 +
+
+ Image 2 +
+
+ Image 3 +
+
+ Image 4 +
+
+ Image 5 +
+
+ Image 6 +
+
+ Image 7 +
+
+ Image 8 +
+
+ Image 9 +
+
@@ -78,7 +113,6 @@ list.forEach((item) => item.addEventListener('click',activeLink)) - diff --git a/projects.html b/projects.html index ab15d71..dc7cbb4 100644 --- a/projects.html +++ b/projects.html @@ -3,7 +3,7 @@ - Home + Projects
  • - + Projects
  • - + Photography diff --git a/style.css b/style.css index 4067a41..54128f1 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,14 @@ +/*GENERAL*/ @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; @@ -6,12 +16,10 @@ box-sizing: border-box; font-family: 'Martian', monospace; } -body -{ +body{ background:#332e33; } -.navigation -{ +.navigation{ position: fixed; inset: 20px 0 20px 20px; width: 80px; @@ -21,11 +29,45 @@ body justify-content: center; align-items: center; } -.navigation.open -{ +.navigation.open{ 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; top: 0; @@ -39,45 +81,20 @@ body 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.mTitle .menuToggle::after{ + content:'Limepot'; } -.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.open .menuToggle::after -{ +.navigation.open .menuToggle::after{ transform: translateY(0px) rotate(-45deg); box-shadow: 0 0 0 #413b41; } -.navigation ul -{ +.navigation ul{ display: flex; flex-direction: column; gap: 10px; width: 100% } -.navigation ul li -{ +.navigation ul li{ list-style: none; position: relative; width: 100%; @@ -85,16 +102,13 @@ body padding: 0 10px; transition: 0.5s; } -.navigation ul li.active -{ +.navigation ul li.active{ transform: translateX(30px) } -.navigation.open ul li.active -{ +.navigation.open ul li.active{ transform: translateX(10px) } -.navigation ul li a -{ +.navigation ul li a{ position: relative; display: flex; align-items: center; @@ -102,8 +116,7 @@ body text-align: center; text-decoration: none; } -.navigation ul li a .icon -{ +.navigation ul li a .icon{ position: relative; display: block; min-width: 55px; @@ -114,13 +127,11 @@ body font-size: 1.75em; color: rgb(90, 90, 90); } -.navigation ul li.active a .icon -{ +.navigation ul li.active a .icon{ color: #fff; background: var(--clr); } -.navigation ul li a .icon::before -{ +.navigation ul li a .icon::before{ content: ''; position: absolute; top: 10px; @@ -132,12 +143,10 @@ body opacity: 0; transition: 0.5s; } -.navigation ul li.active a .icon::before -{ +.navigation ul li.active a .icon::before{ opacity: 0.5; } -.navigation ul li a .text -{ +.navigation ul li a .text{ position: relative; padding: 0 15px; height: 60px; @@ -148,17 +157,69 @@ body visibility: hidden; transition: 0.5s; } -.navigation.open ul li a .text -{ +.navigation.open ul li a .text{ opacity: 1; visibility: visible; } -.navigation ul li.active a .text -{ +.navigation ul li.active a .text{ color: var(--clr); } -.content -{ +/*NAVIGATION BAR*/ + +/*PAGE CONTENT*/ +.content{ color: rgb(173, 173, 173); 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*/ \ No newline at end of file diff --git a/videography.html b/videography.html index 9ebbb45..dcbc36d 100644 --- a/videography.html +++ b/videography.html @@ -3,12 +3,13 @@ - Home + Videography +
    @@ -59,7 +60,10 @@
    - + + + YouTube +