Need a unique gift idea?
A Pastebin account makes a great Christmas gift
SHARE
TWEET

Untitled

a guest Oct 11th, 2018 65 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
 
  1. <!-- HTML i CSS Dzień 3 -->
  2. <!-- Podsumowanie -->
  3. <!-- Wersja 2 (bez flexboxa) -->
  4. <header>
  5.         <div class="container">
  6.             <div class="row">
  7.                 <h1 class="header-logo">Logo</h1>
  8.                 <nav>
  9.                     <ul>
  10.                         <li>
  11.                             <a class="nav-link" href="#">Start</a>
  12.                         </li>
  13.                         <li>
  14.                             <a class="nav-link" href="#">O nas</a>
  15.                         </li>
  16.                         <li>
  17.                             <a class="nav-link" href="#">Kontakt</a>
  18.                         </li>
  19.                     </ul>
  20.                 </nav>
  21.             </div>
  22.         </div>
  23.     </header>
  24.     <main>
  25.         <section class="section-first">
  26.             <div class="container">
  27.                 <article class="row">
  28.                     <div class="article-image"></div>
  29.                     <div class="article-content">
  30.                         <h2 class="article-header">Tytuł strony</h2>
  31.                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur repellat magnam quas, totam
  32.                             nemo vero!</p>
  33.                     </div>
  34.                 </article>
  35.             </div>
  36.         </section>
  37.         <section class="section-second">
  38.             <div class="container">
  39.                 <div class="row">
  40.                     <article>
  41.                         <div class="article-inside"></div>
  42.                     </article>
  43.                     <article>
  44.                         <div class="article-inside"></div>
  45.                     </article>
  46.                     <article>
  47.                         <div class="article-inside"></div>
  48.                     </article>
  49.                 </div>
  50.             </div>
  51.         </section>
  52.     </main>
  53.     <footer>
  54.         <div class="container">
  55.             <div class="row">
  56.                 <span class="footer-copyright">&copy;2018 Coder's Lab</span>
  57.                 <span class="footer-logo">Logo</span>
  58.             </div>
  59.         </div>
  60.     </footer>
  61.  
  62. * {
  63.     margin: 0;
  64.     padding: 0;
  65.     box-sizing: border-box;
  66. }
  67.  
  68. html {
  69.     font-family: Arial, Helvetica, sans-serif;
  70. }
  71.  
  72. .container {
  73.     max-width: 1000px;
  74.     margin: 0 auto;
  75.     padding: 15px 10px;
  76. }
  77.  
  78. .row:after {
  79.     content: '';
  80.     display: block;
  81.     clear: both;
  82. }
  83.  
  84. header {
  85.     background-color: #000;
  86.     color: #fff;
  87. }
  88.  
  89. header .container {
  90. }
  91.  
  92. .header-logo {
  93.     font-weight: 400;
  94.     float: left;
  95. }
  96.  
  97. nav {
  98.     float: right;
  99. }
  100.  
  101. nav ul {
  102.     list-style: none;
  103.     display: flex;
  104. }
  105.  
  106. nav ul li {
  107.     padding: 5px;
  108.     line-height: 32px; /* wyrównanie w pionie do loga */
  109. }
  110.  
  111. .nav-link:link {
  112.     color: #fff;
  113.     text-decoration: none;
  114. }
  115.  
  116. .nav-link:visited {
  117.     color: #fff;
  118. }
  119.  
  120. .nav-link:hover {
  121.     text-decoration: underline;
  122. }
  123.  
  124. .nav-link:active {
  125.     color: #eee;
  126. }
  127.  
  128. .article-image {
  129.     height: 250px;
  130.     background-color: #000;
  131.     width: 50%;
  132.     float: left;
  133. }
  134.  
  135. .article-content {
  136.     width: 50%;
  137.     padding: 10px;
  138.     float: left;
  139. }
  140.  
  141. .section-second {
  142.     background-color: #000;
  143. }
  144.  
  145. .section-second .row {
  146.     margin: 0 -10px;
  147. }
  148.  
  149. .section-second article {
  150.     height: 250px;
  151.     width: 33.3333%;
  152.     float: left;
  153.     padding: 10px;
  154. }
  155.  
  156. .section-second .article-inside {
  157.     background-color: #fff;
  158.     height: 100%;
  159. }
  160.  
  161. .section-second article:first-child {
  162.    margin-left: 0;
  163. }
  164.  
  165. .section-second article:last-child {
  166.     margin-right: 0;
  167.  }
  168.  
  169.  .footer-copyright {
  170.     float: left;
  171. }
  172.  
  173. .footer-logo {
  174.     font-weight: 400;
  175.     float: right;
  176. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top