Side nav bar in materialize css

<div class="row">
    <div class="container">
    
        <ul id="slide-out" class="side-nav">
            <li><div class="user-view">
              <div class="background">
                <img src="../images/footer_bg.jpg">
              </div>
              <a href="#!user"><img class="circle" src="https://pbs.twimg.com/profile_images/877063380720173057/cTzoJiZ2_400x400.jpg"></a>
              <a href="#!name"><span class="white-text name">Free Time Learn</span></a>
              <a href="#!email"><span class="white-text email">freetimelearn@gmail.com</span></a>
            </div></li>
            
            <li><a class="waves-effect" href="#!"><i class="material-icons">code</i>HTML5</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">flare</i>CSS3</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">desktop_mac</i>Bootstrap 3</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">laptop_mac</i>Bootstrap 4</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">dvr</i>Materialize CSS</a></li>
            <li><div class="divider"></div></li>
            <li><a class="subheader">Scripts</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">input</i>JavaScript</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">show_chart</i>jQuery</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">local_grocery_store</i>Ajax</a></li>
            <li><a class="waves-effect" href="#!"><i class="material-icons">local_library</i>AngularJS</a></li>
        </ul>
       <a href="#" data-activates="slide-out" class="btn button-collapse blue hoverable">SIDE NAV</a>
    
    </div>
</div>
    
<script type="text/javascript">
	$(".button-collapse").sideNav();
</script>

Source: freetimelearning.com

Similar codes

2 votes321 views2 answers
How to add an icon to your website tab
CSS
0 vote260 views1 answer
Bottom gradient
CSS
0 vote271 views2 answers
Center a fixed div horizontally
CSS
-1 vote268 views1 answer
Css blur gradient
CSS
17 votes253 views2 answers
Css horizontal gradient background color
CSS
2 votes312 views1 answer
Tailwind icon animation
CSS
71 votes274 views6 answers
Media queries w3schools
CSS
30 votes275 views5 answers
Css vertical align
CSS
26 votes277 views3 answers
Cursor not pointer
CSS
0 vote253 views1 answer
How to make text disappear after a certain length css
CSS