Full Responsive Website Using HTML/CSS.
OUTPUT:
We have also added Hover effects to Our Navigation Bar and Our Image.
Pictures Used: 
Code:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Crypto-Currency</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 1170px)" href="css/phone.css">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rowdies&display=swap" rel="stylesheet">
</head>
<body>
<img class="bitcoin" src="abstract-blockchain-background_23-2147850235-removebg-preview.png">
<div>
<ul>
<img class="logo" src="https://o.remove.bg/downloads/785fc275-1d59-4597-8e78-c45c2466a0bd/download__1_-removebg-preview.png">
<li class="shu" id="shu1">Home</li>
<li class="shu">Services</li>
<li class="shu">Products</li>
<li class="shu">Contact Us</li>
<li class="sign">Sign Up</li>
</ul>
</div>
<div class="Main_header">
<h2>Our Basic Thesis For Bitcoin<br> is That it Is Better Than Gold</h2><br>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
literature, discovered the undoubtable source.</p><br>
<div class="photo" >
<img class="phoro" src="https://o.remove.bg/downloads/fa46d963-8c0d-4c1d-ad8e-0e53b9de1da8/gggg-removebg-preview.png">
</div>
</div>
</body>
</html>
Style.css
body{
background:#42455a;
}
.bitcoin{
filter:opacity(100);
float: right;
margin-top: 50px;
margin-right: 99px;
transition: .6s;
transform: translate(50px);
}
.bitcoin:hover{
transform: scale(1.2);
}
.logo{
width: 60px;
height: 50px;
float: left;
}
ul{
display: inline-flex;
}
.shu{
font-family: 'Fredoka One', cursive;
list-style: none;
padding: 15px;
cursor: pointer;
color: #b2b1b1;
transition: .6s;
animation-name: shubham;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.shu:hover{
color: white;
border-bottom: solid red 2px;
transform: scale(1.2);
}
.sign{
list-style: none;
cursor: pointer;
top: 40px;
right: 80px;
position: absolute;
color: white;
padding: 13px;
border: solid 3px;
border-radius: 10px;
border-image: linear-gradient(80deg,pink,blue);
border-image-slice: 1;
}
h2{
color: white;
font-family: 'Rowdies', cursive;
word-spacing: 10px;
font-size: 40px;
margin: 100px;
}
p{
font-size: 15px;
font-family: 'Rowdies', cursive;
color: burlywood;
margin:-100px;
margin-left: 99px;
}
.phoro{
margin-top: 100px;
margin-left: 100px;
width: 90px;
height: 50px;
float: inherit;
}
Hope, You don't find any Difficulty! If, In any case, you face problems then Contact Us at our E-mail...
BY,
Shubham Sagar
Code Star
E-mail: sk0374391@gmail.com
India...
Thank You
amazing
ReplyDelete