Untitled
unknown
plain_text
2 years ago
3.7 kB
4
Indexable
<!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...