added brand styles and media Queires for neon green

BracketNerd101 · Sep 25, 2023 · dc49f6f · dc49f6f
1 parent b934d32
commit dc49f6f
Show file tree

Hide file tree

Showing 8 changed files with 128 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -122,9 +122,9 @@ <h4 class="black-box-style">ace</h4>
         <div class="row">
           <div class="col-lg-11 home-hero-style text-black">
             <h1
-              class="text-white cover-text san-serif-headline d-sm-block d-md-none fw-bold"
+              class="text-black mb-4 mt-5 cover-text san-serif-headline d-sm-block d-md-none fw-bold"
             >
-              Arthur Charles Edwards
+              <span class="brand-neon-hero">Arthur</span> charles edwards
             </h1>
             <h2
               class="text-black thin-headlines cover-text fw-light display-5 d-sm-block d-md-none">
@@ -133,15 +133,15 @@ <h4 class="black-box-style">ace</h4>
             <p class="d-sm-block d-md-none">
             I specialize in UI Design with 8 years of industry experience. <br>
               I've designed marketing campaigns, coded with Front-End Developers, and created modern design systems.</p>
-            <p class="text-white cover-text fw-light display-5 mt-5 d-sm-block d-md-none">
+            <p class="text-black cover-text fw-light display-7 d-sm-block d-md-none">
                 Scroll to see work. &nbsp; <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-arrow-down-circle-fill" viewBox="0 0 16 16">
   <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"/>
 </svg>
             </p>
             <h1
               class="text-black cover-text san-serif-headline home-page-hero-text d-none d-sm-block fw-bold pb-4"
             >
-              Arthur Charles Edwards
+              <span class="brand-neon-hero">arthur</span> charles edwards
             </h1>
             <h2
               class="text-black cover-text fw-light thin-headlines pt-4 display-6 d-none d-sm-block"

diff --git a/scss/custom-nav-dropper.css b/scss/custom-nav-dropper.css
@@ -81,6 +81,22 @@
   padding-bottom: 0.3rem;
 }
 
+@media (max-width: 575.98px) {
+  .reverse-box-style {
+    font-size: 2rem;
+    line-height: 2rem;
+    font-weight: 700;
+    font-family: "poppins";
+    color: #FFFFFF;
+    height: inherit;
+    background-color: #000000;
+    box-shadow: 7px 7px #cacaca;
+    padding-left: 0.6rem;
+    padding-right: 0.6rem;
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+}
 .billboard-text {
   font-size: 7rem;
   line-height: 5.6rem;
@@ -97,4 +113,28 @@
 }
 .billboard-text .brand-neon {
   color: #A5F721;
+}
+
+.brand-neon-hero {
+  background-color: #000000;
+  box-shadow: 7px 7px #cacaca;
+  color: #A5F721;
+  padding: 4px 6px 4px 6px;
+}
+
+@media (max-width: 575.98px) {
+  .billboard-text {
+    font-size: 4rem;
+    line-height: 4rem;
+    font-weight: 700;
+    font-family: "poppins";
+    color: #FFFFFF;
+    height: inherit;
+    background-color: #000000;
+    box-shadow: 17px 17px #cacaca;
+    padding-left: 1.8rem;
+    padding-right: 1.8rem;
+    padding-top: 1.3rem;
+    padding-bottom: 1.3rem;
+  }
 }/*# sourceMappingURL=custom-nav-dropper.css.map */
diff --git a/scss/custom-nav-dropper.css.map b/scss/custom-nav-dropper.css.map
diff --git a/scss/custom-nav-dropper.min.css b/scss/custom-nav-dropper.min.css
diff --git a/scss/custom-nav-dropper.scss b/scss/custom-nav-dropper.scss
@@ -115,10 +115,31 @@ $neon-brand: #A5F721;
   padding-right: 1.8rem;
   padding-top: 0.3rem;
   padding-bottom: 0.3rem;
-
 
 }
 
+ @media (max-width: 575.98px) {  
+
+  .reverse-box-style {
+
+    font-size: 2rem;
+    line-height: 2rem;
+    font-weight: 700;
+    font-family: "poppins";
+    color: #FFFFFF;
+    height: inherit;
+    background-color: #000000;
+    box-shadow: 7px 7px #cacaca;
+
+    padding-left: 0.6rem;
+    padding-right: 0.6rem;
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+
+  }
+
+ }
+
 .billboard-text {
 
     font-size: 7rem;
@@ -129,9 +150,6 @@ $neon-brand: #A5F721;
     height: inherit;
     background-color: #000000;
 
-//   background: #283c86;  /* fallback for old browsers */
-// background: -webkit-linear-gradient(to right, #45a247, #283c86);  /* Chrome 10-25, Safari 5.1-6 */
-// background: linear-gradient(to right, #45a247, #283c86); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
 box-shadow: 17px 17px #cacaca;
 
@@ -140,10 +158,42 @@ box-shadow: 17px 17px #cacaca;
   padding-top: 1.3rem;
   padding-bottom: 1.3rem;
 
+
   .brand-neon {
 
     color: #A5F721;
   }
 
 }
 
+.brand-neon-hero {
+
+    background-color: #000000; 
+    box-shadow: 7px 7px #cacaca;
+    color: $neon-brand;
+    padding: 4px 6px 4px 6px;
+  }
+
+// MEDIA QUERY BELOW
+
+ @media (max-width: 575.98px) {  
+
+  .billboard-text {
+
+    font-size: 4rem;
+    line-height: 4rem;
+    font-weight: 700;
+    font-family: "poppins";
+    color: #FFFFFF;
+    height: inherit;
+    background-color: #000000;
+    box-shadow: 17px 17px #cacaca;
+
+    padding-left: 1.8rem;
+    padding-right: 1.8rem;
+    padding-top: 1.3rem;
+    padding-bottom: 1.3rem;
+
+  }
+
+ }
diff --git a/scss/nav-style.css b/scss/nav-style.css
@@ -276,6 +276,15 @@
   background-color: #FFF;
 }
 
+@media (max-width: 575.98px) {
+  .big-image {
+    height: 85vh;
+    width: 100%;
+    position: relative;
+    margin-bottom: auto;
+    background-color: #FFF;
+  }
+}
 .big-image-2 {
   height: 45vh;
   width: 100%;

diff --git a/scss/nav-style.css.map b/scss/nav-style.css.map
diff --git a/scss/nav-style.scss b/scss/nav-style.scss
@@ -365,19 +365,26 @@ padding-top: 1.5rem;
   margin-bottom: auto;
 
   background-color: #FFF;
-//   background: #77BE05;  /* fallback for old browsers */
-// background: -webkit-linear-gradient(to right, #45a247, #283c86);  /* Chrome 10-25, Safari 5.1-6 */
-// background: linear-gradient(to right, #45a247, #283c86); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-
-//   background-size: cover;
-//       background: #8D10D1;
-//     background: -webkit-linear-gradient(top left, #8D10D1, #8255CE);
-//     background: -moz-linear-gradient(top left, #8D10D1, #8255CE);
-//     background: linear-gradient(to bottom right, #2b0540, #d1177e);
-//   background-position: 50% 50%;
-//   background-image: url("../img/homepage-hero.jpg") ;
+
+
+}
+
+@media (max-width: 575.98px) {  
+
+  .big-image {
+  height: 85vh;
+  width: 100%;
+  position: relative;
+  margin-bottom: auto;
+
+  background-color: #FFF;
+
 
 }
+
+ }
+
+
 .big-image-2 {
   height: 45vh;
   width: 100%;