Loading

A resume Selectors CSS

A resume Selectors CSS

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>A resume Selectors CSS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <section class="wrapper">
    <button class="next"> Next</button>
    <button class="prev"> Prev</button>
  <div class="main">
<!--   Content [START] -->
<!-- 1. -->
  <div style="display: inline-block"><h2> 1. *</h2>
<p class="code">
  <span class="a">*</span>{
  <span class="b">padding</span>:
  <span class="c">0</span>; 
  <span class="b">margin</span>:
  <span class="c">0</span>;} </p>   
<article class="test t1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur repellat et accusamus non quos pariatur sunt culpa corporis magnam sed, quae placeat quia veritatis quod odio, sequi, deleniti beatae numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, illum. Cupiditate ad, veritatis placeat ipsum! In, molestias veniam libero harum alias repellendus non repudiandae excepturi, dolor, optio est vero ullam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus quos ducimus, earum deleniti dicta animi nulla, ipsa illo. Ducimus deserunt enim, atque cupiditate voluptatem minus! Facere maiores labore nam mollitia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis iste quae fugiat libero quibusdam placeat quia ipsum, tenetur fugit fuga omnis quaerat veniam cum voluptates beatae similique sint eaque recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quidem et illo praesentium veniam distinctio rem corrupti similique, cum culpa unde, soluta eius neque aut, recusandae id alias. Sed, voluptas.</article>
  </div>  

<!-- 2. -->
   <div><h2> 2.  #X</h2>
<p class="code">
  <span class="a">#main</span>{
  <span class="b">padding</span>:
  <span class="c">20px</span>; 
  <span class="b">color</span>:
  <span class="c">blue</span>;} </p>   
<article class="test t2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur repellat et accusamus non quos pariatur sunt culpa corporis magnam sed, quae placeat quia veritatis quod odio, sequi, deleniti beatae numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, illum. Cupiditate ad, veritatis placeat ipsum! In, molestias veniam libero harum alias repellendus non repudiandae excepturi, dolor, optio est vero ullam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus quos ducimus, earum deleniti dicta animi nulla, ipsa illo. Ducimus deserunt enim, atque cupiditate voluptatem minus! Facere maiores labore nam mollitia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. </article>
  </div> 
    
<!--  3.-->
   <div><h2> 3.  .X</h2>
<p class="code">
  <span class="a">.error</span>{
  <span class="b">color</span>:
  <span class="c">red</span>; 
  <span class="b">font-weight</span>:
  <span class="c">bold</span>;
  <span class="b">font-size</span>:
  <span class="c">30px</span>;  }</p>   
<article class="test t3"> ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR!ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR!ERROR! ERROR! ERROR! ERROR! ERROR! HOLA :D! ERROR! ERROR!ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR! ERROR!ERROR! ERROR! ERROR! ERROR!ERROR! ERROR! ERROR! ERROR!</article>
  </div>
<!-- 4. -->
   <div><h2> 4.  X Y</h2>
<p class="code">
  <span class="a">li a</span>{
  <span class="b">text-decoration</span>:
  <span class="c">none</span>; 
  <span class="b">color</span>:
  <span class="c">#1fc092</span>;  }</p>   
<article class="test t4"> 
<li><a href="#"> Super</a></li>
<li><a href="#"> Great</a></li>
<li><a href="#"> Cool</a></li>
<li><a href="#"> Cute</a></li>
</article>
  </div>    
    
<!-- 5.  -->
   <div><h2> 5.  X </h2>
<p class="code">
  <span class="a"> a</span>{
  <span class="b">font-size</span>:
  <span class="c">24px</span>; 
  <span class="b">color</span>:
  <span class="c">green</span>; }<br>
<span class="a"> p</span>{
  <span class="b">margin-left</span>:
  <span class="c">15%</span>;  }</p>   
<article class="test t5"> 
  <a href="#"> Super Link</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat adipisci ipsum sequi libero, ea fugit beatae temporibus, dolore quia delectus aliquid doloremque vero eius quaerat, inventore tenetur dolorem laborum aperiam.</p>
</article>
  </div>
    
<!-- 6.-->
   <div><h2> 6.  X:visited & X:link </h2>
<p class="code">
  <span class="a"> a:link</span>{
  <span class="b">color</span>:
  <span class="c">blue</span>; }<br>
<span class="a"> a:visited</span>{
  <span class="b">color</span>:
  <span class="c">deeppink</span>;}</p>   
<article class="test t6"> 
  <a href="#"> Super Link</a>
  <a target="_blank" href="https://google.com/"> Super Link</a>
</article>
  </div>
    
<!--7. -->
   <div><h2> 7.  X + Y </h2>
<p class="code">
  <span class="a"> ul + p</span>{
  <span class="b">color</span>:
  <span class="c">red</span>; }</p>   
<article class="test t7"> 
  <ul>
    <li><a href="">super 1</a></li>
    <li><a href="">super 2</a></li>
    <li><a href="">super 3</a></li>
  </ul>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure ullam deleniti aliquam inventore odit quam expedita unde obcaecati, maiores, quibusdam perferendis placeat accusamus, magni odio, asperiores nisi ipsam laborum hic.</p>
</article>
  </div>  
<!-- 8. -->
   <div><h2> 8.  X > Y </h2>
<p class="code">
  <span class="a">article.t8  >  h3</span>{
  <span class="b">border</span>:
  <span class="c">2px solid</span>
  <span class="d"> black</span>;}</p>   
<article class="test t8"> 
  <h3> This is super title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos error unde dolor debitis labore? Voluptatibus sunt distinctio quaerat commodi quidem laudantium aspernatur, officia nobis nostrum odit dolorum itaque odio saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ducimus tempore nesciunt consequatur repellat eaque odit non, nam dolore, optio facilis perspiciatis, placeat, inventore numquam dolor soluta incidunt a quasi!</p>
</article>
  </div> 
    
<!-- 9.-->
   <div><h2> 9.  X ~ Y </h2>
<p class="code">
  <span class="a">ol ~ p</span>{
  <span class="b">color</span>:
  <span class="c">red</span>;}</p>   
<article class="test t9"> 
<ol>
  <li>Super</li>
  <li>Super</li>
  <li>Super</li>
</ol>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos error unde dolor debitis labore? Voluptatibus sunt distinctio quaerat commodi quidem laudantium aspernatur, officia nobis nostrum odit dolorum itaque odio saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ducimus tempore nesciunt consequatur repellat eaque odit non, nam dolore, optio facilis perspiciatis, placeat, inventore numquam dolor soluta incidunt a quasi!</p>
</article>
  </div>
    
<!-- 10. -->
   <div><h2> 10.  X [Title] </h2>
<p class="code">
  <span class="a"> p[Super Title]</span>{
  <span class="b">color</span>:
  <span class="c">deeppink</span>;
  <span class="b">font-size</span>:
  <span class="c">40px</span>;}</p>   
<article class="test t10"> 
  <p title="Super Title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos error unde dolor debitis labore? Voluptatibus sunt distinctio quaerat commodi quidem laudantium aspernatur, officia nobis nostrum odit dolorum itaque odio saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ducimus tempore nesciunt consequatur repellat eaque odit non, nam dolore, optio facilis perspiciatis, placeat, inventore numquam dolor soluta incidunt a quasi!</p>
</article>
  </div> 
    
<!-- 11. -->
   <div><h2> 11.  X[href="#"] </h2>
<p class="code">
  <span class="a"> a[href="http://fb.com"]</span>{
  <span class="b">color</span>:
  <span class="c">#375593</span>;
  <span class="b">font-weight</span>:
  <span class="c">bolder</span>; }<br> 
  <span class="a"> a[href="https://twitter.com"]</span>{
  <span class="b">color</span>:
  <span class="c">#0eb6f6</span>;
  <span class="b">font-weight</span>:
  <span class="c">bolder</span>; }<br> 
  <span class="a"> a[href="https://plus.google.com"]</span>{
  <span class="b">color</span>:
  <span class="c">#dd4b39</span>;
  <span class="b">font-weight</span>:
  <span class="c">bolder</span>; }</p>   
<article class="test t11"> 
   <a href="http://fb.com" target="_blank"> Facebook.com</a>
   <a href="https://twitter.com" target="_blank"> Twitter.com</a>
   <a href="https://plus.google.com" target="_blank"> Plus.google.com</a>
</article>
  </div>

<!-- 12. -->
   <div><h2> 12.  X[href*="name"] </h2>
<p class="code">
  <span class="a"> a[href*="face"]</span>{
  <span class="b">color</span>:
  <span class="c">#375593</span>;
  <span class="b">font-size</span>:
  <span class="c">30px</span>; }<br>
  <span class="a"> a[href*="udev"]</span>{
  <span class="b">color</span>:
  <span class="c">#0eb6f6</span>;
  <span class="b">font-size</span>:
  <span class="c">30px</span>; }<br>
  <span class="a"> a[href*="tube"]</span>{
  <span class="b">color</span>:
  <span class="c">#dd4b39</span>;
  <span class="b">font-size</span>:
  <span class="c">30px</span>; }<br></p>   
<article class="test t12"> 
   <a href="https://facebook.com" target="_blank">Go Facebook</a>
   <a href="http://udever.com" target="_blank">Go Udever</a>
   <a href="https://youtube.com" target="_blank">Go Youtube</a>
</article>
  </div> 

<!-- 13.   -->
   <div><h2> 13.  X [href^= "http"] </h2>
<p class="code">
  <span class="a"> a[href^="https://"]</span>{
  <span class="b">color</span>:
  <span class="c">blue</span>; }<br>
  <span class="a"> a[href^="http://"]</span>{
  <span class="b">color</span>:
  <span class="c">red</span>; }</p>   
<article class="test t13"> 
   <a href="https://www.udemy.com/" target="_blank">Go Udemy</a>
   <a href="https://w3schools.com/" target="_blank">Go W3schools</a>
</article>
  </div> 

<!-- 14. -->
   <div><h2> 14.  X[href$=".jpg"]  </h2>
<p class="code">
  <span class="a"> a[href$=".jpg"]</span>{
  <span class="b">color</span>:
  <span class="c">green</span>; 
  <span class="b">font-weight</span>:
  <span class="c">bold</span>;}<br>
  <span class="a"> a[href$=".gif"]</span>{
  <span class="b">color</span>:
  <span class="c">blue</span>; 
  <span class="b">font-weight</span>:
  <span class="c">bold</span>;}</p>   
<article class="test t14"> 
   <a href="//i.imgur.com/iM67Gsm.jpg" target="_blank">View Img .jpg</a>
   <a href="//i.imgur.com/FY1AbSo.gif" target="_blank">View Img .gif</a>
</article>
  </div> 
    
<!-- 15. -->
   <div><h2> 15.  img[src$=".gif"]  </h2>
<p class="code">
  <span class="a"> img[src$=".gif"]</span>{
  <span class="b">width</span>:
  <span class="c">100%</span>; 
  <span class="b">border-radius</span>:
  <span class="c">5px</span>;}</p>   
<article class="test t15"> 
   <img src="//goo.gl/37ZACq">
</article>
  </div>  

<!-- 16.-->
   <div><h2> 16.  X[data-*="foo"]  </h2>
<p class="code">
  <span class="a"> a[data-type="image"]</span>{
  <span class="b">text-shadow</span>:
  <span class="c">2px 2px 5px%</span>;
  <span class="d">red</span>;
  <span class="b">font-size</span>:
  <span class="c">22px</span>;}</p>   
<article class="test t16"> 
<a href="//i.imgur.com/iM67Gsm.jpg" data-type="image">ViewJpg</a>
<a href="//i.imgur.com/Y3tyXDX.png" data-type="image">ViewPng</a>
<a href="//i.imgur.com/FY1AbSo.gif" data-type="image">ViewGif</a>
</article>
  </div>   

<!-- 17.-->
   <div><h2> 17.  X[foo~="more info"]  </h2>
<p class="code">
  <span class="a"> a[data-info~="extern"]</span>{
  <span class="b">padding</span>:
  <span class="c">15px</span>; }<br>
  <span class="a"> a[data-info~="imgPng"]</span>{
  <span class="b">font-size</span>:
  <span class="c">28px</span>; }<br></p>   
<article class="test t17"> 
<a target="_blank" href="https://google.com" data-info="extern love">goGoogle</a>
<a target="_blank" href="//i.imgur.com/Y3tyXDX.png" data-info="imgPng">ViewPng</a>
</article>
  </div>  

<!-- 18. -->
   <div><h2> 18.  X:checked </h2>
<p class="code">
  <span class="a"> input[type=radio]:checked </span>{
  <span class="b">color</span>:
  <span class="c">blue</span>; 
  <span class="b">font-size</span>:
  <span class="c">24px</span>; }</p>   
<article class="test t18">
  <p>Select:</p>
   <input type="radio" id="man" name="sex">
   <label for="man"> Male</label>
   <input type="radio" id="women" name="sex">
   <label for="women"> Female</label>
</article>
  </div> 
    
<!-- 19. -->
   <div><h2> 19.  X:before & X:after </h2>
<p class="code">
  <span class="a"> .name:before </span>{
  <span class="b">content</span>:
  <span class="c">"\f118"</span>; 
  <span class="b">font-family</span>:
  <span class="c">fontawesome</span>; }<br>
  <span class="a"> .ocup:after </span>{
  <span class="b">content</span>:
  <span class="c">"\f004"</span>; 
  <span class="b">font-family</span>:
  <span class="c">fontawesome</span>; }</p>   
<article class="test t19">
  <span class="name"> Wilder Taype</span><br>
  <span class="ocup"> Programmer</span>
</article>
  </div> 

<!-- 20.     -->
   <div><h2> 20.   X:hover, X:focus & X:active </h2>
<p class="code">
  <span class="a"> .a1:hover </span>{
  <span class="b">background</span>:
  <span class="c">blue</span>; 
  <span class="b">padding</span>:
  <span class="c">20px</span>; }<br> 
  <span class="a"> .a2:focus </span>{
  <span class="b">background</span>:
  <span class="c">green</span>; 
  <span class="b">padding</span>:
  <span class="c">20px</span>; }<br> 
  <span class="a"> .a3:active </span>{
  <span class="b">background</span>:
  <span class="c">red</span>; 
  <span class="b">padding</span>:
  <span class="c">20px</span>; }<br> </p>   
<article class="test t20">
   <a class="a1" href="#">link:Hover</a>
   <a class="a2" href="#">link:Focus</a>
   <a class="a3" href="#">link:Active</a>
</article>
  </div> 

<!-- 21-->
   <div><h2> 21.  X:not(selector) </h2>
<p class="code">
  <span class="a"> .t21:not(h1) </span>{
  <span class="b">color</span>:
  <span class="c">blue</span>; 
  <span class="b">font-size</span>:
  <span class="c">22px</span>; }</p>   
<article class="test t21">
  <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque accusantium molestiae deleniti natus labore eveniet illum, magnam excepturi unde dolore eius animi delectus porro assumenda mollitia iste commodi sed provident.</p>
</article>
  </div> 

<!-- 22-->
   <div><h2> 22.  X::pseudoElement </h2>
<p class="code">
  <span class="a"> p::first-line </span>{
  <span class="b">color</span>:
  <span class="c">green</span>; 
  <span class="b">font-size</span>:
  <span class="c">28px</span>; }</p>   
<article class="test t22">
  <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque accusantium molestiae deleniti natus labore eveniet illum, magnam excepturi unde dolore eius animi delectus porro assumenda mollitia iste commodi sed provident.</p>
</article>
  </div> 
    
<!-- 23-->
   <div><h2> 23.  X::pseudoElement </h2>
<p class="code">
  <span class="a"> p::first-letter </span>{
  <span class="b">color</span>:
  <span class="c">deeppink</span>; 
  <span class="b">font-size</span>:
  <span class="c">32px</span>;
  <span class="b">font-weight</span>:
  <span class="c">bold</span>;}</p>   
<article class="test t23">
  <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque accusantium molestiae deleniti natus labore eveniet illum, magnam excepturi unde dolore eius animi delectus porro assumenda mollitia iste commodi sed provident.</p>
</article>
  </div> 
    
<!-- 24-->
   <div><h2> 24.  X:nth-child(n) </h2>
<p class="code">
  <span class="a"> li:nth-child(1) </span>{
  <span class="b">color</span>:
  <span class="c">purple</span>; 
  <span class="b">font-size</span>:
  <span class="c">30px</span>;}</p>   
<article class="test t24">
  <h1>Lorem ipsum dolor</h1>
   <ol>
    <li> Lorem</li>
    <li> Ipsum</li>
    <li> Dolor</li>
  </ol>
</article>
  </div> 

<!-- 25-->
   <div><h2> 25.  X:nth-last-child(n) </h2>
<p class="code">
  <span class="a"> li:nth-last-child(2) </span>{
  <span class="b">color</span>:
  <span class="c">lime</span>; 
  <span class="b">font-weight</span>:
  <span class="c">bold</span>;}</p>   
<article class="test t25">
  <h1>Lorem ipsum dolor</h1>
   <ol>
    <li> Lorem</li>
    <li> Ipsum</li>
    <li> Dolor</li>
    <li> Dolor</li>
  </ol>
</article>
  </div>
    
<!-- 26-->
   <div><h2> 26.  X:nth-of-type(n) </h2>
<p class="code">
  <span class="a"> ul:nth-of-type(2) </span>{
  <span class="b">color</span>:
  <span class="c">red</span>; 
  <span class="b">font-size</span>:
  <span class="c">10px</span>;}</p>   
<article class="test t26">
  <h1>Lorem ipsum dolor</h1>
   <ul>
    <li> Lorem</li>
    <li> Ipsum</li>
    <li> Dolor</li>
    <li> Dolor</li>
  </ul>
   <ul>
    <li> Lorem</li>
    <li> Ipsum</li>
    <li> Dolor</li>
    <li> Dolor</li>
  </ul>
   <ul>
    <li> Lorem</li>
    <li> Ipsum</li>
    <li> Dolor</li>
    <li> Dolor</li>
  </ul>
</article>
  </div>
    
<!-- 27-->
   <div><h2> 27.  X:nth-last-of-type(n) </h2>
<p class="code">
  <span class="a"> ul:nth-last-of-type(3) </span>{
  <span class="b">color</span>:
  <span class="c">indigo</span>; 
  <span class="b">text-shadow</span>:
  <span class="c">2px 2px 5px red</span>;}</p>   
<article class="test t27">
  <h1>Lorem ipsum dolor</h1>
   <ul>
    <li> Lorem</li>
    <li> Ipsum</li>
    <li> Dolor</li>
    <li> Dolor</li>
  </ul>
   <ul>
    <li> Lorem</li>
    <li> Ipsum</li>
    <li> Dolor</li>
    <li> Dolor</li>
  </ul>
   <ul>
    <li> Lorem</li>
    <li> Ipsum</li>
    <li> Dolor</li>
    <li> Dolor</li>
  </ul>
</article>
  </div>

<!-- 28-->
   <div><h2> 28.  X:first-child </h2>
<p class="code">
  <span class="a"> ul:first-child </span>{
  <span class="b">color</span>:
  <span class="c">fuchsia</span>; 
  <span class="b">text-shadow</span>:
  <span class="c">3px 3px 6px red</span>;}</p>   
<article class="test t28">
  <h1>Lorem ipsum dolor</h1>
   <ul>
    <li> Lorem</li>
    <li> Ipsum</li>
    <li> Dolor</li>
    <li> Dolor</li>
    <li> Amet</li>
  </ul>
</article>
  </div>

<!--  29-->
   <div><h2> 29.  X:last-child </h2>
<p class="code">
  <span class="a"> ul:last-child </span>{
  <span class="b">color</span>:
  <span class="c">fuchsia</span>; 
  <span class="b">text-shadow</span>:
  <span class="c">3px 3px 6px red</span>;}</p>   
<article class="test t29">
  <h1>Lorem ipsum dolor</h1>
   <ul>
    <li> Lorem</li>
    <li> Ipsum</li>
    <li> Dolor</li>
    <li> Dolor</li>
    <li> Amet</li>
  </ul>
</article>
  </div>

<!-- 30-->
   <div><h2> 30.  X:only-child </h2>
<p class="code">
  <span class="a"> ul:only-child </span>{
  <span class="b">color</span>:
  <span class="c">tomato</span>; 
  <span class="b">text-transform</span>:
  <span class="c">uppercase</span>;}</p>   
<article class="test t30">
  <h1>Lorem ipsum dolor</h1>
   <ul>
    <li> Lorem</li>
    <li> Ipsum</li>
    <li> Dolor</li>
    <li> Dolor</li>
    <li> Amet</li>
  </ul>
   <ul>
    <li> Lorem</li>
  </ul>
</article>
  </div>

<!-- 31-->
   <div><h2> 31. X:only-of-type </h2>
<p class="code">
  <span class="a"> ul:only-of-child </span>{
  <span class="b">color</span>:
  <span class="c">crimson</span>; 
  <span class="b">background</span>:
  <span class="c">yellow</span>;}</p>   
<article class="test t31">
  <h1>Lorem ipsum dolor</h1>
   <ul>
    <li> Lorem</li>
  </ul>
   <ul>
    <li> Lorem</li>
    <li> Ipsum</li>
    <li> Dolor</li>
    <li> Dolor</li>
    <li> Amet</li>
  </ul>
</article>
  </div>

<!-- 32-->
   <div><h2> 32.  X > Y > Z </h2>
<p class="code">
  <span class="a"> div > .t32 > header > ul > li:first-child </span>{
  <span class="b">color</span>:
  <span class="c">red</span>; 
  <span class="b">font-weight</span>:
  <span class="c">bold</span>;
    <span class="b">font-size</span>:
  <span class="c">60px</span>;}</p>   
<article class="test t32">
 <header>
    <ul>
     <li> Lorem</li>
     <li> Ipsum</li>
     <li> Dolor</li>
     <li> Dolor</li>
     <li> Amet</li>
  </ul>
</header>
</article>
  </div>
    
<!--  Finish-->
   <div><h2>-  Finish </h2>
 <center><a class="fin" href="https://goo.gl/Y9t68Y" target="_blank"> <img src="https://goo.gl/gHNFlc" alt="Cute"></a> </center>
   <h4> References</h4>
     <ul>
       <li><a href="https://goo.gl/IMMOGz" target="_blank"> Code.tutsplus.com</a></li>
       <li><a href="https://goo.gl/rvRRBQ" target="_blank"> Udemy.com</a></li>
       <li><a href="https://goo.gl/Vfcj" target="_blank">  Youtube.com</a></li>
     </ul>
     
  </div>
 <!--   Content [END] -->    
  </div>
  
 <footer>
Copyright &#169; <script type="text/javascript">var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> Wilder_Taype
</footer>  
</section>

<!--  Fonts Google and Icons of Font Awesome, for more view: https://goo.gl/Z7hUh2-->
<link href="//fonts.googleapis.com/css?family=Karla|Source+Code+Pro" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
body,button{font-size:18px}.wrapper,button{box-shadow:0 2px 4px rgba(0,0,0,.25)}*{font-family:Karla,sans-serif}body{background:linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);color:#a1b1bc}.wrapper{box-sizing:border-box;max-width: 1200px;background:#fff;margin:0 auto;padding:10px;position:relative}.main div,.main img{margin:8% auto;width:100%}.main,button{padding:10px 20px}button{background:#3ff0ff;color:#263238;font-weight:bolder;position:absolute;border:none;cursor:pointer}.a,.code{color:#000}button:focus,button:hover{outline:0}button:active{box-shadow:2px 4px 6px rgba(0,0,0,.45)}.prev:before{content:"\f053";font-family:fontawesome}.next:before{content:"\f054";font-family:fontawesome}.next{right:5px}.prev{left:5px}.main{max-width:80%;margin:0 auto;position:relative}.main div{display:none}footer{text-align:center;margin:10% 0 1%}.code{font-family:'Source Code Pro',monospace;font-size:16px;line-height:24.6px}.a{letter-spacing:1.3px}.b{color:red}.c{color:green}.d{color:#00f}.test{background:#e9ebee;color:#000;padding:20px}.t1{padding:0;margin:0}.t2{padding:20px;color:#00f}.t3{color:red;font-weight:700;font-size:30px}.t4 a{text-decoration:none;color:#1fc092}.t5 a{font-size:24px;color:green}.t5 p{margin-left:15%}.t6 a:link{color:#00f}.t6 a:visited{color:#ff1493}ol~p,ul+p{color:red}article.t8>h3{border:2px solid #000}p[title]{color:#ff1493;font-size:40px}a[href="http://fb.com"]{color:#375593;font-weight:bolder}a[href="https://twitter.com"]{color:#0eb6f6;font-weight:bolder}a[href="https://plus.google.com"]{color:#dd4b39;font-weight:bolder}a[href*=face]{color:#375593;font-size:30px}a[href*=udev]{color:#0eb6f6;font-size:30px}a[href*=tube]{color:#e52d27;font-size:30px}.t13 a[href^="https://"]{color:#00f}.t13 a[href^="http://"]{color:red}.t14 a[href$=".jpg"]{color:green;font-weight:700}.t14 a[href$=".gif"]{color:#00f;font-weight:700}.t15 img[src$=".gif"]{width:100%;border-radius:5px}.t16 a[data-type=image]{text-shadow:2px 2px 5px red;font-size:22px}.t17 a[data-info~=extern]{padding:15px}.t17 a[data-info~=imgPng]{font-size:28px}input[type=radio]:checked+label{color:#00f;font-size:24px}.name:before{content:"\f118";font-family:fontawesome}.ocup:after{content:"\f004";font-family:fontawesome}.t20 a{margin:10px 20px}.t20 .a1:hover{background:#00f;padding:20px}.t20 .a2:focus{background:green;padding:20px}.t20 .a3:active{background:red;padding:20px}.t21:not(h1){color:#00f;font-size:22px}.t22 p::first-line{color:green;font-size:28px}.t23 p::first-letter{color:#ff1493;font-size:32px;font-weight:700}.t24 li:nth-child(1){color:purple;font-size:30px}.t25 li:nth-last-child(2){color:#0f0;font-weight:700}.t26 ul:nth-of-type(2){color:red;font-size:10px}.t27 ul:nth-last-of-type(3){color:indigo;text-shadow:2px 2px 5px red}.t28 li:first-child,.t29 li:last-child{text-shadow:3px 3px 6px #00f;color:#f0f}.t30 li:only-child{color:tomato;text-transform:uppercase}.t31 li:only-of-type{color:#dc143c;background:#ff0}div>.t32>header>ul>li:first-child{color:red;font-weight:700;font-size:60px}.fin img{margin:10px auto;width:90%}
/* Downloaded from https://ahoj.co.uk/ */
var cIndex=0,items=$('.main div'),itemsA=items.length;function cycleItems(){var item=$('.main div').eq(cIndex);items.hide();item.css('display','inline-block')}
var autoSlide=setInterval(function(){cIndex+=1;if(cIndex>itemsA-1){cIndex=0}
cycleItems()},5000);$('.next').click(function(){clearInterval(autoSlide);cIndex+=1;if(cIndex>itemsA-1){cIndex=0}
cycleItems()});$('.prev').click(function(){clearInterval(autoSlide);cIndex-=1;if(cIndex<0){cIndex=itemsA-1}
cycleItems()})

This awesome code is write by WILDER TAYPE, you can se more from this user in the personal repository