Increase information in welcome message and add a link feature to the down arrow.

2 files changed, 14 insertions, 4 deletions

diff --git a/index.html b/index.html
index c529d86..6735ec4 100644
--- a/index.html
+++ b/index.html
@@ -37,15 +37,18 @@
           <span>Make.</span>

           <span>Tinker.</span>

         </div>

-        <span class="down-arrow"></span>

+        <a href="#intro" style="display: block;" class="arrow-container"><span class="down-arrow"></span></a>

       </div>

     </header>

 

     <main style="padding-top: 0;">

-      <section>

+      <section id="intro">

         <hr style="margin-top: 0;">

         <h1 style="font-size: 2rem; margin-top: 3rem;">Scerba.org</h1>

-        <p>The personal website of Alex Scerba.</p>

+        <p><i style="color: black;">The personal website of Alex Scerba.</i></p>

+        <p>Check out my <a href="./blog.html">blog</a> where I write about various projects, adventures, and life updates.</p>

+        <p>You can see an overview collection of every image in the blog on the <a href="./gallery.html">gallery</a> page and learn more about me and the site through the <a href="./about.html">about</a> and <a href="./faq.html">FAQ</a> pages.</p>

+        <p>Thanks for stopping by!</p>

       </section>

     </main>

 

diff --git a/static/style.css b/static/style.css
index bdd0db2..7358a7f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -94,9 +94,12 @@ main {
   font-weight: bolder;

 }

 

-.down-arrow {

+.arrow-container {

   position: absolute;

   bottom: 4rem;

+}

+

+.down-arrow {

   border: solid black;

   border-width: 0 3px 3px 0;

   display: block;

@@ -181,6 +184,10 @@ figcaption {
   margin-top: 0.3rem;

 }

 

+i {

+  color: rgb(177, 177, 177);

+}

+

 img, video {

     max-width: 100%;

     height: auto;