Guest User

Code

a guest
Jan 14th, 2017
47
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. HTML:
  2.  
  3. <!DOCTYPE html>
  4. <html lang="pl-PL">
  5.     <head>
  6.         <meta charset="utf-8">
  7.         <link href="../css/style" rel="stylesheet" type="text/css">
  8.         <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
  9.     </head>
  10.     <body>
  11.         <div class="container">
  12.         <header>
  13.         <nav>
  14.             <ul class="nav">
  15.                 <li class="nav"><a href="../index.html" class="nav"><img src="../img/logo.png" width="50" height="50" alt="Logo"></a></li>
  16.                 <li class="nav"><a href="" class="nav">Zawodnicy</a></li>
  17.                 <li class="nav"><a href="../mecze/index.html" class="nav">Mecze</a></li>
  18.                 <li class="nav"><a href="../kontakt/index.html" class="nav">Kontakt</a></li>
  19.                 <li class="navfb"><a href="https://www.facebook.com/BotanikaLodz/" target="_blank" class="navfb"><img src="../img/fblogo.png" width="50" height="50" alt="FBLogo"></a></li>
  20.                 <li class="navpa"><a href="http://playarena.pl/41476,amatorskie,druzyny,sportowe,w_twoim_miescie,druzyna.html" target="_blank" class="navpa"><img src="../img/playarena.png" width="113" height="50" alt="PlayarenaLogo"></a></li>
  21.             </ul>
  22.         </nav>
  23.         </header>
  24.         <main>
  25.             :)
  26.         </main>
  27.         <footer>
  28.             <p><strong>&copy; Alan Olborski 2017</strong></p>
  29.         </footer>
  30.         </div>
  31.     </body>
  32. </html>
  33.  
  34. ============================================================
  35. ============================================================
  36. ============================================================
  37. ============================================================
  38. ============================================================
  39.  
  40. CSS:
  41.  
  42. header, nav, main, footer, article, .container {
  43.     display: block;
  44. }
  45.  
  46. html, body, .container {
  47.     height: 100%;
  48.     width: 100%;
  49.     margin: 0;
  50.     padding: 0;
  51. }
  52.  
  53. header {
  54.     height: 50px;
  55.     width: 100%;
  56.     margin: 0;
  57.     padding: 0;
  58.     background-color: #2f3036;
  59.     white-space: nowrap;
  60. }
  61.  
  62. main {
  63.     height: calc(100% - 66px);
  64.     width: 100%;
  65.     margin: 0;
  66.     padding: 0;
  67.     background: linear-gradient(to bottom, #e6fff2 0%, #ffffff 100%);
  68.     font: 20px Helvetica;
  69.     text-align: center;
  70. }
  71.  
  72. footer {
  73.     height: 16px;
  74.     width: 100%;
  75.     margin: 0;
  76.     padding: 0;
  77.     line-height: 16px;
  78.     text-align: center;
  79.     font: 12px Helvetica;
  80.     color: #d9d9d9;
  81.     text-shadow: 0 0 2px #333333;
  82.     background: #808080;
  83.     outline: 1px solid #4d4d4d;
  84. }
  85.  
  86. h1.title {
  87.     margin: 0;
  88.     padding: 40px 0 20px 0;
  89.     font-family: "Nunito";
  90.     font-size: 50px;
  91.     text-shadow: 2px 2px 2px #b3b3b3;
  92. }
  93.  
  94. article.description {
  95.     min-height: 50px;
  96.     width: 80%;
  97.     font-family: "Nunito";
  98.     font-size: 20px;
  99.     color: #ffffff;
  100.     text-align: justify;
  101.     text-indent: 50px;
  102.     text-shadow: 1px 1px 1px #000000;
  103.     background-color:rgba(0, 0, 0, 0.3);
  104. }
  105.  
  106. .textbox {
  107.     margin: 0 10px 0 10px;
  108. }
  109.  
  110. ul.nav {
  111.     height: 50px;
  112.     width: 100%;
  113.     margin: 0;
  114.     padding: 0;
  115.     list-style-type: none;
  116.     white-space: nowrap;
  117. }
  118.  
  119. li.nav {
  120.     display:inline-block;
  121.     float: left;
  122.     margin-right: 1px;
  123. }
  124.  
  125. a.nav {
  126.     position: relative;
  127.     display: block;
  128.     height: 50px;
  129.     min-width: 140px;
  130.     font-family: Helvetica, Arial;
  131.     color: #fff;
  132.     line-height: 50px;
  133.     text-align: center;
  134.     text-decoration: none;
  135.     background: #2f3036;
  136. }
  137.  
  138. a.nav:after {
  139.     content: '';
  140.     position: absolute;
  141.     bottom: 2px;
  142.     left: 0;
  143.     width: 0%;
  144.     border-bottom: 2px solid #00ffcc;
  145.     transition: 0.6s;
  146. }
  147.  
  148. a.nav:hover:after {
  149.     width: 100%;
  150. }
  151.  
  152. a.nav:hover {
  153.     background: #404040;
  154.     text-shadow: 0 0 5px #00ffcc;
  155.     transition: 0.6s;
  156. }
  157.  
  158. li.navfb {
  159.     display:inline-block;
  160.     float: right;
  161.     margin-left: 1px;
  162. }
  163.  
  164. a.navfb {
  165.     display:block;
  166.     width: 50px;
  167.     height: 50px;
  168.     text-align: center;
  169.     line-height: 50px;
  170.     font-family: Helvetica, Arial;
  171.     color: #fff;
  172.     background: #2f3036;
  173.     text-decoration: none;
  174. }
  175.  
  176. li.navpa {
  177.     display:inline-block;
  178.     float: right;
  179. }
  180.  
  181. a.navpa {
  182.     display:block;
  183.     width: 120px;
  184.     height: 50px;
  185.     text-align: center;
  186.     line-height: 50px;
  187.     font-family: Helvetica, Arial;
  188.     color: #fff;
  189.     background: #2f3036;
  190.     text-decoration: none;
  191. }
RAW Paste Data