Bootstrap Snippet user-interface by john yumang using HTML Bootstrap

"user-interface by john yumang"
Bootstrap 3.3.0 Snippet by cristianogaspar

3.3.0

676 0 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>   <link rel="stylesheet" href="bootstrap/css/w3.css">  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <title>PSAU- CVM</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> </head> <html> <body> <div class="container-fluid" style="background-color:#125477"> </div> <div class="container-fluid"> <div class="container"> <h2 style="color:green;font-family:Angsana New;text-align:center;">COLLEGE OF VETERINARY MEDICINE</h2> </div> <div class="container" style="height:300;"> <div class="panel-footer" id="foundationbanner"> <button type="button" class="btn btn-success btn-lg pull-right" style="position:bottom;margin-top:0;"> <i class="fa fa-dollar fa-lg"></i> Donate Now</button> <br> <a href=""> <img src="https://image.freepik.com/free-vector/people-avatars_23-2147501881.jpg" class="img-thumbnail hidden-xs" height="280" width="200" style="margin-top:130;"> </a> </div> </div> <br> <div class="container"> <div class="panel-footer"> <ol class="breadcrumb pull-right"> <li><a href="Cvm-home.html" data-toggle="tooltip" data-placement="top"title="Home"> Home </a></li> <li><a href="Cvm-admission.html#">Admission</a></li> <li><a href="Cvm-alumni.html">Alumni</a></li> <li><a href="Cvm-history.html" data-toggle="tooltip" data-placement="top"title="Know about the history ofcvm and milestone">History</a></li> <li><a href="Cvm-V&M.html">V & M</a></li> <li><a href="Cvm-facilities.html">Facilities</a></li> <li><a href="Cvm-faculty.html">Faculty</a></li> <li><a href="Cvm-students.html">Students</a></li> <li><a href="Cvm-library.html">Library</a></li> <li><a href="Cvm-brotherhood.html" data-toggle="tooltip" data-placement="top"title="learn more about CVM Brotherhood VKV/VSAS">Brotherhood</a></li> <li><a href="Cvm-mystatus.html">My Status</a></li> </ol> </div> </div> <br> <div class="container"> <div class="row"> <div class="col-lg-3 hidden-sm hidden-xs"> <div class="panel-footer" style="height:330;"> <br> <ul class="w3-ul"> <li class="w3-hover-red">Home</li> <li class="w3-hover-red">Profile</li> <li class="w3-hover-red">Activities</li> <li class="w3-hover-red">Topic one</li> <li class="w3-hover-red">Topic two</li> <li class="w3-hover-red">Topic three</li> <li class="w3-hover-red">more Link here</li> <li class="w3-hover-red">more Link here</li> <li class="w3-hover-red">more Link here</li> </ul> </div> <div class="panel-footer"> <a class="twitter-timeline" href="https://twitter.com/Jhean_Yhu" data-widget-id="731156277431140352">Tweets by @Jhean_Yhu</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> </div> <div class="col-lg-9"> <div class="panel-footer" style="height:1000px;max-width:1000px;"> <h5 class="text-info"><b> LIVE UPDATES </b></h5> <div class="tabbable-panel"> <div class="tabbable-line"> <ul class="nav nav-tabs "> <li class="active"> <a href="#tab_default_1" data-toggle="tab"> News</a> </li> <li> <a href="#tab_default_2" data-toggle="tab"> Activities </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> History </a> </li> <li> <a href="#tab_default_4" data-toggle="tab"> Videos </a> </li> <li> <a href="#tab_default_5" data-toggle="tab"> Pictures </a> </li> <li> <a href="#tab_default_6" data-toggle="tab"> Help </a> </li> <li> <a href="#tab_default_7" data-toggle="tab"> CVM-Partners </a> </li> <li> <a href="#tab_default_7" data-toggle="tab"> Community </a> </li> <li>  <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Post New</button>  <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Write new news feed</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btnbtn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_default_1" active> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> <div class="tab-pane" id="tab_default_2"> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> <div class="tab-pane" id="tab_default_3"> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> <div class="tab-pane" id="tab_default_4"> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> <div class="tab-pane" id="tab_default_5"> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> <div class="tab-pane" id="tab_default_6"> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> <div class="tab-pane" id="tab_default_7"> <h1>ENTER TITLE CONTENT HERE</h1> <p>Enter your images / paragraphhs here </p> </div> </div> </div> </div> </div> </div> </div> </div> <br> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="row"> <div class="col-lg-6"> <div class="panel-footer"> <h3 style="font-family:AR BONNIE;text-align:center;"> Our foundation Ambassadors. </h3> <div class="row"> <div class="col-lg-4"> <center><img src="https://image.freepik.com/free-vector/people-avatars_23-2147501881.jpg" class="img-circle" alt="Cinque Terre" width="139" height="139"> <a href="https://twitter.com/Jhean_Yhu"> <p>John Yumang</p> </a> <h5>John Niro Yumang</h5> <p class="text-muted">President</p> </center> </div> <div class="col-lg-4"> <center><img src="https://image.freepik.com/free-vector/people-avatars_23-2147501881.jpg" class="img-circle" alt="Cinque Terre" width="139" height="139"> <a href="https://twitter.com/Jhean_Yhu"> <p>John Yumang</p> </a> <h5>John Niro Yumang</h5> <p class="text-muted">Ambassador to youth</p> </center> </div> <div class="col-lg-4"> <center><img src="https://image.freepik.com/free-vector/people-avatars_23-2147501881.jpg" class="img-circle" alt="Cinque Terre" width="139" height="139"> <a href="https://twitter.com/Jhean_Yhu"> <p>John Yumang</p> </a> <h5>John Niro Yumang</h5> <p class="text-muted">Ambassador Internationa</p> </center> </div> </div> </div> </div> <div class="col-lg-6"> <div class="panel-footer"> <h3 style="font-family:AR BONNIE;text-align:center;height:140;"> VISIT US TODAY. </h3> <script src='https://image.freepik.com/free-vector/people-avatars_23-2147501881.jpg'></script><div style='overflow:hidden;height:150px;width:350px;'><div id='gmap_canvas' style='height:190px;width:350px;'></div><div><small><a href="http://embedgooglemaps.com"> embed google maps </a></small></div><div><small><a href="http://www.autohuren.world/locaties/ibiza/">auto huren ibiza</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:10,center:new google.maps.LatLng(51.58250734077006,0.2883488777343901),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(51.58250734077006,0.2883488777343901)});infowindow = new google.maps.InfoWindow({content:'<strong>Jean Yu</strong><br>London, United Kingdom<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script> </div> </div> </div> </div> </div> </div> <br> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="panel-footer"> <div class="row"> <div class="col-lg-2"> <ul class="list-unstyled"> <li><h4 class="text-primary">PRODUCT</h4><li> <li><a href="#" id="footercompanyinfo">Cloud</a></li> <li><a href="#" id="footercompanyinfo">Online store</a></li> <li><a href="#" id="footercompanyinfo">Musicjam</a></li> <li><a href="#" id="footercompanyinfo">Videojam</a></li> <li><a href="#" id="footercompanyinfo">Storypad</a></li> <li><a href="#" id="footercompanyinfo">WorldJob</a></li> <li><a href="#" id="footercompanyinfo">Chatroom</a></li> <li><a href="#" id="footercompanyinfo">Community</a></li> <li><a href="#" id="footercompanyinfo">Games</a></li> </ul> </div> <div class="col-lg-2"> <ul class="list-unstyled"> <li><h4 class="text-primary">TOOLS</h4><li> <li><a href="#" id="footercompanyinfo">Console</a></li> <li><a href="#" id="footercompanyinfo">Open Graph Debugger</a></li> <li><a href="#" id="footercompanyinfo">JavaScript Console</a></li> <li><a href="#" id="footercompanyinfo">Cloud Analytics</a></li> </ul> <ul class="list-unstyled"> <li><h4 class="text-primary">SUPPORT</h4><li> <li><a href="#" id="footercompanyinfo">Platform Status</a></li> <li><a href="#" id="footercompanyinfo">Developers Group</a></li> <li><a href="#" id="footercompanyinfo">Marketing Partners</a></li> <li><a href="#" id="footercompanyinfo">Bugs</a></li> </ul> </div> <div class="col-lg-2"> <ul class="list-unstyled"> <li><h4 class="text-primary">RESOURCES</h4><li> <li><a href="#" id="footercompanyinfo">Documentation</a></li> <li><a href="#" id="footercompanyinfo">Forum</a></li> <li><a href="#" id="footercompanyinfo">Blogs</a></li> <li><a href="#" id="footercompanyinfo">W3School</a></li> <li><a href="#" id="footercompanyinfo">StackOverflow</a></li> <li><a href="#" id="footercompanyinfo">Bootstrap 3.3.6</a></li> <li><a href="#" id="footercompanyinfo">Bootsnip</a></li> <li><a href="#" id="footercompanyinfo">Oracle java</a></li> <li><a href="#" id="footercompanyinfo">Php 5</a></li> <li><a href="#" id="footercompanyinfo">Free Lance Programmer</a></li> </ul> </div> <div class="col-lg-2"> <ul class="list-unstyled"> <li><h4 class="text-primary">NEWS</h4><li> <li><a href="#" id="footercompanyinfo">Blog</a></li> <li><a href="#" id="footercompanyinfo">Roadmap</a></li> <li><a href="#" id="footercompanyinfo">Case Studies</a></li> <li><a href="#" id="footercompanyinfo">Community</a></li> </ul> </div> <div class="col-lg-2"> <ul class="list-unstyled"> <li><h4 class="text-danger">GET INSTALLS</h4><li> </ul> </div> </div> </div> </div> </div> </div> <br><br><br> </div> </html> <style> body {background-color:lightgray;} #footercompanyinfo {color:gray;font-size:12px;} #foundationbanner {background-color;white; background-image: url("http://www.planwallpaper.com/static/images/494303a2cb59b5103ed095867f3d5dbd.jpg"); background-repeat:no-repeat; background-attachment:center; background-position:right; background-size:100%,100%;

Related: See More

Vue Argon Design System

Vue Argon Design System

Instagram Style User Online

Instagram Style User Online

login and signup by john niro yumang

login and signup by john niro yumang

My User Login Page

My User Login Page

Questions / Comments:

Posting GuidelinesFormatting