diff --git a/.DS_Store b/.DS_Store index 0fdeed0..41d1c87 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/assets/.DS_Store b/assets/.DS_Store index 817d104..72ece99 100644 Binary files a/assets/.DS_Store and b/assets/.DS_Store differ diff --git a/assets/archive/VE10.png b/assets/archive/VE10.png new file mode 100755 index 0000000..21f8652 Binary files /dev/null and b/assets/archive/VE10.png differ diff --git a/assets/archive/VE11.png b/assets/archive/VE11.png new file mode 100755 index 0000000..0bfa7a0 Binary files /dev/null and b/assets/archive/VE11.png differ diff --git a/assets/archive/VE12.png b/assets/archive/VE12.png new file mode 100755 index 0000000..0da7e0a Binary files /dev/null and b/assets/archive/VE12.png differ diff --git a/assets/archive/VE13.png b/assets/archive/VE13.png new file mode 100755 index 0000000..24e083a Binary files /dev/null and b/assets/archive/VE13.png differ diff --git a/assets/archive/VE14.png b/assets/archive/VE14.png new file mode 100755 index 0000000..e6f82e6 Binary files /dev/null and b/assets/archive/VE14.png differ diff --git a/assets/archive/VE15.png b/assets/archive/VE15.png new file mode 100755 index 0000000..ac04f0d Binary files /dev/null and b/assets/archive/VE15.png differ diff --git a/assets/archive/VE4.png b/assets/archive/VE4.png new file mode 100755 index 0000000..bf3f579 Binary files /dev/null and b/assets/archive/VE4.png differ diff --git a/assets/archive/VE5.png b/assets/archive/VE5.png new file mode 100755 index 0000000..94de638 Binary files /dev/null and b/assets/archive/VE5.png differ diff --git a/assets/archive/VE6.png b/assets/archive/VE6.png new file mode 100755 index 0000000..ee785a6 Binary files /dev/null and b/assets/archive/VE6.png differ diff --git a/assets/archive/VE7.png b/assets/archive/VE7.png new file mode 100755 index 0000000..7ba8175 Binary files /dev/null and b/assets/archive/VE7.png differ diff --git a/assets/archive/VE8.png b/assets/archive/VE8.png new file mode 100755 index 0000000..b9a1a45 Binary files /dev/null and b/assets/archive/VE8.png differ diff --git a/assets/archive/VE9.png b/assets/archive/VE9.png new file mode 100755 index 0000000..ae43ed9 Binary files /dev/null and b/assets/archive/VE9.png differ diff --git a/assets/fonts/ajile.woff b/assets/fonts/ajile.woff new file mode 100644 index 0000000..2275282 Binary files /dev/null and b/assets/fonts/ajile.woff differ diff --git a/assets/fonts/ajile.woff2 b/assets/fonts/ajile.woff2 new file mode 100644 index 0000000..01e6d14 Binary files /dev/null and b/assets/fonts/ajile.woff2 differ diff --git a/assets/fonts/sportinggrotesque-bold.woff b/assets/fonts/sportinggrotesque-bold.woff new file mode 100644 index 0000000..a1b247a Binary files /dev/null and b/assets/fonts/sportinggrotesque-bold.woff differ diff --git a/assets/fonts/sportinggrotesque-bold.woff2 b/assets/fonts/sportinggrotesque-bold.woff2 new file mode 100644 index 0000000..dda0c8a Binary files /dev/null and b/assets/fonts/sportinggrotesque-bold.woff2 differ diff --git a/assets/fonts/sportinggrotesque-regular.woff b/assets/fonts/sportinggrotesque-regular.woff new file mode 100644 index 0000000..6ed615b Binary files /dev/null and b/assets/fonts/sportinggrotesque-regular.woff differ diff --git a/assets/fonts/sportinggrotesque-regular.woff2 b/assets/fonts/sportinggrotesque-regular.woff2 new file mode 100644 index 0000000..a8e227d Binary files /dev/null and b/assets/fonts/sportinggrotesque-regular.woff2 differ diff --git a/assets/images/.DS_Store b/assets/images/.DS_Store index 90d228d..cdd233e 100644 Binary files a/assets/images/.DS_Store and b/assets/images/.DS_Store differ diff --git a/assets/images/Bently.jpeg b/assets/images/Bently.jpeg new file mode 100644 index 0000000..578ed12 Binary files /dev/null and b/assets/images/Bently.jpeg differ diff --git a/assets/images/Lietuva.png b/assets/images/Lietuva.png deleted file mode 100644 index 28128f9..0000000 Binary files a/assets/images/Lietuva.png and /dev/null differ diff --git a/assets/images/Megan.png b/assets/images/Megan.png new file mode 100644 index 0000000..fba4f9c Binary files /dev/null and b/assets/images/Megan.png differ diff --git a/assets/images/MotherandI.jpg b/assets/images/MotherandI.jpg new file mode 100644 index 0000000..72cfd2c Binary files /dev/null and b/assets/images/MotherandI.jpg differ diff --git a/assets/images/Sandels.jpg b/assets/images/Sandels.jpg deleted file mode 100755 index 9d3be74..0000000 Binary files a/assets/images/Sandels.jpg and /dev/null differ diff --git a/assets/images/Sandels.png b/assets/images/Sandels.png new file mode 100644 index 0000000..42a717d Binary files /dev/null and b/assets/images/Sandels.png differ diff --git a/assets/images/SexyPlexi.JPG b/assets/images/SexyPlexi.JPG new file mode 100644 index 0000000..9401f50 Binary files /dev/null and b/assets/images/SexyPlexi.JPG differ diff --git a/assets/images/SinWomen.jpg b/assets/images/SinWomen.jpg new file mode 100644 index 0000000..ed82917 Binary files /dev/null and b/assets/images/SinWomen.jpg differ diff --git a/assets/images/VE1.jpg b/assets/images/VE1.jpg new file mode 100644 index 0000000..437ebc5 Binary files /dev/null and b/assets/images/VE1.jpg differ diff --git a/assets/images/VE110.jpg b/assets/images/VE110.jpg new file mode 100644 index 0000000..cf784ca Binary files /dev/null and b/assets/images/VE110.jpg differ diff --git a/assets/images/VE111.jpg b/assets/images/VE111.jpg new file mode 100644 index 0000000..3063544 Binary files /dev/null and b/assets/images/VE111.jpg differ diff --git a/assets/images/VE112.jpg b/assets/images/VE112.jpg new file mode 100644 index 0000000..971475f Binary files /dev/null and b/assets/images/VE112.jpg differ diff --git a/assets/images/VE113.jpg b/assets/images/VE113.jpg new file mode 100644 index 0000000..cdddf92 Binary files /dev/null and b/assets/images/VE113.jpg differ diff --git a/assets/images/VE114.jpg b/assets/images/VE114.jpg new file mode 100644 index 0000000..b697a87 Binary files /dev/null and b/assets/images/VE114.jpg differ diff --git a/assets/images/VE115.jpg b/assets/images/VE115.jpg new file mode 100644 index 0000000..4dcc13b Binary files /dev/null and b/assets/images/VE115.jpg differ diff --git a/assets/images/VE12.jpg b/assets/images/VE12.jpg new file mode 100644 index 0000000..9995726 Binary files /dev/null and b/assets/images/VE12.jpg differ diff --git a/assets/images/VE13.jpg b/assets/images/VE13.jpg new file mode 100644 index 0000000..3c36d60 Binary files /dev/null and b/assets/images/VE13.jpg differ diff --git a/assets/images/VE14.jpg b/assets/images/VE14.jpg new file mode 100644 index 0000000..427a5d5 Binary files /dev/null and b/assets/images/VE14.jpg differ diff --git a/assets/images/VE15.jpg b/assets/images/VE15.jpg new file mode 100644 index 0000000..3e8dc31 Binary files /dev/null and b/assets/images/VE15.jpg differ diff --git a/assets/images/VE16.jpg b/assets/images/VE16.jpg new file mode 100644 index 0000000..780093f Binary files /dev/null and b/assets/images/VE16.jpg differ diff --git a/assets/images/VE17.jpg b/assets/images/VE17.jpg new file mode 100644 index 0000000..560962b Binary files /dev/null and b/assets/images/VE17.jpg differ diff --git a/assets/images/VE18.jpg b/assets/images/VE18.jpg new file mode 100644 index 0000000..6609d52 Binary files /dev/null and b/assets/images/VE18.jpg differ diff --git a/assets/images/VE19.jpg b/assets/images/VE19.jpg new file mode 100644 index 0000000..b058966 Binary files /dev/null and b/assets/images/VE19.jpg differ diff --git a/assets/images/VESplitRight13.jpg b/assets/images/VESplitRight13.jpg new file mode 100644 index 0000000..2b0ccca Binary files /dev/null and b/assets/images/VESplitRight13.jpg differ diff --git a/assets/images/VESplitRight23.jpg b/assets/images/VESplitRight23.jpg new file mode 100644 index 0000000..ad39f9d Binary files /dev/null and b/assets/images/VESplitRight23.jpg differ diff --git a/assets/images/VESplitRight6.jpg b/assets/images/VESplitRight6.jpg new file mode 100644 index 0000000..bdf25fd Binary files /dev/null and b/assets/images/VESplitRight6.jpg differ diff --git a/assets/images/VisualEssay4Web..mp4 b/assets/images/VisualEssay4Web.mp4 similarity index 100% rename from assets/images/VisualEssay4Web..mp4 rename to assets/images/VisualEssay4Web.mp4 diff --git a/assets/images/kiss.jpg b/assets/images/kiss.jpg new file mode 100644 index 0000000..8f80bda Binary files /dev/null and b/assets/images/kiss.jpg differ diff --git a/assets/images/kiss_favicon.png b/assets/images/kiss_favicon.png new file mode 100644 index 0000000..a913b35 Binary files /dev/null and b/assets/images/kiss_favicon.png differ diff --git a/assets/images/me2.jpg b/assets/images/me2.jpg new file mode 100644 index 0000000..6c9d173 Binary files /dev/null and b/assets/images/me2.jpg differ diff --git a/assets/images/pleasersLOL.jpg b/assets/images/pleasersLOL.jpg new file mode 100644 index 0000000..60994b5 Binary files /dev/null and b/assets/images/pleasersLOL.jpg differ diff --git a/assets/images/vinted.PNG b/assets/images/vinted.PNG new file mode 100644 index 0000000..ca741d8 Binary files /dev/null and b/assets/images/vinted.PNG differ diff --git a/elze_styles.css b/elze_styles.css index f368469..0714ca2 100755 --- a/elze_styles.css +++ b/elze_styles.css @@ -1,15 +1,46 @@ +/* FONT DECLARATION ALWAYS GOES FIRST */ + +@font-face { + font-family: "Sporting Grotesque"; + src: url("./assets/fonts/sportinggrotesque-regular.woff2") format("woff2"); + font-weight: normal; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: "Sporting Grotesque"; + src: url("./assets/fonts/sportinggrotesque-bold.woff2") format("woff2"); + font-weight: bold; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: "Ajile"; + src: url("./assets/fonts/ajile.woff2") format("woff2"); + font-weight: bold; + font-style: normal; + font-display: block; +} + body { - font-family: 'Sporting Grotesque', sans-serif; - color: rgb(255, 190, 246); - font-size: large; + font-family: "Sporting Grotesque", sans-serif; + /* color: #a4029c; */ + color: #ff94ca; + font-size: 15px; margin: 0; /* Remove default margin */ } .heading-font { - font-family: 'Ajile', sans-serif; - font-size: 30px; - font-size: 15; + display: block; + font-family: "Ajile", sans-serif; + /* color: #a4029c58; */ + color: #fabafa; + font-size: 8vh; + /* font-size: 15; */ text-align: center; + /* outline: 1px solid #F00; */ } .split { @@ -27,6 +58,12 @@ body { overflow-x: hidden; /* Add overflow-x:auto to enable horizontal scrolling */ } +p { + text-align: justify; + letter-spacing: -0.025em; + word-spacing: -0.15em; +} + .right { right: 0; background: transparent; @@ -47,14 +84,17 @@ body { margin-left: 0; /* Remove unnecessary margin */ } -div.media-block { +div.media-block, +div.media-block-shadow { width: 100%; height: 100vh; + /* outline: 1px solid #f00; */ } - div.media-block video, -div.media-block img { +div.media-block img, +div.media-block-shadow video, +div.media-block-shadow img { width: 100%; height: 100%; object-fit: cover; @@ -65,10 +105,61 @@ div.text-block { position: sticky; top: 0; width: 100%; - padding: 4rem; + padding: 3rem; box-sizing: border-box; } +#Zarissa-Line-Height { + line-height: normal; +} + +#navbar { + position: fixed; + top: 0; + left: 0; + z-index: 999; + opacity: 1; + transition: 0.3s; + background-color: white; + margin-left: 0vw; + padding-right: 8vw; + padding-left: 8vw; + height: 100vh; + width: 50vw; + padding-top: 5%; + font-size: 2.5vh; + text-indent: -0.78em; + box-sizing: border-box; +} + +nav ul li a { + text-decoration: none; + display: inline-block; + color: #fd67b2; + padding: 5px 8px; /* Adjust padding */ + border-radius: 5px; /* Add some border radius for style */ +} + +.toggle-button { + z-index: 3; + display: block; + position: fixed; + top: 1.25rem; + left: 1.25rem; + background-color: #00000000; + border-color: #00000000; + font-size: 6vh; + cursor: pointer; + animation: glowing 1.5s infinite alternate; + font-size: 36px; /* Adjust the font size as needed */ + color: #fff; /* Set the color of the text */ + z-index: 99999999999999; +} + +#navbar.collapsed { + display: none; +} + nav ul { list-style-type: none; /* Remove the bullet points */ padding: 0; /* Remove default padding */ @@ -77,7 +168,7 @@ nav ul { nav li { display: inline; /* Display menu items horizontally */ margin: 0 15px; /* Adjust the horizontal spacing between menu items */ - line-height: 2; /* Adjust the vertical spacing between menu items */ + line-height: 2.5; /* Adjust the vertical spacing between menu items */ } nav a { @@ -96,11 +187,10 @@ nav a:hover { z-index: 999; animation: fadeOut 12s ease forwards; overflow: visible; /* Adjust the overflow property as needed */ - /* position: relative; +/* position: relative; margin-top: -100px; /* Adjust this value to position the image */ - /* text-align: center; */ - /* scale: 20%; */ - +/* text-align: center; */ +/* scale: 20%; */ .image-across { position: fixed; @@ -113,7 +203,7 @@ nav a:hover { pointer-events: none; /* Allow interactions to pass through */ animation: fadeOut 2s ease forwards; } - + .image-across img { max-width: 100%; } @@ -127,16 +217,143 @@ nav a:hover { } } - .heading-font2 { +@keyframes glowing { + 0% { + text-shadow: 0 0 10px #00aeef, 0 0 20px #00aeef, 0 0 30px #00aeef; + } + 50% { + text-shadow: 0 0 20px #00aeef, 0 0 30px #00aeef, 0 0 40px #00aeef; + } + 100% { + text-shadow: 0 0 10px #00aeef, 0 0 20px #00aeef, 0 0 30px #00aeef; + } +} + +.heading-font2 { + font-family: "Ajile", sans-serif; + font-size: 30px; +} +.topvideo { + width: 100%; + height: 100vh; +} +div.topvideo video { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.image-container { + width: 100%; /* Set the width of the container */ + max-width: 1080px; /* Set maximum width if needed */ + height: auto; /* Allow the height to adjust automatically based on the image's aspect ratio */ + margin: 0 auto; /* Center the container horizontally */ + overflow: hidden; /* Hide any overflowing content */ + margin-top: 2.5vh; +} - font-family: 'Ajile', sans-serif; - font-size: 30px; +.fit-image { + width: 100%; /* Make the image fill the container's width */ + height: auto; /* Allow the height to adjust automatically based on the image's aspect ratio */ + object-fit: cover; /* Scale the image as large as possible while maintaining aspect ratio and covering the container */ +} - } +.image-container2 { + width: 100%; + height: 100%; +} +.footnote { + /* color: #fd67b2; */ + display: none; /* Hide the footnote content by default */ +} +.footnote:target { + /* color: #fd67b2; */ + display: block; /* Display the footnote content when its target is in the URL */ +} +.image-container img { + width: 100%; + height: auto; + display: block; +} +.image-container .caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + background-color: rgba(255, 255, 255, 0); + color: white; + padding: 10px; + text-align: left; + font-size: 12px; + font-style: italic; + font-family: "Ajile"; +} +.caption { + font-family: "Ajile"; + color: #fd67b2; + padding-top: 15%; + padding-bottom: 5%; + margin-bottom: 5%; + margin-top: 5%; + text-align: left; + font-size: 20px; + font-style: italic; +} +#VisualEssay { + margin-left: -6vw; + font-family: "Ajile"; + position: relative; + width: 50vh; + height: 50vh; +} +#transparent-title { + opacity: 0; + position: absolute; +} +@media only screen and (max-width: 767px) { + #navbar { + position: fixed; + padding-top: 10vh; + z-index: 2; + opacity: 1; + transition: 0.3s; + background-color: white; + margin-left: 0vw; + padding-right: 4.75vw; + padding-left: 15vw; + height: 100vh; + padding-top: 5%; + font-size: 2vh; + text-indent: -0.78em; + } + + .split { + width: 100%; + height: 50%; + } + + .left { + left: 0; + top: 50%; + background: transparent; + } + div.text-block { + padding: 1rem; + } + + .image-across { + transform: rotate(90deg); + width: 100em; + height: auto; + scale: 1.8; + margin-top: 30vh; + } +} diff --git a/index.html b/index.html index 4a94548..effc53e 100755 --- a/index.html +++ b/index.html @@ -7,12 +7,12 @@ Pleasers as Entry To My Alter Ego Elze's Thesis Website + + } + .image-across img { + max-width: 100%; + } + + @keyframes fadeOut { + from { + opacity: 0.7; + } + to { + opacity: 0.2; + } + } + + + + + +
Pleasers as Entry To My Alter Ego -
- + + + + + + + + +
@@ -112,7 +156,7 @@
-
+