katonada
12/5/2014 - 7:30 AM
Generated by SassMeister.com.
Generated by SassMeister.com.
<!-- Styria + __[]__GoranStyle SCSS -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<title>Test</title>
<link href='http://fonts.googleapis.com/css?family=BenchNine:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="styleDavor.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.19877.js"></script>
</head>
<body>
<div class="wrapper cf __[ wrapper ]__GoranStyle">
<header class="header __[ header ]__GoranStyle">
<h1 class="header__title __[ header__title ]__GoranStyle">Styria Hrvatska - medijski servisi</h1>
</header>
<div class="content cf __[ content ]__GoranStyle">
<div class="price price--third __[ left-side ]__GoranStyle">
<div class="price__photo __[ left-side__img-box ]__GoranStyle">
<img class="price__label __[ left-side__img-box__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/label.png">
</div>
<article class="price__article __[ left-side__article-box ]__GoranStyle">
<h3 class="price__title __[ left-side__article-box__h3title ]__GoranStyle">Pretplata na 24express</h3>
<p class="price__description __[ left-side__article-box__paragraph ]__GoranStyle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore et dolore Lorem ipsum dolor sit amet, consectetur adipisicing elit, <strong>magna aliqua</strong>. <!-- strong umjesto span -->
</p>
</article>
<article class="price__article __[ left-side__article-box ]__GoranStyle">
<h6 class="price__subtitle __[ left-side__article-box__h6title ]__GoranStyle">Dobitnici price za 8. mjesec:</h6>
<p class="price__description price__description--winners __[ left-side__article-box__paragraph--winners ]__GoranStyle">
<a href="/lorem" title="lorem">lorem</a>, <!-- trebali su biti linkovi ali nije navedeno pa nije problem -->
<a href="/lebron" title="lebron">lebron</a>, <!-- trebali su biti linkovi ali nije navedeno pa nije problem -->
<a href="/dolor" title="Dolor">Dolor</a>, <!-- trebali su biti linkovi ali nije navedeno pa nije problem -->
<a href="/duis" title="Duis">Duis</a>, <!-- trebali su biti linkovi ali nije navedeno pa nije problem -->
<a href="/manga" title="Manga">Manga</a> <!-- trebali su biti linkovi ali nije navedeno pa nije problem -->
</p>
</article>
</div>
<!-- left side --> <!-- HTML komentari moraju imati razmak između otvorenih i zatvorenih srednjih crtica -->
<div class="toplist __[ right-side ]__GoranStyle">
<h2 class="toplist__title toplist__title--main __[ right-side__title ]__GoranStyle">
Lorem ipsum 9 mj. dolor <strong>1500 bodova</strong> <!-- strong umjesto span -->
</h2>
<div class="toplist__labels cf __[ right-side__column-title ]__GoranStyle">
<p class="toplist__title--user __[ right-side__column-title__paragraph ]__GoranStyle">Korisnik</p>
<p class="toplist__title--points __[ right-side__column-title__paragraph--right ]__GoranStyle">Bodova</p>
<!-- div class="__[ clear ]__GoranStyle"></div --> <!-- ovaj način je zastario, stavljamo clearfix -->
</div>
<div class="toplist__ranks ranking cf __[ right-side__rankings ]__GoranStyle">
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">1.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">2500</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">2.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">2300</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">3.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">2100</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">4.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">2000</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">5.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">1500</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">6.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">1250</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">7.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">1100</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">8.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">1000</p>
</div>
<div class="ranking__user ranking__user--empty __[ right-side__rankings__user--empty ]__GoranStyle">
<ul class="ranking__dots __[ right-side__rankings__user--empty__menu ]__GoranStyle">
<li class="ranking__dot __[ right-side__rankings__user--empty__menu__item ]__GoranStyle"></li>
<li class="ranking__dot __[ right-side__rankings__user--empty__menu__item ]__GoranStyle"></li>
<li class="ranking__dot __[ right-side__rankings__user--empty__menu__item ]__GoranStyle"></li>
</ul>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">100.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">750</p>
</div>
<!-- div class="__[ clear ]__GoranStyle"></div --> <!-- ovaj način je zastario, stavljamo clearfix -->
</div>
</div>
<!-- right side --> <!-- HTML komentari moraju imati razmak između otvorenih i zatvorenih srednjih crtica -->
<!-- div class="__[ clear ]__GoranStyle"></div --> <!-- ovaj način je zastario, stavljamo clearfix -->
</div>
<!-- content --> <!-- HTML komentari moraju imati razmak između otvorenih i zatvorenih srednjih crtica -->
<!-- div class="__[ clear ]__GoranStyle"></div --> <!-- ovaj način je zastario, stavljamo clearfix -->
</div>
<script src="js/script.js"></script>
</body>
</html>/* Goran SCSS */
* {
margin: 0;
padding: 0;
outline: none;
text-decoration: none;
font-family: 'Arial';
}
.clear {
clear: both;
}
body, html {
width: 100%;
height: 100%;
}
body {
padding-top: 40px;
}
body .wrapper {
width: 100%;
max-width: 1000px;
margin: 40px auto;
min-height: 700px;
padding: 10px;
box-sizing: border-box;
}
body .wrapper .header {
width: 100%;
min-height: 80px;
-webkit-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.15);
padding: 20px;
box-sizing: border-box;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
body .wrapper .header .header__title {
font-weight: 700;
color: black;
font-size: 35px;
font-family: "BenchNine";
}
body .wrapper .content {
width: 100%;
min-height: 615px;
height: auto;
margin: 15px auto;
position: relative;
/*left side*/
}
body .wrapper .content .left-side {
float: left;
width: 32.7198%;
min-height: 100%;
background-color: white;
-webkit-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.15);
overflow: hidden;
position: absolute;
margin-bottom: 20px;
}
body .wrapper .content .left-side .left-side__img-box {
width: 100%;
height: 210px;
background-color: #8ad1de;
background-image: url("http://showcase.24sata.hr/gs/img/face.png");
background-repeat: no-repeat;
background-position: 25px -60px;
-webkit-box-shadow: 0 0 40px 0 rgba(0, 158, 215, 0.3) inset;
-moz-box-shadow: 0 0 40px 0 rgba(0, 158, 215, 0.3) inset;
-ms-box-shadow: 0 0 40px 0 rgba(0, 158, 215, 0.3) inset;
box-shadow: 0 0 40px 0 rgba(0, 158, 215, 0.3) inset;
position: relative;
}
body .wrapper .content .left-side .left-side__img-box .left-side__img-box__img {
display: block;
height: auto;
width: auto;
margin: 0px auto;
position: relative;
top: 186px;
}
body .wrapper .content .left-side .left-side__article-box {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
margin: 0 0 40px 0;
}
body .wrapper .content .left-side .left-side__article-box:first-of-type {
margin-top: 40px;
}
body .wrapper .content .left-side .left-side__article-box .left-side__article-box__h3title {
font-size: 20px;
margin: 0 0 10px 0;
}
body .wrapper .content .left-side .left-side__article-box .left-side__article-box__h6title {
font-size: 14px;
}
body .wrapper .content .left-side .left-side__article-box .left-side__article-box__h6title span {
color: #287af6;
}
body .wrapper .content .left-side .left-side__article-box .left-side__article-box__paragraph {
font-size: 14px;
line-height: 20px;
}
body .wrapper .content .left-side .left-side__article-box .left-side__article-box__paragraph span {
font-weight: bold;
color: #d7040a;
}
body .wrapper .content .left-side .left-side__article-box .left-side__article-box__paragraph--winners {
font-size: 14px;
line-height: 20px;
font-weight: bold;
}
body .wrapper .content .left-side .left-side__article-box .left-side__article-box__paragraph--winners span {
font-weight: bold;
color: #d7040a;
}
body .wrapper .content .left-side .left-side__article-box .left-side__article-box__paragraph--winners span {
color: #287af6;
}
body .wrapper .content .right-side {
width: 67.2126%;
min-height: 100px;
float: right;
padding: 0 20px 0 30px;
box-sizing: border-box;
-webkit-box-shadow: 2px 0 13px -1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 0 13px -1px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 2px 0 13px -1px rgba(0, 0, 0, 0.15);
box-shadow: 2px 0 13px -1px rgba(0, 0, 0, 0.15);
}
body .wrapper .content .right-side .right-side__title {
font-size: 24px;
margin: 20px 0;
}
body .wrapper .content .right-side .right-side__title span {
color: #d7040a;
}
body .wrapper .content .right-side .right-side__column-title {
width: 100%;
height: auto;
padding: 0 10px 0 0;
box-sizing: border-box;
}
body .wrapper .content .right-side .right-side__column-title .right-side__column-title__paragraph {
display: inline-block;
font-size: 14px;
float: left;
}
body .wrapper .content .right-side .right-side__column-title .right-side__column-title__paragraph--right {
display: inline-block;
font-size: 14px;
float: left;
float: right;
}
body .wrapper .content .right-side .right-side__rankings {
width: 100%;
height: auto;
margin: 15px 0;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user {
width: 100%;
padding: 0 10px 0 0;
box-sizing: border-box;
border-top: 1px solid #ececec;
height: 50px;
clear: both;
float: left;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user:hover {
cursor: pointer;
background-color: #f7f7f7;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user * {
float: left;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user p {
line-height: 50px;
display: inline-block;
color: #666666;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user .right-side__rankings__user__left-bar {
width: 5px;
height: 100%;
background: -webkit-linear-gradient(#ffd800, #eb9909);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#ffd800, #eb9909);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#ffd800, #eb9909);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#ffd800, #eb9909);
/* Standard syntax (must be last) */
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user .right-side__rankings__user__rank {
width: auto;
font-weight: bold;
font-size: 18px;
margin: 0 30px 0 15px;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user .right-side__rankings__user__img {
width: auto;
height: auto;
display: block;
margin: 10px 10px 0 0;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user .right-side__rankings__user__name {
line-height: 50px;
font-size: 11px;
color: #297af6;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user .right-side__rankings__user__points {
font-weight: bold;
font-size: 18px;
float: right;
line-height: 50px;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user:nth-child(2) .right-side__rankings__user__left-bar {
opacity: 0.6;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user:nth-child(3) .right-side__rankings__user__left-bar {
opacity: 0.45;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user:nth-child(4) .right-side__rankings__user__left-bar {
opacity: 0.3;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user:nth-child(5) .right-side__rankings__user__left-bar {
opacity: 0.15;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user:nth-child(n+6) .right-side__rankings__user__left-bar {
opacity: 0;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user--empty {
width: 100%;
padding: 0 10px 0 0;
box-sizing: border-box;
border-top: 1px solid #ececec;
height: 50px;
clear: both;
float: left;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user--empty:hover {
cursor: pointer;
background-color: #f7f7f7;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user--empty .right-side__rankings__user--empty__menu {
height: 50px;
width: 40px;
margin: 0px auto;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user--empty .right-side__rankings__user--empty__menu .right-side__rankings__user--empty__menu__item {
float: left;
list-style-position: inside;
width: 10px;
font-size: 26px;
color: #bbbbbb;
line-height: 50px;
}
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user--empty .right-side__rankings__user--empty__menu .right-side__rankings__user--empty__menu__item:nth-child(2) {
margin: 0 5px;
}
/*media query*/
@media screen and (max-width: 768px) {
body .wrapper header h1 {
text-align: center;
}
body .wrapper .content .left-side {
clear: both;
float: none;
margin: 20px auto;
width: 67.2126%;
position: relative;
}
body .wrapper .content .left-side .left-side__img-box {
background-position: center center;
}
body .wrapper .content .right-side {
clear: both;
float: none;
margin: 0px auto;
-webkit-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.15);
padding: 0 30px;
}
body .wrapper .content .right-side .right-side__title {
display: inline-block;
}
}
@media screen and (max-width: 480px) {
body .wrapper .content .left-side,
body .wrapper .content .right-side {
width: 100%;
}
}
@media screen and (max-width: 330px) {
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user {
padding: 0;
}
body .wrapper .content .right-side .right-side__rankings
.right-side__rankings__user .right-side__rankings__user__rank {
margin: 0 15px 0 5px;
}
}
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
/* Goran SCSS */
*{
margin:0;
padding:0;
outline:none;
text-decoration:none;
font-family:'Arial';
}
@mixin box-shadow($xpos, $ypos, $blur, $spread, $color, $inset: null){
-webkit-box-shadow: $xpos $ypos $blur $spread $color $inset;
-moz-box-shadow: $xpos $ypos $blur $spread $color $inset;
-ms-box-shadow: $xpos $ypos $blur $spread $color $inset;
box-shadow: $xpos $ypos $blur $spread $color $inset;
}
@mixin border-radius($radius){
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
-ms-border-radius:$radius;
border-radius:$radius;
}
.clear{clear:both;}
$red: #d7040a;
body,html{
width:100%;
height:100%;
}
body{
padding-top:40px;
.wrapper{
width:100%;
max-width:1000px;
margin:40px auto;
min-height:700px;
padding:10px;
box-sizing:border-box;
.header{
width:100%;
min-height:80px;
@include box-shadow(0, 0, 13px, 0, rgba(0,0,0,0.15));
padding:20px;
box-sizing:border-box;
@include border-radius(10px);
.header__title{
font-weight:700;
color:black;
font-size:35px;
font-family:"BenchNine";
}
}
.content{
width:100%;
min-height:615px;
height:auto;
margin:15px auto;
position:relative;
.left-side{
float:left;
width: 32.7198%;
min-height:100%;
background-color:white;
@include box-shadow(0, 0, 13px, 0, rgba(0,0,0,0.15));
overflow:hidden;
position:absolute;
margin-bottom:20px;
.left-side__img-box{
width:100%;
height:210px;
background-color:#8ad1de;
background-image:url("http://showcase.24sata.hr/gs/img/face.png");
background-repeat:no-repeat;
background-position:25px -60px;
@include box-shadow(0, 0, 40px, 0, rgba(0,158,215,0.3), inset);
position:relative;
.left-side__img-box__img{
display:block;
height:auto;
width:auto;
margin:0px auto;
position:relative;
top:186px;
}
}
.left-side__article-box{
width:100%;
padding:0 20px;
box-sizing:border-box;
margin:0 0 40px 0;
&:first-of-type{
margin-top:40px;
}
.left-side__article-box__h3title{
font-size:20px;
margin:0 0 10px 0;
}
.left-side__article-box__h6title{
font-size:14px;
span{
color:#287af6;
}
}
@mixin paragraph-styling{
font-size:14px;
line-height:20px;
span{
font-weight:bold;
color:$red;
}
}
.left-side__article-box__paragraph{
@include paragraph-styling;
}
.left-side__article-box__paragraph--winners{
@include paragraph-styling;
font-weight:bold;
span{
color:#287af6;
}
}
}
} /*left side*/
.right-side{
width:67.2126%;
min-height:100px;
float:right;
padding:0 20px 0 30px;
box-sizing:border-box;
@include box-shadow(2px, 0, 13px, -1px, rgba(0,0,0,0.15));
.right-side__title{
font-size:24px;
margin:20px 0;
span{
color:$red;
}
}
.right-side__column-title{
width:100%;
height:auto;
padding:0 10px 0 0;
box-sizing:border-box;
@mixin title{
display:inline-block;
font-size:14px;
float:left;
}
.right-side__column-title__paragraph{
@include title;
}
.right-side__column-title__paragraph--right{
@include title;
float:right;
}
}
.right-side__rankings{
width:100%;
height:auto;
margin:15px 0;
@mixin user-frame{
width:100%;
padding:0 10px 0 0;
box-sizing:border-box;
border-top:1px solid #ececec;
height:50px;
clear:both;
float:left;
&:hover{
cursor:pointer;
background-color:#f7f7f7;
}
}
.right-side__rankings__user{
@include user-frame;
*{float:left;}
p{
line-height:50px;
display:inline-block;
color:#666666;
}
.right-side__rankings__user__left-bar{
width:5px;
height:100%;
background: -webkit-linear-gradient(#ffd800, #eb9909); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#ffd800, #eb9909); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#ffd800, #eb9909); /* For Firefox 3.6 to 15 */
background: linear-gradient(#ffd800, #eb9909); /* Standard syntax (must be last) */
}
.right-side__rankings__user__rank{
width:auto;
font-weight:bold;
font-size:18px;
margin:0 30px 0 15px;
}
.right-side__rankings__user__img{
width:auto;
height:auto;
display:block;
margin:10px 10px 0 0;
}
.right-side__rankings__user__name{
line-height:50px;
font-size:11px;
color:#297af6;
}
.right-side__rankings__user__points{
font-weight:bold;
font-size:18px;
float:right;
line-height:50px;
}
&:nth-child(2) .right-side__rankings__user__left-bar{opacity:0.6;}
&:nth-child(3) .right-side__rankings__user__left-bar{opacity:0.45;}
&:nth-child(4) .right-side__rankings__user__left-bar{opacity:0.3;}
&:nth-child(5) .right-side__rankings__user__left-bar{opacity:0.15;}
&:nth-child(n+6) .right-side__rankings__user__left-bar{opacity:0;}
}
.right-side__rankings__user--empty{
@include user-frame;
.right-side__rankings__user--empty__menu{
height:50px;
width:40px;
margin:0px auto;
.right-side__rankings__user--empty__menu__item{
float:left;
list-style-position:inside;
width:10px;
font-size:26px;
color:#bbbbbb;
line-height:50px;
&:nth-child(2){
margin:0 5px;
}
}
}
}
}
}
}
}
}
/*media query*/
@media screen and (max-width: 768px){
body .wrapper header h1{
text-align:center;
}
body .wrapper .content .left-side{
clear:both;
float:none;
margin:20px auto;
width:67.2126%;
position:relative;
.left-side__img-box{
background-position:center center;
}
}
body .wrapper .content .right-side{
clear:both;
float:none;
margin:0px auto;
@include box-shadow(0, 0, 13px, 0, rgba(0,0,0,0.15));
padding:0 30px;
.right-side__title{
display:inline-block;
}
}
}
@media screen and (max-width: 480px){
body .wrapper .content .left-side,
body .wrapper .content .right-side{
width:100%;
}
}
@media screen and (max-width: 330px){
body .wrapper .content .right-side .right-side__rankings .right-side__rankings__user{
padding:0;
}
body .wrapper .content .right-side .right-side__rankings
.right-side__rankings__user .right-side__rankings__user__rank{
margin:0 15px 0 5px;
}
}<!-- Styria + __[]__GoranStyle SCSS -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<title>Test</title>
<link href='http://fonts.googleapis.com/css?family=BenchNine:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="styleDavor.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.19877.js"></script>
</head>
<body>
<div class="wrapper cf __[ wrapper ]__GoranStyle">
<header class="header __[ header ]__GoranStyle">
<h1 class="header__title __[ header__title ]__GoranStyle">Styria Hrvatska - medijski servisi</h1>
</header>
<div class="content cf __[ content ]__GoranStyle">
<div class="price price--third __[ left-side ]__GoranStyle">
<div class="price__photo __[ left-side__img-box ]__GoranStyle">
<img class="price__label __[ left-side__img-box__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/label.png">
</div>
<article class="price__article __[ left-side__article-box ]__GoranStyle">
<h3 class="price__title __[ left-side__article-box__h3title ]__GoranStyle">Pretplata na 24express</h3>
<p class="price__description __[ left-side__article-box__paragraph ]__GoranStyle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore et dolore Lorem ipsum dolor sit amet, consectetur adipisicing elit, <strong>magna aliqua</strong>. <!-- strong umjesto span -->
</p>
</article>
<article class="price__article __[ left-side__article-box ]__GoranStyle">
<h6 class="price__subtitle __[ left-side__article-box__h6title ]__GoranStyle">Dobitnici price za 8. mjesec:</h6>
<p class="price__description price__description--winners __[ left-side__article-box__paragraph--winners ]__GoranStyle">
<a href="/lorem" title="lorem">lorem</a>, <!-- trebali su biti linkovi ali nije navedeno pa nije problem -->
<a href="/lebron" title="lebron">lebron</a>, <!-- trebali su biti linkovi ali nije navedeno pa nije problem -->
<a href="/dolor" title="Dolor">Dolor</a>, <!-- trebali su biti linkovi ali nije navedeno pa nije problem -->
<a href="/duis" title="Duis">Duis</a>, <!-- trebali su biti linkovi ali nije navedeno pa nije problem -->
<a href="/manga" title="Manga">Manga</a> <!-- trebali su biti linkovi ali nije navedeno pa nije problem -->
</p>
</article>
</div>
<!-- left side --> <!-- HTML komentari moraju imati razmak između otvorenih i zatvorenih srednjih crtica -->
<div class="toplist __[ right-side ]__GoranStyle">
<h2 class="toplist__title toplist__title--main __[ right-side__title ]__GoranStyle">
Lorem ipsum 9 mj. dolor <strong>1500 bodova</strong> <!-- strong umjesto span -->
</h2>
<div class="toplist__labels cf __[ right-side__column-title ]__GoranStyle">
<p class="toplist__title--user __[ right-side__column-title__paragraph ]__GoranStyle">Korisnik</p>
<p class="toplist__title--points __[ right-side__column-title__paragraph--right ]__GoranStyle">Bodova</p>
<!-- div class="__[ clear ]__GoranStyle"></div --> <!-- ovaj način je zastario, stavljamo clearfix -->
</div>
<div class="toplist__ranks ranking cf __[ right-side__rankings ]__GoranStyle">
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">1.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">2500</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">2.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">2300</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">3.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">2100</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">4.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">2000</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">5.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">1500</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">6.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">1250</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">7.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">1100</p>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">8.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">1000</p>
</div>
<div class="ranking__user ranking__user--empty __[ right-side__rankings__user--empty ]__GoranStyle">
<ul class="ranking__dots __[ right-side__rankings__user--empty__menu ]__GoranStyle">
<li class="ranking__dot __[ right-side__rankings__user--empty__menu__item ]__GoranStyle"></li>
<li class="ranking__dot __[ right-side__rankings__user--empty__menu__item ]__GoranStyle"></li>
<li class="ranking__dot __[ right-side__rankings__user--empty__menu__item ]__GoranStyle"></li>
</ul>
</div>
<div class="ranking__user __[ right-side__rankings__user ]__GoranStyle">
<div class="ranking__num __[ right-side__rankings__user__left-bar ]__GoranStyle"></div> <!-- koristiti :before element -->
<p class="ranking__rank __[ right-side__rankings__user__rank ]__GoranStyle">100.</p>
<img class="ranking__avatar __[ right-side__rankings__user__img ]__GoranStyle" src="http://showcase.24sata.hr/gs/img/user.png" alt="user">
<p class="ranking__username __[ right-side__rankings__user__name ]__GoranStyle">lebron</p>
<p class="ranking__points __[ right-side__rankings__user__points ]__GoranStyle">750</p>
</div>
<!-- div class="__[ clear ]__GoranStyle"></div --> <!-- ovaj način je zastario, stavljamo clearfix -->
</div>
</div>
<!-- right side --> <!-- HTML komentari moraju imati razmak između otvorenih i zatvorenih srednjih crtica -->
<!-- div class="__[ clear ]__GoranStyle"></div --> <!-- ovaj način je zastario, stavljamo clearfix -->
</div>
<!-- content --> <!-- HTML komentari moraju imati razmak između otvorenih i zatvorenih srednjih crtica -->
<!-- div class="__[ clear ]__GoranStyle"></div --> <!-- ovaj način je zastario, stavljamo clearfix -->
</div>
<script src="js/script.js"></script>
</body>
</html>