Hi dear welcome to Ascode Blog . In this post we are going to learn How to make crypto token launching website design. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the file with your browser.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RippleMillionar Club</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="header">
<div class="tittle">
Ripple<br>Millionaires<br>Club
<p>
The Ripple Millionaires Club is a 8% reward token based on
the Binance Smart Chain network
</p>
</div>
</div>
<div class="about" >
<div class="col-1" id="about">
<img src="/logo.png" alt="">
</div>
<div class="col-2">
<div class="tittle">
About Ripple<br>Millionaires Club<br>($RMC):
</div>
<p>
Ripple Millionaires Club is an easy to relate to transparent community-focused decentralized crypto.
We are here to make both your and our investments grow together. Ripple Millionaires Club is aiming for steady growth together with building a strong community.
We have implemented bots and whales preventive measures in our smart contract to strengthen RMC as a strong and reliable investment.
The more you hold RMC the more you will be rewarded in XRP. This is the project you have been looking for.
</p>
</div>
</div>
<div class="roadmap" >
<h2>Roadmap:</h2>
<div class="card-container" id="roadmap">
<div class="card">
<div class="tittle">Phase 1:</div>
<ul>
<li> <span><img src="/list-style.png"></span> Website launch</li>
<li><img src="/list-style.png"></span> Token launch</li>
<li><img src="/list-style.png"></span> Influencer promotions</li>
<li><img src="/list-style.png"></span> Telegram & Twitter</li>
<li><img src="/list-style.png"></span> Telegram & Twitter Community build</li>
</ul>
</div>
<div class="card">
<div class="tittle">Phase 2:</div>
<ul>
<li><span><img src="/list-style.png"></span> Coingecko listing</li>
<li><img src="/list-style.png"></span> Coinmarketcap listing</li>
<li><img src="/list-style.png"></span> Influencer promotions</li>
<li><img src="/list-style.png"></span> Websites promotions</li>
<li><img src="/list-style.png"></span> Giveaways</li>
</ul>
</div>
<div class="card">
<div class="tittle">Phase 3:</div>
<ul>
<li> <span><img src="/list-style.png"></span> Renounce ownership</li>
<li><img src="/list-style.png"></span> RMC rocketship landing to the moon and holders drowning in XRP</li>
</ul>
</div>
</div>
</div>
<div class="team" id="team" >
<div class="col-1" >
<div class="tittle">The Team:</div>
</div>
<div class="col-2">
<p>
We are a team of developers, marketing professionals and investors spread around Europe.
We aim to make our community Millionaires for the love of Ripple, gold and lambos as well as to share our vision and ambitions with our community.</p>
</div>
</div>
<div class="tokenomics"id="tokenomics" >
<h2>Tokenomics:</h2>
<div class="token-container" >
<div class="token-card active">
<p>Total Supply of 1,000,000,000<br>
A 15% total fee is applied to each transaction.</p>
</div>
<div class="token-card">
<h2><span><img src="/list-style.png"></span> 8% rewards as XRP (Ripple</h2>
<h2><span><img src="/list-style.png"></span> 4% is sent to the marketing & development wallet</h2>
<h2><span><img src="/list-style.png"></span> 3% is sent to the liquidity pool</h2>
</div>
<div class="token-card">
<h2><span><img src="/list-style.png"></span> Anti Whale Mechanics:</h2>
<h2><span><img src="/list-style.png"></span> 2% max wallet</h2>
<h2><span><img src="/list-style.png"></span> 2% max wallet</h2>
</div>
</div>
</div>
<div class="fotter">
<div class="col-1">
@copyright 2021 RippleMillionarClub Allright receverd
</div>
<div class="col-2">
<h2>Flow Us</h2>
<div class="content">
<a href="#"> <i class="fab fa-telegram-plane"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
<div class="navbar">
<div class="logo"><img src="/logo.png" ></div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#roadmap">Roadmap</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#tokenomics">Tokenomics</a></li>
</ul>
</nav>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
width: 100%;
background:#000;
}
.header {
position: relative;
width: 100%;
height: 100vh;
background-image: url(/header-img.png);
background-size: cover;
text-align: center;
}
.header .tittle {
position: relative;
font-size: 6rem;
font-weight: 500;
letter-spacing: 1px;
color: #ab9455;
text-align: justify;
margin: 0 8%;
top: 30vh;
}
.tittle p {
margin: 10px;
font-size: 1.5rem;
font-weight: 500;
color: #e2dddd;
width: 500px;
}
.about {
position: relative;
display: flex;
margin: 20vh 8%;
}
.about .col-1 {
float: left;
width: 400px;
margin-right: 20px;
}
.col-1 img {
width: 100%;
}
.about .col-2 {
float: right;
width: 700px;
margin-left: 20px;
}
.col-2 .tittle {
font-size: 5rem;
font-weight: 500;
letter-spacing: 1px;
color: #ab9455;
text-align: justify;
}
.col-2 p{
margin: 10px 0;
font-size: 1.2rem;
font-weight: 500;
color: #e2dddd;
}
.roadmap {
position: relative;
height: 700px;
margin: 20px 8%;
}
.roadmap h2 {
font-size: 4rem;
font-weight: 500;
letter-spacing: 1px;
color: #fff;
margin: 0 auto;
}
.roadmap .card-container {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
}
.card-container .card {
width: 300px;
text-align: justify;
margin: 0 20px;
}
.card .tittle {
font-size: 3rem;
font-weight: 500;
letter-spacing: 1px;
color: #e2dddd;
margin: 15px;
}
.card ul {
display: block;
}
.card ul li {
list-style: none;
margin: 5px 0;
font-size: 1.5rem;
color: #e2dddd;
}
.card ul li span img {
margin: 0;
margin-right: 5px;
}
.team {
position: relative;
display: flex;
margin: 20vh 0;
background: #1a1919;
padding: 50px 0;
justify-content: space-between;
width: 100%;
}
.team .col-1 {
float: left;
margin: 0 8%;
}
.col-1 .tittle {
font-size: 3.5rem;
color: #e2dddd;
font-weight: 500;
letter-spacing: 1px;
width: 300px;
}
.team .col-2 {
float: right;
margin: 0 8%;
}
.col-2 p {
font-size: 1.3rem;
color: #e2dddd;
font-weight: 500;
}
.tokenomics {
position: relative;
margin: 20vh 0;
width: 100%;
}
.tokenomics h2 {
margin: 20px 8%;
font-size: 4rem;
color: #e2dddd;
font-weight: 500;
letter-spacing: 1px;
}
.tokenomics .token-container {
display: flex;
justify-content: center;
align-items: center;
margin: 10px 5%;
}
.token-container .token-card {
margin: 0 30px;
width: 300px;
}
.token-container .token-card.active {
margin-right: 50px;
}
.token-card p {
font-size: 1.3rem;
color: #e2dddd;
margin-bottom: 30px;
}
.token-card h2 {
font-size: 1.3rem;
color: #e2dddd;
font-weight: 500;
margin: 5px 0 ;
}
.token-card h3 {
font-size: 1rem;
color: #e2dddd;
font-weight: 500;
margin: 5px 0 ;
}
.fotter {
padding: 20px;
width: 100%;
text-align: center;
justify-content: space-between;
align-items: center;
color: #e2dddd;
display: flex;
background: #161616;
}
.fotter .col-1 {
margin-left: 8%;
font-size: 1.5rem;
font-weight: 500;
color: #e2dddd;
}
.fotter .col-2 {
margin-right: 8%;
display: flex;
}
.fotter .col-2 h2 {
font-size: 1.5rem;
font-weight: 500;
color: #e2dddd;
}
.fotter .col-2 .content {
display: flex;
margin-left: 10px;
}
.fotter .col-2 .content a {
text-decoration: none;
}
.fotter .col-2 .content .fab {
font-size: 2rem;
color:#ab9455 ;
margin-right: 5px;
}
.navbar {
position: absolute;
z-index: 100;
padding: 20px;
width: 100%;
background: #000;
display: flex;
justify-content: space-between;
top: 0;
left: 0;
}
.navbar .logo {
margin: 0;
width: 100px;
height: 100px;
margin-left: 8%;
}
.navbar .logo img {
width: 100%;
height: 100%;
}
.navbar nav {
margin-right: 8%;
margin-top: 13px;
}
.navbar nav ul {
display: flex;
}
.navbar nav ul li {
list-style: none;
}
.navbar nav ul li a {
line-height: 50px;
text-decoration: none;
color: #e2dddd;
font-size: 1.6rem;
font-weight: 500;
margin: 0 15px;
}
0 Comments