"atlas"
Bootstrap 3.3.0 Snippet by huytv56

<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> <!------ Include the above in your HEAD tag ----------> <div class="container960"> <!-- header start--> <div class="header"> <div class="row banner"> <div class="col-md-6 col-sm-6"> <a href="#"><img src="images/atlasLogo.png"></a> <a href="#"><img src="images/cfvgLogo.png"></a> </div> <div class="col-md-6 col-sm-6"> <div align="right"> <ul > <li><a href="#">site map</a> </li> <li><a href="#">Home</a> </li> </ul> <div class="clearfix"></div> </div> <div class="search" align="right"> <div><input type="text" placeholder="Search"></div> <span><img src="images/searchIcon.png"> </span> </div> </div> </div> <div class="bannerImg"> <img src="images/bannerImg.png"> </div> <!-- nav--> <nav class="navbar navbar-default "> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav nav-pills nav-justified"> <li class="dropdown"> <a href="/" class="dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false">Welcome (by Atlas)</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">More about Atlas</a></a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Program</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Conference</a></li> <li><a href="#">Meals</a></li> <li><a href="#">Other activities</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Travel Information</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Airplane</a></li> <li><a href="#">Tourist</a></li> <li><a href="#">Map of Vietnam</a></li> </ul> </li> <li><a href="#">Paper Submission</a></li> <li><a href="#">Pre conference activities</a></li> <li><a href="#">Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- nav--> </div> <!-- header start--> <!--main start--> <div class="main"> <div class="mainHome"> <div class="title"> TRANSITIONS AND INTERNATIONAL MANAGEMENT! </div> <b>CFVG - Centre Franco-Vietnamien de Formation à la Gestion, HanoïMay 12, 13 and 14, 2015</b> <br><br> <p> Vous trouverez sur ce site les différentes informations que vous souhaitez y trouver sur la genèse de notre association, ses objectifs, l’organisation et les réseaux qu’elle développe, en France comme hors frontières, les manifestations qu’elle organise et les publications auxquelles ses membres participent. Après une 4ème Conférence annuelle à Aix-Marseille, la 5ème Conférence d'Atlas/AFMI aura lieu au Vietnam. </p> <p> Vous trouverez sur ce site les différentes informations que vous souhaitez y trouver sur la genèse de notre association, ses objectifs, l’organisation et les réseaux qu’elle développe, en France comme hors frontières, les manifestations qu’elle organise et les publications auxquelles ses membres participent. Après une 4ème Conférence annuelle à Aix-Marseille, la 5ème Conférence d'Atlas/AFMI aura lieu au Vietnam. </p> </div> </div> <!--main end--> <!--footer start--> <div class="footer"> <div class="row"> <div class="col-md-10 col-sm-10"> <a href="#"><img src="images/footerLogo.png"> </a> National Economics University, Building 5 – Tran Dai Ngia St. / 207 Giai Phong Road<br> Tel: [84-4] 3 869 10 66 - Fax: [84-4] 3 869 17 93 <br> Email : info@cfvg.org </div> <div class="col-md-2 col-sm-2" align="right"> <span>Power by Hiworld</span> </div> </div> </div> <!--footer end--> </div>
.dropdown:hover>.dropdown-menu { display: block; } body { /*background: url("../img/bg.png") center 0 fixed; */ background: white; font-family: arial, sans-serif; font-size: 13px; line-height: 15px; color: #727475; } .fr { float: right; } .fl { float: left; } li { list-style: none; } .container960 { max-width: 960px; background: #ffffff; margin: auto; } .header { background: #f5fcff; border-bottom: 1px solid #e1e7ea; } .header .banner { padding: 15px; } .header .banner li { float: right; padding: 0 20px; border-right: 1px solid #778790; } .header .banner li:first-child { border-right: none; padding: 0 0 0 20px; } .header .banner .search { padding-top: 10px; position: relative; } .header .banner .search input[type=text] { width: 380px; height: 33px; border: 1px solid #b9d2df; border-radius: 3px; padding-left: 10px; padding-right: 30px; } .header .banner .search span { position: absolute; top: 12px; right: 2px; cursor: pointer; } .header .bannerImg { padding: 0 15px; } .header .bannerImg img { max-width: 100%; } .header .navbar-default { background-color: #f5fcff; border-color: #f5fcff; } .header .navbar-default .navbar-collapse { padding-left: 0; padding-right: 0; } .header .nav-pills >li >a { background: none !important; } .header .nav-pills li a { font-weight: bold; color: #011832; } .header .nav-pills li a:hover { color: #043874; background-color: #f5fcff; } .header .nav-pills li a.active { color: #043874; background-color: #f5fcff; } .header .nav-pills li a.open { background-color: #f5fcff; } .header .nav-pills li ul li a { font-weight: normal; } .header .navbar { margin-bottom: 0px; } .main { padding: 0 40px; } .mainHome { line-height: 22px; padding: 40px 0; } .mainHome .title { font-size: 14px; line-height: 16px; color: #043874; font-weight: bold; margin-bottom: 20px; } .footer { color: white; padding: 15px; line-height: 17px; background: -webkit-linear-gradient(#1a518b,#003d7e); background: -o-linear-gradient(#1a518b,#003d7e); background: -moz-linear-gradient(#1a518b,#003d7e); background: linear-gradient(#1a518b,#003d7e); } .footer img { float: left; margin-right: 10px; } .footer span { opacity: 0.5; font-size: 12px; } #videohome { width: 560px; height: 315px; } @media (max-width:559px) { #videohome { width: 300px; height: 170px; } } .nav-justified > .dropdown .dropdown-menu { top: 80%; } .navbar { min-height: 35px; } .container-fluid { background: none repeat scroll 0% 0% #F5FCFF; }

Related: See More


Questions / Comments: