fixing font

mfaqihuddin23 · Dec 6, 2021 · 688ddde · 688ddde
1 parent 0a76616
commit 688ddde
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 16 deletions.
diff --git a/assets/images/InstallFigmaAgent.exe b/assets/images/InstallFigmaAgent.exe
diff --git a/assets/styles/style.css b/assets/styles/style.css
@@ -1,9 +1,34 @@
-body{
-  font-family: 'Eudoxus-Sans';
+@font-face {
+  font-family: 'EudoxusSans-Bold';
+  src: url('../fonts/Eudoxus-Sans-font/EudoxusSans-Bold.ttf');
 }
+@font-face {
+  font-family: 'EudoxusSans-ExtraBold';
+  src: url('../fonts/Eudoxus-Sans-font/EudoxusSans-ExtraBold.ttf');
+}
+@font-face {
+  font-family: 'EudoxusSans-ExtraLight';
+  src: url('../fonts/Eudoxus-Sans-font/EudoxusSans-ExtraLight.ttf');
+}
+@font-face {
+  font-family: 'EudoxusSans-Light';
+  src: url('../fonts/Eudoxus-Sans-font/EudoxusSans-Light.ttf');
+}
+@font-face {
+  font-family: 'EudoxusSans-Medium.ttf';
+  src: url('../fonts/Eudoxus-Sans-font/EudoxusSans-Medium.ttf');
+}
+@font-face {
+  font-family: 'EudoxusSans-Regular';
+  src: url('../fonts/Eudoxus-Sans-font/EudoxusSans-Regular.ttf');
+}
+/* body{
+  font-family: 'EudoxusSans-Regular';
+} */
 
 /* navbar  */
 .navbar-light .navbar-nav .nav-link {
+  font-family: 'EudoxusSans-Regular';
   font-style: normal;
   font-weight: normal;
   font-size: 16px;
@@ -13,27 +38,18 @@ body{
 .navbar{
   padding: 30px 0px;
 }
-.btn-navbar{
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
-  border: 1.5px solid #FFFFFF;
-  box-sizing: border-box;
-  /* Blue */
-  box-shadow: 0px 10px 30px rgba(38, 98, 153, 0.25);
-  border-radius: 10px;
-  padding: 20px 40px;
-  margin-right: 30px;
-  color: #1F3247;
-}
+
 
 /* section hero  */
 section.hero{
   background: url('../images/img-hero.png');
   background-repeat: no-repeat;
   background-position: top center;
   background-size: auto;
-  padding-bottom: 55px;
+  padding-bottom: 35px;
 }
 .hero #counterdown {
+  font-family: 'EudoxusSans-ExtraBold';
   font-style: normal;
   font-weight: 800;
   font-size: 40px;
@@ -42,28 +58,49 @@ section.hero{
   margin-bottom: 20px;
 }
 
+/* section howitworks */
+section.howitworks {
+  background: linear-gradient(180deg, #87B5DE -89.17%, rgba(135, 181, 222, 0) 96.56%);
+}
+.video-container{
+  padding: 120px 0px;
+}
+.howitworks iframe{
+  border-radius: 20px;
+}
 /* global  */
-
 /* header  */
 h1{
+  font-family: 'EudoxusSans-Bold';
   font-style: normal;
   font-weight: bold;
   font-size: 45px;
   line-height: 140%;
   color: #1F3247;
   margin-bottom: 10px;
 }
+h2{
+  font-family: 'EudoxusSans-Bold';
+  font-style: normal;
+  font-weight: bold;
+  font-size: 36px;
+  line-height: 45px;
+  margin-bottom: 40px;
+  color: #1F3247;
+}
 
 /* body  */
 .p-24{
+  font-family: 'EudoxusSans-Regular';
   font-style: normal;
   font-weight: normal;
   font-size: 24px;
   line-height: 180%;
   color: #717C89;
-  max-width: 350px;
+  max-width: 410px;
 }
 .p-14{
+  font-family: 'EudoxusSans-Regular';
   font-style: normal;
   font-weight: normal;
   font-size: 14px;
@@ -73,6 +110,17 @@ h1{
 }
 
 /* button  */
+.btn-navbar{
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
+  border: 1.5px solid #FFFFFF;
+  box-sizing: border-box;
+  /* Blue */
+  box-shadow: 0px 10px 30px rgba(38, 98, 153, 0.25);
+  border-radius: 10px;
+  padding: 20px 40px;
+  margin-right: 30px;
+  color: #1F3247;
+}
 .btn-primary{
   background: linear-gradient(256.03deg, #5FABE3 -4.5%, #4988B6 112.94%);
   /* Blue */
@@ -82,6 +130,7 @@ h1{
   padding: 20px 40px;
 }
 .btn{
+  font-family: 'EudoxusSans-Bold';
   font-style: normal;
   font-weight: bold;
   font-size: 16px;

diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
     <!-- Local CSS -->
     <link rel="stylesheet" href="assets/styles/style.css">
     <!-- font css -->
+    <link rel="preconnect" href="https://stijndv.com">  
     <link rel="stylesheet" href="https://stijndv.com/fonts/Eudoxus-Sans.css">
 
     <title>QUIK-NFT</title>
@@ -58,6 +59,14 @@ <h1>Buy & sell extraordinary domain names, metaverse names, avatars, & NFTs</h1>
         </div>
       </div>
     </section>
+    <section class="howitworks">
+      <div class="container">
+        <div class="video-container text-center">
+          <h2>How It Works</h2>
+          <iframe width="792" height="500" src="https://www.youtube.com/embed/zPOQ2NwuNGc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        </div>
+      </div>
+    </section>
 
 
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>