API tools faq
paste
Advertisement
Dr_U

News_Bootstrap

Dr_U
Dec 20th, 2021
1,098
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 14.00 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>NEWS PORTAL</title>
  8.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  9.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  10.     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  11.     <link rel="stylesheet" href="style.css">
  12.     <!------ Include the above in your HEAD tag ---------->
  13.    
  14.     <!--Container-->
  15.     <div class="container">
  16.         <div class="row mb-2">
  17.             <div class="col-12 text-center pt-3"
  18.            style="
  19.                text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  20.                background-color: rgba(0, 0, 0, 0.747);
  21.                font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  22.                color: rgb(78, 245, 0);">
  23.                 <h1>
  24.                 Berita Binatang Tribun Pekanbaru
  25.                 </h1>
  26.                 <p>Berita Khusus Pecinta Binatang dan yang Sayang</p>
  27.             </div>
  28.         </div>
  29.        
  30.         <!--Start code-->
  31.         <div class="row">
  32.             <div class="col-12 pb-5">
  33.                 <div id="featured" class="carousel slide carousel" data-ride="carousel">
  34.                     <!--dots navigate-->
  35.                     <ol class="carousel-indicators top-indicator">
  36.                         <li data-target="#featured" data-slide-to="0" class="active"></li>
  37.                         <li data-target="#featured" data-slide-to="1"></li>
  38.                         <li data-target="#featured" data-slide-to="2"></li>
  39.                         <li data-target="#featured" data-slide-to="3"></li>
  40.                     </ol>
  41.                    
  42.                     <!--carousel inner-->
  43.                     <div class="carousel-inner">
  44.                         <div class="carousel-item active">
  45.                             <div class="row">
  46.                                 <!--Start slider news-->
  47.                                 <div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1">
  48.                                     <div class="card border-0 rounded-0 text-light overflow zoom">
  49.                                         <div class="position-relative">
  50.                                             <!--thumbnail img-->
  51.                                             <div class="ratio_left-cover-1 image-wrapper">
  52.                                                 <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  53.                                                     <img
  54.                                                         src="https://images.unsplash.com/photo-1564349683136-77e08dba1ef7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80"
  55.                                                         alt="Bootstrap news"
  56.                                                         height="470">
  57.                                                 </a>
  58.                                             </div>
  59.                                             <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
  60.                                                 <!--title-->
  61.                                                 <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  62.                                                     <h2 class="h3 post-title text-white my-1">Viral aksi gemas panda kabur dari kandangnya di kebun binatang China.</h2>
  63.                                                 </a>
  64.                                                 <!-- meta title -->
  65.                                                 <div class="news-meta">
  66.                                                     <span class="news-author">by detikTravel</span>
  67.                                                     <span class="news-date">Senin, 20 Des 2021 15:27 WIB</span>
  68.                                                 </div>
  69.                                             </div>
  70.                                         </div>
  71.                                     </div>
  72.                                 </div>
  73.                                 <!--End slider news-->
  74.                                
  75.                                 <!--Start box news-->
  76.                                 <div class="col-12 col-md-6 pt-2 pl-md-1 mb-3 mb-lg-4">
  77.                                     <div class="row">
  78.                                         <!--news box-->
  79.                                         <div class="col-6 pb-1 pt-0 pr-1">
  80.                                             <div class="card border-0 rounded-0 text-white overflow zoom">
  81.                                                 <div class="position-relative">
  82.                                                     <!--thumbnail img-->
  83.                                                     <div class="ratio_right-cover-2 image-wrapper">
  84.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  85.                                                             <img
  86.                                                                 src="https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80"
  87.                                                                 alt="Bootstrap blog theme"
  88.                                                                 height="235">
  89.                                                         </a>
  90.                                                     </div>
  91.                                                     <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
  92.                                                         <!-- category -->
  93.                                                         <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Laut</a>
  94.                
  95.                                                         <!--title-->
  96.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  97.                                                             <h2 class="h5 text-white my-1">Mari ke Pulau Onen, Rumah Penyu di Kepulauan Kei</h2>
  98.                                                         </a>
  99.                                                     </div>
  100.                                                 </div>
  101.                                             </div>
  102.                                         </div>
  103.                                        
  104.                                         <!--news box-->
  105.                                         <div class="col-6 pb-1 pl-1 pt-0">
  106.                                             <div class="card border-0 rounded-0 text-white overflow zoom">
  107.                                                 <div class="position-relative">
  108.                                                     <!--thumbnail img-->
  109.                                                     <div class="ratio_right-cover-2 image-wrapper">
  110.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  111.                                                             <img
  112.                                                                 src="https://images.unsplash.com/photo-1527161153332-99adcc6f2966?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80"
  113.                                                                 alt="Bootstrap 4 blog template"
  114.                                                                 height="235">
  115.                                                         </a>
  116.                                                     </div>
  117.                                                     <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
  118.                                                         <!-- category -->
  119.                                                         <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Kebun Binatang</a>
  120.                                                         <!--title-->
  121.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  122.                                                             <h2 class="h5 text-white my-1">Polisi Datangi Kebun Binatang Surabaya, Terkait Kematian Dumbo?</h2>
  123.                                                         </a>
  124.                                                     </div>
  125.                                                 </div>
  126.                                             </div>
  127.                                         </div>
  128.                                        
  129.                                         <!--news box-->
  130.                                         <div class="col-6 pb-1 pr-1 pt-1">
  131.                                             <div class="card border-0 rounded-0 text-white overflow zoom">
  132.                                                 <div class="position-relative">
  133.                                                     <!--thumbnail img-->
  134.                                                     <div class="ratio_right-cover-2 image-wrapper">
  135.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  136.                                                             <img
  137.                                                                 src="https://images.unsplash.com/photo-1470093851219-69951fcbb533?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
  138.                                                                 alt="Bootstrap 4 news theme"
  139.                                                                 height="200">>
  140.                                                         </a>
  141.                                                     </div>
  142.                                                     <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
  143.                                                         <!-- category -->
  144.                                                         <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Langka</a>
  145.                                                         <!--title-->
  146.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  147.                                                             <h2 class="h5 text-white my-1">Di Balik Foto Laut Ini, Ada Penampakan yang Sangat Langka, Bisa Tebak Apa?</h2>
  148.                                                         </a>
  149.                                                     </div>
  150.                                                 </div>
  151.                                             </div>
  152.                                         </div>
  153.                                        
  154.                                         <!--news box-->
  155.                                         <div class="col-6 pb-1 pl-1 pt-1">
  156.                                             <div class="card border-0 rounded-0 text-white overflow zoom">
  157.                                                 <div class="position-relative">
  158.                                                     <!--thumbnail img-->
  159.                                                     <div class="ratio_right-cover-2 image-wrapper">
  160.                                                         <a href="https://travel.detik.com/travel-news/d-5790145/ini-tupai-terbang-endemik-jepang-yang-super-imut?_ga=2.246101444.1755741880.1639997594-489616957.1636468935">
  161.                                                             <img
  162.                                                                 src="https://images.unsplash.com/photo-1507666405895-422eee7d517f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
  163.                                                                 alt="Bootstrap 4 news template"
  164.                                                                 height="225">
  165.                                                         </a>
  166.                                                     </div>
  167.                                                     <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
  168.                                                         <!-- category -->
  169.                                                         <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Pengerat</a>
  170.                                                         <!--title-->
  171.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  172.                                                             <h2 class="h5 text-white my-1">Ini Tupai Terbang Endemik Jepang yang Super Imut</h2>
  173.                                                         </a>
  174.                                                     </div>
  175.                                                 </div>
  176.                                             </div>
  177.                                         </div>
  178.                                         <!--end news box-->
  179.                                     </div>
  180.                                 </div>
  181.                                 <!--End box news-->
  182.                             </div>
  183.                         </div>
  184.                    
  185.                  
  186.                 </div>
  187.             </div>
  188.         </div>
  189.         <!--end code-->
  190.    
  191.     </div>
  192.   </body>
  193. </html>
  194.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!