v0.0.3
This commit is contained in:
sairaj mote
parent
a26cb9c80f
commit
439fbdfbc1
198
css/main.css
198
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 */
|
||||
File diff suppressed because one or more lines are too long
151
css/main.scss
151
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;
|
||||
}
|
||||
}
|
||||
87
index.html
87
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user