Design is based on https://www.pinterest.com/pin/488429522063844652/ that is used only css.
A Pen by HARUN PEHLİVAN on CodePen.
Last active
August 19, 2019 13:10
-
-
Save harunpehlivan/77a3f8a7b2fc3e9b785e542887e185f7 to your computer and use it in GitHub Desktop.
Material Profile
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="material-wrap"> | |
| <div class="material clearfix"> | |
| <div class="top-bar"> | |
| <div class="pull-left"> | |
| <a href="#" class="menu-tgl pull-left"><i class="fa fa-bars"></i></a> | |
| </div> | |
| <span class="title">Profile</span> | |
| <div class="pull-right"> | |
| <a href="#" class="search-tgl pull-left"><i class="fa fa-search"></i></a> | |
| <a href="#" class="option-tgl pull-left"><i class="fa fa-ellipsis-v"></i></a> | |
| </div> | |
| </div> | |
| <div class="profile"> | |
| <div class="cover"> | |
| <span class="vec vec_a"></span> | |
| <span class="vec vec_b"></span> | |
| <span class="vec vec_c"></span> | |
| <span class="vec vec_d"></span> | |
| <span class="vec vec_e"></span> | |
| </div> | |
| <div class="photo"> | |
| <a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"><img src="https://secure.gravatar.com/avatar/d77e117e865f58d824bed9b3eb94f778?s=64" alt="Mohan"></a> | |
| </div> | |
| <div class="info"> | |
| <div class="name">HARUN PEHLİVAN</div> | |
| <div class="position"> FOUNDER,CEO BLOGGER</div> | |
| </div> | |
| <input id="toggle" type="checkbox" class="plus"><label for="toggle" class="toggle"></label> | |
| <div class="links"> | |
| <a href="https://facebook.com/100008152065270" data-title="Facebook"><i class="fa fa-facebook"></i></a> | |
| <a href="https://twitter.com/HTERCUMANP" data-title="Twitter"><i class="fa fa-twitter"></i></a> | |
| <a href="https://codepen.io/harunpehlivan" data-title="Codepen"><i class="fa fa-codepen"></i></a> | |
| <a href="https://pinterest.com/harunpehlivan" data-title="Pinterest"><i class="fa fa-pinterest"></i></a> | |
| </div> | |
| </div> | |
| <div class="tabs clearfix"> | |
| <a href="#">Timeline</a> | |
| <a href="#">Friend List</a> | |
| <a href="#">Top Rate</a> | |
| </div> | |
| <div class="tabs-content"> | |
| <div class="friend-list"> | |
| <div class="list-ul"> | |
| <div class="list-li title">Recently added friends</div> | |
| <div class="list-li clearfix"> | |
| <div class="photo pull-left"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg"></div> | |
| <div class="info pull-left"> | |
| <div class="name">Jacob Lennon</div> | |
| <div class="time">2 min ago</div> | |
| </div> | |
| <div class="action pull-right"> | |
| <a href="#"><i class="fa fa-star-o"></i></a> | |
| <a href="#"><i class="fa fa-comment-o"></i></a> | |
| <a href="#"><i class="fa fa-ellipsis-v"></i></a> | |
| </div> | |
| </div> | |
| <div class="list-li clearfix"> | |
| <div class="photo pull-left"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/markmushiva/128.jpg"></div> | |
| <div class="info pull-left"> | |
| <div class="name">Didier Mailly</div> | |
| <div class="time">5 min ago</div> | |
| </div> | |
| <div class="action pull-right"> | |
| <a href="#"><i class="fa fa-star-o"></i></a> | |
| <a href="#"><i class="fa fa-comment-o"></i></a> | |
| <a href="#"><i class="fa fa-ellipsis-v"></i></a> | |
| </div> | |
| </div> | |
| <div class="list-li clearfix"> | |
| <div class="photo pull-left"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/scottohara/128.jpg"></div> | |
| <div class="info pull-left"> | |
| <div class="name">Miguel Cunha Ferreira</div> | |
| <div class="time">7 min ago</div> | |
| </div> | |
| <div class="action pull-right"> | |
| <a href="#"><i class="fa fa-star-o"></i></a> | |
| <a href="#"><i class="fa fa-comment-o"></i></a> | |
| <a href="#"><i class="fa fa-ellipsis-v"></i></a> | |
| </div> | |
| </div> | |
| <div class="list-li clearfix"> | |
| <div class="photo pull-left"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/shalt0ni/128.jpg"></div> | |
| <div class="info pull-left"> | |
| <div class="name">Eric Yuriev</div> | |
| <div class="time">12 min ago</div> | |
| </div> | |
| <div class="action pull-right"> | |
| <a href="#"><i class="fa fa-star-o"></i></a> | |
| <a href="#"><i class="fa fa-comment-o"></i></a> | |
| <a href="#"><i class="fa fa-ellipsis-v"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .material-wrap{ | |
| top:0; | |
| left:0; | |
| right:0; | |
| bottom:0; | |
| position:fixed; | |
| overflow-y:auto; | |
| background-size:cover; | |
| background-attachment:fixed; | |
| background: | |
| -webkit-linear-gradient(45deg, hsla(222, 99%, 41%, 1) 0%, hsla(222, 99%, 41%, 0) 70%), | |
| -webkit-linear-gradient(315deg, hsla(53, 94%, 49%, 1) 10%, hsla(53, 94%, 49%, 0) 80%), | |
| -webkit-linear-gradient(225deg, hsla(203, 97%, 45%, 1) 10%, hsla(203, 97%, 45%, 0) 80%), | |
| -webkit-linear-gradient(135deg, hsla(216, 93%, 47%, 1) 100%, hsla(216, 93%, 47%, 0) 70%); | |
| background: | |
| linear-gradient(45deg, hsla(222, 99%, 41%, 1) 0%, hsla(222, 99%, 41%, 0) 70%), | |
| linear-gradient(135deg, hsla(53, 94%, 49%, 1) 10%, hsla(53, 94%, 49%, 0) 80%), | |
| linear-gradient(225deg, hsla(203, 97%, 45%, 1) 10%, hsla(203, 97%, 45%, 0) 80%), | |
| linear-gradient(315deg, hsla(216, 93%, 47%, 1) 100%, hsla(216, 93%, 47%, 0) 70%); | |
| } | |
| body{ | |
| margin:0; | |
| color:#ecf0f1; | |
| /*background:#b1cfd6;*/ | |
| font:300 18px/18px Roboto; | |
| } | |
| *,:after,:before{box-sizing:border-box} | |
| .pull-left{float:left} | |
| .pull-right{float:right} | |
| .clearfix:after,.clearfix:before{content:'';display:table} | |
| .clearfix:after{clear:both;display:block} | |
| .material{ | |
| width:350px; | |
| /*height:550px;*/ | |
| margin:5% auto 0; | |
| position:relative; | |
| background:#1e1d23; | |
| } | |
| .material a{ | |
| color:inherit; | |
| text-decoration:none; | |
| } | |
| .material .top-bar{ | |
| padding:15px; | |
| background:#25252f; | |
| } | |
| .material .top-bar a{ | |
| display:inline-block; | |
| } | |
| .material .top-bar .search-tgl, | |
| .material .top-bar .option-tgl{ | |
| min-width:15px; | |
| margin-left:15px; | |
| text-align:right; | |
| } | |
| .material .top-bar .search-tgl{ | |
| line-height:0; | |
| } | |
| .material .top-bar .title{ | |
| margin-left:15px; | |
| } | |
| .material .profile{ | |
| padding:15px; | |
| position:relative; | |
| } | |
| .material .profile .photo, | |
| .material .tabs-content .friend-list .photo{ | |
| background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDggNDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNBQUFBQUEiIGQ9Ik0yNCwwQzEwLjc0NiwwLDAsMTAuNzQ1LDAsMjRzMTAuNzQ2LDI0LDI0LDI0YzEzLjI1NiwwLDI0LTEwLjc0NSwyNC0yNFMzNy4yNTYsMCwyNCwweiBNMjQsMTMuNzEzYzIuODA5LDAsNS4wODQsMi4yNzUsNS4wODQsNS4wODNjMCwyLjgwOS0yLjI3NSw1LjA4NC01LjA4NCw1LjA4NGMtMi44MDcsMC01LjA4My0yLjI3NS01LjA4My01LjA4NEMxOC45MTcsMTUuOTg4LDIxLjE5MywxMy43MTMsMjQsMTMuNzEzeiBNMzIuNTgyLDM3LjY5Yy0yLjQ5MSwxLjUzNy01LjQxNiwyLjQzOS04LjU1OSwyLjQzOWMtMy4xNjEsMC02LjEwNC0wLjkxMy04LjYwNC0yLjQ2N1YyNy4zMjZjMC0wLjkwNCwwLjczMy0xLjYzOCwxLjYzOC0xLjYzOGgxMy44ODhjMC45MDQsMCwxLjYzOCwwLjczMywxLjYzOCwxLjYzOEwzMi41ODIsMzcuNjlMMzIuNTgyLDM3LjY5eiIvPjwvc3ZnPg==) 100% / cover; | |
| } | |
| .material .profile .cover{ | |
| width:100%; | |
| height:150px; | |
| overflow:hidden; | |
| position:relative; | |
| background:#d9addf; | |
| } | |
| .material .profile .cover:before{ | |
| top:0; | |
| left:0; | |
| right:0; | |
| bottom:0; | |
| z-index:6; | |
| content:''; | |
| position:absolute; | |
| background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.4)); | |
| } | |
| .material .profile .cover .vec{ | |
| height:150px; | |
| position:absolute; | |
| } | |
| .material .profile .cover .vec:before, | |
| .material .profile .cover .vec:after{ | |
| width:0; | |
| height:0; | |
| content:''; | |
| display:block; | |
| position:inherit; | |
| background:inherit; | |
| } | |
| .material .profile .cover .vec_b:after, | |
| .material .profile .cover .vec_c:after{ | |
| width:1px; | |
| right:12px; | |
| height:100%; | |
| background:rgba(0,0,0,.4); | |
| -webkit-transform:skewX(5deg); | |
| transform:skewX(5deg); | |
| } | |
| .material .profile .cover .vec_a{ | |
| z-index:4; | |
| left:-35px; | |
| width:125px; | |
| background:#fb544e; | |
| -webkit-transform:skewX(25deg); | |
| transform:skewX(25deg); | |
| box-shadow:2px 0 6px rgba(0,0,0,.8); | |
| } | |
| .material .profile .cover .vec_b{ | |
| z-index:3; | |
| left:40px; | |
| width:130px; | |
| background:#fe5866; | |
| -webkit-transform:skewX(-10deg); | |
| transform:skewX(-10deg); | |
| box-shadow:1px 0 4px rgba(0,0,0,.4); | |
| } | |
| .material .profile .cover .vec_c{ | |
| z-index:2; | |
| left:140px; | |
| width:95px; | |
| background:#d9addf; | |
| -webkit-transform:skewX(-30deg); | |
| transform:skewX(-30deg); | |
| box-shadow:2px 0 3px rgba(0,0,0,.6); | |
| } | |
| .material .profile .cover .vec_d{ | |
| z-index:1; | |
| left:235px; | |
| width:130px; | |
| background:#422249; | |
| -webkit-transform:skewX(-30deg); | |
| transform:skewX(-30deg); | |
| } | |
| .material .cover .vec_d:before{ | |
| width:1px; | |
| left:12px; | |
| height:100%; | |
| background:rgba(0,0,0,.4); | |
| -webkit-transform:skewX(5deg); | |
| transform:skewX(5deg); | |
| } | |
| .material .profile .cover .vec_e{ | |
| z-index:5; | |
| right:-75px; | |
| width:210px; | |
| background:#a43dad; | |
| -webkit-transform:skewX(45deg); | |
| transform:skewX(45deg); | |
| box-shadow:-5px -5px 10px rgba(0,0,0,.4); | |
| } | |
| .material .profile .photo{ | |
| left:30px; | |
| z-index:7; | |
| width:55px; | |
| bottom:30px; | |
| height:55px; | |
| overflow:hidden; | |
| border-radius:50%; | |
| position:absolute; | |
| } | |
| .material .profile .photo img{ | |
| width:100%; | |
| display:block; | |
| } | |
| .material .profile .info{ | |
| left:100px; | |
| z-index:7; | |
| bottom:35px; | |
| position:absolute; | |
| text-shadow:0 2px 1px rgba(0,0,0,.6); | |
| } | |
| .material .profile .info .name{ | |
| font-size:16px; | |
| font-weight:400; | |
| }.material .profile .info .position{ | |
| font-size:13px; | |
| padding-top:5px; | |
| } | |
| .material .profile .links, | |
| .material .profile .toggle, | |
| .material .profile .links a{ | |
| bottom:0; | |
| z-index:8; | |
| right:35px; | |
| width:35px; | |
| height:35px; | |
| border-radius:50%; | |
| position:absolute; | |
| } | |
| .material .profile .plus{ | |
| display:none; | |
| } | |
| .material .profile .toggle{ | |
| z-index:10; | |
| background:#ee3c4b; | |
| transition:all .2s ease-in-out 0s; | |
| } | |
| .material .profile .toggle:before, | |
| .material .profile .toggle:after{ | |
| top:50%; | |
| left:50%; | |
| content:''; | |
| background:#eee; | |
| position:inherit; | |
| } | |
| .material .profile .toggle:before{ | |
| width:12px; | |
| height:1px; | |
| margin-top:-0.5px; | |
| margin-left:-6px; | |
| } | |
| .material .profile .toggle:after{ | |
| width:1px; | |
| height:12px; | |
| margin-top:-6px; | |
| margin-left:-0.5px; | |
| } | |
| .material .profile .links a{ | |
| bottom:5px; | |
| z-index:8; | |
| right:5px; | |
| width:25px; | |
| height:25px; | |
| color:#343434; | |
| background:#eee; | |
| text-align:center; | |
| line-height:25px; | |
| -webkit-transform:none; | |
| transform:none; | |
| transition:all .3s ease-in-out 0s; | |
| } | |
| .material .profile .links a:before{ | |
| top:50%; | |
| right:30px; | |
| color:#ccc; | |
| height:20px; | |
| opacity:0; | |
| font-size:12px; | |
| min-width:65px; | |
| margin-top:-10px; | |
| line-height:20px; | |
| position:inherit; | |
| border-radius:2px; | |
| content:attr(data-title); | |
| background:rgba(0,0,0,.4); | |
| transition:all .4s ease-in-out 0s; | |
| } | |
| .material .profile .plus:checked + .toggle{ | |
| -webkit-transform:rotate(45deg); | |
| transform:rotate(45deg); | |
| } | |
| .material .profile .plus:checked + .toggle + .links a:nth-child(1){ | |
| -webkit-transform:translate(0,-130px); | |
| transform:translate(0,-130px); | |
| transition-duration:.4s; | |
| } | |
| .material .profile .plus:checked + .toggle + .links a:nth-child(2){ | |
| -webkit-transform:translate(0,-98px); | |
| transform:translate(0,-98px); | |
| transition-duration:.3s; | |
| } | |
| .material .profile .plus:checked + .toggle + .links a:nth-child(3){ | |
| -webkit-transform:translate(0,-66px); | |
| transform:translate(0,-66px); | |
| transition-duration:.3s; | |
| } | |
| .material .profile .plus:checked + .toggle + .links a:nth-child(4){ | |
| -webkit-transform:translate(0,-35px); | |
| transform:translate(0,-35px); | |
| transition-duration:.2s; | |
| } | |
| .material .profile .plus:checked + .toggle + .links a:before{ | |
| opacity:1; | |
| -webkit-transform:translate(-5px,0); | |
| transform:translate(-5px,0); | |
| } | |
| .material .profile .plus:checked + .toggle + .links a:nth-child(1):before{ | |
| transition-duration:.95s; | |
| } | |
| .material .profile .plus:checked + .toggle + .links a:nth-child(2):before{ | |
| transition-duration:.85s; | |
| } | |
| .material .profile .plus:checked + .toggle + .links a:nth-child(3):before{ | |
| transition-duration:.75s; | |
| } | |
| .material .profile .plus:checked + .toggle + .links a:nth-child(4):before{ | |
| transition-duration:.65s; | |
| } | |
| .material .tabs{ | |
| margin-top:5px; | |
| padding:5px 0; | |
| } | |
| .material .tabs a{ | |
| width:33%; | |
| float:left; | |
| font-size:14px; | |
| text-align:center; | |
| } | |
| .material .tabs a:nth-child(1){ | |
| text-align:left; | |
| -webkit-mask-image:-webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(30,29,35,1))); | |
| -webkit-mask-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(30,29,35,1) 100%); | |
| -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(30,29,35,1) 100%); | |
| } | |
| .material .tabs a:nth-child(3){ | |
| text-align:right; | |
| -webkit-mask-image:-webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,29,35,1)), color-stop(100%,rgba(0,0,0,0))); | |
| -webkit-mask-image:-webkit-linear-gradient(left, rgba(30,29,35,1) 0%,rgba(0,0,0,0) 100%); | |
| -webkit-mask-image:linear-gradient(to right, rgba(30,29,35,1) 0%,rgba(0,0,0,0) 100%); | |
| } | |
| .material .tabs-content{ | |
| padding:15px; | |
| } | |
| .material .tabs-content .friend-list{ | |
| background:#25252f; | |
| } | |
| .material .tabs-content .friend-list .list-li{ | |
| padding:10px 15px; | |
| } | |
| .material .tabs-content .friend-list .list-li:not(:last-child){ | |
| border-bottom:1px solid #444; | |
| } | |
| .material .tabs-content .friend-list .list-li.title{ | |
| font-size:16px; | |
| padding:15px!important; | |
| } | |
| .material .tabs-content .friend-list .photo{ | |
| width:30px; | |
| height:30px; | |
| overflow:hidden; | |
| border-radius:50%; | |
| } | |
| .material .tabs-content .friend-list .photo img{ | |
| width:100%; | |
| display:block; | |
| } | |
| .material .tabs-content .friend-list .info{ | |
| margin-left:10px; | |
| } | |
| .material .tabs-content .friend-list .info .name{ | |
| font-size:12px; | |
| font-weight:400; | |
| } | |
| .material .tabs-content .friend-list .info .time{ | |
| color:#aaa; | |
| font-size:11px; | |
| } | |
| .material .tabs-content .friend-list .action a{ | |
| height:30px; | |
| padding:5px; | |
| line-height:30px; | |
| } | |
| .material .tabs-content .friend-list .action .fa{ | |
| font-size:12px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900" rel="stylesheet" /> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment