Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- css:
- .header {
- background-image: url("../img/header.png");
- width: 100%;
- height: 79px;
- }
- .secondheader {
- background-image: url("../img/second.png");
- width: 100%;
- height: 66px;
- border-bottom: solid 6px #f0e8ce;
- }
- .thirdheader {
- background-image: url("../img/bhead3.png");
- width: 100%;
- height: 60px;
- border-bottom: solid 6px #f6f6f6;
- }
- @font-face {
- font-family: telegrafico;
- src: url(‘telegrafico.ttf’);
- }
- #fontfamily1 {
- color: #747272;
- font-family: telegrafico;
- font-size: 18px;
- float: left;
- }
- #lines {
- cursor: default;
- float: right;
- position: relative;
- bottom: 19px;
- left: 2px;
- }
- #lines1 {
- cursor: default;
- float: right;
- position: relative;
- bottom: 19px;
- left: 1px;
- }
- /* Boxes row 1 */
- #box1 {
- background: rgb(232,232,232); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
- width: 219px;
- height: 269px;
- border: solid 1px #bcbcbc;
- -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
- box-shadow: inset 0px 0px 0px 1px #ffffff;
- }
- #box2 {
- background: rgb(232,232,232); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
- width: 219px;
- height: 269px;
- border: solid 1px #bcbcbc;
- -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
- box-shadow: inset 0px 0px 0px 1px #ffffff;
- }
- #box3 {
- background: rgb(232,232,232); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
- width: 219px;
- height: 269px;
- border: solid 1px #bcbcbc;
- -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
- box-shadow: inset 0px 0px 0px 1px #ffffff;
- }
- #box4 {
- background: rgb(232,232,232); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
- width: 219px;
- height: 269px;
- border: solid 1px #bcbcbc;
- -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
- box-shadow: inset 0px 0px 0px 1px #ffffff;
- }
- /* Boxes row 2 */
- #box5 {
- background: rgb(232,232,232); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
- width: 219px;
- height: 269px;
- border: solid 1px #bcbcbc;
- -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
- box-shadow: inset 0px 0px 0px 1px #ffffff;
- }
- #box6 {
- background: rgb(232,232,232); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
- width: 219px;
- height: 269px;
- border: solid 1px #bcbcbc;
- -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
- box-shadow: inset 0px 0px 0px 1px #ffffff;
- }
- #box7 {
- background: rgb(232,232,232); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
- width: 219px;
- height: 269px;
- border: solid 1px #bcbcbc;
- -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
- box-shadow: inset 0px 0px 0px 1px #ffffff;
- }
- #box8 {
- background: rgb(232,232,232); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
- width: 219px;
- height: 269px;
- border: solid 1px #bcbcbc;
- -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
- box-shadow: inset 0px 0px 0px 1px #ffffff;
- }
- /* Pages */
- #page1 {
- background: rgb(232,232,232); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
- width: 30px;
- height: 28px;
- border: solid 1px #bcbcbc;
- -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
- box-shadow: inset 0px 0px 0px 1px #ffffff;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- text-align: center;
- padding-top: 10px;
- padding-bottom: 5px;
- }
- .navigation {
- display:inline;
- }
- .footerbefore {
- background-image: url("../img/footerbg.png");
- width: 100%;
- height: 66px;
- border-bottom: #d4ccb0;
- }
- .footerbefore {
- background-image: url("../img/footerbg.png");
- width: 100%;
- height: 66px;
- border-bottom: solid 7px #d4ccb0;
- }
- .footer {
- background-image: url("../img/2.png");
- width: 100%;
- height: 242px;
- border-bottom: solid 7px #5c5c5c;
- }
- .subfooter {
- background-image: url("../img/subfooter.png");
- width: 100%;
- height: 67px;
- }
- #logo {
- margin-top: 15px;
- }
- .navigation {
- list-style: none;
- font-family: telegrafico;
- float: right;
- margin-top: 10px;
- font-size: 14px;
- }
- .navigation li {
- display: inline-block;
- margin: 7px;
- }
- .navigation a {
- color: #fff;
- }
- .navigation a:hover {
- color: #000;
- }
- .current a{
- color: #000;
- }
- .nav6 {
- list-style: none;
- font-family: 'Dosis', sans-serif;
- float: left
- font-size: 20px;
- margin-top: 13px;
- margin-left: -35px;
- }
- .nav6 li {
- display: inline;
- margin: 20px;
- font-size: 18px;
- font-family: 'Dosis', sans-serif;
- float: left;
- margin-top: 10px;
- }
- .nav6 a {
- color: #7d7253;
- }
- .nav6 a:hover {
- background: rgb(241,228,185); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(241,228,185,1) 0%, rgba(251,241,210,1) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,228,185,1)), color-stop(100%,rgba(251,241,210,1))); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(241,228,185,1) 0%,rgba(251,241,210,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(241,228,185,1) 0%,rgba(251,241,210,1) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(241,228,185,1) 0%,rgba(251,241,210,1) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(241,228,185,1) 0%,rgba(251,241,210,1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e4b9', endColorstr='#fbf1d2',GradientType=0 ); /* IE6-9 */
- color: #53410f;
- text-decoration: none;
- padding: 21px;
- clear: clear;
- }
- HTML:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Test site | Jony</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="Testing website coded by Jony - rapture-gfx" />
- <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
- <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
- <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
- </head>
- <header>
- <!-- First header start -->
- <div class="header">
- <div class="container">
- <div class="row">
- <div class="span6">
- <div id="logo"><img src="img/logo.png"></div>
- </div>
- <div class="span6">
- <ul class="navigation">
- <li><a href="#">Notifications</a></li>
- <li><a href="#">Wish list [0]</a></li>
- <li><a href="#">Account</a></li>
- <li><a href="#">orders</a></li>
- <li><a href="#"><img src="img/market.png"></a></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <!-- First header end -->
- <div class="secondheader">
- <div class="container">
- <div class="span12">
- <ul class="nav6">
- <li><a href="#">Home</a></li>
- <li><a href="#">Categories</a></li>
- <li><a href="#">Buy</a></li>
- <li><a href="#">Sell</a></li>
- <li><a href="#">Forums</a></li>
- <li><a href="#">Contact</a></li>
- <li><a href="#">item 1</a></li>
- <li><a href="#">item 2</a></li>
- <li><a href="#">item 3</a></li>
- <li><a href="#">item 4</a></li>
- <li><a href="#">item 3</a></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div class="thirdheader">
- </div>
- </div>
- </div>
- </header>
- <body>
- <div class="container">
- <br />
- <img src="img/slider.png" /><br />
- <br />
- <br />
- <span id="fontfamily1">FEATURED</span>
- <div id="lines"><img src="img/lines.gif"/>
- </div>
- <!-- Featured boxes start -->
- <div class="row-fluid">
- <div class="span3">
- <div id="box1"></div>
- </div>
- <div class="span3">
- <div id="box2"></div>
- </div>
- <div class="span3">
- <div id="box3"></div>
- </div>
- <div class="span3">
- <div id="box4"></div>
- </div>
- </div>
- <br />
- <br />
- <span id="fontfamily1">LETEST</span>
- <div id="lines1"><img src="img/line2.gif"/>
- </div>
- <!-- Featured boxes start -->
- <div class="row-fluid">
- <div class="span3">
- <div id="box5"></div>
- </div>
- <div class="span3">
- <div id="box6"></div>
- </div>
- <div class="span3">
- <div id="box7"></div>
- </div>
- <div class="span3">
- <div id="box8"></div>
- </div>
- </div>
- <br />
- <br />
- <div class="row-fluid">
- <ul>
- <li class="btn btn-info"><a href=""><span style="color: #545454;">«</span></a></li>
- <li class="btn btn-current"><a href=""><span style="color: #545454;">1</span></a></li>
- <li class="btn btn-info"><a href="#"><span style="color: #545454;">2</span></a></li>
- <li class="btn btn-info"><a href="#"><span style="color: #545454;">3</span></a></li>
- <li class="btn btn-info"><a href="#"><span style="color: #545454;">4</span></a></li>
- <li class="btn btn-info"><a href=""><span style="color: #545454;">5</span></a></li>
- <li class="btn btn-info"><a href="#"><span style="color: #545454;">6</span></a></li>
- <li class="btn btn-info"><a href="#"><span style="color: #545454;">7</span></a></li>
- <li class="btn btn-info"><a href="#"><span style="color: #545454;">»</span></a></li>
- <!--Class "arrow" is the arrow -->
- </ul>
- </div>
- <br /><br /><br />
- </div>
- </body>
- <div class="footerbefore">
- </div>
- <div class="footer">
- </div>
- <div class="subfooter">
- </div>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement