Recent-Post

header ads

Profile Html And Css

 

Input:-

<!doctype html>

<html>

<title>Profile|Priyanshu Kumar</title>

<head>

<center>

<h1 class="social-name">Profile</h1>

</center>

<center>

<div class="box">

<img src="E:\my all tools\app coding items\wallpapers and logos\mountain.jpg" class="background" alt="Background-Image">

<img src="C:\Users\vr\Pictures\priyanshu\priyanshu.jpg" class="profile" alt="profile-photo">

<h1>Priyanshu Kumar</h1>

<p>I Am The King</p>

<h3>Share Your Profile:-</h3>

<input type="button" value="Facebook" Class="facebook">

<input type="button" value="Instagram" Class="instagram"><br><br>

<input type="button" value="Youtube" Class="youtube">

<input type="button" value="Twitter" Class="twitter">

</div>

</center>

</head>

<style>

.social-name{

color:rgb(255, 0, 212);

}

.box{

     margin: 60px auto 0 auto;

     text-align: center;

     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 8px 20px 0 rgba(0, 0, 0, 0.19);

     width: 400px;

     padding: 20px;

     height: 500px;

     margin-top:-20px;

}

.background{

width:350px;

height:170px;

}

.profile{

width:140px;

border-radius:80px;

margin-top:-100px;

}

.facebook{

width:200px;

height:40px;

background-color: rgb(55, 0, 255);

border-color:black;

font-size: medium;

}

.instagram{

width:190px;

height:40px;

background-color: rgb(255, 0, 242);

border-color:black;

font-size: medium;

}

.youtube{

width:200px;

height:40px;

background-color: rgb(255, 0, 0);

border-color:black;

font-size: medium;

}

.twitter{

width:190px;

height:40px;

background-color: rgb(255, 103, 15);

border-color:black;

font-size: medium;

}

</style>

</html>

Post a Comment

0 Comments