CSS Question 2

CSS Question 2

by misostack

HTML

<div id="wrapper">
  <nav class="navbar">    
    <div class="navbar-links">
      <a class="active" href="">Home</a>
      <a href="">About</a>
      <a href="">Products</a> 
    </div>
  </nav>
  <aside class="sidebar">
    <section>
      <h3>Categories</h3>
      <ul>
        <li><a href="">Category 1</a></li>
        <li><a href="">Category 2</a></li>
        <li><a href="">Category 3</a></li>
        <li><a href="">Category 4</a></li>
        <li><a href="">Category 5</a></li>
      </ul>      
    </section>
  </aside>
  <primary class="content">
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum animi, iusto soluta quas aspernatur consequuntur aut aliquid quibusdam quae eius repudiandae, fuga modi aperiam autem explicabo, temporibus, quaerat sapiente vel.</p>
    </section>
  </primary>
  <footer class="footer">
    <div>Copyrigh@JSBase 2023</div>
  </footer>
</div>

CSS

body{
  margin: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#wrapper{
  display: grid;
  gap: 20px;
  grid-template-columns: 33% 1fr;
  grid-template-rows: 30px 1fr 30px;
  min-height: calc(100vh);
}

.navbar{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 1;  
}


.sidebar{
  grid-column: 1;
  grid-row: 2;
}

.content{
  grid-column: 2;
  grid-row: 2;
}

.footer{
  grid-column: 1/3;
  grid-row: 3;
}

.navbar{
  box-shadow: 1px 2px #888;
}

a{
  text-decoration: none;
  color: black;
  display: block;
}

.navbar-links
{
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1px;
}
.navbar-links a{
  height: 100%;
  flex-grow: 1;
  text-align: center;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.navbar .active{
  background: linear-gradient(green, greenyellow);
}
.navbar-links a:hover{
  background: linear-gradient(green, greenyellow);
}

.sidebar section h3{
  margin: 0;
}
.sidebar section{
  border: 1px solid #F1F1F1;
  border-radius: 1rem;
  padding: 10px;
  margin: 0 10px;
}

.footer div{
  background: linear-gradient(green, greenyellow);
  justify-content: center;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}