Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Athenz -- DJ</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
- <link href="_/css/bootstrap.css" rel="stylesheet" media="screen">
- <link href="_/css/mystyles.css" rel="stylesheet" media="screen">
- </head>
- <body>
- <!-- NAVIGATION MENU BAR -->
- <div class="jumbtron">
- <section class="navbar navbar-fixed-top center" role="navigation">
- <ul id="top-nav" class="nav navbar-nav">
- <li><a href="index.html">Home</a></li>
- <li><a href="model.html">Model</a></li>
- <li><a href="actress.html">Actress</a></li>
- <li><a href="dj.html">DJ</a></li>
- <li><a href="entreprenuer.html">Entreprenuer</a></li>
- <li><a href="press.html">Press</a></li>
- <li><a href="contact.html">Contact</a></li>
- </ul><!-- nav -->
- </section><!-- navbar -->
- <div id="djbanner" class="col-lg-12">
- <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
- <!-- Indicators -->
- <ol class="carousel-indicators">
- <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
- <li data-target="#carousel-example-generic" data-slide-to="1"></li>
- <li data-target="#carousel-example-generic" data-slide-to="2"></li>
- </ol>
- <!-- Wrapper for slides -->
- <div class="carousel-inner">
- <div class="item active">
- <img src='images/dj/dj1.jpg' alt="DJ Photo 1">
- </div>
- <div class="item">
- <img src='images/dj/dj2.jpg' alt="DJ Photo 2">
- </div>
- <div class="item">
- <img src='images/dj/dj3.jpg' alt="DJ Photo 3">
- </div>
- </div>
- <!-- Controls -->
- <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
- <span class="glyphicon glyphicon-chevron-left"></span>
- </a>
- <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
- <span class="glyphicon glyphicon-chevron-right"></span>
- </a>
- </div> <!-- Carousel -->
- </div>
- </div>
- <div id="dj-body" class="container">
- <div class="row">
- <div class="col-lg-6">
- <div class="big-box">image</div>
- </div>
- <div class="col-lg-6">
- <div class="row">
- <div class="col-lg-6"><div class="mini-box">1</div></div>
- <div class="col-lg-6"><div class="mini-box">2</div></div>
- <div class="col-lg-6"><div class="mini-box">3</div></div>
- <div class="col-lg-6"><div class="mini-box">4</div></div>
- </div>
- </div>
- </div>
- </div> <!-- container -->
- <section class="navbar navbar-fixed-bottom" role="navigation">
- <div class="container">
- <ul id="bottom-nav" class="nav navbar-nav">
- <li><a href="privacypolicy.html">Energy Wellness</a></li>
- <li><a href="http://rouxacademy.com">Bookings</a></li>
- <li><a href="https://www.facebook.com/athenzmedia"><img src="images/social/facebook.png" /></a></li>
- <li><a href="https://twitter.com/athenzmedia"><img src="images/social/twitter.png" /></a></li>
- <li><a href="https://www.youtube.com/channel/UC8j0tdZ-4Cw9inEshI-RHiQ"><img src="images/social/youtube.png" /></a></li>
- <li><a href="https://soundcloud.com/armylagos/pure-stimulation-april"><img src="images/social/soundcloud.png" /></a></li>
- </ul><!-- nav -->
- </div>
- </section><!-- navbar -->
- <script>
- $('.carousel').carousel({
- interval: 4000
- })
- </script>
- <script src="_/js/bootstrap.js"></script>
- <script src="_/js/myscript.js"></script>
- </body>
- </html>
- html, body {
- margin: 0;
- padding: 0;
- height: 100%;
- width: 100%;
- }
- /* ------------ Navigation Bar Section ------------ */
- .navbar.center {
- text-align: center;
- margin: 0 auto;
- }
- .navbar {
- background-color: rgba(0,0,0,0.5);
- background: rgba(0,0,0,0.5);
- border-color: rgba(0,0,0,0.5);
- }
- .navbar-nav li a {
- color: white;
- }
- ul#top-nav.nav.navbar-nav li a {
- font-family: 'Raleway', sans-serif;
- margin-right: 50px;
- }
- ul#top-nav.nav.navbar-nav {
- float: none;
- display: inline-block;
- }
- /* ----------- Home Page Section -------------*/
- .quarter {
- width: 50%;
- height: 99.9%;
- float: left;
- }
- .contents {
- height: 50%;
- width: 100%;
- }
- #athenz-logo {
- z-index: 1050;
- position: absolute;
- background-image: url('../../images/logo/athenz-logo.png');
- background-size: cover;
- background-color: white;
- top: 50%;
- left: 50%;
- width: 360px;
- height: 225px;
- margin-left: -180px;
- margin-top: -112.5px;
- border-left: 4px solid #468AD4;
- border-top: 4px solid #468AD4;
- }
- #athenz-logo::before {
- content: "";
- position: absolute;
- left: 0;
- bottom: 0;
- height: 1px;
- width: 49.5%;
- border-bottom: 4px solid #468AD4;
- }
- #athenz-logo::after {
- content: "";
- position: absolute;
- right: 0;
- top: 0;
- height: 49%;
- width: 4px;
- border-right: 4px solid #468AD4;
- }
- #home-top-left {
- background-image: url('../../images/home/home_tl.jpg');
- background-size: cover;
- position: relative;
- border-bottom: 2px solid;
- border-bottom-color: #468AD4;
- border-right: 2px solid;
- border-right-color: #468AD4;
- }
- #home-top-right {
- background-image: url('../../images/home/home_tr.jpg');
- background-size: cover;
- position: relative;
- border-bottom: 4px solid;
- border-bottom-color: #468AD4;
- border-left: 2px solid;
- border-left-color: #468AD4;
- }
- #home-bottom-left {
- background-image: url('../../images/home/home_bl.jpg');
- background-size: cover;
- position: relative;
- overflow: hidden;
- border-top: 2px solid;
- border-top-color: #468AD4;
- border-right: 4px solid;
- border-right-color: #468AD4;
- }
- #home-bottom-right {
- z-index: 1051;
- padding: 75px;
- position: relative;
- overflow: hidden;
- }
- /* ------------- DJ STYLING STARTS ------------- */
- div#carousel-example-generic.carousel.slide {
- height: 100%;
- }
- div#carousel-example-generic.carousel.slide div.carousel-inner div.item img {
- width: 100%;
- }
- .big-box,
- .mini-box {
- background-color: #10BCFF;
- color: white;
- text-align: center;
- margin: 2px;
- font-size: 1.5em;
- }
- .big-box {
- height: 120px;
- }
- .mini-box {
- height: 60px;
- }
- /* --------- Footer Section -------- */
- ul#bottom-nav.nav.navbar-nav {
- float: right;
- }
- ul#bottom-nav.nav.navbar-nav li {
- margin: 0;
- }
- section.navbar.navbar-fixed-bottom div.container {
- margin-right: 0;
- }
- section.navbar.navbar-fixed-bottom {
- height: 50px;
- z-index: 1060;
- }
- ul#bottom-nav.nav.navbar-nav li {
- margin: 0;
- text-align: center;
- font-size: 12px;
- right: 0;
- padding: 0;
- }
- ul#bottom-nav.nav.navbar-nav li a img {
- width: 28px;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement