my-profile

In this example below you will see how to do a my-profile with some HTML / CSS and Javascript

test

Thumbnail
This awesome code was written by ilyasbilgihan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ilyasbilgihan ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>my-profile</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ilyasbilgihan/my-profile-aGzWLV */
body {
    background: url(https://i.hizliresim.com/vjq3Jm.png);
    background-size: cover;
    background-attachment: fixed;
    
}

#profile-links a:before {
  content: "";
    width: 32px;
    height: 32px;
    margin-top: -5px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
}

#profile-links a { font-size:0; margin-right: 60px; }
a[id="profile-link-1"]:before {
   background: url(https://i.hizliresim.com/8YJJNn.png);
}
a[id="profile-link-2"]:before {
   background: url(https://i.hizliresim.com/NZ77pX.png);
}
a[id="profile-link-3"]:before {
   background: url(https://i.hizliresim.com/nOBBN5.png);
}

.profile-header {
    background: transparent;
    color: rgba(82,62,57, .8);
    text-shadow: 0px 0px 5px currentColor;
    box-shadow: inset 0px 10px 55px 8px currentColor;
}

.profile-username {
    color: #523e39!important;
}

.profile-avatar {
    border-color: #523e39!important;
    width: 135px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    height: 135px;
}


element.style {
}
div#profile-location:after {
    background: url(https://i.hizliresim.com/OoPja3.gif);
    content: "";
    width: -webkit-fill-available;
    display: inline-block;
    height: 22px;
    margin-left: 10px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
  
}
.links-and-stats {
  background-color: #1b0202a8!important;
  display: flex;
  justify-content: space-around;
}

.main-header {
  background: #1b0202a8!important;
  border-color: #594640!important;
}

a.button, nav button, .header-chunk .button-medium, .header-chunk .button-small, .footer-chunk .button {
  background: #1b020275!important;
}
a.button:hover, nav button:hover, .header-chunk .button-medium:hover, .header-chunk .button-small:hover, .footer-chunk .button:hover {
  background: #1b020245!important;
}

.button-dark {
  background: #402d27!important
}
.button-dark:hover {
  background: #4e3d35!important
}
.button-dark.active:not([disabled]) svg { fill: #fff!important}

.links-and-stats a, .meta h3 a, .profile-nav-2 a { color: #dee0d0!important; transition: .3s;}
.links-and-stats a:hover, .meta h3 a:hover, .profile-nav-2 a:hover { color: #fff!important; transition: .3s;}

div#profile-location {
  color: rgba(82,62,57, .8);
  margin-left: -35px;
  text-shadow: 0px 0px 5px currentColor;
}

.single-project, .single-pen, .single-item {
  border: none!important;
  box-shadow: 0px 8px 30px 6px rgba(82,62,57, .8);
  border-left: 5px solid #523e39!important;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 5px;
}


.single-project .meta, .single-pen .meta, .single-item .meta {
  background-color: #1b0202a8!important;
}

.cover-link:hover ~ .meta-overlay {
  opacity: .5!important;
}
.iframe-wrap>.meta-overlay, .thumbnail-wrap>.meta-overlay {
  color: #fff!important;
  background: rgb(99, 82, 77)!important;
}

.profile-nav-2 { background: #1b0202a8!important; border-top: none; border-left: 5px solid #523e39;
border-bottom-left-radius: 5px;}

.pen-actions a { background: #1b020245!important  }
.meta .user-and-stats .stats {
  background-color: #1b020275!important;
  padding: 6px 0 6px 12px;
}
.meta .user-and-stats .stats:after {
  background: linear-gradient(to right, rgba(47,47,49,0), rgba(27,2,2,.46) 80%)!important;
}

.width-wrapper > a {
  padding: 10px 20px 5px 0;
  background: #1b0202a8!important;
  color: #dee0d0;
  
}

.width-wrapper > a:nth-child(1) {
  padding-left: 20px!important;
  border-left: 5px solid #523e39!important;
  border-top-left-radius: 10px;
}

.width-wrapper > a:nth-child(4) {
  padding-right: 40px;
}

.iframe-wrap iframe {
    border-top-left-radius: 10px;
}

.promo-footer {
  background: #1b0202a8!important;
}

.link-footer {
  background: #0a0101e3!important
}
.footer-chunk {
  background: #1b02024d!important;
}
.project-overview, #no-pens-message, #no-posts-message, .no-love-message, #no-collections-message {
  background: #1b0202a8!important;
  border-left: 5px solid #523e39!important;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 5px;
}

.project-overview .module, #no-pens-message .active, #no-posts-message .active, #no-collections-message .active {
  background: #1b02024d!important;
}

#profile-search {display: none;}

Comments