harunpehlivan
5/14/2018 - 3:33 PM
UI
UI
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
*{
padding: 0;
margin: 0;
box-sizing: border-box;
text-transform:capitalize;
}
@mixin ul{
ul{
list-style:none;
padding-left:20px;
li{
padding: 4px 0 4px 15px;
position: relative;
margin-left: 10px;
width: 80%;
i{
position:absolute;
left:-16px;
top:10px;
color:#c5c2da87;
}
&:hover{
background: #000;
cursor:pointer
}
}
}
}
@mixin liafter($cont,$back) {
content:$cont;
display:block;
position:absolute;
top:5px;
right:0px;
width: 30px;
height: 20px;
text-align:center;
border-radius:30%;
background: $back;
color:#f1e0e0;
}
%liafter{
display:block;
position:absolute;
top:5px;
right:0px;
width: 20px;
height: 20px;
text-align:center;
border-radius:100%;
background: #079fda;
color:#f1e0e0;
}
.container{
width: 100%;
height:700px;
margin-top: 50px;
padding:0;
position:relative;
.header{
width: 100%;
height: 300px;
background-image:url('https://d29i1yqmtf7te0.cloudfront.net/upload/a9d31cf8-c1df-4a1d-b431-3436ef47f5f9/photo144131195616078a471e0638d.jpg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
position:relative;
margin: 0;
input{
width:50%;
position:absolute;
right: 20%;
top:10px;
background-color:transparent;
border:1px solid #666;
outline:none;
height:30px;
color:#fff;
z-index:2;
}
.fa-search{
position:absolute;
top:20px;
right:18%;
z-index:3;
color:#fff;
cursor:pointer;
}
img{
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
top: 111px;
right: 49%;
z-index: 4;
}
&:after{
display:block;
content:'';
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-color:rgba(0,0,0,.6);
}
.fa-bell{
position: absolute;
left: 25%;
top:20px;
z-index:3;
color:#fff;
}
.fa-align-justify{
position: absolute;
right: 4%;
top:20px;
z-index:3;
color:#fff;
}
}
aside{
width: 30%;
height: 400px;
float:right;
background: #dee0e6;
.sub-aside{
height: 30%;
margin-top:3%;
margin-bottom: 3%;
width: 95%;
margin-right: 5%;
padding-bottom: 40px;
background:#fff;
position:relative;
img{
width: 48%;
height: 70%;
}
}
h5{
color: #766bd4;
font-weight: 550;
margin-left: 10px;
}
span{
color: #555;
margin-left: 10px
}
.search{
width: 30px;
height: 30px;
background: #7da549;
position:absolute;
bottom:20px;
right:20px;
text-align:center;
line-height:30px;
border-radius:100%;
i{
color:white
}
}
}
article{
width: 70%;
height: 400px;
float:left;
background: #dee0e6;
.sub-article{
width: 80%;
margin-left: 20%;
padding-left:40px;
img{
width: 30px;
height: 30px;
border-radius:100%
}
.interaction{
width: 40%;
span{
display:inline-block;
margin-right: 20px;
font-weight:bold
}
}
}
}
.left-aside{
width: 15%;
background:#272729;
color:#f9eeeea6;
position:absolute;
top:-20px;
left:0;
height:720px;
z-index:7;
h4{
padding-left:20px;
color:#746f84;
}
.heading{
height: 60px;
line-height:60px;
width: 100%;
background:rgba(55, 89, 128, 1);
p{
margin-left: 20px;
font:{
size:1.8rem;
}
}
}
.porto{
width: 100%;
height: 120px;
padding:20px 0 20px 10px;
background: #1e1f21;
.img{
width:40px;
height: 40px;
display:inline-block;
margin-bottom: 30px;
img{
width: 100%;
height: 100%;
border-radius:100%;
}
}
.about-me{
display:inline-block;
width: 70%;
position:relative;
span{
display: block;
margin-left: 20px;
}
.dev{
position:absolute;
top:20px
}
}
}
.profile{
height: 120px;
@include ul;
li:nth-of-type(2):after{
content:'6';
@extend %liafter;
}
li:nth-of-type(3):after{
content:'1';
@extend %liafter;
}
}
.home{
@include ul;
}
.explore{
@include ul;
ul{
li:nth-of-type(3):after{
@include liafter('32',#b14e08);
}
li:nth-of-type(6):after{
@include liafter('14',#d4960a);
}
li:last-of-type:after{
@include liafter('25',#6d8c3c);
}
}
}
}
.fa-chevron-left{
margin-left: 16px;
}
.go-back{
margin-left:20px
}
.scope{
width: 494px;
height: 494px;
background: #272729;
position: absolute;
top: 25%;
left: 28%;
border-radius: 100%;
border: 6px solid #f0f0f0;
overflow: hidden;
z-index: 6;
.explore{
@include ul;
color:#f9eeeea6;
i{
left:-30px!important;
}
h4{
width:40%;
margin:80px auto 40px auto;
color:#746f84;
text-align:center;
}
ul{
width:70%;
margin-left: 40%;
font:{
size:1.5em;
}
li{
margin:10px 0 ;
padding-left:30px;
color:#f9eeeea6;
}
li:nth-of-type(3):after{
@include liafter('32',#b14e08);
width:50px;
height: 30px;
}
li:nth-of-type(6):after{
@include liafter('14',#d4960a);
}
li:last-of-type:after{
@include liafter('25',#6d8c3c);
}
}
}
}
.scope-shadow{
width: 20px;
height: 20px;
position: absolute;
top: 42.85%;
left: -5%;
border-top: 200px solid transparent;
border-right: 390px solid #f9f9f9;
border-bottom: 200px solid transparent;
border-left: 200px solid transparent;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
opacity: .7;
z-index: 5;
&:before,&:after{
width: 200px;
height: 100px;
content:'';
display:block;
position:absolute;
}
&:before{
top: -36px;
right: -143px;
background: #f9f9f9;
-webkit-transform: rotate(-18deg);
transform: rotate(-18deg)
}
&:after{
top: -43px;
right: -173px;
background: #f9f9f9;
-webkit-transform: rotate(-18deg);
transform: rotate(14deg);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="container">
<!-- start the header -->
<div class="header row">
<div class="col-lg-12">
<header>
<input type="search">
<i class="fa fa-search fa-lg"></i>
<img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_big.jpg?t=1526272979" alt="image">
</header>
</div>
<i class="fa fa-bell"></i>
<i class="fa fa-align-justify"></i>
</div>
<!-- end the header -->
<!-- start the content -->
<div class="content clearfix">
<aside>
<div class="sub-aside">
<img src="https://lh3.googleusercontent.com/-Q8kuP_gnSyc/WvmJMI2pQ2I/AAAAAAAAerE/rMdCHGU59J0V-ax6dapIQBMY5KZJXirMQCJoC/w530-h259-n/Ads%25C4%25B1z.png" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSemsIEiuRVcbFLxZNAvMZ2Jc4HZ8VVNunn9CgOOvSP_ugOSfUw" alt="">
<h5>read also</h5>
<span> more details</span>
<div class="search">
<i class="fa fa-search"></i>
</div>
</div>
<div class="sub-aside">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmq6qfoDpxzBtdvhGC8g8TSyBdUdPD2oIKloigXQyyKhV9Z7StAw" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSemsIEiuRVcbFLxZNAvMZ2Jc4HZ8VVNunn9CgOOvSP_ugOSfUw" alt="">
<h5>read also</h5>
<span> more details</span>
<div class="search">
<i class="fa fa-search"></i>
</div>
</div>
<div class="sub-aside">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmq6qfoDpxzBtdvhGC8g8TSyBdUdPD2oIKloigXQyyKhV9Z7StAw" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSemsIEiuRVcbFLxZNAvMZ2Jc4HZ8VVNunn9CgOOvSP_ugOSfUw" alt="">
<h5>read also</h5>
<span> more details</span>
<div class="search">
<i class="fa fa-search"></i>
</div>
</div>
</aside>
<article>
<div class="sub-article">
<h3> this our article</h3>
<img src="https://lh3.googleusercontent.com/-Q8kuP_gnSyc/WvmJMI2pQ2I/AAAAAAAAerE/rMdCHGU59J0V-ax6dapIQBMY5KZJXirMQCJoC/w530-h259-n/Ads%25C4%25B1z.png" alt="">
<span> 13 may 2018</span>
<div class="content">
<h3> most popularity images</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem illo aliquam vero, at maxime reprehenderit laboriosam est a quas libero ipsum iure porro officiis iusto, aperiam perspiciatis, placeat quia dignissimos magnam enim. Sed laudantium quidem nostrum commodi vitae, earum aut quae debitis adipisci! Libero aliquam perspiciatis, commodi eos reiciendis corrupti magnam blanditiis cum quidem! Est pariatur obcaecati impedit velit mollitia amet voluptatem animi laboriosam? Eveniet corporis recusandae tempora consequuntur, est voluptate magnam sequi maiores dolorem totam, ut explicabo quibusdam nam labore facilis. Ad omnis laborum dolores earum saepe magnam voluptatum corporis reiciendis hic tenetur. Error delectus vero a dolorum odit porro voluptatibus rerum laborum pariatur at harum facere labore molestiae fugit et, rem nisi quia eveniet iste illo numquam eos aliquid? Repudiandae repellendus molestias, hic magni culpa accusantium incidunt dolorum asperiores ipsa eius ipsam corrupti sit dignissimos provident. Laudantium </p>
</div>
<div class="interaction">
<i class="fa fa-heart"></i>
<span>like</span>
<i class="fa fa-comment"></i>
<span>comment</span>
<i class="fa fa-share-alt"></i>
<span>share</span>
</div>
</div>
</article>
</div>
<div class="left-aside">
<div class="heading">
<p>dashmix social</p>
</div>
<!-- start porto -->
<div class="porto">
<div class="img">
<img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_big.jpg?t=1526272979" alt="">
</div>
<div class="about-me">
<span class="name">HARUN PEHLİVAN</span>
<span class="dev">FOUNDER CEO BLOGGER</span>
</div>
</div>
<!-- end porto -->
<!-- start profile -->
<div class="profile">
<ul>
<li>my profile
<i class="fa fa-user"></i>
</li>
<li>notification
<i class="fa fa-bell"></i>
</li>
<li>messages
<i class="fa fa-envelope"></i>
</li>
</ul>
</div>
<!-- end profile -->
<!-- start home -->
<div class="home">
<h4 class="text-uppercase">home</h4>
<ul>
<li>news feed
<i class="far fa-newspaper"></i>
</li>
<li>marketplace
<i class="fas fa-shopping-basket"></i>
</li>
</ul>
</div>
<!-- end home -->
<!-- start explore -->
<div class="explore">
<h4 class="text-uppercase">explore</h4>
<ul>
<li>events
<i class="far fa-newspaper"></i>
</li>
<li>groups
<i class="fas fa-shopping-basket"></i>
</li>
<li>pages
<i class="far fa-newspaper"></i>
</li>
<li>on this day
<i class="fas fa-shopping-basket"></i>
</li>
<li>pages feed
<i class="far fa-newspaper"></i>
</li>
<li>photos
<i class="fas fa-shopping-basket"></i>
</li>
<li>games
<i class="fas fa-shopping-basket"></i>
</li>
</ul>
</div>
<!-- end explore -->
<h4 class="text-uppercase">dashboards</h4>
<i class="fas fa-chevron-left"></i>
<span class="go-back">go back</span>
</div>
<!-- end left aside -->
<!-- start scope -->
<div class="scope">
<!-- start explore -->
<div class="explore">
<h4 class="text-uppercase">explore</h4>
<ul>
<li>events
<i class="far fa-newspaper"></i>
</li>
<li>groups
<i class="fas fa-shopping-basket"></i>
</li>
<li>pages
<i class="far fa-newspaper"></i>
</li>
<li>on this day
<i class="fas fa-shopping-basket"></i>
</li>
<li>pages feed
<i class="far fa-newspaper"></i>
</li>
<li>photos
<i class="fas fa-shopping-basket"></i>
</li>
<li>games
<i class="fas fa-shopping-basket"></i>
</li>
</ul>
</div>
<!-- end explore -->
</div>
<!-- end scope -->
<!-- start scope shadow -->
<div class="scope-shadow">
</div>
<!-- end scope shadow -->
</div>