Advertisement
Sebuahhobi98

fixed-div

Feb 2nd, 2022
1,363
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 3.48 KB | None | 0 0
  1. <?php
  2. defined('BASEPATH') OR exit('No direct script access allowed');
  3. ?>
  4. <!doctype html>
  5.     <html lang="en">
  6.     <head>
  7.         <!-- Required meta tags -->
  8.         <meta charset="utf-8">
  9.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  10.  
  11.         <!-- Bootstrap CSS -->
  12.         <link rel="stylesheet" href="<?=base_url()?>assets/bootstrap-4.3.1/css/bootstrap.min.css">
  13.  
  14.         <link rel="stylesheet" media="screen" href="<?=base_url();?>assets/jam_analog/css/main.css"/>
  15.  
  16.  
  17.         <style type="text/css">
  18.         .selector-for-some-widget {
  19.             box-sizing: content-box;
  20.         }
  21.  
  22.         body {
  23.             background: url('<?=base_url();?>assets/image/1.jpg') no-repeat center center fixed;
  24.             -webkit-background-size: cover;
  25.             -moz-background-size: cover;
  26.             -o-background-size: cover;
  27.             background-size: cover;
  28.         }
  29.  
  30.         .container{
  31.             padding-top: 25px;  
  32.         }      
  33.     </style>
  34.  
  35.     <title>JWS</title>
  36. </head>
  37. <body>
  38.     <div class="container-fluid">
  39.         <div class="fixed-top">
  40.             <div class="row m-2">
  41.                 <div class="col-sm-4 border border-primary">
  42.                     <div id="myclock" class="jam-analog"></div>
  43.                     <div id="time">17:40:30</div>
  44.                     <div id="jam" class="text-danger font-weight-bold">20 Agustus 2020</div>
  45.                 </div>
  46.                 <div class="col-sm-8 border border-success">
  47.  
  48.                     <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  49.                         <ol class="carousel-indicators">
  50.                             <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  51.                             <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  52.                             <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  53.                             <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
  54.                         </ol>
  55.                         <div class="carousel-inner">
  56.                             <div class="carousel-item active">
  57.                                 <img class="d-block w-100" src="<?=base_url();?>assets/image/k1.jpeg" alt="First slide">
  58.                             </div>
  59.                             <div class="carousel-item">
  60.                                 <img class="d-block w-100" src="<?=base_url();?>assets/image/k2.jpeg" alt="Second slide">
  61.                             </div>
  62.                             <div class="carousel-item">
  63.                                 <img class="d-block w-100" src="<?=base_url();?>assets/image/k3.jpeg" alt="Third slide">
  64.                             </div>
  65.                             <div class="carousel-item">
  66.                                 <img class="d-block w-100" src="<?=base_url();?>assets/image/k4.jpeg" alt="Third slide">
  67.                             </div>
  68.                         </div>
  69.                         <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
  70.                             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  71.                             <span class="sr-only">Previous</span>
  72.                         </a>
  73.                         <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
  74.                             <span class="carousel-control-next-icon" aria-hidden="true"></span>
  75.                             <span class="sr-only">Next</span>
  76.                         </a>
  77.                     </div>
  78.                    
  79.                 </div>
  80.             </div>
  81.         </div>
  82.         <div class="fixed-bottom" style="padding: 0px 20px 5px 20px;">
  83.             <div class="row">
  84.                 <div id="j"></div>
  85.             </div>
  86.             <div class="row">
  87.                 <div class="col box text-center text-danger" style="height: 50px">
  88.                     <span>
  89.                         <marquee behavior="scroll" direction="left">
  90.                             <p>Pengumanan hari ini kajian fiqih syafi'i ba'da magrib. Tes menggunakan new line...</p>
  91.                         </marquee>
  92.                     </span>
  93.                 </div>
  94.             </div>
  95.         </div>
  96.     </div>
  97.     </body>
  98.     <script src="<?=base_url()?>assets/js/jquery-2.1.3.min.js"></script>
  99.     <script src="<?=base_url()?>assets/bootstrap-4.3.1/js/bootstrap.min.js"></script>
  100.        
  101.     </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement