Advertisement
Paarzivall

RozwiazanieKolosa

Jun 10th, 2018
99
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.68 KB | None | 0 0
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <TITLE>Jak to zrobić?</TITLE>
  6.     <style>
  7.         article{
  8.             background-color: grey;
  9.             border: 3px solid blue;
  10.             width:40%;
  11.             margin-left: 1%;
  12.         }
  13.  
  14.         section{
  15.             height: 50vh;
  16.             margin-left: 5%;
  17.         }
  18.  
  19.         section>article:nth-child(2n){
  20.             float:left;
  21.         }
  22.  
  23.         section:first-child article{
  24.             float:left;
  25.            
  26.         }
  27.  
  28.         section:first-child p:nth-child(2n+2){
  29.             color:green;
  30.         }
  31.  
  32.         section:first-child h2:nth-child(n+2){
  33.             color:purple;
  34.         }
  35.  
  36.         section:first-child article:first-child ul li{
  37.             color:red;
  38.         }
  39.  
  40.         section:first-child article:nth-child(2) ul>li::first-letter{
  41.             font-size: 1.5em;
  42.         }
  43.         section:first-child article:nth-child(2) ul>li:nth-child(4n+4){
  44.             color:blue;
  45.         }
  46.  
  47.         section:last-child article:first-child ul li::first-letter{
  48.             font-size: 1.5em;
  49.         }
  50.        
  51.         section:last-child article:first-child{
  52.             float: left;
  53.         }
  54.  
  55.         section:last-child article:last-child ul li:nth-child(4n+4){
  56.             color:blue;
  57.         }
  58.  
  59.         section:last-child article:last-child h2{
  60.             color:purple;
  61.         }
  62.  
  63.         section:last-child article:last-child p:nth-child(n+3){
  64.             color:green;
  65.         }
  66.        
  67.     </style>
  68. </head>
  69. <body>
  70.   <section>
  71.       <article>
  72.               <h2>nagłówek </h2>
  73.               <ul>
  74.                 <li> element11 </li>
  75.                 <li> element12 </li>
  76.                 <li> element13 </li>
  77.                 <li> element14 </li>
  78.                 <li> element15 </li>
  79.                 <li> element16 </li>
  80.                 <li> element17 </li>
  81.                 <li> element18 </li>
  82.             </ul>
  83.                 <div>
  84.                
  85.                     <p> akapit1</p>
  86.                     <p>akapit2 </p>
  87.                     <h2>tekst1</h2>
  88.                     <p>Akapit3 </p>
  89.                     <h2>tekst12</h2>
  90.                 </div>
  91.       </article>
  92.       <article>
  93.              <h1>Tytuł b </h1>
  94.              <div>
  95.               <p> akapit4</p>
  96.              </div>
  97.              
  98.             <ul>
  99.                 <li> element1a </li>
  100.                 <li> element1b </li>
  101.                 <li> element1c </li>
  102.                 <li> element1d </li>
  103.                 <li> element1e </li>
  104.                 <li> element1f </li>
  105.                 <li> element1g </li>
  106.                 <li> element1h </li>
  107.             </ul>
  108.       </article>
  109.     </section>
  110.  
  111.     <section>
  112.         <article>
  113.             <div> Tytuł 10</div>
  114.              <ul>
  115.                 <li> element11 </li>
  116.                 <li> element12 </li>
  117.                 <li> element13 </li>
  118.                 <li> element14 </li>
  119.                 <li> element15 </li>
  120.                 <li> element16 </li>
  121.                 <li> element17 </li>
  122.                 <li> element18 </li>
  123.             </ul>
  124.         </article>
  125.         <article>
  126.              <h1>Tytuł 11</h1>
  127.              <ul>
  128.                 <li> element11 </li>
  129.                 <li> element12 </li>
  130.                 <li> element13 </li>
  131.                 <li> element14 </li>
  132.                 <li> element15 </li>
  133.                 <li> element16 </li>
  134.                 <li> element17 </li>
  135.                 <li> element18 </li>
  136.             </ul>
  137.             <div>
  138.                 <h2>tekst 15 </h2>
  139.                 <p> akapit5</p>
  140.                 <p> akapit6</p>
  141.                 <h2>tekst1</h2>
  142.                 <p>akapit7 </p>
  143.                 <h2>tekst12</h2>
  144.             </div>
  145.         </article>
  146.     </section>
  147.  </body>
  148. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement