Hej tworzę pewien projekt strony internetowej i zastanawiam się jak przedstawić to graficznie. Mam problemy jeśli chodzi o kolorystykę i wygląd layoutu. Generalnie kończę zajmować się front endem, tylko zostały mi aspekty czysto wizualne. Adres strony http://strona-radka.hitowy.pl/ . Jeśli macie jakieś uwagi co do kodu i wyglądu, to chętnie przyjmę. Dodam tylko na koniec, że wygląd treści kafelków, baneru jest do zmiany. Jest to po prostu taki szablon bez grafiki.
Kod CSS
.navbar
{
width:100%;
font-size:18px;
border-radius:0;
background-color:black;
color:blue;
}
.navbar .navbar-nav>li>a
{
color:white;
}
.navbar .navbar-nav>li>a:hover
{
background-color:red;
}
.navbar .navbar-nav>li>a:focus
{
color:white;
background-color:red;
}
.dropdown-menu
{
background-color:black;
font-size:18px;
}
.dropdown-menu>li>a
{
background-color:black;
color:white;
}
.dropdown-menu>li>a:hover
{
background-color:red;
color:white;
}
.glyphicon-home
{
color:white;
}
.icon-bar
{
color:white;
background-color:white;
}
.modal-content
{
border-radius:0;
background-color:red;
color:white;
}
.modal-header
{
background-color:black;
border:0;
}
.modal-footer
{
border:0;
}
.button-close
{
color:white;
opacity:0;
}
.navbar-right
{
color:white;
}
.footer
{
color:#8A8787;
text-align:left;
width:100%;
font-size:12px;
padding:18px;
}
.footer-bot
{
color:black;
text-align:center;
padding:15px;
font-size:10px;
background-color:#2a2a2a;
}
.media
{
color:white;
padding:12px;
}
.media-body
{
color:#8A8787;
font-size:12px;
}
.fa-steam-square
{
color:white;
display: inline-block;
opacity: 1;
transform: scale(1,1);
transition-timing-function: ease-out;
transition-duration: 250ms;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
.fa-steam-square:hover
{
color:#575758;
opacity: .7;
transform: scale(1.8,1.8);
transition-timing-function: ease-out;
transition-duration: 250ms;
-webkit-transform: scale(1.8,1.8);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1.8,1.8);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
position: relative;
z-index: 99;
}
.fa-youtube-square
{
color:white;
display: inline-block;
opacity: 1;
transform: scale(1,1);
transition-timing-function: ease-out;
transition-duration: 250ms;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
.fa-youtube-square:hover
{
color:#A80A25;
opacity: .7;
transform: scale(1.8,1.8);
transition-timing-function: ease-out;
transition-duration: 250ms;
-webkit-transform: scale(1.8,1.8);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1.8,1.8);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
position: relative;
z-index: 99;
}
.fa-facebook-square
{
color:white;
display: inline-block;
opacity: 1;
transform: scale(1,1);
transition-timing-function: ease-out;
transition-duration: 250ms;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
.fa-facebook-square:hover
{
color:#3878F7;
opacity: .7;
transform: scale(1.8,1.8);
transition-timing-function: ease-out;
transition-duration: 250ms;
-webkit-transform: scale(1.8,1.8);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1.8,1.8);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
position: relative;
z-index: 99;
}
h2
{
font-size:15px;
color:white;
border-bottom:1px solid #444444;
padding:5px;
}
h4
{
font-size:12px;
color:white;
border-top:1px solid #444444;
text-align:center;
padding-top:10px;
}
h5
{
}
.tile
{
height:250px;
border:1px solid black;
width:100%;
padding:10px;
}
.wideo
{
height:250px;
border:1px solid black;
width:100%;
}
.slider
{
border:1px solid black;
width:100%;
height:300px;
}
.col-md-4
{
padding:0;
}
.col-xs-12
{
padding:0;
}
.col-sm-12
{
padding:0;
}
