My portfolio

index.html

<h1>My Portfolio</h1>
<ul class="main">
  <li class="child"><a  target="_blank" class="link" href="https://alaasufi-portifolio-applab.netlify.app/">Applab template</a>
  </li>
  <li class="child"><a  target="_blank" class="link" href="https://alaasufi-portifolio-elite.netlify.app/">EliteCorp template</a></li>
  <li class="child"><a  target="_blank" class="link" href="https://alaasufi-portifolio-axit.netlify.app/">AXIT template</a></li>
<!--   <li class="child"><a class="link" href="https://codepen.io/alaa-sufi/pen/wvWOGJp">MINT template</a></li> -->
  <li class="child"><a target="_blank" class="link" href="https://alaasufi-portifolio-get-youtube-playlist-length.netlify.app/">YouTube Playlist</a></li>
  <li class="last child">Animation SVG<ul>
      <li><a  target="_blank" href="https://alaasufi-portifolio-animation-halloween.netlify.app/">Halloween</a></li>
      <li><a  target="_blank" href="https://alaasufi-portifolio-animation-android.netlify.app/">Andriod</a></li>
      <li><a  target="_blank" href="https://alaasufi-portifolio-animation-myname.netlify.app/">My name</a></li>
      <li><a  target="_blank" href="https://alaasufi-portifolio-animation-google.netlify.app/">Google</a></li>
      <li><a  target="_blank" href="https://alaasufi-portifolio-animation-browser.netlify.app/">Browser coding</a></li>
    </ul>
  </li>
</ul>

my-portfolio.markdown

My portfolio

A Pen by Alaa Sufi on CodePen.

License.

style.scss

body{background-color: #153e90;
 
}
h1{
  text-align: center;
  color:#61bdf6;
}
.main{
  width:95%;
  margin:auto;
  text-align: center;
  display: flex;
  flex-direction:column;
  padding:0px;
  .child{
    border:2px solid #000;
    margin:5px;
    padding:10px;
    list-style:none;
    background-color:#eee;
    &:hover .link{
      color:#343b99;
      transition:all 0.3 ease;
}
    
    a{
      text-decoration: none;
      color:#000;
      
    }
  }
  .last{
    
    ul{ 
      display: flex;
      flex-wrap:wrap;
      flex-direction:column;
      justify-content:space-between;
      padding:0px;
    li{
      list-style:none;
      a{
              color:#61bdf6;
        &:hover{
          color:#343b99;
        }

      }      
      } 
    }
  }
  
  
  
}

done