<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Responsive Profile</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<! –– Responsive Profile By Panshak Solomon ––>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Profile</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="container-head">
<div class="menu">
<p>___ <br>___<br>___</p>
</div>
</div>
<div class="container-body">
<div class="profile-picture">
<img src="https://i.imgur.com/LhjDdJN.jpg">
</div>
<div class="name">
<p>Kunle Coker</p>
</div>
<div class="location">
<p>Jos, Nigeria</p>
</div>
<div class="bio">
<p>Jos-based UX/UI Designer working on all things graphics</p>
</div>
<div class="stats">
<div class="followers">
<p>Followers</p>
<h1>79K</h1>
</div>
<div class="following">
<p>Following</p>
<h1>169</h1>
</div>
<div class="topics">
<p>topics</p>
<h1>182</h1>
</div>
</div>
<div class="buttons">
<button class="message-me">Message</button>
<button class="follow-me">Follow</button>
</div>
</div>
</body>
</html
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
.body {
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
.container {
text-align: center;
margin: -8px;
font-family: 'Roboto', sans-serif;
height: auto;
}
.container-head {
background-size: cover;
background-repeat: no-repeat;
padding-top: 130px;
padding-bottom: 80px;
padding-left: 10px;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(12,12,29,0.6306897759103641) 38%, rgba(0,212,255,1) 100%);
}
.menu {
margin-top: -130px;
text-align: left;
color: white;
line-height: 8px;
cursor: pointer;
}
menu p {
padding: 0px;
}
.profile-picture img {
border-radius: 100%;
margin-top: -60px;
border: solid;
border-width: 4px;
border-color: white;
}
.container-body {
padding-left: 20px;
}
.name {
text-transform: uppercase;
}
.location {
color: gray;
margin: -10px;
}
.bio p {
padding: 10px;
}
.stats {
display: flex;
align-items: center;
justify-content: center;
}
.stats p {
color: gray;
font-size: 12px;
margin-bottom: -15px;
text-transform: uppercase;
}
.followers {
padding-right: 60px;
}
.following {
padding-right: 60px;
}
.topics {
padding-right: 60px;
}
.buttons {
display: flex;
width: 80%;
align-items: center;
justify-content: center;
padding: 20px 30px 30px 50px;
}
.message-me {
width: 50%;
position: relative;
padding: 18px 10px 18px 10px;
margin-top: 20px;
margin-right: 5px;
border: solid #ff2d55 1px;
border-radius: 50px;
background-color: #ff2d55;
text-transform: uppercase;
letter-spacing: 5px;
cursor: pointer;
color: white;
font-size: 12px;
}
.follow-me {
width: 50%;
position: relative;
padding: 18px 10px 18px 10px;
margin-top: 20px;
border: solid gray 1px;
border-radius: 50px;
background-color: #ffffff;
text-transform: uppercase;
letter-spacing: 5px;
cursor: pointer;
color: rgb(49, 49, 49);
font-size: 12px;
margin-left: 5px;
}
.message-me:hover {
background-color: #ffffff;
color: rgb(54, 54, 54);
}
.follow-me:hover {
background-color: #408afa;
color: rgb(255, 255, 255);
border-color: #408afa;
}
@media (min-width: 600px) {
.container {
width: 60%;
border-radius: 2px;
position: absolute;
margin: 0px 0px 30px 200px;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
0 12.5px 10px rgba(0, 0, 0, 0.035),
0 22.3px 17.9px rgba(0, 0, 0, 0.042),
0 41.8px 33.4px rgba(0, 0, 0, 0.05),
0 100px 80px rgba(0, 0, 0, 0.07);
}
.container-head {
border-radius: 2px;
}
.buttons {
margin-bottom: 40px;
}
}