HTML
<div class="wrap">
<div class="comp">
<div class="monitor">
<div class="mid">
<div class="site">
<div class="topbar">
<div class="cerrar">
<div class="circl"></div>
<div class="circl"></div>
<div class="circl"></div>
</div>
</div>
<div class="inhead">
<div class="mid">
<div class="item"></div>
</div>
<div class="mid txr">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="inslid">
</div>
<div class="incont">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="wid">
<div class="itwid">
<div>
<div class="contfoot"></div>
</div>
</div>
<div class="itwid">
<div>
<div class="contfoot"></div>
</div>
</div>
<div class="itwid">
<div>
<div class="contfoot"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="infoot">
</div>
</div>
</div>
</div>
<div class="mid codigo">
<div class="line">
<div class="item var"></div>
<div class="item cont"></div>
<div class="clearfix"></div>
</div>
<div class="line">
<div class="item min var"></div>
<div class="item min fun"></div>
<div class="clearfix"></div>
</div>
<div class="line">
<div class="item min var"></div>
<div class="clearfix"></div>
</div>
<div class="line">
<div class="item var"></div>
<div class="item atr"></div>
<div class="item cont"></div>
<div class="clearfix"></div>
</div>
<div class="line tab1">
<div class="item min atr"></div>
<div class="item lrg fun"></div>
<div class="item min fun"></div>
<div class="item lrg cont"></div>
<div class="clearfix"></div>
</div>
<div class="line tab1">
<div class="item lrg atr"></div>
<div class="item min fun"></div>
<div class="item min cont"></div>
<div class="clearfix"></div>
</div>
<div class="line tab1">
<div class="item atr"></div>
<div class="item min fun"></div>
<div class="item atr"></div>
<div class="clearfix"></div>
</div>
<div class="line tab1">
<div class="item min atr"></div>
<div class="item min cont"></div>
<div class="item lrg atr"></div>
<div class="item fun"></div>
<div class="clearfix"></div>
</div>
<div class="line tab1">
<div class="item min atr"></div>
<div class="item lrg fun"></div>
<div class="item lrg cont"></div>
<div class="item min fun"></div>
<div class="clearfix"></div>
</div>
<div class="line tab1">
<div class="item min var"></div>
<div class="clearfix"></div>
</div>
<div class="line tab1">
<div class="item min var"></div>
<div class="clearfix"></div>
</div>
<div class="line tab2">
<div class="item min var"></div>
<div class="clearfix"></div>
</div>
<div class="line tab2">
<div class="item min atr"></div>
<div class="item min fun"></div>
<div class="clearfix"></div>
</div>
<div class="line tab3">
<div class="item min atr"></div>
<div class="item min fun"></div>
<div class="item lrg fun"></div>
<div class="item lrg cont"></div>
<div class="clearfix"></div>
</div>
<div class="line tab3">
<div class="item min atr"></div>
<div class="item min fun"></div>
<div class="item lrg atr"></div>
<div class="item lrg cont"></div>
<div class="clearfix"></div>
</div>
<div class="line tab4">
<div class="item min fun"></div>
<div class="item lrg atr"></div>
<div class="clearfix"></div>
</div>
<div class="line tab1">
<div class="item atr"></div>
<div class="item var"></div>
<div class="item cont"></div>
<div class="clearfix"></div>
</div>
<div class="line tab3">
<div class="item min var"></div>
<div class="clearfix"></div>
</div>
<div class="line tab4">
<div class="item min atr"></div>
<div class="item min fun"></div>
<div class="item lrg atr"></div>
<div class="item lrg cont"></div>
<div class="clearfix"></div>
</div>
<div class="line">
<div class="item min var"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="base">
</div>
</div>
</div>
SCSS
// RESETS
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
a, a:hover, a:focus, a:active {
text-decoration: none!important;
outline: none;
}
.npd{
padding: 0;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
a:hover{
opacity: 0.7;
color: white;
}
body{
font-size: 14px;
color: black;
}
.clear{
clear: both;
}
img{
max-width: 100%;
}
h1, h2, h3, h4{
padding: 0;
margin: 0;
}
// VARIABLES
$mainblack: #22262b;
$amain: #fbb053;
$grisclaro: #e0e2e2;
$display: #abadc6;
$item: #d1c9bf;
$codred: #ac5e47;
// MISC
.wrap{
width: 100%;
height: 100vh;
position: relative;
background-color: $mainblack;
display: flex;
justify-content: center;
align-items: center
}
.comp{
width: 100%;
height: 194px;
text-align: center;
.monitor{
width: 275px;
height: 181px;
display: block;
margin: 0 auto;
border-radius: 10px 10px 0px 0px;
padding: 9px;
border: solid 1px $grisclaro;
background-color: black;
}
.mid{
float: left;
display: block;
height: 100%;
position: relative;
background-color: $display;
width: 50%;
&.codigo{
background-color: $mainblack;
}
}
.site{
overflow: hidden;
position: absolute;
width: 105px;
height: 138px;
bottom: 0;
right: 0;
.topbar{
width: 100%;
}
.cerrar{
width: 100%;
padding: 3px;
line-height: 0;
display: flex;
align-items: center;
justify-content: flex-start;
border-radius: 4px 4px 0px 0px;
background-color: #afa895;
&>div{
display: inline-block;
width: 2px;
height: 2px;
border-radius: 50%;
background: white;
margin: 0px 1px;
}
}
.inhead{
padding: 2px;
height: 5px;
background-color: #ddd8cf;
.item{
width: 10px;
height: 1px;
background-color: $item;
margin: 0 1px;
display: block;
float: left;
}
}
}
.txr{
text-align: right;
.item{
float: right;
}
}
.inslid{
width: 100%;
height: 33px;
background-color: #efebe2;
}
.incont{
padding-top: 10px;
background: #fefaf0;
.item{
background-color: $item;
width: 53px;
height: 2px;
display: block;
margin: 0 auto;
margin-top: 1px;
&:nth-child(1){
width: 20px;
}
&:nth-child(2){
margin-top: 3px;
width: 41px;
}
&:nth-child(3){
width: 32px;
}
&:nth-child(4){
width: 23px;
}
}
.wid{
width: 100%;
padding: 8px 1px;
.itwid{
width: 33.333%;
float: left;
height: 26px;
padding: 0px 3px;
&>div{
width: 100%;
height: 100%;
background-color: #f5f1e6;
position: relative;
.contfoot{
position: absolute;
bottom: 0;
left: 0;
height: 6px;
width: 100%;
background-color: #ebe5dc;
}
}
}
}
.infoot{
background-color: #efebe2;
height: 26px;
width: 100%;
}
}
@keyframes code {
0% {
opacity: 1;
}
50% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
.codigo{
padding: 14px 0px 14px 14px;
.var{
background-color: $codred;
animation: code;
animation-duration: 0.3s;
animation-iteration-count: infinite;
}
.cont{
background-color: #464748;
animation: code;
animation-duration: 0.5s;
animation-iteration-count: infinite;
}
.fun{
background-color: $amain;
animation: code;
animation-duration: 0.2s;
animation-iteration-count: infinite;
}
.atr{
background-color: #645572;
animation: code;
animation-duration: 0.1s;
animation-iteration-count: infinite;
}
.item{
height: 3px;
width: 20px;
float: left;
margin-right: 3px;
&.min{
width: 13px;
}
&.lrg{
width: 30px;
}
}
.line{
padding: 2px 0;
width: 100%;
}
.tab1{
padding-left: 5px;
}
.tab2{
padding-left: 8px;
}
.tab3{
padding-left: 10px;
}
.tab4{
padding-left: 12px;
}
}
}
.base {
width: 338px;
height: 12px;
background: $grisclaro;
display: block;
margin: 0 auto;
border-radius: 0px 0px 6px 6px;
}
