Responsive Website using HTML and CSS
Responsive Website using HTML And CSS | HTML And CSS |
When we design any websites, we need to design a profile page, which is contained the profile card. Apart from this, we design a profile card of our clients, users, employees to show the profile of them. For an attractive website ui design, we need to design an attractive profile card with various animation effects. Here I am going to design a profile card. This profile card is very simple and attractive, does not contain too many effects.
In this profile card design, I will put some details of the user like user picture, name, position and a simple button with hover effect. So let's get started.
1. CREATE HTML BLOCK
2. ADD HTML
<html>
<head>
<head>
<meta name="viewport" content="width=device-width, initial-scale-1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<title>Website Design- Web design</title>
</head>
<body>
<div class="header">
<div class="container">
<div class="navbar">
<img src="logo.png" class="logo">
<nav>
<ul>
<li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i>About Us</a>
</li>
<li><a href="#"><i class="fa fa-clone" aria-hidden="true"></i>HTML & CSS</a></li>
<li><a href="#"><i class="fa fa-users" aria-hidden="true"></i>Bootstrap</a></li>
<li><a href="#"><i class="fa fa-money" aria-hidden="true"></i>Pricing</a></li>
<li><a href="https://www.facebook.com/Er.Ayushkumar27/"><i class="fa fa-phone" aria-hidden="true"></i>Contact</a></li>
</ul>
</nav>
</div>
<div class="content">
<h1>WEBSITE DESIGN <br>USING <span>HTML</span> & <span>CSS </span></h1>
<P> Subscribe Website Design <b><a href="https://www.youtube.com/channel/UCBpyTH7xcT_6mN2e_6tsuHQ"><spanb>YouTube</spanb></a></b> Channel and <b><a href="https://webcode-hub.blogspot.com/"><spanb>Blog</spanb></a></b> to watch and learn on Web Development & <b><a href="https://www.youtube.com/channel/UCDcs4hEQ5BXMyaXkiLx0VzQ"><spanb>Adobe UI</spanb></a></b> Designing.<br><br> Press the <b><span>Bell icon</span></b> for more videos notification and follow my <b><span>Blog</span></b> for get new Update</P>
<div class="btn-box">
<button type="button"><a href="https://www.youtube.com/channel/UCBpyTH7xcT_6mN2e_6tsuHQ">Learn More</a></button>
<button type="button" class="btn">Explore</button>
</div>
</div>
</div>
</div>
</body>
</head>
</html>
After Writing the basic structure of the HTML document, you can write your required tags and content also, after that run this code on your browser and see the output. As we know that HTML only shows content in a basic format, it does not beautify that content. To beautify our content we need for CSS, which is inserted in an HTML document and it creates an attractive user interface.
3. ADD CSS
*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.header
{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(background.jpg);
background-size: cover;
background-position: center;
}
.container
{
max-width: 1200px;
margin: 0 auto;
padding: 0 100px;
}
.navbar
{
width: 100%;
display: flex;
align-content: center;
justify-content: space-between;
padding: 25px;
}
nav
{
flex: 10;
text-align: right;
}
.logo
{
width: 270px;
cursor: pointer;
margin-left:-185px;
margin-top:-15px;
}
nav ul li
{
display: inline-block;
list-style: none;
margin-right: 30px;
}
nav ul li a
{
text-decoration: none;
color: #fff;
font-size: 17px;
padding: 5px 5px;
}
.header .fa{
margin-right: 8px;
}
nav ul li a:hover{
border-bottom: 1.5px solid tomato;
color: springgreen;
}
.content
{
width: 600px;
color: #fff;
margin: 150px auto 0;
margin-top: 150px;
text-align: center;
}
h1
{
font-size: 56px;
line-height: 70px;
letter-spacing: 1px;
margin: 15px 0;
}
p
{
font-size: 14px;
line-height: 20px;
}
span
{
color: crimson;
}
spanb
{
color: crimson;
cursor: pointer;
font-size: 110%;
}
spanb:hover
{
color: darkturquoise;
}
.btn-box
{
margin-top: 20px;
}
button
{
width: 150px;
border: 1px solid #ff6b3f;
color: #fff;
padding: 10px;
margin-right: 10px;
border-radius: 25px 0px;
cursor: pointer;
background: #ff6b3f;
}
.btn
{
border: 1px solid #fff;
background: transparent;
}
button:hover
{
transform: scale(0.90);
color: aqua;
}
button a
{
color: #fff;
}
.footer__navigation {
border-top: 1px solid #777;
padding-top: 2rem;
display: inline-block;
}
4. Using Image Link :
2nd. Youtube Link :- https://www.youtube.com/channel/UCBpyTH7xcT_6mN2e_6tsuHQ
Comments
Post a Comment