Skip to content

Instantly share code, notes, and snippets.

@alaa-sufi
Created December 3, 2020 14:28
Show Gist options
  • Save alaa-sufi/7db8844e64d9722cdb14365113077d6b to your computer and use it in GitHub Desktop.
Save alaa-sufi/7db8844e64d9722cdb14365113077d6b to your computer and use it in GitHub Desktop.
My portfolio
<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>
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;
}
}
}
}
}
}
@alaa-sufi
Copy link
Author

done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment