"user interface by john niro yumang"
Bootstrap 4.0.0 Snippet by jeanyu23

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!---************* arrangement by john niro yumang b4.0 alpha project graduation ******************* --> <!DOCTYPE html> <html lang="en"> <title>CVM | PSAU</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!------------start head scripts and link src------------> <head> <script src="js/jq.js"></script> <!---- for moving objects make this first always after boootstrap.css -----> <link rel="stylesheet" href="css/bootstrap.css"> <!---- Bootstrap.min link local project skeleton -----> <link rel="stylesheet" href="css/w3.css"> <!--- This is the local w3css extended ---> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/style.css"> <!---- my own link local for customizing -----> <script src="js/bootstrap.min.js"></script> <!---- Bootstrap js link local for well and modal + panels -----> <link rel="icon" href="https://maxcdn.icons8.com/Share/icon/color/Gaming/pokecoin1600.png" /> <!---- Icon link local -----> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <!------- font awesome online plug ---------------> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <!-------------end head scripts and link src -------------> <body> <!--------------- top nav bar content! -----------------> <div class="container-fluid" id="top-container-fluid-nav"> <div class="container" id="top-con"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mr-auto mt-2 mt-md-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </div> </div> <!--------------- top nav bar content! -----------------> <div class="container-fluid" id="banner-container-fluid"> <div class="container"> <div class="jumbotron"> <h1 class="leader">COLLEGE OF VETERINARY MEDICINE</h1> <p>VSAS | VLVK</p> <p class="lead"> <a class="btn btn-success btn-lg" href="#" role="button"> <i class="fa fa-dollar fa-1x"></i> DONATE NOW</a> </p> </div> </div> </div> <!--------------- center content! -----------------> <div class="container-fluid" id="body-container-fluid"> <div class="container"> <div class="row"> <div class="col-lg-3"> <ul class="w3-ul w3-small"> <li><a href="">World </a><span>9</span></li> <li><a href="" > Bussiness </a> <span>9</span></li> <li><a href="">Technology </a><span>9</span></li> <li><a href="">Entertainment </a><span>9</span></li> <li><a href="">Sports </a><span>1</span></li> <li><a href="">Science </a><span>9</span></li> <li><a href="">Celebrity </a><span>12</span></li> <li><a href="">Lifestyle </a><span>12</span></li> <li><a href="">Movies </a><span>12</span></li> <li><a href="">Travel </a><span>12</span></li> <li><a href="">Finance </a><span>12</span></li> </ul> <div class="w3-panel w3-blue w3-display-container"> <span onclick="this.parentElement.style.display='none'" class="w3-button w3-blue w3-large w3-display-topright">×</span> <h5>UPDATES</h5> <p>Pet Diagnostic</p> </div> </div> <div class="col-lg-7"> TOP STORIES <br> <br> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#foreign" role="tab">Foreign</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#local" role="tab">Local</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#blogs" role="tab">Blogs</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#related" role="tab">Related</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#photos" role="tab">Photos</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#link2" role="tab">link2</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#link3" role="tab">link3</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#link4" role="tab">link4</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="foreign" role="tabpanel"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> </div> </div> <div class="tab-pane" id="local" role="tabpanel"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> </div> </div> <div class="tab-pane" id="blogs" role="tabpanel"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Animal Diagnostic and precautions</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> <footer class="blockquote-footer">Dr. Doctor quack quack</footer> </a> </div> </div> <div class="tab-pane" id="related" role="tabpanel">Related</div> <div class="tab-pane" id="photos" role="tabpanel"> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="images/download.svg" alt="Card image cap"> <div class="card-block"> <h6 class="card-title">Card title</h6> </div> </div> </div> <div class="tab-pane" id="link2" role="tabpanel">link2</div> <div class="tab-pane" id="link3" role="tabpanel">link3</div> <div class="tab-pane" id="link4" role="tabpanel">link4</div> </div> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">P</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">6</a></li> <li class="page-item"><a class="page-link" href="#">7</a></li> <li class="page-item"> <a class="page-link" href="#">N</a> </li> </ul> </nav> </div> </div> </div> </div> <!--------------- center content! -----------------> <hr class="colorgraph"> <div class="container-fluid" id="related"> <div class="container"> <div class="row"> <div class="col-lg-3"> <ul class="list-unstyled"> <h3> Related topics</h3> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> <li>Phasellus iaculis neque</li> </ul> </li> </ul> <p><a href=""> Learn more </a></p> </div> <div class="col-lg-3"> <ul class="list-unstyled"> <h3> Related topics</h3> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> <li>Phasellus iaculis neque</li> </ul> </li> </ul> <p><a href=""> Learn more </a></p> </div> <div class="col-lg-3"> <ul class="list-unstyled"> <h3> Related topics</h3> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> <li>Phasellus iaculis neque</li> </ul> </li> </ul> <p><a href=""> Learn more </a></p> </div> <div class="col-lg-3"> <ul class="list-unstyled"> <h3> Related topics</h3> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> <li>Phasellus iaculis neque</li> </ul> </li> </ul> <p><a href=""> Learn more </a></p> </div> </div> </div> </div> <!--------------- top nav bar content! -----------------> <div class="container-fluid" id="footer-container-fluid"> <div class="container"> <!---- for footer container ----> <div class="row"> <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12"> <ul> <li class="title"> Product </li> <li> <a href="#"> Community </a> </li> <li> <a href="#"> Website widgets </a> </li> <li> <a href="#"> Emoticons </a> </li> <li> <a href="#"> Web design </a> </li> <li> <a href="#"> Graphics </a> </li> </ul> <ul> <li class="title"> Pro finder </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Cookies </a> </li> <li> <a href="#"> Private policy </a> </li> <li> <a href="#"> Terms and condition </a> </li> <li> <a href="#"> People </a> </li> <li> <a href="#"> Company </a> </li> </ul> </div> <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12"> <ul> <li class="title"> SDk's </li> <li> <a href="#"> Php </a> </li> <li> <a href="#"> W3school </a> </li> <li> <a href="#"> Java </a> </li> <li> <a href="#"> Java script </a> </li> <li> <a href="#"> Mysql Database </a> </li> <li> <a href="#"> Bootstrap 4.0 Alpha </a> </li> </ul> <ul> <li class="title"> Support </li> <li> <a href="#"> Developers groups </a> </li> <li> <a href="#"> Bugs </a> </li> <li> <a href="#"> Official community </a> </li> <li> <a href="#"> Platform status </a> </li> </ul> </div> <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12"> <ul> <li class="title"> Documentation </li> <li> <a href="#"> Learn API </a> </li> <li> <a href="#"> API version </a> </li> <li> <a href="#"> APi methods </a> </li> <li> <a href="#"> Data Types </a> </li> </ul> <ul> <li class="title"> Licenses </li> <li> <a href="#"> Bootsnip </a> </li> <li> <a href="#"> Boostrap 4.0</a> </li> <li> <a href="#"> Github </a> </li> <li> <a href="#"> Font Awesome.io 5 </a> </li> </ul> <ul> <li class="title"> Graphics </li> <li> <a href="#"> Shutterstuck free </a> </li> <li> <a href="#"> Freepik</a> </li> </ul> </div> <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12"> <ul> <li class="title"> Find us on </li><br> <li> <a href="#"><button class="w3-button w3-circle w3-light-grey"> <i class="fa fa-facebook" aria-hidden="true"></i> </button></a> </li><br> <li> <a href="#"><button class="w3-button w3-circle w3-light-grey"> <i class="fa fa-twitter" aria-hidden="true"></i></button></a> </li><br> <li> <a href="#"><button class="w3-button w3-circle w3-light-grey"> <i class="fa fa-linkedin" aria-hidden="true"></i> </button></a> </li><br> <li> <a href="#"><button class="w3-button w3-circle w3-light-grey"> <i class="fa fa-google" aria-hidden="true"></i> </button></a> </li><br> </ul> </div> <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12"> <ul> <li class="address"> +(63) 2452 82763</li> <li class="address"> @profinder.com.ph </li> <li class="address"> profinder@gmail.com </li> </ul> <ul> <li class="address"> 3rd Block Makati, #403</li> <li class="address"> Phillippines </li> <li class="address"> Delware 1899 </li> </ul> <hr> </div> </div> </div> </div> <!--------------- top nav bar content! -----------------> <footer class="my-5 text-center"> <!-- Copyright removal is not prohibited! --> <p class="mb-2"><small>COPYRIGHT © 2017. ALL RIGHTS RESERVED. BOOTSTRAP 4.0 TEMPLATE BY <a href="https://www.facebook.com/PampangaStateAgriU/">PAMPANGA STATE AGRICULTURAL UNIVERSITY BSIT 3D</a></small></p> <small> <a class="m-2">DEVELOPERS</a> </small> <small> <a href="https://www.facebook.com/JheanYu" target="_blank" class="m-2">@JEAN NIRO</a> <a href="https://www.facebook.com/dungcajustin" target="_blank" class="m-2">@JUSTINE_DUNCGA</a> <a href="https://www.facebook.com/Miserable.Vanilla" target="_blank" class="m-2">@VAN IMTRAMPAS</a> </small> <!-- Copyright removal is not prohibited! --> </footer> </div> </body> <!------------------end content--------------> <!----------------sub footer code ------------> <footer> </footer> <!------------in-line script purpose ------------> <script> $('.carousel').carousel({ interval: 2000 }) </script> <style> </style> <!------------in-line style purpose ------------>
/********************** Follow me on facebook,twitter,Gmail https://www.facebook.com/JheanYu https://twitter.com/Jhean_Yhu?lang=en johnniroyumang@gmail.com **********************/ /********************** CSS CONTENTS 1. Three containers * top-container-fluid-nav * body container-fluid *footer-container-fluid 2. Global declarations 3. colorgraph 4. footer-container-fluid attributes **********************/ body { background-image: url("../images/.png"); background-color:white; background-attachment:scroll; background-repeat:no-repeat; background-position:bottom; background-size:cover ; } /*----------------Containers--------------------*/ #top-container-fluid-nav { background-image: url("../images/.jpg"); background-color:white; background-attachment:scroll; background-repeat:no-repeat; background-position:center; background-size:cover; } #banner-container-fluid { background-image: url("https://newevolutiondesigns.com/images/freebies/dog-wallpaper-12.jpg"); background-color:; background-attachment:scroll; background-repeat:no-repeat; background-position:center; background-size:cover; } #body-container-fluid { background-image: url("../images/.jpg"); background-color:; background-attachment:scroll; background-repeat:no-repeat; background-position:center; background-size:cover; margin:60px 60px; } #footer-container-fluid { background-image: url("../images/"); background-color:white; background-attachment:scroll; background-repeat:no-repeat; background-position:center; background-size:cover; margin:60px 60px; } /********************** GLOBAL DECLARATIONS **********************/ a:hover { text-decoration:none; cursor:hand; } /********************** GLOBAL DECLARATIONS **********************/ #banner-container-fluid .jumbotron { background-color:#9e9e9e54; color:white; max-height:500px; height:430px; } #banner-container-fluid .jumbotron .lead { text-align:center; } #banner-container-fluid .jumbotron .leader { text-align:center; } #banner-container-fluid .jumbotron p { text-align:center; } /********************** color-graph **********************/ .colorgraph { width:80%; text-align:center; margin: 0 auto; } /********************** color-graph **********************/ /********************** navtabs **********************/ .tab-content {padding:20px;max-height:1000px;} .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { border-color:#00BCD4 #fff #00BCD4; } .tab-content .card-block { padding:5px; } .tab-content .list-group-item { border:0px solid white; } .tab-content .list-group-item h5 { color:#057e8e; } .tab-content .list-group-item .mb-1 { font-size:15px; } /********************** navtabs **********************/ /********************** related **********************/ #related li { font-size:12px; } #related h3 { font-size:20px; } #related a { font-size:11px; color:skyblue; } /********************** related **********************/ /********************** Left nav **********************/ span { font-size:10px; float:right; background-color:#F4F7F9; border-radius:10px; padding:3px 8px; color:#84919B; } .lower-case { color:#84919B; font-size:12px; text-align:center; } /********************** Left nav **********************/ /********************** footer-container-fluid **********************/ #footer-container-fluid li { list-style-type:none; color:#098c9c; font-size:10px; } #footer-container-fluid ul .title { color:black; font-size:15px; } #footer-container-fluid ul .address { color:#607d8bad; } /********************** footer-container-fluid **********************/

Questions / Comments:

Wait for the complete update im just busy okie :) newbie in world of programming

Jean Yu () - 9 years ago - Reply 0