Customise site content

assets/css/style.css

@@ -53,6 +53,11 @@
     hsl(45, 100%, 72%), 
     hsl(35, 100%, 68%)
   );
+  --text-gradient-primary: linear-gradient(
+    to right, 
+    var(--primary-color), 
+    var(--secondary-color)
+  );
 
   /* solid */
 
@@ -109,6 +114,12 @@
   --transition-1: 0.25s ease;
   --transition-2: 0.5s ease-in-out;
 
+  /**
+   * theme color
+   */
+  --primary-color: #ff6e75;
+  --secondary-color: #f74851;
+
 }
 
 
@@ -131,6 +142,15 @@ li { list-style: none; }
 
 img, ion-icon, a, button, time, span { display: block; }
 
+article a {
+  display: inline;
+  color: var(--primary-color);
+}
+
+article img path {
+  fill: white;
+}
+
 button {
   font: inherit;
   background: none;
@@ -147,11 +167,11 @@ input, textarea {
 }
 
 ::selection {
-  background: var(--orange-yellow-crayola);
+  background: var(--secondary-color);
   color: var(--smoky-black);
 }
 
-:focus { outline-color: var(--orange-yellow-crayola); }
+:focus { outline-color: var(--secondary-color); }
 
 html { font-family: var(--ff-poppins); }
 
@@ -173,6 +193,7 @@ article {
   padding: 15px;
   box-shadow: var(--shadow-1);
   z-index: 1;
+  color: var(--light-gray);
 }
 
 .separator {
@@ -192,7 +213,7 @@ article {
   justify-content: center;
   align-items: center;
   font-size: 16px;
-  color: var(--orange-yellow-crayola);
+  color: var(--secondary-color);
   box-shadow: var(--shadow-1);
   z-index: 1;
 }
@@ -251,7 +272,7 @@ article.active {
   left: 0;
   width: 30px;
   height: 3px;
-  background: var(--text-gradient-yellow);
+  background: var(--text-gradient-primary);
   border-radius: 3px;
 }
 
@@ -266,7 +287,7 @@ article.active {
 }
 
 .has-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--orange-yellow-crayola);
+  background: var(--secondary-color);
   border-radius: 5px;
 }
 
@@ -361,7 +382,7 @@ main {
   right: -15px;
   border-radius: 0 15px;
   font-size: 13px;
-  color: var(--orange-yellow-crayola);
+  color: var(--secondary-color);
   background: var(--border-gradient-onyx);
   padding: 10px;
   box-shadow: var(--shadow-2);
@@ -486,7 +507,7 @@ main {
 .navbar-link:hover,
 .navbar-link:focus { color: var(--light-gray-70); }
 
-.navbar-link.active { color: var(--orange-yellow-crayola); }
+.navbar-link.active { color: var(--secondary-color); }
 
 
 
@@ -590,9 +611,11 @@ main {
   left: 0;
   transform: translate(15px, -25px);
   background: var(--bg-gradient-onyx);
-  border-radius: 14px;
   box-shadow: var(--shadow-1);
 }
+.testimonials-avatar-box, .testimonials-avatar-box img {
+  border-radius: 14px;
+}
 
 .testimonials-item-title { margin-bottom: 7px; }
 
@@ -732,7 +755,7 @@ main {
 .clients-list {
   display: flex;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   gap: 15px;
   margin: 0 -15px;
   padding: 25px;
@@ -797,7 +820,7 @@ main {
 }
 
 .timeline-list span {
-  color: var(--vegas-gold);
+  color: var(--primary-color);
   font-weight: var(--fw-400);
   line-height: 1.6;
 }
@@ -819,7 +842,7 @@ main {
   left: -33px;
   height: 6px;
   width: 6px;
-  background: var(--text-gradient-yellow);
+  background: var(--text-gradient-primary);
   border-radius: 50%;
   box-shadow: 0 0 0 4px var(--jet);
 }
@@ -863,7 +886,7 @@ main {
 }
 
 .skill-progress-fill {
-  background: var(--text-gradient-yellow);
+  background: var(--text-gradient-primary);
   height: 100%;
   border-radius: inherit;
 }
@@ -981,7 +1004,7 @@ main {
   --scale: 0.8;
 
   background: var(--jet);
-  color: var(--orange-yellow-crayola);
+  color: var(--secondary-color);
   position: absolute;
   top: 50%;
   left: 50%;
@@ -1106,7 +1129,7 @@ main {
   transition: var(--transition-1);
 }
 
-.blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); }
+.blog-post-item > a:hover .blog-item-title { color: var(--secondary-color); }
 
 .blog-text {
   color: var(--light-gray);
@@ -1165,7 +1188,7 @@ main {
 
 .form-input::placeholder { font-weight: var(--fw-500); }
 
-.form-input:focus { border-color: var(--orange-yellow-crayola); }
+.form-input:focus { border-color: var(--secondary-color); }
 
 textarea.form-input {
   min-height: 100px;
@@ -1183,7 +1206,7 @@ textarea.form-input::-webkit-resizer { display: none; }
   position: relative;
   width: 100%;
   background: var(--border-gradient-onyx);
-  color: var(--orange-yellow-crayola);
+  color: var(--secondary-color);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1424,6 +1447,9 @@ textarea.form-input::-webkit-resizer { display: none; }
 
   .testimonials-avatar-box {
     transform: translate(30px, -30px);
+  }
+  
+  .testimonials-avatar-box, .testimonials-avatar-box img {
     border-radius: 20px;
   }
 
@@ -1620,7 +1646,7 @@ textarea.form-input::-webkit-resizer { display: none; }
 
   .filter-item button:hover { color: var(--light-gray-70); }
 
-  .filter-item button.active { color: var(--orange-yellow-crayola); }
+  .filter-item button.active { color: var(--secondary-color); }
 
   /* portfolio and blog grid */
 

assets/images/cybersec.svg

@@ -0,0 +1,8 @@
+<svg fill="url(#paint1_linear)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>17-web security</title><g id="_17-web_security" data-name="17-web security"><path d="M45,40H3a3,3,0,0,1-3-3V11A3,3,0,0,1,3,8H6v2H3a1,1,0,0,0-1,1V37a1,1,0,0,0,1,1H45a1,1,0,0,0,1-1V11a1,1,0,0,0-1-1H42V8h3a3,3,0,0,1,3,3V37A3,3,0,0,1,45,40Z"/><rect x="15" y="39" width="2" height="4"/><path d="M13,47H11V45a3,3,0,0,1,3-3H24v2H14a1,1,0,0,0-1,1Z"/><rect x="31" y="39" width="2" height="4"/><path d="M37,47H35V45a1,1,0,0,0-1-1H29V42h5a3,3,0,0,1,3,3Z"/><rect x="9" y="46" width="30" height="2"/><path d="M40,36H8a3,3,0,0,1-3-3V3A3,3,0,0,1,8,0H40a3,3,0,0,1,3,3V33A3,3,0,0,1,40,36ZM8,2A1,1,0,0,0,7,3V33a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V3a1,1,0,0,0-1-1Z"/><rect x="6" y="6" width="36" height="2"/><rect x="9" y="3" width="2" height="2"/><rect x="13" y="3" width="2" height="2"/><rect x="17" y="3" width="2" height="2"/><rect x="1" y="30" width="5" height="2"/><rect x="42" y="30" width="5" height="2"/><path d="M30,32H18a3,3,0,0,1-3-3V23a3,3,0,0,1,3-3H30a3,3,0,0,1,3,3v6A3,3,0,0,1,30,32ZM18,22a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1H30a1,1,0,0,0,1-1V23a1,1,0,0,0-1-1Z"/><path d="M29,22H19a1,1,0,0,1-1-1V16a6,6,0,0,1,12,0v5A1,1,0,0,1,29,22Zm-9-2h8V16a4,4,0,0,0-8,0Z"/><path d="M24,27a2,2,0,1,1,2-2A2,2,0,0,1,24,27Zm0-2h0Z"/><rect x="23" y="25" width="2" height="4"/><rect x="9" y="10" width="2" height="2"/><rect x="13" y="10" width="2" height="2"/><rect x="9" y="14" width="2" height="2"/><rect x="37" y="14" width="2" height="2"/><rect x="37" y="10" width="2" height="2"/><rect x="33" y="10" width="2" height="2"/></g>
+<defs>
+<linearGradient id="paint1_linear" x1="0" y1="0" x2="36.1781" y2="36.4484" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#f74851"/>
+<stop offset="1" stop-color="#ff6e75"/>
+</linearGradient>
+</defs>
+</svg>

assets/testimonials/run.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="-4 -4 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 22V16.9612C14 16.3537 13.7238 15.7791 13.2494 15.3995L11.5 14M11.5 14L13 7.5M11.5 14L10 13M13 7.5L11 7M13 7.5L15.0426 10.7681C15.3345 11.2352 15.8062 11.5612 16.3463 11.6693L18 12M10 13L11 7M10 13L9.40011 16.2994C9.18673 17.473 8.00015 18.2 6.85767 17.8573L4 17M11 7L8.10557 8.44721C7.428 8.786 7 9.47852 7 10.2361V12M14.5 3.5C14.5 4.05228 14.0523 4.5 13.5 4.5C12.9477 4.5 12.5 4.05228 12.5 3.5C12.5 2.94772 12.9477 2.5 13.5 2.5C14.0523 2.5 14.5 2.94772 14.5 3.5Z" stroke="url(#paint1_linear)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint1_linear" x1="0" y1="0" x2="36.1781" y2="36.4484" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#f74851"/>
+<stop offset="1" stop-color="#ff6e75"/>
+</linearGradient>
+</defs>
+</svg>

assets/testimonials/volunteering.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" ?>
+<svg fill="url(#paint1_linear)" width="800px" height="800px" viewBox="-10 -10 70 70" xmlns="http://www.w3.org/2000/svg">
+<g id="Solid">
+<path d="M46.79248,24.23a4.05389,4.05389,0,0,0-5.689-.14l-7.69872,6.84a5.25608,5.25608,0,0,1,.58993,2.43,5.39055,5.39055,0,0,1-3.4794,5.02l-6.46895,2.43a1.00694,1.00694,0,0,1-1.27975-.59.98322.98322,0,0,1,.57986-1.28l6.46895-2.43A3.38021,3.38021,0,0,0,31.995,33.36,3.45753,3.45753,0,0,0,28.63555,30H9.99866A1.99982,1.99982,0,0,0,7.999,28H3.99966A1.99982,1.99982,0,0,0,2,30V46a1.99986,1.99986,0,0,0,1.99966,2H7.999a1.99986,1.99986,0,0,0,1.99967-2H14.048l1.24979.51A19.61328,19.61328,0,0,0,37.924,40.87l9.10846-11.01A4.20182,4.20182,0,0,0,46.79248,24.23ZM12.99816,44H9.99866V32h2.9995ZM30.41809,2a8.59142,8.59142,0,0,0-5.42194,1.9082A8.59147,8.59147,0,0,0,19.5742,2a8.68822,8.68822,0,0,0-8.66651,8.68945c0,9.14258,13.03,16.85059,13.58463,17.17481a1.00289,1.00289,0,0,0,1.00765,0C26.05456,27.54,39.08461,19.832,39.08461,10.68945A8.68822,8.68822,0,0,0,30.41809,2Zm-1.772,18.6571a.98319.98319,0,0,1-.65022.2229.99554.99554,0,0,1-.65047-1.7423c3.70153-3.1709,5.74025-6.17188,5.74025-8.44825A2.68158,2.68158,0,0,0,30.41809,8a1,1,0,0,1,0-2,4.68337,4.68337,0,0,1,4.66719,4.68945C35.08528,14.3681,31.584,18.13953,28.64605,20.6571Z"/>
+</g>
+<defs>
+<linearGradient id="paint1_linear" x1="0" y1="0" x2="36.1781" y2="36.4484" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#f74851"/>
+<stop offset="1" stop-color="#ff6e75"/>
+</linearGradient>
+</defs>
+</svg>