Rework (#2)

* changed folder structure to organise different website pages. Added a new landing page after the main header page * tihi * teehee --------- Co-authored-by: mart-terminal <[email protected]>
martzoz · Jul 29, 2024 · 168aa2e · 168aa2e
1 parent 2cac03b
commit 168aa2e
Show file tree

Hide file tree

Showing 16 changed files with 522 additions and 0 deletions.
diff --git a/home.css b/home.css
@@ -0,0 +1,107 @@
+.btn-light,
+.btn-light:hover,
+.btn-light:focus {
+  color: #282828;
+  text-shadow: none; /* Prevent inheritance from `body` */
+}
+
+body {
+  text-shadow: .05rem .05rem .1rem #282828;
+  box-shadow: inset 0 .05 5rem #282828;
+  background-image: url('/home_assets/greenforest.jpg');
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+  animation: wallpaper 20s infinite both;
+  animation-duration: 30;
+  animation-delay: 3s;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes wallpaper{
+  10%
+  {
+    background-image: url(/home_assets/greenforest.jpg)
+  }
+  20%
+  {
+    background-image: url(/home_assets/forest.jpg)
+  }  
+  30%
+  {
+    background-image: url(/home_assets/foresthill.jpg)
+  }
+  40%
+  {
+    background-image: url(/home_assets/mistyforest.jpg)
+  }
+  50%
+  {
+    background-image: url(/home_assets/lumberforest.jpg)
+  }
+  60%
+  {
+    background-image: url(/home_assets/autumnforest.jpg)
+  }
+  70%
+  {
+    background-image: url(/home_assets/blueforest.jpg)
+  }
+  80%
+  {
+    background-image: url(/home_assets/darkforest.jpg);
+  }
+  90%
+  {
+    background-image: url(/home_assets/greenforest.jpg)
+  }
+}
+
+.cover-container {
+  max-width: 100em;
+}
+
+.nav-masthead .nav-link {
+  color: #928374;
+  border-bottom: .15rem solid transparent;
+}
+
+.nav-masthead .nav-link:hover,
+.nav-masthead .nav-link:focus {
+  border-bottom-color: #928374;
+}
+
+.nav-masthead .nav-link + .nav-link {
+  margin-left: 1rem;
+}
+
+.nav-masthead .active {
+  color: #fbf1c7;
+  border-bottom-color: #aca68f;
+}
+
+h1 {
+  color: #ebdbb2;
+  font-weight: bold;
+  font-size: 64px;
+}
+
+h2 {
+  color: #d5c4a1;
+}
+
+h3 {
+  color: #fbf1c7;
+  text-shadow: 1px 1px #6a4a00;
+  font-weight: bold;
+  font-size: 32px;
+  font-style: oblique;
+}
+
+h4 {
+  color: #6a4a00;
+}
+
+p {
+  color: #d5c4a1;
+}
diff --git a/home.html b/home.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en" class="h-100" data-bs-theme="auto">
+  <head><script src="js/color-modes.js"></script>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <title>Mart</title>
+    <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/cover/">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
+    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="home.css" rel="stylesheet">
+  </head>
+
+  <body class="d-flex h-100 text-center text-bg-dark">
+
+<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
+  <header class="mb-auto">
+    <div>
+      <h3 class="float-md-start mb-0">Ylla</h3>
+      <nav class="nav nav-masthead justify-content-center float-md-end">
+        <a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="https://ylla.xyz">Home</a>
+        <a class="nav-link fw-bold py-1 px-0" href="https://ylla.xyz">About</a>
+        <a class="nav-link fw-bold py-1 px-0" href="https://ylla.xyz">Dashboard</a>
+        <a class="nav-link fw-bold py-1 px-0" href="https://ylla.xyz">epic</a>
+        <a class="nav-link fw-bold py-1 px-0" href="https://ylla.xyz">Contact</a>
+      </nav>
+    </div>
+  </header>
+
+  <main class="px-3">
+    <h1>Martin :)</h1>
+    <p class="lead"> super duper cool paragraph showcasing what this website is about.super duper cool paragraph showcasing what this website is about.super duper cool paragraph showcasing what this website is about.</p>
+    <p class="lead">
+      <br>
+      <br>
+      <br>
+      <br>
+      <br>
+      <a href="/projects.html" class="btn btn-lg btn-dark fw-oblique border-dark bg-dark w-10">Learn more</a>
+    </p>
+  </main>
+
+  <footer class="mt-auto text-white-50">
+    <p>Ylla 2019-2024 contact us at <a href="https://ylla.xyz" class="text-white">[email protected]</a>, by <a href="https://twitter.com/martz0z" class="text-white">@martzoz
+    </a>.</p>
+  </footer>
+</div>
+
+<script src="dist/js/bootstrap.bundle.min.js.map"></script>
+
+  </body>
+
+</html>
diff --git a/home_assets/autumnforest.jpg b/home_assets/autumnforest.jpg
diff --git a/home_assets/blueforest.jpg b/home_assets/blueforest.jpg
diff --git a/home_assets/darkforest.jpg b/home_assets/darkforest.jpg
diff --git a/home_assets/forest.jpg b/home_assets/forest.jpg
diff --git a/home_assets/foresthill.jpg b/home_assets/foresthill.jpg
diff --git a/home_assets/greenforest.jpg b/home_assets/greenforest.jpg
diff --git a/home_assets/lumberforest.jpg b/home_assets/lumberforest.jpg
diff --git a/home_assets/mistyforest.jpg b/home_assets/mistyforest.jpg
diff --git a/projects.css b/projects.css
@@ -0,0 +1,168 @@
+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
+body {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  color: rgb(var(--bs-tertiary-color-rgb));
+}
+
+
+/* CUSTOMIZE THE CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+.carousel {
+  margin-bottom: 4rem;
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+  bottom: 3rem;
+  z-index: 10;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel-item {
+  height: 32rem;
+}
+
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-4 {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+/* rtl:begin:ignore */
+.marketing .col-lg-4 p {
+  margin-right: .75rem;
+  margin-left: .75rem;
+}
+/* rtl:end:ignore */
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
+}
+
+/* Thin out the marketing headings */
+/* rtl:begin:remove */
+.featurette-heading {
+  letter-spacing: -.05rem;
+}
+
+/* rtl:end:remove */
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 40em) {
+  /* Bump up size of carousel content */
+  .carousel-caption p {
+    margin-bottom: 1.25rem;
+    font-size: 1.25rem;
+    line-height: 1.4;
+  }
+
+  .featurette-heading {
+    font-size: 50px;
+  }
+}
+
+@media (min-width: 62em) {
+  .featurette-heading {
+    margin-top: 7rem;
+  }
+}
+
+.bd-placeholder-img {
+  font-size: 1.125rem;
+  text-anchor: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+@media (min-width: 768px) {
+  .bd-placeholder-img-lg {
+    font-size: 3.5rem;
+  }
+}
+
+.b-example-divider {
+  width: 100%;
+  height: 3rem;
+  background-color: #d5c4a1;
+  border: solid #fbf1c7;
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.b-example-vr {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 100vh;
+}
+
+.bi {
+  vertical-align: -.125em;
+  fill: currentColor;
+}
+
+.nav-scroller {
+  position: relative;
+  z-index: 2;
+  height: 2.75rem;
+  overflow-y: hidden;
+}
+
+.nav-scroller .nav {
+  display: flex;
+  flex-wrap: nowrap;
+  padding-bottom: 1rem;
+  margin-top: -1px;
+  overflow-x: auto;
+  text-align: center;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+}
+
+.bd-mode-toggle {
+  z-index: 1500;
+}
+
+.bd-mode-toggle .dropdown-menu .active .bi {
+  display: block !important;
+}
+
+h1 {
+  color: #ebdbb2;
+  font-weight: bold;
+  font-size: 64px;
+}
+
+h2 {
+  color: #d5c4a1;
+}
+
+h3 {
+  color: #fbf1c7;
+  text-shadow: 1px 1px #6a4a00;
+  font-weight: bold;
+  font-size: 32px;
+  font-style: oblique;
+}
+
+h4 {
+  color: #6a4a00;
+}
+
+p {
+  color: #d5c4a1;
+}