re-init git

.gitignore

@@ -1,5 +1,4 @@
 .venv
 .code-workspace
-env
 .vscode/settings.json
 *.code-workspace

Linkedin Profile.code-workspace

@@ -5,7 +5,7 @@
 		}
 	],
 	"settings": {
-		"python.pythonPath": "env\\Scripts\\python.exe"
+		"python.pythonPath": ".venv\\Scripts\\python.exe"
 	},
 
 }

sass/abstracts/_mixins.scss

@@ -0,0 +1,7 @@
+@mixin clearfix {
+    &::after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+}

sass/abstracts/_variables.scss

@@ -0,0 +1,16 @@
+$color-black: #212529;
+
+$color-white: #fff;
+$color-grey-dark-1: #777;
+$color-grey-dark-2: #6d6d6d;
+$color-grey-dark-3: #333;
+
+$color-focus-valid: #58a206;
+$color-focus-invalid: #ef950e;
+
+// FONT
+$default-font-size: 1.6rem;
+
+// BORERS
+$border-rad-small: .3rem;
+$border-rad-big: 5rem;

sass/base/_base.scss

@@ -0,0 +1,25 @@
+*,
+*::after,
+*::before {
+    /* capture any before and after pseudo-elements in universal selector */
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+}
+
+html {
+    font-size: 62.5%; // this is also what 1rem is.
+    /* 100% is a based on default 16px.  We prefer 10px */
+    /* so calculate the percentage 100/16 = 0.625 => 62.5% */
+    /* We can now use a function that will let a user change  */
+    /* the font-size to suit their needs. eg they may select size 20 */
+    /* and we give them .625*20 = 12.5px */
+    /* Note that rem doesn't work on sites written for IE9 or older. */
+
+}
+
+body {
+    /* enable inheritance of box-sizing for later customization */
+    box-sizing: border-box;
+    // padding: 3rem;
+}

sass/base/_typography.scss

@@ -0,0 +1,64 @@
+a {
+    color: inherit;
+}
+
+a:hover {
+    color: inherit;
+    text-decoration: none;
+}
+
+body {
+    font-family: "Lato", sans-serif;
+    font-weight: 400;
+    /* font-size: 16px; */
+    line-height: 1.7;
+    color: $color-grey-dark-3;
+}
+
+.title_heading,
+.intro {
+    text-align: center
+}
+
+.uppercase {
+    text-transform: uppercase;
+}
+
+.heading-secondary {
+    font-size: 2.5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    display: inline-block;
+    background-image: linear-gradient(to right, $color-grey-dark-3, $color-grey-dark-2);
+    // clip the background color to the same template as the text
+    -webkit-background-clip: text;
+    background-clip: text;
+    // make the text transparent so the background color can be visible
+    color: transparent;
+    letter-spacing: .2rem;
+    text-shadow: .05rem .6rem .4rem rgba($color-black, .6);
+
+    &-icon {
+        transition: all .6s;
+        transform: translateY(.6rem) scale(1);
+        @include clearfix;
+
+        &:hover {
+            transform: translateY(-.2rem) scale(1.12);
+            text-shadow: .06rem .6rem .42rem rgba($color-black, .8)
+
+        }
+    }
+}
+
+.heading-tertiary {
+    font-size: 2rem;
+    text-transform: capitalize;
+    font-weight: 900;
+    display: inline-block;
+
+    &-sub {
+
+    }
+
+}

sass/base/_utilities.scss

@@ -0,0 +1,3 @@
+.utility-margin-bottom-std {
+    margin-bottom: 4rem;
+}

sass/components/_button.scss

@@ -0,0 +1,83 @@
+.btn {
+
+    &,
+    &:link,
+    &:visited {
+        text-transform: uppercase;
+        text-decoration: none;
+        padding: 1.5rem 4rem;
+        display: inline-block;
+        border-radius: $border-rad-big;
+        transition: all .2s;
+        /* define button position for  btn-white::after */
+        position: relative;
+        font-size: $default-font-size;
+
+        // Change for the <button> element
+        border: none;
+        cursor: pointer;
+    }
+
+    &--animated {
+        /* animation timing and delay */
+        animation: moveInBottom .5s ease-out .75s;
+        /* apply styles before the animation starts */
+        animation-fill-mode: backwards;
+    }
+
+    &:hover {
+        transform: translateY(-0.3rem);
+        /* x y blur colour with % opacity give the
+        look of the button up above base image */
+        box-shadow: 0 1rem 2rem rgba($color-black, .2);
+
+        &::after {
+            /* scale pseudo-button in the X & Y planes */
+            transform: scaleX(1.4) scaleY(1.6);
+            opacity: 0;
+        }
+    }
+
+    &:active,
+    &:focus {
+        transform: translateY(-0.1rem);
+        /* reduce shadow size as well as the blur to give 
+        appearance of button moving close to base image */
+        box-shadow: 0 .5rem 1rem rgba($color-black, .2);
+        outline: none;
+    }
+
+    // &--white {
+    //     background-color: $color-white;
+    //     color: $color-grey-dark;
+
+    //     &::after {
+    //         background-color: $color-white;
+    //     }
+    // }
+
+    // &--green {
+    //     background-color: $color-primary;
+    //     color: $color-white;
+
+    //     &::after {
+    //         background-color: $color-primary;
+    //     }
+    // }
+
+    &::after {
+        /* crate a pseudo button to go behind the button */
+        content: "";
+        display: inline-block;
+        height: 100%;
+        width: 100%;
+        border-radius: $border-rad-big;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        /* btn::after is the initial state for btn:hover::after */
+        transition: all .4s;
+    }
+
+}

sass/components/_form.scss

@@ -0,0 +1,51 @@
+.form {
+
+    &__group:not(:last-child) {
+        margin-bottom: 2rem;    
+    }
+
+    &__input {
+        font-size: 1.5rem;
+        // input elements don't normally inherit font properties
+        // so inheritance is specified
+        font-family: inherit;
+        color: inherit;
+        padding: 1.5rem 2rem;
+        border-radius: $border-rad-small;
+        background-color: rgba($color-white, .5);
+        border-bottom: 3px solid transparent;
+        width: 90%;
+        display: block;
+
+        &:focus {
+            outline: none;
+            box-shadow: 0 1rem 2rem rgba($color-black, .1);
+            border-bottom: 3px solid $color-focus-valid;
+
+        }
+
+        &:focus:invalid {
+            border-bottom: 3px solid $color-focus-invalid;
+        }
+
+        &::-webkit-input-placeholder {
+            color: $color-grey-dark-2;
+        }
+    }
+
+    &__label {
+        font-size: 1.2rem;
+        font-weight: 700;
+        margin-left: .7rem;
+        display: block;
+        transition: all .3s;
+    }
+
+    // use the adjacent sibling selector "+" and not the general "~"
+    &__input:placeholder-shown+&__label {
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-4rem);
+    }
+
+}

sass/layout/_footer.scss

@@ -0,0 +1,47 @@
+.footer {
+
+    &__list {
+        @include clearfix;
+
+    }
+
+    &__item span {
+        display: inline-block;
+        width: 2em;
+        transition: all .3s;
+
+        &:hover {
+            transform: translateY(-0.2em);
+            color: $color-black;
+        }
+    }
+
+    &__link {
+        border-radius: 50%;
+        box-shadow: 0 2rem 1rem rgba($color-black, .2);
+
+
+        &:hover {
+            transform: rotate(5deg);
+            font-size: 120%;
+            transition: all .3s;
+
+        }
+
+        &:focus,
+        &:active {
+            transform: rotate(0);
+            font-size: 100%;
+            transform: translateY(0);
+        }
+    }
+
+    &__copyright {
+        text-align: center;
+        background-image: linear-gradient(to right, $color-grey-dark-3, $color-grey-dark-2);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+
+    }
+}

sass/layout/_navigation.scss

@@ -0,0 +1,69 @@
+.navigation {
+
+
+    &__profile-pic {
+        height: 6%;
+        width: 6%;
+        padding: 0;
+        border-radius: $border-rad-big;
+        box-shadow: 0 10px 4px rgba($color-black, .2);
+        outline-offset: 2rem;
+        transition: all .8s;
+
+        &:hover {
+            display: block;
+            overflow: hidden;
+            border-radius: $border-rad-small;
+            outline: .5rem solid $color-grey-dark-2;
+            outline-offset: $border-rad-small;
+            box-shadow: 0 12px 6px rgba($color-grey-dark-3, .3);
+            transform: translateY(1rem) scale(1.2);
+
+        }
+    }
+
+    &__button {}
+
+    &__list {
+        @include clearfix;
+        text-transform: uppercase;
+        font-size: 1rem;
+        font-weight: 600;
+        letter-spacing: 2px;
+        color: $color-white;
+
+    }
+
+    &__item {
+        display: contents;
+        text-shadow: 0 10px 4px rgba($color-black, .2);
+
+
+        &-link-1 {
+            // display: inline-block;
+            // padding: 10px 20px;
+            transition: all .3s;
+
+            &:hover {
+                // display: inline-block;
+                margin-bottom: none;
+                background-image: linear-gradient(to right, $color-grey-dark-3, $color-grey-dark-2);
+                // clip the background color to the same template as the text
+                -webkit-background-clip: text;
+                background-clip: text;
+                text-shadow: 0 12px 6px rgba($color-grey-dark-3, .4);
+                transform: translateY(-4px);
+                color: transparent;
+
+            }
+
+
+        }
+
+
+
+    }
+
+
+
+}