Added Icons to the fields

Copy05 · May 27, 2024 · 4a3b718 · 4a3b718
1 parent 06e2705
commit 4a3b718
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 10 deletions.
diff --git a/SiteHelper.js b/SiteHelper.js
@@ -16,7 +16,7 @@ const HeaderHTML = `
         <li><a class="dktl" href="./index.html#about">About</a></li>
         <li><a class="dktl" href="./quotes.html">Quotes</a></li>
         <li><a class="dktl" href="./digital-tools.html">Digital Tools</a></li>
-        <li><a class="dktl contactlink" href="https://forms.gle/dJNGDHAcozxzZ5Xb9">Get in touch</a></li>
+        <li><a class="dktl contactlink" href="./apply.html">Work with me</a></li>
         <li id="mnb-hamburger"><a href="#" id="mnb-hamburger-btn">≡</a></li>
         </ul>
 `

diff --git a/apply.html b/apply.html
@@ -4,8 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Become a Client | CopyWealth</title>
+
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="mobile.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+
     <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
     <script src="./SiteHelper.js" defer></script>
     <script src="./Finance.js" defer></script>
@@ -43,25 +46,25 @@
         <p class="ntxt-dg">- You must speak english</p>
         <p class="ntxt-dg">- You have to be serious about this</p>
 
-        <p class="sectxt">What you'd expect:</p>
+        <p class="sectxt">HERE'S WHAT YOU GET:</p>
 
         <div class="apply-boxes desktop-flex">
             <div class="apply-box">
-                <p class="apply-box-title">Consultation</p>
+                <p class="apply-box-title"><span class="vert-centre"><span class="material-symbols-outlined">recommend</span>Consultation</span></p>
                 <p class="apply-box-txt">Are you unsure, need help or want to learn from professionals? I offer consultations to my clients to guide them towards success. (I do not guarantee any profits or financial success.)</p>
             </div>
             <div class="apply-box">
-                <p class="apply-box-title">Level up your mental health</p>
+                <p class="apply-box-title"><span class="vert-centre"><span class="material-symbols-outlined">self_improvement</span>Entrepreneur Mindset</span></p>
                 <p class="apply-box-txt">Feeling unhappy and unfulfilled? Experience peaks of the business mindset and a healthy mindset. (This only works if you aren't scared of changes.) Become an entrepreneur or a healthy person, and, most importantly, have fun in life.</p>
             </div>
         </div>
         <div class="apply-boxes desktop-flex">
             <div class="apply-box">
-                <p class="apply-box-title">Motivation & Self-Improvement</p>
+                <p class="apply-box-title"><span class="vert-centre"><span class="material-symbols-outlined">neurology</span>Motivation & Self-Improvement</span></p>
                 <p class="apply-box-txt">Feeling unmotivated to even start or continue what you have? I've got you covered. During my consultations, I will strive to motivate you to keep pushing and never give up on things that are important to you.</p>
             </div>
             <div class="apply-box">
-                <p class="apply-box-title">Hiring</p>
+                <p class="apply-box-title"><span class="vert-centre"><span class="material-symbols-outlined">work</span>Hiring</span></p>
                 <p class="apply-box-txt">(<b style="color: rgb(224, 187, 117);">PREMIUM / PAID OPTION</b>) Do you want someone to work on a project with you? I can offer you my <b>Script Writing</b>, <b>Video Editing</b>, <b>Content Creation</b> Skills for money. Price is negotiable</p>
             </div>
         </div>
@@ -73,10 +76,12 @@
             <iframe class="cw-youtube-embed" width="560" height="315" src="https://www.youtube.com/embed/j8b2LUpO9Z0?si=zmbZxEYjls1auG7U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>    
             <br>
             <iframe width="315" height="560" src="https://www.youtube.com/embed/CZHDKZoLZIo?si=WCNiCYU4AOi8hf9Q" title="YouTube video player" frameborder="0&quot;" allowfullscreen=""></iframe>
-            <iframe width="315" height="560" src="https://www.youtube.com/embed/yg9nEHA9C5o?si=575OV0mZjeCIrRZe" title="YouTube video player" frameborder="0&quot;" allowfullscreen=""></iframe>
             <iframe width="315" height="560" src="https://www.youtube.com/embed/wrh7MFMXXQg?si=Nf2y-utDljl2TafY" title="YouTube video player" frameborder="0&quot;" allowfullscreen=""></iframe>
-            <iframe width="315" height="560" src="https://www.youtube.com/embed/NndP4ltiPgQ?si=RjOHSywIeldA81hL" title="YouTube video player" frameborder="0&quot;" allowfullscreen=""></iframe>
         </div>
+
+        <br><br><br>
+        <p class="ntxt-dg">DISCLAIMER: CopyWealth does not guarantee any profits or financial success. It is up to the clients to apply the strategies learned in this program. CopyWealth is not responsible for any harm or financial loss</p>
+
     </div>
 
 

diff --git a/index.html b/index.html
@@ -39,11 +39,11 @@
     <p class="sectxt">Myself in Numbers:</p>
     <div class="graphs">
         <div class="graph">
-            <p class="graphnumber">312</p>
+            <p class="graphnumber">317</p>
             <p class="graphtitle">Subscribers</p>
         </div>
         <div class="graph">
-            <p class="graphnumber" id="view_count">114,4K</p>
+            <p class="graphnumber" id="view_count">115,8K</p>
             <p class="graphtitle">Viewers</p>
         </div>
         <div class="graph">

diff --git a/style.css b/style.css
@@ -52,6 +52,14 @@
     font-display: swap;
 }
 
+.material-symbols-outlined {
+    font-variation-settings:
+    'FILL' 1,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24
+}  
+
 :root {
     --White: rgb(210, 210, 210);
     --Gold: rgb(224, 187, 117);
@@ -102,6 +110,11 @@ li {
     display: flex;
 }
 
+.vert-centre {
+    display: flex;
+    align-items: center;
+}
+
 /* Header */
 
 header {
@@ -454,4 +467,8 @@ footer {
 .apply-box-txt {
     font-family: "DarkerGrote";
     font-size: 18px;
+}
+
+.apply-box-title > .vert-centre > .material-symbols-outlined {
+    margin-right: 10px;
 }