Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- Temos pavadinimas: SWIZZ HTML5/CSS3 Testas
- Data: 2014 kovo 8d.
- Aprasymas: Paprastas HTML5/CSS3 isdestymas ir 'responsive' sukurimas
- Versija: 1.0
- Autorius: Tomas Balciunas
- Autoriaus tinklapis: http://swizz1.deviantart.com
- */
- body {
- background-color: #E9E9E9;
- color: #999;
- font-size: 90%; /* Paprastai būna 14px */
- font-family: Arial, 'Lucida Sans Unicode';
- line-height: 1,5;
- text-align: left;
- }
- a {
- text-decoration: none;
- }
- a:link, a:visited {
- color: #0CC;
- }
- a:hover, a:active {
- background-color: #0CC;
- color: #FFF;
- border-radius: 3px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- }
- .body {
- margin: 0 auto;
- width: 80%;
- clear: both;
- }
- .mainHeader img {
- width:40%;
- height: auto;
- margin: 2% 0;
- }
- .mainHeader nav {
- background-color: #666;
- height: 40px;
- border-radius: 3px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- }
- .mainHeader nav ul {
- list-style: none;
- margin: 0 auto;
- }
- .mainHeader nav ul li {
- float: left;
- display: inline;
- }
- .mainHeader nav a:link, mainHeader nav a:visited {
- color: #FFF;
- display: inline-block;
- padding: 12px 15px;
- height: 16px;
- }
- .mainHeader nav a:hover, .mainHeader nav a:active,
- .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
- background-color: #0CC;
- color:#FFF;
- text-shadow: none;
- }
- .mainHeader nav ul li a {
- border-radius: 3px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- }
- .mainContent {
- line-height: 25px;
- border-radius: 3px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- }
- content {
- display: block;
- }
- .content {
- width: 70%;
- float: left;
- }
- .topcontent {
- background-color: #FFF;
- color: #000;
- border-radius: 3px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- padding: 3% 5%;
- margin-top: 2%;
- }
- .bottomcontent {
- background-color: #FFF;
- color: #000;
- border-radius: 3px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- padding: 3% 5%;
- margin-top: 2%;
- }
- .post-info {
- font-style: italic;
- color: #CCC;
- font-size: 85%;
- }
- .top-sidebar {
- width: 21%;
- float: left;
- background-color: #333;
- border-radius: 3px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- padding: 2% 3%;
- margin: 1.4% 0 2% 3%;
- }
- .middle-sidebar {
- width: 21%;
- float: left;
- background-color: #333;
- border-radius: 3px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- padding: 2% 3%;
- margin: 0 0 2% 3%;
- }
- .bottom-sidebar {
- width: 21%;
- float: left;
- background-color: #333;
- border-radius: 3px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- padding: 2% 3%;
- margin: 0 0 2% 3%;
- }
- .mainFooter {
- width: 100%;
- height: 40px;
- float: left;
- background-color: #666;
- border-radius: 3px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- margin: 2% 0 2% 0;
- }
- .mainFooter p {
- width: 92%;
- color: #FFF;
- margin: 12px auto;
- }
- @media only screen and (min-width: 150px) and (max-width: 600px)
- {
- .body {
- width: 98%;
- font-size: 90%;
- }
- .mainHeader img {
- width:100%;
- }
- .mainHeader nav {
- height: 160px;
- }
- .mainHeader nav ul {
- padding-left: 0;
- }
- .mainHeader nav ul li {
- width: 100%;
- text-align: center;
- }
- .mainHeader nav a:link, mainHeader nav a:visited {
- padding: 12px 15px;
- height: 16px;
- display: block;
- }
- .content {
- width: 100%;
- float: left;
- margin-top: 2%;
- }
- .post-info {
- display: none;
- }
- .topcontent {
- margin: 2% 0 4% 0;
- }
- .bottomcontent {
- margin: 2% 0 2% 0;
- }
- .top-sidebar, .middle-sidebar, .bottom-sidebar {
- width: 94%;
- padding: 2% 3%;
- margin: 1.4% 0 2% 0;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement