diff options
Diffstat (limited to 'project/example-project')
| -rw-r--r-- | project/example-project/index.html | 255 |
1 files changed, 255 insertions, 0 deletions
diff --git a/project/example-project/index.html b/project/example-project/index.html new file mode 100644 index 0000000..03080e9 --- /dev/null +++ b/project/example-project/index.html @@ -0,0 +1,255 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <meta name="author" content="harrnish"> + + <title>Project | s1nical</title> + + <!-- stylesheet --> + <link rel="stylesheet" href="/css/style.css"> + + <!-- bootstrap cdns --> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> + + <!-- google fonts --> + <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet"> + + <!-- ionicons cdn --> + <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script> + + + <!-- for on scroll animations --> + <link rel="stylesheet" href="/css/animate.css"> + <script src="/js/wow.min.js"></script> + + <!-- hide context menu and disable text highlighting --> + <script src="/js/hide-context-menu.js"></script> + <link rel="stylesheet" href="/css/no-text-highlighting.css"> + + <!-- favicon --> + <link rel="shortcut icon" href="/assets/superthumb.jpg" type="image/jpg"> + +</head> +<body> + <div class="wrapper"> + + <!--------------- navbar starts here ---------------> + <nav> + <span id="brand"> + <a href="/">s1nical</a> + </span> + + <ul id="menu"> + <li><a href="/">home<span>.</span></a></li> + <li><a href="/work/">work<span>.</span></a></li> + <li><a href="/about/">about me<span>.</span></a></li> + <li><a href="/contact/">contact<span>.</span></a></li> + </ul> + + <div id="toggle"> + <div class="span">menu</div> + </div> + + </nav> + + <div id="resize"> + <div class="close-btn">close</div> + + <ul id="menu"> + <li><a href="/">home<span>.</span></a></li> + <li><a href="/work/">work<span>.</span></a></li> + <li><a href="/about/">about me<span>.</span></a></li> + <li><a href="/contact/">contact<span>.</span></a></li> + </ul> + </div> + + <!--------------- navbar ends here ---------------> + + <div class="whitespace"></div> + + <!--------------- hero section starts here ---------------> + <div class="container"> + <div class="hero-content"> + <br><br> + <div class="row"> + <div class="col-lg-12"> + <br> + + <h1 class="wow fadeInUp" data-wow-delay="1s">Example Project</h1><br><br> + + <div class="row"> + <div class="col-lg-4"> + <p class="wow fadeInUp" data-wow-delay="1.2s">service :</p> + <h6 class="wow fadeInUp" data-wow-delay="1.3s">Web Development</h6> + </div> + + <div class="col-lg-4"> + <p class="wow fadeInUp" data-wow-delay="1.4s">started :</p> + <h6 class="wow fadeInUp" data-wow-delay="1.5s">10 October 2019</h6> + </div> + + <div class="col-lg-4"> + <p class="wow fadeInUp" data-wow-delay="1.6s">completed :</p> + <h6 class="wow fadeInUp" data-wow-delay="1.7s">10 October 2019</h6> + </div> + </div> + <br> + <p class="wow fadeInUp" data-wow-delay="1.8s">This is just an example project as I don't have any of my projects uploaded yet. :/</p> + </div> + </div> + </div> + </div> + <!--------------- hero section ends here ---------------> + + + <!--------------- project image section starts here ---------------> + + <div class="project-img"> + <div class="container"> + <br><br> + <div class="row"> + <div class="col-md-8"> + <div class="project image wow fadeInUp" data-wow-delay="0.8s"></div> + </div> + <div class="col-md-4"> + <div class="project image wow fadeInUp" data-wow-delay="0.8s"></div> + </div> + </div> + </div> + </div> + + <!--------------- project image section ends here ---------------> + + <br><br> + + <!--------------- project nav starts here ---------------> + + <div class="project-nav"> + <div class="container"> + <div class="row"> + <div class="col-lg-6 prev"> + <p><ion-icon name="arrow-back"></ion-icon>previous</p> + </div> + <div class="col-lg-6 next"> + <p>next<ion-icon name="arrow-forward"></ion-icon></p> + </div> + </div> + </div> + </div> + + <!--------------- project nav starts here ---------------> + + <div class="whitespace"></div> + + + <!--------------- footer starts here ---------------> + <div class="footer"> + <div class="container"> + <br><br> + + <div class="collab"> + <div class="row"> + <div class="col-lg-12"> + <p class="wow fadeInUp">Got an interesting project? I can help you.</p> + </div> + </div> + </div> + + <br> + + <div class="hr"> + <div class="row"></div> + </div> + + <br><br> + + <div class="info"> + <div class="row"> + <div class="col-lg-4" id="personal"> + <p class="wow fadeInUp">connect with me</p> + <h4 class="wow fadeInUp" data-wow-delay="0.2s"><a href="http://twitter.com/mwfeeds">tw @mwfeeds</a></h4> + <br><br> + </div> + + <div class="col-lg-4" id="media"> + <p class="wow fadeInUp" data-wow-delay="0s">follow me</p> + + <ul> + <!--<li id="fb" class="wow fadeInUp" data-wow-delay="0.4s">fb</li> + <li id="ig" class="wow fadeInUp" data-wow-delay="0.6s">ig</li>--> + <li id="tw" class="wow fadeInUp" data-wow-delay="0.8s"><a href="http://twitter.com/mwfeeds">tw</a></li> + <li id="yt" class="wow fadeInUp" data-wow-delay="1s"><a href="http://youtube.com/s1nny">yt</a></li> + </ul> + + <br><br> + </div> + + <div class="col-lg-4" id="address"> + <p class="wow fadeInUp" data-wow-delay="0s">say hello</p> + <h4 class="wow fadeInUp" data-wow-delay="0.2s"><a href="mailto:[email protected]">[email protected]</a></h4> + <br><br> + </div> + </div> + </div> + </div> + </div> + + <!--------------- footer ends here ---------------> + + <br><br><br><br> + + </div> + + <!-- greensock cdn --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> + + <script src="https://code.jquery.com/jquery-3.4.1.js"></script> + <script type="text/javascript"> + + // navigation starts here + $("#toggle").click(function() { + $(this).toggleClass('on'); + $("#resize").toggleClass("active"); + }); + + $("#resize ul li a").click(function() { + $(this).toggleClass('on'); + $("#resize").toggleClass("active"); + }); + + $(".close-btn").click(function() { + $(this).toggleClass('on'); + $("#resize").toggleClass("active"); + }); + + // navigation ends here + + // nav animation + + TweenMax.from("#brand", 1, { + delay: 0.4, + y: 10, + opacity: 0, + ease: Expo.easeInOut + }) + + TweenMax.staggerFrom("#menu li a", 1, { + delay: 0.4, + opacity: 0, + ease: Expo.easeInOut + }, 0.1); + + // nav animation ends + + + + new WOW().init(); + + + </script> +</body> +</html> |