From 439fbdfbc1fe8515cef53fb551e2025199378d84 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Fri, 17 Apr 2020 10:33:45 +0530
Subject: [PATCH] v0.0.3

---
 css/main.css     | 198 +++++++++++++++++++++++++++++++++++++++++++++--
 css/main.css.map |   2 +-
 css/main.scss    | 151 ++++++++++++++++++++++++++++++++++--
 index.html       |  87 ++++++++++++++++++++-
 4 files changed, 424 insertions(+), 14 deletions(-)

diff --git a/css/main.css b/css/main.css
index ba8b2ed..f6fb38d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;500;600;700&display=swap");
 *,
 ::before,
 ::after {
@@ -40,20 +40,74 @@ input[type=number] {
   -moz-appearance: textfield;
 }
 
+input:invalid {
+  outline: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+button {
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0.2em;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  background: transparent;
+  cursor: pointer;
+  padding: 1em 1.5em;
+}
+
+.flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.grid {
+  display: -ms-grid;
+  display: grid;
+}
+
+.grid-2 {
+  -ms-grid-columns: auto auto;
+      grid-template-columns: auto auto;
+  gap: 1em;
+}
+
+.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.hide-completely {
+  display: none !important;
+}
+
+.breakable {
+  word-break: break-all;
+}
+
 main {
   height: 100vh;
-  -ms-scroll-snap-type: y mandatory;
-      scroll-snap-type: y mandatory;
+  -ms-scroll-snap-type: y proximity;
+      scroll-snap-type: y proximity;
   overflow-y: auto;
 }
 
 section {
   position: relative;
   scroll-snap-align: start;
-  height: 100vh;
+  min-height: 100vh;
 }
 
 section header {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   padding: 2em 0;
 }
 
@@ -66,7 +120,7 @@ section header #logo h5 {
 }
 
 section header h1 {
-  font-size: 2em;
+  font-size: 1.5rem;
 }
 
 section header .border {
@@ -102,6 +156,7 @@ section .dark-background {
   display: -ms-grid;
   display: grid;
   place-content: center;
+  padding: 1em 0;
 }
 
 #main_search .input {
@@ -131,7 +186,7 @@ section .dark-background {
 }
 
 #main_search .icon {
-  height: 1.5em;
+  height: 1.2em;
   overflow: visible;
   width: 1.5em;
   fill: none;
@@ -174,12 +229,105 @@ section .dark-background {
   margin-top: 0.1em;
 }
 
+#highlights .highlight-item:first-of-type, #highlights .highlight-item:nth-of-type(2) {
+  cursor: pointer;
+}
+
 .bebas {
   font-family: 'Bebas Neue', cursive;
   font-weight: normal;
   letter-spacing: 0.1em;
 }
 
+#top_transaction_container {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 1fr;
+      grid-template-columns: 1fr;
+  gap: 1em;
+  padding-bottom: 2em;
+  padding-top: 2em;
+}
+
+.transaction {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  padding: 2em 1.5em;
+  border-radius: 0.3em;
+  background: #fff;
+}
+
+.transaction .transaction-header {
+  margin-bottom: 2em;
+  -ms-grid-columns: auto 1fr;
+      grid-template-columns: auto 1fr;
+}
+
+.transaction .transaction-header h5 {
+  text-transform: capitalize;
+}
+
+.transaction .transaction-header h2 {
+  text-transform: uppercase;
+  margin-top: 0.2em;
+  letter-spacing: 0.06em;
+}
+
+.transaction .transaction-header .border {
+  height: 0.3em;
+  width: 50%;
+  background: var(--primary-color);
+}
+
+.transaction .transaction-header .icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.transaction .transaction-header .icon svg {
+  height: 1.5em;
+  width: 1.5em;
+  opacity: 0.6;
+  margin-left: auto;
+  cursor: pointer;
+}
+
+.transaction .transaction-header .icon svg:hover {
+  opacity: 1;
+}
+
+.transaction h5 {
+  font-weight: 500;
+  text-transform: uppercase;
+  margin-bottom: 0.4em;
+  opacity: 0.8;
+}
+
+.transaction h4 {
+  cursor: pointer;
+  color: var(--primary-color);
+  margin-bottom: 1.5em;
+  font-weight: 500;
+}
+
+.transaction h3 {
+  margin-top: 2em;
+  text-align: right;
+}
+
+#latest_transaction_section header {
+  -ms-grid-columns: 1fr auto;
+      grid-template-columns: 1fr auto;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  background: #ececec;
+  z-index: 2;
+}
+
 @media only screen and (min-width: 640px) {
   .padding {
     padding: 0 6vw;
@@ -194,6 +342,16 @@ section .dark-background {
     font-size: 16rem;
     line-height: 0.6em;
   }
+  section header h1 {
+    font-size: 2.5rem;
+  }
+}
+
+@media only screen and (min-width: 800px) {
+  #top_transaction_container {
+    -ms-grid-columns: (1fr)[2];
+        grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 @media only screen and (min-width: 1280px) {
@@ -210,6 +368,10 @@ section .dark-background {
   .input {
     width: 50vw !important;
   }
+  #top_transaction_container {
+    -ms-grid-columns: (1fr)[3];
+        grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 @media only screen and (min-width: 1920px) {
@@ -222,6 +384,10 @@ section .dark-background {
   .margin {
     margin: 0 12vw;
   }
+  #top_transaction_container {
+    -ms-grid-columns: (1fr)[4];
+        grid-template-columns: repeat(4, 1fr);
+  }
 }
 
 @media only screen and (min-width: 2048px) {
@@ -234,6 +400,10 @@ section .dark-background {
   .margin {
     margin: 0 24vw;
   }
+  #top_transaction_container {
+    -ms-grid-columns: (1fr)[6];
+        grid-template-columns: repeat(6, 1fr);
+  }
 }
 
 @media only screen and (max-width: 320px) {
@@ -241,4 +411,20 @@ section .dark-background {
     font-size: 14px;
   }
 }
+
+@media (hover: hover) {
+  button {
+    -webkit-transition: -webkit-box-shadow 0.3s;
+    transition: -webkit-box-shadow 0.3s;
+    transition: box-shadow 0.3s;
+    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
+  }
+  button:hover {
+    -webkit-box-shadow: 0.4em 0.6em 0 rgba(0, 0, 0, 0.2);
+            box-shadow: 0.4em 0.6em 0 rgba(0, 0, 0, 0.2);
+  }
+  #logo {
+    cursor: pointer;
+  }
+}
 /*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
index f98a9a9..a133252 100644
--- a/css/main.css.map
+++ b/css/main.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "main.scss"
     ],
diff --git a/css/main.scss b/css/main.scss
index d93c5ea..cbd41ba 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;500;600;700&display=swap');
 *,
 ::before,
 ::after{
@@ -22,16 +22,54 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 input[type=number] {
     -moz-appearance:textfield;
 }
+input:invalid{
+    outline: none;
+    box-shadow: none;
+}
+::-moz-focus-inner{
+    border: none;
+}
+button{
+    border: 1px solid rgba($color: #000000, $alpha: 0.2);
+    border-radius: 0.2em;
+    text-transform: uppercase;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    background: transparent;
+    cursor: pointer;
+    padding: 1em 1.5em;
+}
+.flex{
+    display: flex;
+}
+.grid{
+    display: grid;
+}
+.grid-2{
+    grid-template-columns: auto auto;
+    gap: 1em;
+}
+.hide{
+    opacity: 0;
+    pointer-events: none;
+}
+.hide-completely{
+    display: none !important;
+}
+.breakable{
+    word-break: break-all;
+}
 main{
     height: 100vh;
-    scroll-snap-type: y mandatory;
+    scroll-snap-type: y proximity;
     overflow-y: auto;
 }
 section{
     position: relative;
     scroll-snap-align: start;
-    height: 100vh;
+    min-height: 100vh;
     header{
+        align-items: center;
         padding: 2em 0;
         #logo{
             display: inline-block;
@@ -40,7 +78,7 @@ section{
             }
         }
         h1{
-            font-size: 2em;
+            font-size: 1.5rem;
         }
         .border{
             height: 0.4em;
@@ -67,6 +105,7 @@ section{
     position: relative;
     display: grid;
     place-content: center;
+    padding: 1em 0;
     .input{
         position: relative;
         display: grid;
@@ -88,7 +127,7 @@ section{
         font-weight: 500;
     }
     .icon{
-        height: 1.5em;
+        height: 1.2em;
         overflow: visible;
         width: 1.5em;
         fill: none;
@@ -124,6 +163,9 @@ section{
             letter-spacing: 0.1rem;
             margin-top: 0.1em;
         }
+        &:first-of-type,&:nth-of-type(2){
+            cursor: pointer;
+        }
     }
 }
 .bebas{
@@ -131,6 +173,75 @@ section{
     font-weight: normal;
     letter-spacing: 0.1em;
 }
+#top_transaction_container{
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1em;
+    padding-bottom: 2em;
+    padding-top: 2em;
+}
+.transaction{
+    flex-direction: column;
+    padding: 2em 1.5em;
+    border-radius: 0.3em;
+    background: #fff;
+    .transaction-header{
+        margin-bottom: 2em;
+        grid-template-columns: auto 1fr;
+        h5{
+            text-transform: capitalize;
+        }
+        h2{
+            text-transform: uppercase;
+            margin-top: 0.2em;
+            letter-spacing: 0.06em;
+        }
+        .border{
+            height: 0.3em;
+            width: 50%;
+            background: var(--primary-color);
+        }
+        .icon{
+            display: flex;
+            svg{
+                height: 1.5em;
+                width: 1.5em;
+                opacity: 0.6;
+                margin-left: auto;
+                cursor: pointer;
+                &:hover{
+                    opacity: 1;
+                }
+            }
+
+        }
+    } 
+    h5{
+        font-weight: 500;
+        text-transform: uppercase;
+        margin-bottom: 0.4em;
+        opacity: 0.8;
+    }  
+    h4{
+        cursor: pointer;
+        color: var(--primary-color);
+        margin-bottom: 1.5em;
+        font-weight: 500;
+    }
+    h3{
+        margin-top: 2em;
+        text-align: right;
+    }
+}
+#latest_transaction_section{
+    header{
+        grid-template-columns: 1fr auto;
+        position: sticky;
+        top: 0;
+        background: #ececec;
+        z-index: 2;
+    }
+}
 @media only screen and (min-width: 640px){
     .padding{
         padding: 0 6vw;
@@ -145,8 +256,18 @@ section{
         font-size: 16rem;
         line-height: 0.6em;
     }
+    section{
+        header{
+            h1{
+                font-size: 2.5rem;
+            }
+        }
+    }
 }
 @media only screen and (min-width: 800px){
+    #top_transaction_container{
+        grid-template-columns: repeat(2, 1fr);
+    }
 }
 @media only screen and (min-width: 1280px){
     .padding{
@@ -161,6 +282,9 @@ section{
     .input{
         width: 50vw !important;
     }
+    #top_transaction_container{
+        grid-template-columns: repeat(3, 1fr);
+    }
 }
 @media only screen and (min-width: 1920px){
     body{
@@ -172,6 +296,9 @@ section{
     .margin{
         margin: 0 12vw;
     }
+    #top_transaction_container{
+        grid-template-columns: repeat(4, 1fr);
+    }
 }
 @media only screen and (min-width: 2048px){
     body{
@@ -183,9 +310,23 @@ section{
     .margin{
         margin: 0 24vw;
     }
+    #top_transaction_container{
+        grid-template-columns: repeat(6, 1fr);
+    }
 }
 @media only screen and (max-width: 320px){
     body{
         font-size: 14px;
     }
+}
+@media (hover:hover){
+    button{
+        transition: box-shadow 0.3s;
+        &:hover{
+            box-shadow: 0.4em 0.6em 0 rgba($color: #000000, $alpha: 0.2);
+        }
+    }
+    #logo{
+        cursor: pointer;
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 767ec5e..7e71aa9 100644
--- a/index.html
+++ b/index.html
@@ -48,10 +48,93 @@
                 </div>
             </div>
         </section>
-        <section>
-            <header class="margin">
+        <section id="latest_transaction_section" class="dark-background">
+            <header class="margin grid grid-2">
                 <h1 class="bebas">Latest transactions</h1>
+                <button>View all</button>
             </header>
+            <div id="top_transaction_container" class="padding">
+                <div class="transaction">
+                    <div class="transaction-header grid grid-2">
+                        <div>
+                            <h5>Token transfer</h5>
+                            <h2>Rupee</h2>
+                            <div class="border"></div>
+                        </div>
+                        <div class="icon">
+                            <svg  viewBox="0 0 64 64">
+                                <title>More infomation icon</title>
+                                <path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <h5>From</h5>
+                    <h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
+                    <h5>to</h5>
+                    <h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
+                    <h3>₹0.000000007</h3>
+                </div>
+                <div class="transaction">
+                    <div class="transaction-header grid grid-2">
+                        <div>
+                            <h5>Token transfer</h5>
+                            <h2>Rupee</h2>
+                            <div class="border"></div>
+                        </div>
+                        <div class="icon">
+                            <svg  viewBox="0 0 64 64">
+                                <title>More infomation icon</title>
+                                <path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <h5>From</h5>
+                    <h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
+                    <h5>to</h5>
+                    <h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
+                    <h3>₹0.000000007</h3>
+                </div>
+                <div class="transaction">
+                    <div class="transaction-header grid grid-2">
+                        <div>
+                            <h5>Token transfer</h5>
+                            <h2>Rupee</h2>
+                            <div class="border"></div>
+                        </div>
+                        <div class="icon">
+                            <svg  viewBox="0 0 64 64">
+                                <title>More infomation icon</title>
+                                <path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <h5>From</h5>
+                    <h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
+                    <h5>to</h5>
+                    <h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
+                    <h3>₹0.000000007</h3>
+                </div>
+                <div class="transaction">
+                    <div class="transaction-header grid grid-2">
+                        <div>
+                            <h5>Token transfer</h5>
+                            <h2>Rupee</h2>
+                            <div class="border"></div>
+                        </div>
+                        <div class="icon">
+                            <svg  viewBox="0 0 64 64">
+                                <title>More infomation icon</title>
+                                <path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <h5>From</h5>
+                    <h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
+                    <h5>to</h5>
+                    <h4 class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
+                    <h3>₹0.000000007</h3>
+                </div>
+            </div>
         </section>
     </main>
 </body>