Responsive Updated Website using HTML and CSS - Source Code
Updated Website| 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>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png" class="logo">
<img src="yash.jpg" class="ipad">
<img src="App-Store.svg" class="Play-Store">
<img src="Play-Store.svg" class="Play-Store2">
<div class="circle-blue"></div>
<div class="circle-orange-small"></div>
<h5>© Copyright. Made by "Piyuuu" 👸 Like My Facebook Page for Souce Code:- Er.Ayushkumar27</h5>
<div class="menu">
<ul>
<li><a href="https://www.facebook.com/Er.Ayushkumar27/">Home</a> </li>
<li><a href="https://twitter.com/ErAyushkumar27">Download</a> </li>
<li><a href="https://www.instagram.com/er.ayushkumar/">Contact</a> </li>
</ul>
</div>
<div class="font">
<h1>You get a new Features <br><dd>Update This App !</dd></h1>
<h3>This is very large plateform <dd>To connect our Relative.... !!!</h3>
<hr>
<div class="btn-box">
<button type="button">Unistall</button>
<button type="button" class="btn">Update</button>
</div>
<h4>Download our App</h4>
</div>
<div class="circle-green"></div>
<div class="circle-blue-small"></div>
</div>
</body>
</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
body {
font-family: q sans-serif fantasy;
background-color: #e7e7e7;
overflow: hidden;
}
.container {
width: 1400px;
height: 700px;
margin: 2% auto;
position: relative;
overflow: hidden;
background: #fbfbfb;
border-radius: 15px
}
.ipad{
width: 550px;
position: absolute;
bottom:70px;
right: 35px;
}
.Play-Store{
height: 50px;
width: 250px;
position: absolute;
bottom: 40px;
left: -40px;
cursor: pointer;
}
.Play-Store:hover{
transform: scale(0.80);
}
.Play-Store2{
height: 50px;
width: 250px;
position: absolute;
bottom: 40px;
left: 150px;
cursor: pointer;
}
.Play-Store2:hover{
transform: scale(0.80);
}
.circle-orange-small {
height: 120px;
width: 120px;
position: absolute;
top: 80px;
left: 60px;
background-color: #fbba04;
border-radius: 50%;
opacity:0.097;
}
.circle-green {
height: 150px;
width: 150px;
position: absolute;
bottom:-50px;
left: 350px;
background-color: hotpink;
border-radius: 80%;
opacity: 0.29;
}
.circle-green:hover{
height: 350px;
width: 350px;
background-color: hotpink;
opacity: 0.5;
bottom:-50px;
left: 350px;
}
.circle-blue{
height: 150px;
width: 150px;
position: absolute;
right: 500;
background-color: springgreen;
border-radius: 80%;
opacity: 0.097;
}
.circle-blue-small{
height: 150px;
width: 150px;
position: absolute;
bottom:-30px;
right: -40px;
background-color: hotpink;
border-radius: 50%;
opacity: 0.9;
}
.circle-blue-small:hover{
height: 350px;
width: 350px;
background-color: hotpink;
opacity: 0.5;
bottom: -50px
}
.font{
color: black;
width: 450px;
position: absolute;
top: 100px;
left: 30px
}
h1{
font-family: 'Source Sans Pro' sans-serif;
color: crimson;
font-size: 45px;
}
h1:hover{
color: green;
background: transparent;
}
h3{
font-family: Brush Script MT;
font-size: 20px;
}
h3:hover{
color: crimson;
}
hr{
width: 350px;
margin-left: 0px;
}
h4{
color: darkturquoise;
margin-top: 120px;
}
.logo
{
width: 270px;
cursor: pointer;
margin-left:-29px;
}
.menu{
float:right;
text-align: right;
margin-right: 150px;
}
.menu{
line-height: 75px ;
}
.menu ul{
list-style: none;
}
.menu ul li{
display:inline-block;
}
.menu ul li a {
text-decoration: none;
color:#E51B37;
padding: 10px 20px;
}
.menu ul li a:hover{
background: #ff5722;
color:white;
transition: 0.5s;
border: 1px solid #ff5722;
padding: 10px 20px;
border-radius: 10px;
font-family: script MT;
}
h5{
width: 850px;
position: absolute;
bottom:-15px;
left: 500px;
font-size: 12px;
cursor: help;
color: crimson
}
.btn-box
{
margin-top: 90px;
}
button
{
width: 120px;
border: solid Green;
color: green;
padding: 7px;
margin-right: 15px;
border-radius: 10px ;
cursor: pointer;
background: #fff;
}
.btn
{
border: solid green;
background: green;
color: aliceblue
}
button:hover
{
transform: scale(0.90);
color: green;
background: White;
font-family: Brush Script MT;
}
button a
{
color: #fff;
}
4. Using Image Link :
2nd. Youtube Link :- https://www.youtube.com/channel/UCBpyTH7xcT_6mN2e_6tsuHQ
4. YouTube Video
Here I am attaching a YouTube link Video from my Channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.
Comments
Post a Comment