Hi dear welcome to Ascode Blog . In this post we are going to learn how to make acrypto mining website ui design using html and css. 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 index.html 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>Tron Mining Website</title>
</head>
<body>
<!-- section-1 -->
<div class="navbar">
<div class="logo">TronMining</div>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#" class="btn">Register</a></li>
<li><a href="#" class="btn">Login</a></li>
</ul>
</div>
</div>
<!-- section-2 -->
<div class="header">
<div class="header-img"><img src="/banner-shape-1.png" alt="">
<div class="inset-header-image">
<img src="/banner-base.png" alt="">
<div class="smal-img">
<img src="/ban_perosn-1.png" alt="">
</div>
<div class="smal-img-2">
<img src="/ban_perosn-3.png" alt="">
</div>
</div>
</div>
<div class="header-right">
<h2>Tron Cloud<br>Mining</h2>
<p>Global decentralize network to Troncoin Mining</p>
<a href="#">login/Register</a>
</div>
</div>
<!-- section-3-->
<div class="investment-tittle">
<h3>Our Investment plan</h3>
<div class="miid-table">
<div class="card">
<div class="start">Hash-1</div>
<div class="content">
<div class="plan">10% Daily</div>
<div class="plan2">For 10 Days</div>
<div class="content">
<h2>Price 25 TRX</h2>
<h2>Daily Profit 2.75 TRX</h2>
<h2>ROI 110%</h2>
<h2>Withdrawal Instant</h2>
<h2>5% Referral Commission</h2>
</div>
<a href="#">Join Now</a>
</div>
</div>
<div class="card">
<div class="start">Hash-2</div>
<div class="content">
<div class="plan">10% Daily</div>
<div class="plan2">For 10 Days</div>
<div class="content">
<h2>Price 25 TRX</h2>
<h2>Daily Profit 2.75 TRX</h2>
<h2>ROI 110%</h2>
<h2>Withdrawal Instant</h2>
<h2>5% Referral Commission</h2>
</div>
<a href="#">Join Now</a>
</div>
</div>
<div class="card">
<div class="start">Hash-3</div>
<div class="content">
<div class="plan">10% Daily</div>
<div class="plan2">For 10 Days</div>
<div class="content">
<h2>Price 25 TRX</h2>
<h2>Daily Profit 2.75 TRX</h2>
<h2>ROI 110%</h2>
<h2>Withdrawal Instant</h2>
<h2>5% Referral Commission</h2>
</div>
<a href="#">Join Now</a>
</div>
</div>
</div>
</div>
<!-- section-4 -->
<div class="about">
<div class="about-img">
<img src="/about-img.png" alt="">
</div>
<div class="about-info">
<h2>We Are FUTURE.</h2>
<p>What is Cryptocurrency Mining ?</p>
<p>Cryptocurrency mining is the process of recording and verifying transactions on a public digital record of transactions, known as a blockchain. To do that, miners solve complex mathematical problems. In return, there is a possibility they will be rewarded with cryptocurrency.</p>
<a href="#">Investment plan</a>
</div>
</div>
<!-- secttion-5 -->
<div class="status">
<div class="status-card">
<h2>10</h2>
<h2>Runing Days</h2>
</div>
<div class="status-card">
<h2>1000</h2>
<h2>Tottal Account</h2>
</div>
<div class="status-card">
<h2>$1000</h2>
<h2>Tottal Deposit</h2>
</div>
<div class="status-card">
<h2>$1000</h2>
<h2>Tottal Withdrawal</h2>
</div>
</div>
</div>
<!-- section-6 -->
<div class="fotter">
<div class="col-1">
<h2>TronHash</h2>
<h4>115 Eastbourne Mews, London, W2 6LQ</h4>
</div>
<div class="col-2">
<h2>Comapany</h2>
<h4>Home</h4>
<h4>Investment</h4>
</div>
<div class="col-3">
<h2>Service</h2>
<h4>Faq</h4>
</div>
<div class="col-4">
<h2>Live Stats</h2>
<h4>Transection</h4>
</div>
</div>
<div class="fotter-text">
@2021 Copyright Tronhash.com
</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;
}
body {
width: 100%;
height: 100%;
background: #fff;
}
/* section-1 */
.navbar {
background: linear-gradient(45deg,#08a5d5,#114a84);
padding: 20px 30px;
display: flex;
width: 100%;
justify-content: space-between;
z-index: 1000;
position: fixed;
}
.logo {
font-size: 20px;
color: #fff;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-left: 5%;
}
.nav {
margin-right: 5%;
}
.nav ul {
display: flex;
}
.nav ul li {
list-style: none;
margin: 0 20px;
}
.nav ul li a {
text-decoration: none;
font-size: 18px;
color: #fff;
font-weight: 600;
letter-spacing: 0.5px;
padding: 7px 15px;
border-radius: 50px;
transition: 0.5s;
}
.nav ul li a:hover {
color: #06a6d6;
background: #fff;
}
/* section-2 */
.header {
display: flex;
margin-bottom: 30px;
}
.header-img {
width: 65%;
height: 850px;
float: left;
}
.header-img img {
width: 100%;
height: 100%;
}
.header-img .inset-header-image {
position: absolute;
width: 650px;
height:650px;
left: 10%;
top: 20vh;
}
.header-img .inset-header-image img {
width: 100%;
height: 100%;
}
.inset-header-image .smal-img {
position: absolute;
width: 50px;
height: 100px;
left: 66%;
top: 35vh;
animation: bounce 1s linear infinite;
animation-duration: 4s;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
.inset-header-image .smal-img img {
width: 100%;
height: 100%;
}
.inset-header-image .smal-img-2 {
position: absolute;
width: 50px;
height: 100px;
left: 15%;
top: 44vh;
animation: bounce 1s linear infinite;
animation-duration: 4s;
}
.inset-header-image .smal-img-2 img {
width: 100%;
height: 100%;
}
.header-right {
position: relative;
width: 35%;
height: 700px;
float: right;
text-align: justify;
top: 25vh;
left: 5%;
}
h2 {
color: #06a6d6;
font-size: 5rem;
}
p {
color: #034153;
font-size: 1.2rem;
margin: 10px 0;
}
.header-right a {
display: inline-block;
text-decoration: none;
padding: 10px 20px;
color: #fff;
font-size: 1.5rem;
background: linear-gradient(45deg,#08a5d5,#114a84);
border-radius: 50px;
margin: 20px 0;
transition: 0.2s;
}
/* section-3 */
.investment-tittle {
border-radius: 4px;
text-align:center ;
margin: 20px 10%;
}
.investment-tittle h3 {
color: #fff;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 1px;
background: linear-gradient(45deg,#08a5d5,#114a84);
padding: 10px 20px;
width: fit-content;
margin: 0 auto;
border-radius: 1px 1px 4px 4px;
}
.investment-tittle .miid-table {
display: flex;
justify-content: center;
align-items:center ;
margin: 30px 10% ;
}
.investment-tittle .miid-table .card {
margin: 20px;
width: 350px;
height: 100%;
text-align: center;
border-radius: 10px;
box-shadow: 0 0 5px #ccc;
}
.miid-table .card .content {
margin: 15px;
}
.miid-table .card .start {
background: linear-gradient(45deg,#08a5d5,#114a84);
color: #fff;
padding: 10px 20px;
margin: 0 auto;
width: fit-content;
border-radius: 1px 1px 4px 4px;
text-transform: uppercase;
font-size: 1.6rem;
font-weight: 500;
}
.miid-table .card .content .plan {
font-size: 3.5rem;
font-weight: 600;
color: #000;
}
.miid-table .card .content .plan2 {
font-size: 2.6rem;
font-weight: 600;
color: #000;
}
.miid-table .card .content h2 {
font-size: 1.2rem;
font-weight: 600;
color: #000;
margin: 10px 0;
}
.miid-table .card .content a {
display: inline-block;
padding: 5px 10px;
font-size: 1.5rem;
font-weight: 600;
background: linear-gradient(45deg,#08a5d5,#114a84);
border-radius: 50px;
width: fit-content;
margin: 20px auto;
color: #fff;
text-decoration: none;
transition: 0.2s;
}
/* section-4 */
.about {
display: flex;
margin: 300px 5%;
}
.about .about-img {
float: left;
width: 40%;
height: 500px;
}
.about .about-img img {
width: 100%;
height: 100%;
}
.about .about-info {
position: relative;
float: right;
width:40% ;
height: 500px;
left: 10%;
}
.about .about-info h2 {
font-size: 4rem;
color: #06a6d6;
font-weight: 600;
}
.about .about-info p {
font-size: 1.24rem;
color: #000;
font-weight: 600;
}
.about .about-info a {
display: inline-block;
font-size: 1.5rem;
color: #fff;
font-weight: 600;
padding: 10px 20px;
border-radius: 5px;
background: linear-gradient(45deg,#08a5d5,#114a84);
margin: 20px 0;
text-decoration: none;
transition: 0.2s;
}
/* section-5 */
.status {
display: flex;
justify-content: space-between;
text-align: center;
margin: 20px 10%;
background: linear-gradient(45deg,#08a5d5,#114a84);
padding: 20px 30px;
border-radius: 10px;
}
.status .status-card {
text-align: center;
}
.status .status-card h2 {
font-size: 2rem;
color: #fff;
font-size: 600;
}
/* section-6 */
.fotter {
display: flex;
justify-content: space-between;
background: linear-gradient(45deg,#08a5d5,#114a84);
padding: 50px 100px;
width: 100%;
}
.fotter .col-1 h2,.fotter .col-2 h2,.fotter .col-3 h2,.fotter .col-4 h2{
font-size: 2rem;
font-weight: 600;
color: #fff;
}
.fotter .col-1 h4,.fotter .col-2 h4,.fotter .col-3 h4,.fotter .col-4 h4{
font-size: 1.3rem;
font-weight: 600;
color: #fff;
}
.fotter-text {
border-top: 2px solid #fff;
padding: 10px 20px;
color: #fff;
font-size: 2rem;
font-weight: 600;
background: linear-gradient(45deg,#06a6d6,#02222c);
text-align: center;
}
.about .about-info a:hover,.miid-table .card .content a:hover,.header-right a:hover {
background: transparent;
border: 2px solid #06a6d6;
color: #06a6d6;
}
0 Comments