v0.0.1

css/main.css

@@ -0,0 +1,240 @@
+@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;500;700&display=swap");
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+}
+
+:root {
+  --primary-color: #00A7B4;
+}
+
+body {
+  font-size: 16px;
+}
+
+input[type=text]::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+input[type=text]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+main {
+  height: 100vh;
+  -ms-scroll-snap-type: y mandatory;
+      scroll-snap-type: y mandatory;
+  overflow-y: auto;
+}
+
+section {
+  position: relative;
+  scroll-snap-align: start;
+  height: 100vh;
+}
+
+section header {
+  padding: 2em 0;
+}
+
+section header #logo {
+  display: inline-block;
+}
+
+section header #logo h5 {
+  font-weight: normal;
+}
+
+section header h1 {
+  font-size: 3em;
+}
+
+section header .border {
+  height: 0.4em;
+  width: 50%;
+  background: var(--primary-color);
+}
+
+section .dark-background {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-rows: auto 1fr;
+      grid-template-rows: auto 1fr;
+}
+
+.padding {
+  padding: 0 1rem;
+}
+
+.margin {
+  margin: 0 1rem;
+}
+
+#first_section {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-rows: 1fr auto;
+      grid-template-rows: 1fr auto;
+}
+
+#main_search {
+  position: relative;
+  display: -ms-grid;
+  display: grid;
+  place-content: center;
+}
+
+#main_search .input {
+  position: relative;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: auto 1fr;
+      grid-template-columns: auto 1fr;
+  z-index: 1;
+  width: calc(100vw - 4rem);
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background: white;
+  padding: 1em;
+  gap: 1em;
+  border-radius: 0.4em;
+}
+
+#main_search input {
+  border: none;
+  width: 100%;
+  background: transparent;
+  outline: none;
+  font-size: 1em;
+  font-weight: 500;
+}
+
+#main_search .icon {
+  height: 1.5em;
+  overflow: visible;
+  width: 1.5em;
+  fill: none;
+  stroke: black;
+  opacity: 0.6;
+  stroke-width: 6;
+}
+
+#main_search .watermark {
+  z-index: 0;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font-size: 16rem;
+  text-align: right;
+  opacity: 0.1;
+  line-height: 0.6em;
+}
+
+.dark-background {
+  background: #ececec;
+}
+
+#highlights {
+  padding: 4em 0;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: auto auto;
+      grid-template-columns: auto auto;
+  gap: 1em 2em;
+}
+
+#highlights .highlight-item h4 {
+  opacity: 0.8;
+}
+
+#highlights .highlight-item h1 {
+  font-size: 2em;
+  letter-spacing: 0.1rem;
+  margin-top: 0.1em;
+}
+
+.bebas {
+  font-family: 'Bebas Neue', cursive;
+  font-weight: normal;
+  letter-spacing: 0.1em;
+}
+
+@media only screen and (min-width: 640px) {
+  .padding {
+    padding: 0 6vw;
+  }
+  .margin {
+    margin: 0 6vw;
+  }
+  .input {
+    width: 80vw !important;
+  }
+}
+
+@media only screen and (min-width: 1280px) {
+  .padding {
+    padding: 0 8vw;
+  }
+  .margin {
+    margin: 0 8vw;
+  }
+  #highlights {
+    -ms-grid-columns: (auto)[4];
+        grid-template-columns: repeat(4, auto);
+  }
+  .input {
+    width: 50vw !important;
+  }
+}
+
+@media only screen and (min-width: 1920px) {
+  body {
+    font-size: 24px;
+  }
+  .padding {
+    padding: 0 12vw;
+  }
+  .margin {
+    margin: 0 12vw;
+  }
+}
+
+@media only screen and (min-width: 2048px) {
+  body {
+    font-size: 24px;
+  }
+  .padding {
+    padding: 0 24vw;
+  }
+  .margin {
+    margin: 0 24vw;
+  }
+}
+
+@media only screen and (max-width: 320px) {
+  body {
+    font-size: 14px;
+  }
+}
+/*# sourceMappingURL=main.css.map */

css/main.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "main.scss"
+    ],
+    "names": [],
+    "file": "main.css"
+}

css/main.scss

@@ -0,0 +1,187 @@
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;500;700&display=swap');
+*,
+::before,
+::after{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+} 
+:root{
+    --primary-color: #00A7B4;
+}
+body{
+    font-size: 16px;
+}
+input[type=text]::-ms-clear {  display: none; width : 0; height: 0; }
+input[type=text]::-ms-reveal {  display: none; width : 0; height: 0; }
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration { display: none; }
+input[type=number] {
+    -moz-appearance:textfield;
+}
+main{
+    height: 100vh;
+    scroll-snap-type: y mandatory;
+    overflow-y: auto;
+}
+section{
+    position: relative;
+    scroll-snap-align: start;
+    height: 100vh;
+    header{
+        padding: 2em 0;
+        #logo{
+            display: inline-block;
+            h5{
+                font-weight: normal;
+            }
+        }
+        h1{
+            font-size: 3em;
+        }
+        .border{
+            height: 0.4em;
+            width: 50%;
+            background: var(--primary-color);
+        }
+    }
+    .dark-background{
+        display: grid;
+        grid-template-rows: auto 1fr;
+    }
+}
+.padding{
+   padding: 0 1rem;
+}
+.margin{
+   margin: 0 1rem;
+}
+#first_section{
+    display: grid;
+    grid-template-rows: 1fr auto;
+}
+#main_search{
+    position: relative;
+    display: grid;
+    place-content: center;
+    .input{
+        position: relative;
+        display: grid;
+        grid-template-columns: auto 1fr;
+        z-index: 1;
+        width: calc(100vw - 4rem);
+        align-items: center;
+        background: white;
+        padding: 1em;
+        gap: 1em;
+        border-radius: 0.4em;
+    }
+    input{
+        border: none;
+        width: 100%;
+        background: transparent;
+        outline: none;
+        font-size: 1em;
+        font-weight: 500;
+    }
+    .icon{
+        height: 1.5em;
+        overflow: visible;
+        width: 1.5em;
+        fill: none;
+        stroke: black;
+        opacity: 0.6;
+        stroke-width: 6;
+    }
+    .watermark{
+        z-index: 0;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        font-size: 16rem;
+        text-align: right;
+        opacity: 0.1;
+        line-height: 0.6em;
+    }
+}
+.dark-background{
+    background: #ececec;
+}
+#highlights{
+    padding: 4em 0;
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 1em 2em;
+    .highlight-item{
+        h4{
+            opacity: 0.8;
+        }   
+        h1{
+            font-size: 2em;
+            letter-spacing: 0.1rem;
+            margin-top: 0.1em;
+        }
+    }
+}
+.bebas{
+    font-family: 'Bebas Neue', cursive;
+    font-weight: normal;
+    letter-spacing: 0.1em;
+}
+@media only screen and (min-width: 640px){
+    .padding{
+        padding: 0 6vw;
+    }
+    .margin{
+        margin: 0 6vw;
+    }
+    .input{
+        width: 80vw !important;
+    }
+}
+@media only screen and (min-width: 800px){
+}
+@media only screen and (min-width: 1280px){
+    .padding{
+       padding: 0 8vw;
+    }
+    .margin{
+       margin: 0 8vw;
+    }
+    #highlights{
+        grid-template-columns: repeat(4, auto);
+    }
+    .input{
+        width: 50vw !important;
+    }
+}
+@media only screen and (min-width: 1920px){
+    body{
+        font-size: 24px;
+    }
+    .padding{
+        padding: 0 12vw;
+    }
+    .margin{
+        margin: 0 12vw;
+    }
+}
+@media only screen and (min-width: 2048px){
+    body{
+        font-size: 24px;
+    }
+    .padding{
+        padding: 0 24vw;
+    }
+    .margin{
+        margin: 0 24vw;
+    }
+}
+@media only screen and (max-width: 320px){
+    body{
+        font-size: 14px;
+    }
+}

index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FLO Scout</title>
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+    <main>
+        <section id="first_section">
+            <div class="dark-background">
+                <header class="margin">
+                    <div id="logo">
+                        <h5>RanchiMall</h5>
+                        <h1 class="bebas">FLO SCOUT</h1>
+                        <div class="border"></div>
+                    </div>
+                </header>
+                <div id="main_search">
+                    <label class="input margin">
+                        <svg class="icon" viewBox="0 0 64 64">
+                            <title>Search icon</title>
+                            <path d="M60.7,63.72a3,3,0,0,1-2.14-.88L42.22,46.5a3,3,0,0,1-.77-2.91l0-.16-1.61-1.6-.18-.2-.24.12a23.66,23.66,0,1,1,2.29-2.29l-.18.21.22.2.07,0,1.57,1.58.16,0a3,3,0,0,1,2.91.77L62.84,58.56a3,3,0,0,1-2.14,5.16Z" transform="translate(0 0)"/>
+                            <path d="M23.93.55A23.36,23.36,0,0,1,41.54,39.28l-.36.41.41.36.09.07,1.45,1.45.22.22.31-.08a2.84,2.84,0,0,1,.72-.09,2.69,2.69,0,0,1,1.92.79L62.64,58.75a2.75,2.75,0,1,1-3.89,3.89L42.41,46.3a2.73,2.73,0,0,1-.7-2.64l.08-.31-.22-.22-1.45-1.45,0,0-.05,0-.36-.41-.41.36A23.37,23.37,0,1,1,23.93.55m0-.55A23.93,23.93,0,1,0,39.64,42l0,.07,1.49,1.5A3.28,3.28,0,0,0,42,46.69L58.36,63A3.3,3.3,0,0,0,63,58.36L46.69,42a3.24,3.24,0,0,0-2.31-1,3.56,3.56,0,0,0-.86.11L42,39.69l-.07,0A23.91,23.91,0,0,0,23.93,0Z" transform="translate(0 0)"/>
+                        </svg>
+                        <input type="search" placeholder="Search Block, Transactions, address, token or contract">
+                    </label>
+                    <h1 class="bebas watermark">flo scout</h1>
+                </div>
+            </div>
+            <div id="highlights" class="margin">
+                <div class="highlight-item">
+                    <h4 class="bebas">top token</h4>
+                    <h1>RMT</h1>
+                </div>
+                <div class="highlight-item">
+                    <h4 class="bebas">top contrat</h4>
+                    <h1>India elections 2019</h1>
+                </div>
+                <div class="highlight-item">
+                    <h4 class="bebas">total transactions</h4>
+                    <h1>88</h1>
+                </div>
+                <div class="highlight-item">
+                    <h4 class="bebas">Wallet addresses</h4>
+                    <h1>48</h1>
+                </div>
+            </div>
+        </section>
+        <section>
+            <header class="margin">
+                <h1 class="bebas">Latest transactions</h1>
+            </header>
+        </section>
+    </main>
+</body>
+</html>