page animals

3 years ago · a01824030b
--- a/animals/css/global.css
+++ b/animals/css/global.css
@ -0,0 +1,93 @@
@import url("./variables.css");

 *{padding: 0; margin: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif;}

 body, html{
    width: 100%;
    height: 100%;
 }

 a{
    text-decoration: none;
 }

 header{
    min-height: 5vh;
    width: 100%;
    background-color: var(--primary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1.5em;
    border-bottom: 2px solid #000;
 }

 header > .header__logo > img {
    width: 50px;
 }

 header > .header__menu > ul{
    display: flex;
    gap: 1em;
 }

 header > .header__menu > ul > li{
    list-style: none;
 }

 header > .header__menu > ul > li > a{
    list-style: none;
    color: #FFF;
    font-weight: bold;
 }

 main{
    min-height: 87vh;
    background-color: #CCC;
 }

 .container{
    width: 100%;
    min-height: 87vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
 }

 footer{
    min-height: 7vh;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 2px solid #000;
 }

 .main__table {
    border-collapse: collapse;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
  
  .main__table > thead {
    background-color: #CCC;
    border: 2px solid #000;
    text-align: left;
    padding: 1em;
  }

  .main__table > thead > tr th {
    padding: 1em;
    border: 2px solid #000;
  }
  
  .main__table > th, td {
    padding: 10px;
    text-align: left;
    border: 2px solid #000;
  }
--- a/animals/css/variables.css
+++ b/animals/css/variables.css
@ -0,0 +1,3 @@
 :root{
    --primary-color:#008080;
 }
--- a/animals/img/wild-animals.png
+++ b/animals/img/wild-animals.png
--- a/animals/index.html
+++ b/animals/index.html
@ -1 +1,74 @@
 <html></html>
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./css/global.css">

    <title>Document</title>
 </head>

 <body>

    <header>
        <div class="header__logo">
            <img src="./img/wild-animals.png" alt="img_logo">
        </div>
        <nav class="header__menu">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ANIMALS</a></li>
                <li><a href="#">NEW ANIMAL</a></li>
            </ul>
        </nav>
    </header>

    <main>

        <div class="container">

            <table class="main__table">
                <thead>
                  <tr>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                  </tr>
                </tbody>
              </table>
            
        </div>

    </main>

    <footer>
        <span>Animals 2023 &copf;</span>
    </footer>

 </body>

 </html>
--- a/animals/pages/animals.html
+++ b/animals/pages/animals.html
@ -0,0 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>

    <header>
         <div class="header__logo">

         </div>
         <nav class="header__menu">
              <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ANIMALS</a></li>
              </ul>  
         </nav>     
    </header>

    <main></main>

    <footer></footer>
    
 </body>
 </html>