Untitled

<!DOCTYPE html>
<html>
 
<head>

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
    <title>
        Hoverable Side Navigation with Icon
    </title>
</head>
 
 
 <style>
        
	body {
      background-image: url('zia.PNG');
      background-size:cover;
     }
	 
    /* Head banner team */
    .banner {
        text-align: center;
        width: ;
    }
          
    h1{
	color:violet;
	font-size:45px;
    }
	
	 h3 {
        color: black;
    }
	
	p {
        color: darkviolet;
		}
		
	.p {
        color: black; 
		font-size:20px;
		opacity: 0.7;
        background-color: white;
    }
        
    /* styling sidebar */
    .sidehoverbar a {
        background-color: black;
        position: absolute;
        font-size: 22px;
        text-decoration: none;
        Color: white;
        padding: 10px;
        border-radius: 0px 25px 25px 0px;
        left: -170px;
        transition: 0.5s;
        opacity: 0.5;
    }
        
    /* Hover effect on sidebar */
    .sidehoverbar a:hover {
        left: 0px;
        opacity: 1;
        background-color: pink;
		color:black;
    }
        
    /* float icons*/
    .sidehoverbar i {
        float: right;
    }
        
    /* defining position of each nav bar */
    .article {
        top: 100px;
        width: 210px;
        height: 30px;
    }
          
    .Interview {

        top: 160px;
        width: 210px;
        height: 30px;
    }
        
    .Scripter {
        top: 220px;
        width: 210px;
        height: 30px;
    }
          
    .Suggested {
        top: 280px;
        width: 210px;
        height: 30px;
    }
          
    .Practice {
        top: 340px;
        width: 210px;
        height: 30px;
    }
        
    /* content margin */
    .hoverable-topic {
        margin-left: 95px;
    }
</style>
 
<body>
 
    <!-- Geeksforgeeks and Slogan -->
    <div class="banner">
        <h1>CINEMATONOMY</h1>
         
         
 <center>
<p>
            Where every piece of scene started
        </p>
 </center>
 
    </div>
 
    <!-- Body content topic -->
    <div class="hoverable-topic">
        <h3><br><br><br>KOREAN DRAMA's</h3>
         
         
  <center>
<p class="p">
            Every people need to have their own <span style="color:blue;font-family:fleer;">"me time"</span> releasing stress,
			having fun with friend's and family's. 
			We all need to help our own health by doing what make's us happy, doing your hobbies,
			<span style="color:blue;font-family:fleer;">watching k-dramas </span>
			spending your time on the things you want to do and not letting anyone to limit you freedom.
        </p>
 
  </center>
    </div>
 
    <!-- Side navigation Bar -->
    <div class="sidehoverbar">
        <a href="file:///C:/Users/christine.rulida/Desktop/che%20che/New%20folder/cine.html#" class="article">
            HOME
            <i class="fa fa-edit"></i>
        </a>
         
        <a href="file:///C:/Users/christine.rulida/Desktop/che%20che/New%20folder/cinema.html" class="Interview">
            MOVIES
            <i class="fa fa-file-o"></i>
        </a>
         
        <a href="#" class="Scripter">
            ABOUT
            <i class="fa fa-commenting"></i>
        </a>
         
        <a href="#" class="Suggested">
            CONTACT
            <i class="fa fa-plus"></i>
        </a>
         
        <a href="#" class="Practice">
            SIGN UP
            <i class="fa fa-laptop"></i>
        </a>
    </diV>
</body>
 
</html>
Editor is loading...