Found 6 repositories(showing 6)
shaunchander
No description available
VaishantMakan
Building a discord app inspired animated navbar using tailwind css
chamal01
This repository contains a test project completed for assessment purposes at eBEYONDS. It includes HTML, Sass CSS, and JavaScript files for building a responsive website with features such as a Bootstrap navbar, animated image sections, team member cards, and a footer.
WezzieMan
Starting this project by building Discord-inspired animated navbar first.
Sehar024
An interactive header with responsive navbar timeline showcasing my growth as a developer — from learning core tech stacks to building real-world projects. Each milestone is fully animated, offering a visually engaging narrative of my skills, achievements, and career path. Perfect for impressing recruiters with a story, not just a list.
NexAnimation
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="/files/css/bootstrap.css"> <link rel="stylesheet" href="/files/css/bootflat.css"> <link rel="stylesheet" href="/files/css/styles.css"> <link rel="stylesheet" href="/files/css/animate.css"> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css"> </head> <div class="navbar navbar-inverse navbar-custom" role="navigation"> <div class="container-fluid"> <div class="navbar-header"><a class="navbar-brand" href="/">Citadel</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-content"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-content"> <ul class="nav navbar-nav navbar-left"> <li><a style="color: #4fc1e9;" href="/donate">Donate</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a style="color: #4fc1e9;" href="/login">Login</a></li> <li><a style="color: #4fc1e9;" href="/register">Register</a></li> </ul> </div> </div> </div><body> <div class="container-fluid"> <div class="row"> <div id="header" class="header"> <div class="content"> <h1>Citadel RPG</h1> <h3>No one online! </div> </div> <div id="content" class="main-container"> <div id="section1" class="section"> <img src="/files/images/flag.jpg"> <blockquote> <p>That's what.</p> <footer>She</footer> </blockquote> </div> <div id="section2" class="section"> <div class="row"> <div class="col-sm-4 col-xs-4 col-md-4"> <div class="thumbnail ico"> <img class="ico" title="Commands" data-container="body" data-placement="top" data-toggle="popover" data-trigger="hover" data-content="All mechanics are run via command blocks." src="/files/images/icons/chain_command_block.png"> </div> </div> <div class="col-sm-4 col-xs-4 col-md-4"> <div class="thumbnail ico"> <img class="ico" title="Vanilla" data-container="body" data-placement="top" data-toggle="popover" data-trigger="hover" data-content="Not a single plugin is being use for game mechanics!" src="/files/images/icons/milk_bucket.png"> </div> </div> <div class="col-sm-4 col-xs-4 col-md-4"> <div class="thumbnail ico"> <img class="ico" title="Love" data-container="body" data-placement="top" data-toggle="popover" data-trigger="hover" data-content="Server is maintained by a group of dedicated staff." src="/files/images/icons/heart.png"> </div> </div> </div> </div> <div id="section3" class="section" style="pading-top: 200px"> <h2>Meet The Team</h2> <div class="row"> <div class="col-sm-3 col-xs-5 col-md-2"> <div class="thumbnail"> <img class="img-rounded" src="https://visage.surgeplay.com/face/512/a8b5c720-34c0-424f-a9bf-a2ec77defad2"> <div class="caption text-center"> <button class="btn btn-primary" data-toggle="modal" data-target=".reduxRedstoneModal">View</button> </div> </div> </div> <div class="col-sm-3 col-xs-5 col-md-2"> <div class="thumbnail"> <img class="img-rounded" src="https://visage.surgeplay.com/face/512/3f9e78fe-18bd-478c-a0b2-305198d23a0a"> <div class="caption text-center"> <button class="btn btn-primary" data-toggle="modal" data-target=".matrixTunnelModal">View</button> </div> </div> </div> <div class="col-sm-3 col-xs-5 col-md-2"> <div class="thumbnail"> <img class="img-rounded" src="https://visage.surgeplay.com/face/512/dad6b1bc-976c-44ce-9fc2-5712daa64e1e"> <div class="caption text-center"> <button class="btn btn-primary" data-toggle="modal" data-target=".axleMC131Modal">View</button> </div> </div> </div> <div class="col-sm-3 col-xs-5 col-md-2"> <div class="thumbnail"> <img class="img-rounded" src="https://visage.surgeplay.com/face/512/1c690693-f79a-447b-845d-dee2e2aad90d"> <div class="caption text-center"> <button class="btn btn-primary" data-toggle="modal" data-target=".kaycraModal">View</button> </div> </div> </div> <div class="col-sm-3 col-xs-5 col-md-2"> <div class="thumbnail"> <img class="img-rounded" src="https://visage.surgeplay.com/face/512/f68a3460-b2e5-44f0-9a25-254886fc4eac"> <div class="caption text-center"> <button class="btn btn-primary" data-toggle="modal" data-target=".YoungMacModal">View</button> </div> </div> </div> <div class="col-sm-3 col-xs-5 col-md-2"> <div class="thumbnail"> <img class="img-rounded" src="https://visage.surgeplay.com/face/512/2ad275e3-e87e-445c-835e-d106ee7c3443"> <div class="caption text-center"> <button class="btn btn-primary" data-toggle="modal" data-target=".meowingTwurtleModal">View</button> </div> </div> </div> <div class="col-sm-3 col-xs-5 col-md-2"> <div class="thumbnail"> <img class="img-rounded" src="https://visage.surgeplay.com/face/512/dc6a7b28-0179-4b77-91d9-92bf5c65aa59"> <div class="caption text-center"> <button class="btn btn-primary" data-toggle="modal" data-target=".pixelatedPhantomModal">View</button> </div> </div> </div> </div> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <h3>Footer</h3> <p class="text-muted">Footer content here</p> </div> </footer> <div class="modal fade reduxRedstoneModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">ReduxRedstone</h4> </div> <div class="modal-body"> <p>Redstoner/Web Developer</p> <div class="row"> <div class="col-md-6"> <img src="https://visage.surgeplay.com/face/a8b5c720-34c0-424f-a9bf-a2ec77defad2"> </div> <div class="col-md-6"> <p>Some text. Maybe a quote. Maybe some info on the person. What they do, plans, ect. Idk, still a WIP.</p> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade matrixTunnelModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">MatrixTunnel</h4> </div> <div class="modal-body"> <p>Redstoner</p> <div class="row"> <div class="col-md-6"> <img src="https://visage.surgeplay.com/face/3f9e78fe-18bd-478c-a0b2-305198d23a0a"> </div> <div class="col-md-6"> <p>Some text. Maybe a quote. Maybe some info on the person. What they do, plans, ect. Idk, still a WIP.</p> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade axleMC131Modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">AxleMC131</h4> </div> <div class="modal-body"> <p>Builder</p> <div class="row"> <div class="col-md-6"> <img src="https://visage.surgeplay.com/face/dad6b1bc-976c-44ce-9fc2-5712daa64e1e"> </div> <div class="col-md-6"> <p>Hello! I am AxleMC131, an experienced builder with a love for all things vanilla. Citadel is a spectacular example of what can be done in Minecraft when you put your mind (and your friends) to work, and I am truly grateful to have been allowed to contribute to the project alongside its friendly, inspiring team of developers. We have set sail aboard Citadel on a wondrous journey of discovery and creativity, and as we chase the horizon of possibility, I'll be the one standing on the forecastle, gazing ahead in awe.</p> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade kaycraModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">KayCra</h4> </div> <div class="modal-body"> <p>Builder</p> <div class="row"> <div class="col-md-6"> <img src="https://visage.surgeplay.com/face/1c690693-f79a-447b-845d-dee2e2aad90d"> </div> <div class="col-md-6"> <p>I love to build and Citadel has been an amazing part of my life. My favorite quote that was actually made by myself is. "Chaos is calming to the creative mind." I've grown up in California and I've loved computers ever since I was introduced to them. When I'm not building I'm programming; games, websites, etc. I am a senior in high school and I'm planning on going to go to college for Computer Science. My plans for Citadel are to go as far as it does and stay with it through everything. This is a fine group of amazingly talented people and you are all in for some extremely unforgettable experiences.</p> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade youngMacModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">YoungMac_</h4> </div> <div class="modal-body"> <p>Builder</p> <div class="row"> <div class="col-md-6"> <img src="https://visage.surgeplay.com/face/f68a3460-b2e5-44f0-9a25-254886fc4eac"> </div> <div class="col-md-6"> <p>Some text. Maybe a quote. Maybe some info on the person. What they do, plans, ect. Idk, still a WIP.</p> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade meowingTwurtleModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">MeowingTwurtle</h4> </div> <div class="modal-body"> <p>Redstoner</p> <div class="row"> <div class="col-md-6"> <img src="https://visage.surgeplay.com/face/2ad275e3-e87e-445c-835e-d106ee7c3443"> </div> <div class="col-md-6"> <p>Some text. Maybe a quote. Maybe some info on the person. What they do, plans, ect. Idk, still a WIP.</p> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade pixelatedPhantomModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">PixelatedPhantom</h4> </div> <div class="modal-body"> <p>Builder</p> <div class="row"> <div class="col-md-6"> <img src="https://visage.surgeplay.com/face/dc6a7b28-0179-4b77-91d9-92bf5c65aa59"> </div> <div class="col-md-6"> <p>Some text. Maybe a quote. Maybe some info on the person. What they do, plans, ect. Idk, still a WIP.</p> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script type="text/javascript" src="/files/js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="/files/js/bootstrap.min.js"></script> <script type="text/javascript" src="/files/js/wow.js"></script> <script type="text/javascript" src="/files/js/script.js"></script> <script src="/files/js/TweenMax.min.js"></script> <script src="/files/js/ScrollMagic.min.js"></script> <script src="/files/js/animation.gsap.js"></script> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> </body> </html>
All 6 repositories loaded