React инициализация
This commit is contained in:
grinikita
@@ -0,0 +1,163 @@
|
||||
import React from "react";
|
||||
|
||||
export const arrowEl = <svg className="hero-dots" width="120" height="400" viewBox="0 0 120 400" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.5">
|
||||
<rect y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="207.423" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="226.36" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="245.3" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="264.238" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="283.176" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="302.114" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="321.052" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="339.989" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="339.991" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="339.991" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="339.991" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="339.991" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="339.991" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="339.991" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="358.929" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="377.866" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="396.805" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="396.806" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="396.806" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="396.806" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="396.806" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="396.806" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="396.806" width="2.83607" height="2.84073" fill="black"/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<rect width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="18.9375" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="37.877" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="56.8154" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="75.7529" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="94.6914" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="113.629" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="132.566" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="132.568" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="132.568" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="132.568" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="132.568" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="132.568" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="132.568" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="151.506" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="170.443" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect y="189.382" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="18.9062" y="189.383" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="37.8145" y="189.383" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="56.7217" y="189.383" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="75.6279" y="189.383" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="94.5361" y="189.383" width="2.83607" height="2.84073" fill="black"/>
|
||||
<rect x="113.443" y="189.383" width="2.83607" height="2.84073" fill="black"/>
|
||||
</g>
|
||||
</svg>
|
||||
@@ -0,0 +1,61 @@
|
||||
import React from "react";
|
||||
import {arrowEl} from "./arrow";
|
||||
import './style.css'
|
||||
|
||||
const Banner = () => {
|
||||
return (
|
||||
<div className="container hero">
|
||||
<div className="hero-main">
|
||||
<div className="hero-line"></div>
|
||||
<h1 className="hero-title">Discover And Create NFTs</h1>
|
||||
<p className="hero-description">Discover, Create and Sell NFTs On Our NFT Marketplace With Over
|
||||
Thousands Of NFTs
|
||||
And Get a <span className="hero-description__bold">$20 bonus</span>.</p>
|
||||
<div className="hero-buttons">
|
||||
<button className="button">Explore More</button>
|
||||
<button className="button button-secondary">create NFT</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="hero-cubs">
|
||||
<div className="hero-cub1">
|
||||
<svg className="cub1-arrow" width="131" height="136" viewBox="0 0 131 136" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M15.6507 43.2949C32.4339 30.7255 51.9743 23.0115 72.683 28.6293C91.3749 33.7001 103.143 49.6308 90.5396 69.3323C84.5735 78.6586 71.8706 85.1866 61.8852 79.874C50.7606 73.9554 59.5288 59.017 66.6505 54.7089C83.2839 44.6468 106.696 49.3237 118.212 68.8676C131.849 92.0121 108.785 103.532 108.769 103.344"
|
||||
stroke="black" stroke-width="3.37884" stroke-miterlimit="1.5" stroke-linecap="round"
|
||||
stroke-linejoin="round"/>
|
||||
<path
|
||||
d="M19.2682 18.3819C19.8774 20.8064 19.5256 23.2335 19.2862 25.677C18.5006 33.7006 15.3552 42.0307 9.71151 47.2931C17.1379 44.0369 27.7921 42.6188 34.5374 48.3345"
|
||||
stroke="black" stroke-width="3.37884" stroke-miterlimit="1.5" stroke-linecap="round"
|
||||
stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div className="hero-cub2"></div>
|
||||
</div>
|
||||
<div className="lr-button">
|
||||
<button className="lr-button-left">
|
||||
<svg width="27" height="27" viewBox="0 0 27 27" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M11.2397 8.39036C10.8023 7.98657 10.1203 8.01384 9.71654 8.45128L6.23402 12.224C5.85287 12.6369 5.85287 13.2733 6.23401 13.6862L9.71653 17.459C10.1203 17.8965 10.8023 17.9237 11.2397 17.5199C11.6772 17.1161 11.7045 16.4342 11.3007 15.9967L9.48802 14.033L19.9611 14.033C20.5565 14.033 21.0391 13.5504 21.0391 12.9551C21.0391 12.3598 20.5565 11.8772 19.9611 11.8772L9.48805 11.8772L11.3007 9.91356C11.7044 9.47612 11.6772 8.79416 11.2397 8.39036Z"
|
||||
fill="#929292"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div className="lr-button-delimiter"></div>
|
||||
<button className="lr-button-right">
|
||||
<svg width="27" height="27" viewBox="0 0 27 27" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M15.7603 8.39036C16.1977 7.98657 16.8797 8.01384 17.2835 8.45128L20.766 12.224C21.1471 12.6369 21.1471 13.2733 20.766 13.6862L17.2835 17.459C16.8797 17.8965 16.1977 17.9237 15.7603 17.5199C15.3228 17.1161 15.2955 16.4342 15.6993 15.9967L17.512 14.033L7.03886 14.033C6.44354 14.033 5.96094 13.5504 5.96094 12.9551C5.96094 12.3598 6.44354 11.8772 7.03886 11.8772L17.5119 11.8772L15.6993 9.91356C15.2956 9.47612 15.3228 8.79416 15.7603 8.39036Z"
|
||||
fill="#23262F"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{arrowEl}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Banner
|
||||
@@ -0,0 +1,115 @@
|
||||
.hero {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding-top: 54px;
|
||||
padding-bottom: 143px;
|
||||
}
|
||||
|
||||
.hero-main {
|
||||
margin-right: 48px;
|
||||
}
|
||||
|
||||
.hero-line {
|
||||
width: 195px;
|
||||
border-top: 1px solid #201F1F;
|
||||
opacity: 0.2;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 75px;
|
||||
line-height: 120%;
|
||||
letter-spacing: -3px;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-family: var(--font-inter);
|
||||
padding: 0;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.hero-description__bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
margin-top: 45px;
|
||||
display: flex;
|
||||
gap: 23px;
|
||||
}
|
||||
|
||||
.hero-cub1 {
|
||||
position: relative;
|
||||
width: 391px;
|
||||
height: 394px;
|
||||
border-radius: 25px;
|
||||
background: center / cover no-repeat url('../../../images/img.png'), #F8F8F8;
|
||||
}
|
||||
.hero-cub1::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 25px;
|
||||
background: center / cover no-repeat url('../../../images/img.png'), #F8F8F8;
|
||||
transform: translateY(25px);
|
||||
|
||||
filter: blur(83.7px);
|
||||
}
|
||||
|
||||
.hero-cub2 {
|
||||
position: absolute;
|
||||
top: 181px;
|
||||
left: calc(100% + 38px);
|
||||
width: 320px;
|
||||
height: 322px;
|
||||
border-radius: 25px;
|
||||
background: center / cover no-repeat url('../../../images/img_1.png'), #F8F8F8;
|
||||
}
|
||||
.hero-cub2::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 25px;
|
||||
background: center / cover no-repeat url('../../../images/img_1.png'), #F8F8F8;
|
||||
transform: translateY(25px);
|
||||
|
||||
filter: blur(83.7px);
|
||||
}
|
||||
|
||||
.cub1-arrow {
|
||||
position: absolute;
|
||||
left: calc(100% + 23px);
|
||||
top: 41px;
|
||||
transform: rotate(-3.08deg);
|
||||
}
|
||||
|
||||
.hero-dots {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-cubs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.hero-cubs .lr-button {
|
||||
margin-top: 71px;
|
||||
}
|
||||
Reference in New Issue
Block a user