partial update

diff --git a/assets/images/static/background-cover.jpg b/assets/images/static/background-cover.jpg
deleted file mode 100644 (file)
index 18368cc..0000000
Binary files a/assets/images/static/background-cover.jpg and /dev/null differ

diff --git a/assets/images/static/crd-cover-1.jpg b/assets/images/static/crd-cover-1.jpg
new file mode 100644 (file)
index 0000000..18368cc
Binary files /dev/null and b/assets/images/static/crd-cover-1.jpg differ

diff --git a/assets/images/static/crd-cover-2.jpeg b/assets/images/static/crd-cover-2.jpeg
new file mode 100644 (file)
index 0000000..4be914b
Binary files /dev/null and b/assets/images/static/crd-cover-2.jpeg differ

diff --git a/css/styles.css b/css/styles.css
index d21c1e0ee037aeaf763d02b318f9b2e4c7ac1d93..d2440353c92d6c1eed7674df7aa695c605864210 100644 (file)
--- a/css/styles.css
+++ b/css/styles.css
@@ -31,6 +31,7 @@ body {
   flex-direction: column;
   color: var(--textcolor1);
   height: 1000rem;
+  background-color: #0e0e0d;
 }
 header {
   position: fixed;
@@ -177,39 +178,21 @@ header {
 
 
 /* MAIN */
-main {
-  padding-top: 7rem;
-}
 section {
-  
+  position: relative;
+  height: 100vh;
 }
-.background-cover {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  object-position: center;
-  object-fit: cover;
-  filter: blur(1px) brightness(70%) contrast(90%);
-  pointer-events: none;
+.bg-1 {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url(/assets/images/static/background-cover-1.jpg);
 }
-.background-cover-1 {
-  position: absolute;
+.background-cover {
+  background-position: center;
+  background-size: cover;
   height: 100%;
   width: 100%;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  object-position: center;
-  object-fit: cover;
-  filter: blur(1px) brightness(70%) contrast(90%);
+  filter: blur(1px) brightness(50%) contrast(90%);
   pointer-events: none;
+  user-select: none;
 }
 .intro {
   position: absolute;
@@ -224,7 +207,66 @@ section {
 .tagline {
   font-size: 1.9rem;
   color: var(--textcolor2);
+}
+
 
+
+/* LINK CARDS */
+.crd-link {
+  display: flex;
+  justify-content: center;
+  text-decoration: none;
+  background-size: cover;
+  background-position: center;
+  filter: saturate(0) blur(0.5px) brightness(90%);
+  transition: filter 0.2s ease-in-out;
+  padding-top: 4rem;
+}
+.crd-link:hover {
+  filter: saturate(1) blur(0) brightness(100%);
+}
+.crd-link:hover .fa-arrow-right {
+  right: 0;
+  visibility: visible;
+  opacity: 1;
+}
+.crd-content-ctn-1,
+.crd-content-ctn-2,
+.crd-content-ctn-3  {
+  color: var(--linkcolor);
+  width: 80%;
+  height: 25rem;
+  position: relative;
+}
+.crd-title,
+.crd-tagline {
+  text-shadow: 2px 2px 4px #000;
+}
+.crd-title {
+  font-size: 7rem;
+  width: 100%;
+}
+.crd-tagline {
+  font-size: 1.7rem;
+  width: 100%;
+}
+.fa-arrow-right {
+  font-size: 5rem;
+  position: absolute;
+  bottom: 0;
+  right: 3rem;
+  padding: 2rem;
+  transition: 0.2s ease-in-out;
+  visibility: hidden;
+  opacity: 0;
+  color: var(--linkcolor);
+  filter: drop-shadow( 1px 1px 2px #000);
+}
+.crd-1 {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)), url(/assets/images/static/crd-cover-1.jpg);
+}
+.crd-2 {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)), url(/assets/images/static/crd-cover-2.jpeg);
 }
 
 

diff --git a/index.html b/index.html
index 33a9ae99d86267030b8f32b0413bdcb6dc720c9b..67a9807e8699a33838c9acd425641b776f8acea8 100644 (file)
--- a/index.html
+++ b/index.html
@@ -128,24 +128,29 @@
 \r
 \r
   <main>\r
-    <section class="heading">\r
-      <img src="assets/images/static/background-cover-1.jpg"\r
-           alt="an image captured inside a house which is mad of woods while the bluesky can be seen outside."\r
-           class="background-cover"\r
-           loading="lazy"\r
-           decoding="async">\r
+    <section>\r
+      <div class="background-cover bg-1"></div>\r
       <div class="intro">\r
         <h1 class="my-name">bocharudo.</h1>\r
         <p class="tagline">I code on paper and create websites out of it.</p>\r
       </div>\r
     </section>\r
 \r
-    <section class="link-cards">\r
-      <img src=""\r
-           alt="an image captured inside a house which is mad of woods while the bluesky can be seen outside."\r
-           class="background-cover-1"\r
-           loading="lazy"\r
-           decoding="async">\r
+    <section class="cards">\r
+      <a href="photos.html" class="crd-link crd-1">\r
+        <div class="crd-content-ctn-1">\r
+          <h1 class="crd-title">Photos.</h1>\r
+          <p class="crd-tagline">Glimpses and memories through my lens, captured specks of our world.</p>\r
+          <i class="fas fa-arrow-right"></i>\r
+        </div>\r
+      </a>\r
+      <a href="projects.html" class="crd-link crd-2">\r
+        <div class="crd-content-ctn-1">\r
+          <h1 class="crd-title">Projects.</h1>\r
+          <p class="crd-tagline">Websites I've made from codes written using pen and paper.</p>\r
+          <i class="fas fa-arrow-right"></i>\r
+        </div>\r
+      </a>\r
     </section>\r
   </main>\r
 \r