Skip to main content

#MY PROFILE PAGE || #ABOUT ME PAGE

     How to design MY PROFILE page ? 


#CODE : 


                         

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1"></meta>

 <title>codoblog's profile card</title>

<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script type="text/javascript">

  

</script>

<style type="text/css">

  *{

margin:0;

padding:0;

box-sizing:border-box;

}

body {

font-family:'Montserrat',sans-serif;

font-weight:300;

line-height:1.2;

font-size:14px;

background:#fff;

}

main {

width:100%;

max-width:400px;

padding:0 25px;

margin:auto;

}

nav {

position:relative;

width:100%;

height:56px;

display:flex;

justify-content: space-between;

align-items: center;

box-shadow:0px 1px 0px  rgba(0,0,0,0.1);

}

nav a{

 color:#333;

 font-size:1.5rem;

 text-decoration:none;

 font-weight:bold;

 transition:0.3s;

}

nav a:hover {

color:#ff001e;

}

.profile {

 width:100%;

 display:flex;

 justify-content: space-between;

 align-items: center;

 flex-direction: column;

 padding:30px 0;

 border-bottom:1px solid rgba(0,0,0,0.2);

}

.profile-img {

 position:relative;

 height:150px;

 width:150px;

 border-radius:50%;

 margin:auto;

 overflow:hidden;

 box-shadow:0 2px 5px 1px rgba(0,0,0,0.2);

 transition:all 0.3s ease-in;

 z-index:2;

}

.profile-img img{

 height:100%;

 width:100%;

 object-fit:cover;

}

.overlay {

 position:fixed;

 height:100vh;

 width:100%;

 top:0;

 left:0;

 background:rgba(0,0,0,0.3);

 display:none;

 z-index:1;

}

.profile-img:hover {

  border-radius:0;

  transform:scale(1.5);

}

.profile-img:hover + .overlay {

 display:block;

}


.profile h1{

 margin-top:10px;

 font-size:26px;

 letter-spacing:1px;

}

.profile h3{

 color:#666;

 margin:5px 0;

}

.profile p{

  color:#555;

 }

 .red{

  color:#ff001e;

 }

 .follower,.btn-group {

  width:100%;

  display:flex;

  justify-content: space-between;

  align-items: center;

  padding:15px 10px;

  text-align:center;

 }

 .btn-group a{

  text-decoration:none;

  width:48%;

  padding:13px 0;

  border-radius:40px;

  transition:0.5s;

  font-size:1rem;

 }

 .btn1 {

  background:#ff001e;

  color:#fff;

 }

 .btn2 {

  color:#ff001e;

  border:1px solid #ff001e;

 }

 .btn1:hover {

  background:#fff;

  color:#ff001e;

  border:1px solid #ff001e;

 }

 .btn2:hover {

  background:#ff001e;

  color:#fff;

 }

 .about {

  padding:30px 0;

  border-top:1px solid rgba(0,0,0,0.2);

  margin-top:20px;

 }

 .about h2{

  margin-bottom:10px;

  color:#555;

 }

 footer {

  width:100%;

  display:flex;

  justify-content: space-between;

  align-items: center;

  padding:10px 10px 0;

  text-align:center;

  border-top:1px solid rgba(0,0,0,0.2);

 }

 footer a{

  text-decoration:none;

  color:#555;

  font-size:1.5em;

  height:40px;

  width:40px;

  border-radius:3px;

  display:flex;

  justify-content: center;

  align-items: center;

  transition:0.5s;

 }

 footer a:hover {

 background:#ff001e;

 color:#fff;

 }

</style>

</head>

<body>

<main>

<nav>

 <a href="#"><i class="fa fa-angle-left" ></i></a>

 <a href="#" >My Profile card</a>

 

</nav>

<div class="profile" >

  <div class="profile-img">

    <img src="profile.jpeg">

  </div>

  <div class="overlay" ></div>

  <h1>CodoBlog</h1>

  <h3>Coder</h3>

  <p><i class="fa fa-map-marker" > </i> Earth</p>

</div>

<div class="follower">

  <div>

  <h1>180</h1>

  <p>followers</p>

  </div>

  <div>

  <h1>Love</h1>

  <p>Coding</p>

  </div>

  <div>

   <h1>20</h1>

   <p>following</p>

  </div>

</div>

<div class="btn-group" >

 <a href="" class="btn1" >Follow</a>

 <a href="" class="btn2" >Message</a>

</div>

<div class="about" >

 <h2>About</h2>

 <p>

  CodoBLog..hey.. ^_^ You already know about me.

 </p>

</div>

<footer>

<a href="#" ><i class="fa fa-facebook" ></i></a>

<a href="#" ><i class="fa fa-twitter" ></i></a>

<a href="#" ><i class="fa fa-instagram" ></i></a>

<a href="#" ><i class="fa fa-github" ></i></a>

</footer>

</main>

</body>

</html>

#OUTPUT: 
    
        
             

Comments

The Most Populer

Aatmnirbhar Bharat 2020 | आत्मनिर्भर भारत | Bharat Navnirman | best article in marathi

#VocalForLocal   #DigitalIndia     #Swadeshi     #BeIndianBuyIndian   आत्मनिर्भर भारत              निसर्गाकडे लक्ष्य दिले तर एक बाब लक्षात येते कि , एक सजीव प्राणी दुसऱ्या सजीव प्राणी निर्माण करतो , तसेच दुसऱ्या प्राण्यावर अवलंबून असतो नंतर मात्र हा नवीन सजीव आत्मनिर्भर होतो व स्वतंत्र पने जगू लागतो.                     प्राचीन भारतीय समाजव्यवस्थेवर एक नजर टाकल्यास प्रामुख्याने एक बाब  लक्षात येते कि प्राचीन खेडी (छोटे गाव ) हि स्वयंपूर्ण होती. आणि सर्वात महत्वाची गोष्ट हि कि , त्यांच्या सर्व गरजा  ह्या त्यांच्या खेड्यातच पूर्ण व्हायच्या. हि गवे इतरांवर अवलंबून व परावलंबी मुळीच नव्हती . मुळात यालाच आपण आत्मनिर्भरता असे म्हणू शकतो . पण काळाच्या ओघात शासनव्यवस्था बदलत गेली आणि हि स्वयंपूर्ण असलेली खेडी पुढे परावलंबी बनत गेली . यालाच आपण गुलामगिरी म्हणू शकतो , आणि एकदा का आपण गुलाम झालो कि आपली अस्मिता , विद्वत्ता व कचरा यात थोडाही ...

Walking man loading animation by HTML

  THE WALKING MAN LOADING ANIMATION || FULL CODE OF HTML #CODE:                           <!DOCTYPE html> <html>     <head>         <title>Page Title</title>         <style type="text/css">             body {     margin:0px;     padding:0px;     background-color:orange; } .main{     position:relative ;     transform:translate (-50%,-50%);     top:50%;     left:10%; } .cir{     position:absolute;     height:50px;     width:50px;     top:31vh;     left:153px;     background-color:white;     border-radius:50%;     animation:up 1.5s infinite ;     transition:0.5s; } @keyframes up{    50%{         transform:translateY(10px...

Random Captcha Generator

 How to generate random captcha || JAVASCRIPT techinc Here, you will going to teach how to generate random captcha by javascript #CODE: <!DOCTYPE html>     <html>         <head>             <title></title>         </head>         <body>             <canvas width=150 height=70 style="border:1px solid black;"></canvas><br>             <button style="width:150px;             height:40px;             color: red;             -webkit-tap-highlight-color:rgba(0,0,0,0);" onclick="generateCaptcha()">Generate Captcha</button>             <style type="text/css">                 body{     ...