Design by Spaceberry studios
HTML
<html>
<HEAd>
<link rel="stylesheet" href="STYLE.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
</HEAd>
<body>
<MAIN class="MAIN">
<div class="bg-wrap"><img class="bg" src="IMAGES/circlesBG .png" alt=""></div>
<DIV class="nav-wrap">
<div class="nav">
<div class="logo">
<svg width="100px" viewBox="0 0 110 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="LOGO">
<path d="M61.6617 15.3379H64.4829V9.24524H71.2662V6.79175H64.4829V2.99348H73.0858V0.545126H61.6617V15.3379Z" fill="currentColor"/>
<path d="M79.4967 0.545126H76.6757V15.3379H85.6173V12.8895H79.4967V0.545126Z" fill="currentColor"/>
<path d="M91.9166 0.545126H89.0956V15.3379H91.9166V0.545126Z" fill="currentColor"/>
<path d="M104.765 8.06982H98.9274V2.99347H104.765C105.424 3.08442 106.026 3.39067 106.461 3.8565C106.896 4.32233 107.135 4.91677 107.135 5.53165C107.135 6.14652 106.896 6.74095 106.461 7.20678C106.026 7.67261 105.424 7.97887 104.765 8.06982ZM104.765 0.545126H96.1062V15.3379H98.9274V10.5182H104.765C106.168 10.4766 107.5 9.93305 108.477 9.00243C109.454 8.07181 110 6.82713 110 5.53165C110 4.23616 109.454 2.99148 108.477 2.06086C107.5 1.13024 106.168 0.586673 104.765 0.545126Z" fill="currentColor"/>
<path d="M8.58701 13.3976C7.66113 13.3982 6.74864 13.1936 5.92631 12.8011C5.10399 12.4086 4.39589 11.8397 3.86158 11.1422C3.32727 10.4447 2.98239 9.63907 2.85593 8.79303C2.72947 7.94699 2.82515 7.08531 3.13492 6.28048C3.44468 5.47565 3.95946 4.75122 4.63596 4.16812C5.31246 3.58502 6.13089 3.16032 7.0224 2.92973C7.9139 2.69915 8.85241 2.66944 9.75895 2.84309C10.6655 3.01675 11.5136 3.38869 12.2318 3.92763L14.0125 1.91044C12.7509 0.966726 11.2253 0.371976 9.61235 0.195082C7.99941 0.0181878 6.36514 0.266376 4.89882 0.910915C3.4325 1.55545 2.19413 2.56997 1.32714 3.83695C0.460142 5.10393 0 6.57154 0 8.06981C0 9.56807 0.460142 11.0357 1.32714 12.3026C2.19413 13.5696 3.4325 14.5841 4.89882 15.2287C6.36514 15.8732 7.99941 16.1214 9.61235 15.9445C11.2253 15.7676 12.7509 15.1729 14.0125 14.2292L12.2318 12.2068C11.2008 12.9816 9.91129 13.404 8.58145 13.4028" fill="currentColor"/>
<path d="M38.7579 0.545126H35.9369V15.3379H38.7579V0.545126Z" fill="currentColor"/>
<path d="M54.3168 11.2316L45.7696 0.545126H42.9484V15.3379H45.7696V4.76943L54.3168 15.3379H57.1381V0.545126H54.3168V11.2316Z" fill="currentColor"/>
<path d="M24.3732 2.60341C25.4688 2.60499 26.5413 2.89368 27.4659 3.43582C28.3905 3.97796 29.129 4.75126 29.5955 5.66563C30.062 6.58001 30.2372 7.59782 30.1008 8.60052C29.9644 9.60321 29.5219 10.5495 28.8249 11.3292H32.1637C32.9973 9.70404 33.2079 7.86595 32.761 6.11596C32.3141 4.36597 31.2362 2.80782 29.7039 1.69673C28.1715 0.585642 26.2755 -0.0125256 24.3264 0.000198894C22.3773 0.0129234 20.4907 0.635796 18.9756 1.76678L20.7507 3.78911C21.779 3.01771 23.0644 2.59712 24.3899 2.59829" fill="currentColor"/>
<path d="M24.3742 13.2643C23.2776 13.2648 22.2036 12.9774 21.2776 12.4356C20.3517 11.8939 19.612 11.1202 19.1451 10.205C18.6782 9.28988 18.5034 8.27103 18.641 7.26759C18.7787 6.26416 19.2232 5.31759 19.9225 4.53855H16.5837C15.7525 6.16302 15.5433 7.99956 15.9905 9.74789C16.4377 11.4962 17.5148 13.0529 19.0456 14.1633C20.5764 15.2737 22.4703 15.8722 24.4177 15.8609C26.3651 15.8495 28.2508 15.2291 29.7663 14.101L27.9911 12.0786C26.9635 12.8471 25.6804 13.2658 24.3575 13.2643" fill="currentColor"/>
</svg>
</div>
<ul class="link">
<li>Buy/sell</li>
<li>Grow</li>
<li>Markets</li>
<li>Business</li>
<li>support</li>
</ul>
<div class="btn">
<button class="btn-s">Sign in</button>
<button class="btn-p">Sign up</button>
</div>
</div>
</DIV>
<div class="hero">
<img class="blur2" src="IMAGES/BLUR.png" alt="">
<img class="blur1" src="IMAGES/BLUR 2.png" alt="">
<img class="sphr1" src="IMAGES/sphere.png" alt="">
<img class="sphr2" src="IMAGES/sphere2.png" alt="">
<img class="str1" src="IMAGES/star-img.png" alt="">
<img class="str2" src="IMAGES/star-img2.png" alt="">
<img class="str3" src="IMAGES/star-img3.png" alt="">
<DIV class="text">
<H1>We make crypto <br>clear and simple</H1>
<P>Buy, sell, and grow your crypto with CoinFlip, the platform brdedicated brto every <BR>trader at every level.</P>
<BUtton class="BTN-P2"> Get Started</BUtton>
</DIV>
</div>
</MAIN>
</body>
</html>
CSS
.btn-p {
font-family: "Inter", sans-serif;
padding: 12px 22px;
font-size: 16px;
font-weight: 500;
border-radius: 10px;
border: solid 1px #0B0B0F;
color: aliceblue;
background-image: linear-gradient(#18C8FF,#933FFE);
margin-left: 10PX;
}
body{
background-color: #0B0B0F;
justify-content: center;
overflow: hidden;
}
.LOGO {
color: aliceblue;
}
.btn-s {
font-family: "Inter", sans-serif;
padding: 11px 21px;
font-size: 16px;
font-weight: 500;
border-radius: 10px;
border: solid 1px;
color: #ffffff;
background-color: transparent;
}
.link {
font-family: "Inter", sans-serif;
font-weight: 400;
color: aliceblue;
}
ul {
text-decoration: none;
list-style: none;
display: flex;
}
li {
padding: 0px 20px;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
max-width: 1400PX;
padding: 0PX 20PX;
width: 100%;
}
.nav-wrap {
display: flex;
justify-content: center;
width: 100%;
}
.hero {
display: flex;
align-items: center;
justify-content: center;
padding: 200px 0px;
}
.text {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-family: "Inter", sans-serif;
font-weight: 900;
font-size: 85px;
color: aliceblue;
margin-bottom: 20px;
text-align: center;
}
p {
font-family: "Inter", sans-serif;
font-weight: lighter;
font-size: 12px;
color: aliceblue;
text-align: center;
}
.BTN-P2 {
font-family: "Inter", sans-serif;
padding: 15px 40px;
font-size: 16px;
font-weight: 400;
border-radius: 10px;
border: none;
color: aliceblue;
background-image: linear-gradient(#18C8FF,#933FFE);
margin-left: 10PX;
}
.blur1 {
position: absolute;
left: -120px;
top: -200px;
z-index: -1;
}
.blur2 {
position: absolute;
z-index: -1;
right: -320px;
bottom: -100px;
}
.sphr1 {
position: absolute;
z-index: -1;
right: -100;
bottom: 120px;
}
.sphr2 {
position: absolute;
z-index: -1;
left: 100px;
top: 500;
}
.str1 {
position: absolute;
z-index: -1;
left: 200px;
top: 250px;
}
.str2 {
position: absolute;
z-index: -1;
right: 20px;
bottom: 30px;
}
.str3 {
position: absolute;
z-index: -1;
top: 200px;
right: 300px;
}
.bg {
position: absolute;
z-index: -2;
top: -150px;
}
.bg-wrap {
display: flex;
justify-content: center;
}
