<html>
<head>
<title>Acasa</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<style>


.container {
margin-bottom: 10px;
margin-top: 10px;
}


.nav-link {
color: rgb(215, 216, 218);
font-size: x-large;
}


.navDeEditat {
background-color: rgb(55, 55, 55);
color: white;

}

.formular {
padding-top: 17px;
}

hr {
  border: 1px solid red;
}

.footer {
color: rgb(215, 216, 218);
font-size: x-large;
padding-top: 10px;
}



</style>



</head>
<body>

<nav class="navbar bg-dark navDeEditat">
  
    <div class="container">
    <img class="enso" src="enso.png" width="100" height="100">
    <a class="nav-link" href="#text">Text</a>
    <a class="nav-link" href="#tabele">Tabele/Liste</a>
    <a class="nav-link" href="#butoane">Butoane</a>
    <a class="nav-link" href="#">Formulare</a>
    <a class="nav-link" href="#">Imagini</a>
    <form class="d-flex formular" role="search">
      <input class="form-control me-2" type="search" placeholder="Cauta" aria-label="Search">
      <button class="btn btn-outline-secondary" type="submit">Cauta</button>
    </form>

  
  </div>
</nav>

</header>
<div class="container">
  <div class="row">
    <div class="col-sm">
  <h1 id="text">Text</h1>
  </div>
  <div class="col-sm">
    
  </div>
  <div class="col-sm">
    
  </div>
  <h5 style="padding-top:17px; color: rgb(57, 56, 56);"><b>#Elementele de formatare a textului</b></h5>
  </div>
  </div>
  <div class="container">
    <hr style=" border: 5px solid rgb(79, 79, 79);">
  </div>

    <div class="container">
        <div class="row">
          <div class="col-sm">
            <h5><b>Lorem ipsum dolor sit amet</b></h6>
              <p>
                <b style="font-size: 36px;">C</b>onsectetur adipiscing elit. <i>Curabitur et mi ac mauris accumsan</i> hendrerit ut id magna.
                Donec mattis vel ex et fermentum. <b>Ut in pharetra lorem.</b> Vestibulum mollis mi pharetra efficitur scelerisque.<br>
                Aenean hendrerit erat ex, <u style="color:red">eget iaculis sem pretium porttitor</u>. 
                <p><b style="font-size: 36px;">A</b>liquam facilisis risus nec ante vestibulum ornare.<br><hr>
                Nulla tempor purus non cursus semper. Phasellus aliquam quam id leo tristique, eget fringilla urna efficitur.
                </p>
                Cras blandit <mark>metus quis erat eleifend</mark> molestie. Cras at risus a justo dapibus hendrerit.<br><hr>
                Cras vestibulum nisl urna, nec luctus ipsum laoreet ut. <em>Suspendisse non pulvinar erat.</em>
                Nunc feugiat accumsan lorem, non placerat ligula gravida in. 
                Nulla scelerisque, <del style="color:red">orci vitae venenatis posuere</del>, nulla nisi pellentesque nulla, ut pellentesque ante lorem feugiat massa.
                Nullam pulvinar diam et dui tincidunt placerat ligula gravida.
            </p>  
          </div>
          <!-- 
          <div class="col-sm">
            Coloana
          </div>
                    <div class="col-sm">
            Coloana
          </div>
          -->
          <div class="col-sm">
            <h5>Donec et tincidunt ipsum:</h5>
            <blockquote class="text-center">
              <b style="font-size: 36px;">I</b>n finibus nisi mauris, ut bibendum metus tincidunt vel. 
              <br>
              Pellentesque purus velit, eleifend id nisl eu, lacinia ultrices augue. 
              Interdum et malesuada fames ac ante ipsum primis in faucibus
            </blockquote> <hr>
            <img class="enso" src="enso.png" width="250" height="250"> <br><hr>
            <p class="text-center"><b style="font-size: 36px;">U</b>t sit amet enim ut ante iaculis mollis id et ipsum. 
            Nulla <mark>dapibus ut nibh eget</mark> semper. Donec placerat mi at cursus posuere. 
            Vestibulum tempus arcu et ornare condimentum. <u><b>Pulvinar diam et dui</b></u> tincidunt fermentum in vel ipsum. 
            Etiam posuere libero felis, in elementum tellus pellentesque id. Ut condimentum congue ipsum ac pharetra.<br><hr>
             Aliquam erat volutpat. Nulla a erat eu lacus convallis egestas nec quis nibh.</p>
          </div>
          <div class="col-sm">
            <h5>Phasellus lacinia eget odio nec consectetur.</h4>
            <p class="text-center"><b style="font-size: 36px;">N</b>am vel semper odio. 
              Aliquam mollis pellentesque quam, non accumsan mauris eleifend nec. Aenean venenatis efficitur tempus.<br><hr> </p>
              <p class="text-center"><b style="font-size: 36px;">P</b>ellentesque nec urna <u><b>venenatis</b></u>, sodales ante at, posuere metus. 
              Integer <mark>fringilla mi at magna tincidunt</mark>, at hendrerit ex molestie.</p><hr>
              <p class="text-center"><b style="font-size: 36px">C</b>lass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
              Donec consectetur dui euismod, suscipit turpis sed, vulputate metus.
              Phasellus interdum orci sit amet neque cursus mollis. 
              Nulla posuere, dui id vestibulum facilisis, odio nibh finibus massa, vel feugiat ipsum metus et eros. </p><hr>
              <p class="text-center"><b style="font-size: 36px;">M</b>auris iaculis in risus et tempor. Vestibulum congue lacinia ex. Phasellus porttitor nisl sed laoreet mattis. 
              Pellentesque dignissim pulvinar convallis. Nam neque sem, mattis eu placerat ut, viverra nec velit. 
              Mauris vel mauris pulvinar, imperdiet urna eget, egestas erat. Etiam posuere libero felis, in elementum tellus pellentesque id. </p>
          </div>
          <div class="col-sm">
            <p class="text-right"><b style="font-size: 36px">N</b>ullam suscipit pretium lacus. 
            Donec dignissim turpis erat, ac euismod felis ultrices quis. Pellentesque non ornare justo. <br>
            Ut sodales, tortor quis tristique vehicula, orci ante blandit tellus, non mattis ligula odio at magna. 
            Nulla facilisi. Nulla blandit finibus felis sed sagittis. Suspendisse malesuada lectus in tempus finibus. </p><hr>
            <p class="text-right"><b style="font-size: 36px">Q</b>uisque ullamcorper volutpat lacinia. 
            Aenean neque nulla, interdum eu cursus non, porta eu libero. 
            Donec tempus, elit at hendrerit consequat, sem ipsum imperdiet ante, malesuada accumsan ante orci sed urna.
            <del style="color:red">Ut sit amet enim ut ante iaculis mollis id et ipsum.</del> Nulla dapibus ut nibh eget semper. 
            Donec placerat mi at cursus posuere. <u><b>estibulum tempus arcu et ornare condimentum.</b></u>
             Nullam pulvinar diam et dui tincidunt fermentum in vel ipsum. 
             <mark>Etiam posuere libero felis, in elementum tellus pellentesque id.</mark> 
             Ut condimentum congue ipsum ac pharetra. Aliquam erat volutpat. 
             Nulla a erat eu lacus convallis egestas nec quis nibh. In dapibus, nisl non aliquam vestibulum, 
             diam leo euismod nibh, ac maximus sem justo ut enim. Nunc ut pretium dolor. </p>
          </div>
        </div>
      </div>

      <div class="container">
        <hr style=" border: 5px solid rgb(79, 79, 79);">
      </div>
      <div class="container">
        <div class="row">
          <div class="col-sm">
        <h1 id="tabele">Tabele/Liste</h1>
        </div>
        <div class="col-sm">
          
        </div>
        <div class="col-sm">
          
        </div>
        <h5 style="padding-top:17px; color: rgb(57, 56, 56);"><b>#Elementele de formatare pentru tabele si liste</b></h5>
        </div>
        </div>
        <div class="container">
          <hr style=" border: 5px solid rgb(79, 79, 79);">
        </div>
 

        
        <div class="container">
          <div class="row">
          <div class="col-4">
            <h5>Lista ordonata</h5><hr>
              <ol> 
                <li>Aliquam vitae </li>
                <li>Aliquam vitae </li>
                <li>Molestie libero</li>
                <li>Nulla urna sem</li>
                <li>Imperdiet Ut </li>
                <li>Euismod a</li>
                <li>Ultrices et mi</li>
                <li>Duis dignissim </li>
                <li>Pellentesque</li>
               </ol> 
            <br>
          </div>
          <div class="col-4">
            <h5>Lista neordonata</h5><hr>
            <ul> 
              <li>Aliquam vitae </li>
              <li>Aliquam vitae </li>
              <li>Molestie libero</li>
              <li>Nulla urna sem</li>
              <li>Imperdiet Ut </li>
              <li>Euismod a</li>
              <li>Ultrices et mi</li>
              <li>Duis dignissim </li>
              <li>Pellentesque</li>
             </ul> 
            <br>
           </div>
            <div class="col-4">
             <h5>Lista descriptiva</h5><hr>
             <dl> 
              <dt>Aliquam vitae </dt>
              <dd>Aliquam vitae </dd>
              <dt>Molestie libero</dt>
              <dd>Nulla urna sem</dd>
              <dt>Imperdiet Ut </dt>
              <dd>Euismod a</dd>
              <dt>Ultrices et mi</dt>
              <dd>Duis dignissim </dd>
               </dl> 
             <br>
        </div>
        <br>

        <div class="container">
          <div style="margin: right 10px;" class="row no-gutters">
            <div class="col-sm-6">
              <h5>Tabel 1</h5>
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th scope="col">nr</th>
                    <th scope="col">Nullam</th>
                    <th scope="col">Donec </th>
                    <th scope="col">Quisque </th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Aliquam </td>
                    <td>Pellentesque </td>
                    <td>Phasellus  </td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Aenean </td>
                    <td>Vestibulum </td>
                    <td>Dignissim </td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                    <td>Suspendisse </td>
                    <td>Lorem </td>
                    <td>Etiam </td>
                  </tr>
                </tbody>
              </table>

            </div>
          
            <div class="col-sm-6">
              <h5>Tabel 2</h5>
              <table class="table table-striped table-dark">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Nullam</th>
                    <th scope="col">Donec </th>
                    <th scope="col">Quisque </th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Aliquam </td>
                    <td>Pellentesque </td>
                    <td>Phasellus  </td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Aenean </td>
                    <td>Vestibulum </td>
                    <td>Dignissim </td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                    <td>Suspendisse </td>
                    <td>Lorem </td>
                    <td>Etiam </td>
                  </tr>
                </tbody>
              </table>

            </div>
           
           </div>
          
         </div>


         <div class="container">
          <hr style=" border: 5px solid rgb(79, 79, 79);">
        </div>
        <div class="container">
          <div class="row">
            <div class="col-sm">
          <h1 id="butoane">Butoane</h1>
          </div>
          <div class="col-sm">
            
          </div>
          <div class="col-sm">
            
          </div>
          <h5 style="padding-top:17px; color: rgb(57, 56, 56);"><b>#Elementele de formatare pentru butoane</b></h5>
          </div>
          </div>
          <div class="container">
            <hr style=" border: 5px solid rgb(79, 79, 79);">
          </div>
          <br>

          <div class="container">
            <div class="row">
                <div style="background-color:rgb(202, 202, 202);" class="col-md-3">
                  <h5>Modele de butoane</h5>
                  <button type="button" class="btn btn-primary">Primary</button><br><br style="line-height:10px">
                  <button type="button" class="btn btn-secondary">Secondary</button><br><br style="line-height:10px">
                  <button type="submit" class="btn btn-success">Submit</button><br><br style="line-height:10px">
                  <button type="Reset" class="btn btn-danger">Reset</button><br><br style="line-height:10px">
                  <button type="button" class="btn btn-warning">Warning</button><br><br style="line-height:10px">
                  <button type="button" class="btn btn-info">Info</button><br><br style="line-height:10px">
                  <button type="button" class="btn btn-light">Light</button><br><br style="line-height:10px">
                  <button type="button" class="btn btn-dark">Dark</button><br><br style="line-height:10px">
                  <button type="button" class="btn btn-link">Link</button><br><br style="line-height:10px">
                </div>

                <div class="col-md-2">
                  <h5>Explicatii</h5>
                  In hac habitasse platea dictumst. Nullam suscipit pretium lacus. Donec dignissim turpis erat, ac euismod felis ultrices quis. Pellentesque non ornare justo. Ut sodales, tortor quis tristique vehicula, orci ante blandit tellus, non mattis ligula odio at magna. Nulla facilisi. Nulla blandit finibus felis sed sagittis. 
                </div>
                <div style="background-color:rgb(202, 202, 202); ;" class="col-md-3">
                  <h5>Selectoare</h5>
                  <div style="background-color:white; padding-left:30px" class="form-check">
                  <input class="form-check-input" type="checkbox" name="selectat" value="ceva" checked>
                  <label class="form-check-label">Selectat</label> <br>
                  <input class="form-check-input" type="checkbox" name="neselectat" value="ceva" >
                  <label class="form-check-label">Neselectat</label> <br>
                  <input class="form-check-input" type="checkbox" name="dezactivat" value="ceva" disabled>
                  <label class="form-check-label">Dezactivat</label> <br>
                  </div> <br>
                  <h5>Butoane radio</h5>
                  <div style="background-color:white; padding-left:30px" class="form-check">
                    <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>
                    <label class="form-check-label" for="radio1">Selectat </label> <br>
                    <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">
                    <label class="form-check-label" for="radio2">Neselectat</label><br>
                    <input type="radio" class="form-check-input" disabled>
                    <label class="form-check-label">Dezactivat</label>
                 </div>
              </div>
              <div class="col-md-2">
                  Explicatii
                </div>
                <div style="background-color:rgb(202, 202, 202);" class="col-md-2">
                  Alte butoane
                </div>
            </div>
            <div class="row"></div>
        </div>

<br>
<br>
      <footer class="bg-dark footer; ">
        <div class="row">
          <div class="col-sm">
            Coloana
          </div>
          <div class="col-sm">
            Coloana
          </div>
          <div class="col-sm">
            Coloana
          </div>
          <div class="col-sm">
            Coloana
          </div>
          <div class="col-sm">
            Coloana
          </div>
          <div class="col-sm">
            Coloana
          </div>
        </div>
      </footer>


    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>