Skip to content

Commit

Permalink
SCSS installed
Browse files Browse the repository at this point in the history
  • Loading branch information
@kingsleyokonkwo
kingsleyokonkwo committed Apr 3, 2023
1 parent f4354c1 commit ae08702
Show file tree
Hide file tree
Showing 43 changed files with 1,852 additions and 1,576 deletions.
209 changes: 110 additions & 99 deletions src/components/Home/Landing.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,108 +2,119 @@ $background-color_1: #2c3137;

.landing__container {
margin: 30px;
}
.landing__hero {
display: flex;
align-items: center;
gap: 16px;
}
.balance {
background-color: $background-color_1;
width: 33%;
height: 200px;
border-radius: 24px;
box-sizing: border-box;
padding: 10px;
}
.completed__task {
background-color: $background-color_1;
width: 33%;
height: 200px;
border-radius: 24px;
box-sizing: border-box;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
h3 {
font-size: 40px;
font-weight: 800;
}
p {
margin: 0;
font-size: 14px;
font-weight: 400;
}
img {
height: 48px;
width: 48px;
margin-bottom: 15px;
}
}
.get__started {
background-color: $background-color_1;
width: 33%;
height: 200px;
border-radius: 24px;
box-sizing: border-box;
padding: 10px;
padding-top: 50px;
padding-left: 30px;
background-image: url("../../data/nftgrid.png");
background-size: cover;
background-position: center;
h3 {
font-size: 24px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 16px;
}
}
.account__bal {
padding: 0px 27px 0;
font-weight: 600;
font-size: 16px;
}
.balance__detail {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
img {
height: 40px;
width: 40px;
margin-bottom: 6px;
}
h3 {
font-size: 40px;
font-weight: 800;
}
p {
margin: 0;
font-size: 14px;
font-weight: 400;

.landing__hero {
display: flex;
align-items: center;
gap: 16px;

.balance {
background-color: $background-color_1;
width: 33%;
height: 200px;
border-radius: 24px;
box-sizing: border-box;
padding: 10px;

&__account {
padding: 0px 27px 0;
font-weight: 600;
font-size: 16px;
}

&__detail {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
img {
height: 40px;
width: 40px;
margin-bottom: 6px;
}
h3 {
font-size: 40px;
font-weight: 800;
}
p {
margin: 0;
font-size: 14px;
font-weight: 400;
}
}
}

.completed__task {
background-color: $background-color_1;
width: 33%;
height: 200px;
border-radius: 24px;
box-sizing: border-box;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
h3 {
font-size: 40px;
font-weight: 800;
}
p {
margin: 0;
font-size: 14px;
font-weight: 400;
}
img {
height: 48px;
width: 48px;
margin-bottom: 15px;
}
}

.get__started {
background-color: $background-color_1;
width: 33%;
height: 200px;
border-radius: 24px;
box-sizing: border-box;
padding: 10px;
padding-top: 50px;
padding-left: 30px;
background-image: url("../../data/nftgrid.png");
background-size: cover;
background-position: center;
&Landing {
font-size: 24px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 16px;
}
}
}
}
.landing__ad {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $background-color_1;
margin-top: 33px;
padding: 33px 28px;
border-radius: 24px;
background-image: url("../../data/pink.png");
background-size: cover;
background-position: center;
h3 {
width: 333px;
font-size: 24px;
font-weight: 800;
line-height: 1;

.landing__ad {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $background-color_1;
margin-top: 33px;
padding: 33px 28px;
border-radius: 24px;
background-image: url("../../data/pink.png");
background-size: cover;
background-position: center;
h3 {
width: 333px;
font-size: 24px;
font-weight: 800;
line-height: 1;
}
}
}



//MEDIA QUERY 1024px
@media screen and (max-width: 1024px) {
.get__started {
h3 {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Home/LandingHero.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function LandingHero() {
<div className={classes.landing__container}>
<div className={classes.landing__hero}>
<div className={classes.balance}>
<p className={classes.account__bal}>Account balance</p>
<p className={classes.balance__account}>Account balance</p>
<div className={classes.balance__detail}>
<img src={diamond} alt="diamond icon" />
<h3>36</h3>
Expand All @@ -25,7 +25,7 @@ export default function LandingHero() {
<div
className={classes.get__started}
>
<h3 className={classes.getStarted__landing}>
<h3 className={classes.get__startedLanding}>
Get Started with Cryptocurrency
</h3>
<Button>List Nft Project</Button>
Expand Down
51 changes: 25 additions & 26 deletions src/components/Home/Referral.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,29 @@
import React from 'react'
import copy from "../../data/copy.png"
import twitter from "../../data/twitter.png"
import facebook from "../../data/facebook.png"
import instagram from "../../data/instagram.png"
import classes from "./Referral.module.scss"
import React from "react";
import copy from "../../data/copy.png";
import twitter from "../../data/twitter.png";
import facebook from "../../data/facebook.png";
import instagram from "../../data/instagram.png";
import classes from "./Referral.module.scss";

export default function Referral() {
return (
<div className={classes.referral__container}>
<div className={classes.referral__link}>
<h3>Referral Link</h3>
<div className={classes.link}>
<p>https://www.google.com/se...k&oq=</p>
<img src={copy} alt='copy logo' />
</div>
</div>
<p className={classes.referral__or}>Or</p>
<div className={classes.contact}>
<h4>Share on Social Media</h4>
<div className={classes.socials}>
<img src={facebook} alt='facebook' />
<img src={instagram} alt='instagram' />
<img src={twitter} alt='twitter' />
</div>
</div>

return (
<div className={classes.referral__container}>
<div className={classes.referral__link}>
<h3>Referral Link</h3>
<div className={classes.link}>
<p>https://www.google.com/se...k&oq=</p>
<img src={copy} alt="copy logo" />
</div>
</div>
<p className={classes.referral__or}>Or</p>
<div className={classes.contact}>
<h4>Share on Social Media</h4>
<div className={classes.socials}>
<img src={facebook} alt="facebook" />
<img src={instagram} alt="instagram" />
<img src={twitter} alt="twitter" />
</div>
)
</div>
</div>
);
}
Loading

0 comments on commit ae08702

Please sign in to comment.