louth test 1

In this example below you will see how to do a louth test 1 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by _75lb, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright _75lb ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>louth test 1</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample page</title>
    <style type="text/css">
      /* Write your CSS solution here (do not edit the surrounding HTML) */
    </style>
  </head>
  <body>
    <div class="content">
      <h1>First header</h1>
      <div>
        <a href="/first.html">This is the first italic link</a> with the normal text following it.
      </div>
      <h1>Second header</h1>
      <div>
        <a href="/second.html">This is the second italic link</a> with the normal text following it.
        <p>Normal text...</p>
      </div>
      <h1>Third header</h1>
      <ul>
        <li><a href="/lilink.html">Bold green link</a> with red text following it in the same line.</li>
        <li><a href="/lilink.html">Bold green link</a> with normal text following it in the same line.</li>
      </ul>
      <h1>Fourth header</h1>
      <ul>
        <li>
          <div>Red text </div>
        </li>
        <li>
          <div>
            <div>Normal text</div>
            <div>with another normal text in a new line.</div>
          </div>
        </li>
      </ul>
      <p>Copyright text</p>
    </div>
  </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/_75lb/louth-test-1-YaeOpq */
:not(li) a {
  font-style: oblique;
}
li a {
  font-style: initial;
  font-weight: bold;
  color: #00FF00;
}

li > * {
  display: inline;
}

li:first-child {
  color: red;
}

Comments