API tools faq
paste
Advertisement
mnaufaldillah

news tugas boostrap

mnaufaldillah
Oct 16th, 2021
1,031
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 21.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  5.         <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  6.         <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  7.         <link rel="stylesheet" href="custom_news.css"/>
  8.         <title>Naufaldillah</title>
  9.     </head>
  10.     <body>
  11.         <div id="news">
  12.             <div class="container">
  13.                 <nav class="navbar navbar-expand-md navbar-light bg-light">
  14.                     <a class="navbar-brand" href="#">OrangeCat News</a>
  15.                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
  16.                         <span class="navbar-toggler-icon"></span>
  17.                     </button>
  18.                     <div class="collapse navbar-collapse" id="navbarNav">
  19.                         <ul class="navbar-nav mr-auto">
  20.                             <li class="nav-item active">
  21.                                 <a class="nav-link" href="#">Home</a>
  22.                             </li>
  23.                             <li class="nav-item">
  24.                                 <a class="nav-link" href="contact.html">Contact</a>
  25.                             </li>
  26.                             <li class="nav-item">
  27.                                 <a class="nav-link" href="login.html">Login</a>
  28.                             </li>
  29.                         </ul>
  30.                     </div>
  31.                 </nav>
  32.                
  33.                 <!--Start code-->
  34.                 <div class="row">
  35.                     <div class="col-12 pb-5">
  36.                         <!--SECTION START-->
  37.                         <section class="row">
  38.                             <!--Start slider news-->
  39.                             <div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1">
  40.                                 <div id="featured" class="carousel slide carousel" data-ride="carousel">
  41.                                     <!--dots navigate-->
  42.                                     <ol class="carousel-indicators top-indicator">
  43.                                         <li data-target="#featured" data-slide-to="0" class="active"></li>
  44.                                         <li data-target="#featured" data-slide-to="1"></li>
  45.                                         <li data-target="#featured" data-slide-to="2"></li>
  46.                                         <li data-target="#featured" data-slide-to="3"></li>
  47.                                     </ol>
  48.                                    
  49.                                     <!--carousel inner-->
  50.                                     <div class="carousel-inner">
  51.                                         <!--Item slider-->
  52.                                         <div class="carousel-item active">
  53.                                             <div class="card border-0 rounded-0 text-light overflow zoom">
  54.                                                 <div class="position-relative">
  55.                                                     <!--thumbnail img-->
  56.                                                     <div class="ratio_left-cover-1 image-wrapper">
  57.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  58.                                                             <img class="img-fluid w-100"
  59.                                                                 src="https://bootstrap.news/source/img1.jpg"
  60.                                                                 alt="Bootstrap news template">
  61.                                                         </a>
  62.                                                     </div>
  63.                                                     <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
  64.                                                         <!--title-->
  65.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  66.                                                             <h2 class="h3 post-title text-white my-1">Bootstrap 4 template news portal magazine perfect for news site</h2>
  67.                                                         </a>
  68.                                                         <!-- meta title -->
  69.                                                         <div class="news-meta">
  70.                                                             <span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span>
  71.                                                             <span class="news-date">Oct 22, 2019</span>
  72.                                                         </div>
  73.                                                     </div>
  74.                                                 </div>
  75.                                             </div>
  76.                                         </div>
  77.                                        
  78.                                         <!--Item slider-->
  79.                                         <div class="carousel-item">
  80.                                             <div class="card border-0 rounded-0 text-light overflow zoom">
  81.                                                 <div class="position-relative">
  82.                                                     <!--thumbnail img-->
  83.                                                     <div class="ratio_left-cover-1 image-wrapper">
  84.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  85.                                                             <img class="img-fluid w-100"
  86.                                                                 src="https://bootstrap.news/source/img2.jpg"
  87.                                                                 alt="Bootstrap news theme">
  88.                                                         </a>
  89.                                                     </div>
  90.                                                     <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
  91.                                                         <!--title-->
  92.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  93.                                                             <h2 class="h3 post-title text-white my-1">Walmart shares up 10% on online sales lift</h2>
  94.                                                         </a>
  95.                                                         <!-- meta title -->
  96.                                                         <div class="news-meta">
  97.                                                             <span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span>
  98.                                                             <span class="news-date">Oct 22, 2019</span>
  99.                                                         </div>
  100.                                                     </div>
  101.                                                 </div>
  102.                                             </div>
  103.                                         </div>
  104.                                        
  105.                                         <!--Item slider-->
  106.                                         <div class="carousel-item">
  107.                                             <div class="card border-0 rounded-0 text-light overflow zoom">
  108.                                                 <div class="position-relative">
  109.                                                     <!--thumbnail img-->
  110.                                                     <div class="ratio_left-cover-1 image-wrapper">
  111.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  112.                                                             <img class="img-fluid w-100"
  113.                                                                 src="https://bootstrap.news/source/img3.jpg"
  114.                                                                 alt="Bootstrap blog template">
  115.                                                         </a>
  116.                                                     </div>
  117.                                                     <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
  118.                                                         <!--title-->
  119.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  120.                                                             <h2 class="h3 post-title text-white my-1">Bank chief warns on Brexit staff moves to other company</h2>
  121.                                                         </a>
  122.                                                         <!-- meta title -->
  123.                                                         <div class="news-meta">
  124.                                                             <span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span>
  125.                                                             <span class="news-date">Oct 22, 2019</span>
  126.                                                         </div>
  127.                                                     </div>
  128.                                                 </div>
  129.                                             </div>
  130.                                         </div>
  131.                                        
  132.                                         <!--Item slider-->
  133.                                         <div class="carousel-item">
  134.                                             <div class="card border-0 rounded-0 text-light overflow zoom">
  135.                                                 <div class="position-relative">
  136.                                                     <!--thumbnail img-->
  137.                                                     <div class="ratio_left-cover-1 image-wrapper">
  138.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  139.                                                             <img class="img-fluid w-100"
  140.                                                                 src="https://bootstrap.news/source/img4.jpg"
  141.                                                                 alt="Bootstrap portal template">
  142.                                                         </a>
  143.                                                     </div>
  144.                                                     <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
  145.                                                         <!--title-->
  146.                                                         <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  147.                                                             <h2 class="h3 post-title text-white my-1">The world's first floating farm making waves in Rotterdam</h2>
  148.                                                         </a>
  149.                                                         <!-- meta title -->
  150.                                                         <div class="news-meta">
  151.                                                             <span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span>
  152.                                                             <span class="news-date">Oct 22, 2019</span>
  153.                                                         </div>
  154.                                                     </div>
  155.                                                 </div>
  156.                                             </div>
  157.                                         </div>
  158.                                         <!--end item slider-->
  159.                                     </div>
  160.                                     <!--end carousel inner-->
  161.                                 </div>
  162.                                
  163.                                 <!--navigation-->
  164.                                 <a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
  165.                                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  166.                                     <span class="sr-only">Previous</span>
  167.                                 </a>
  168.                                 <a class="carousel-control-next" href="#featured" role="button" data-slide="next">
  169.                                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  170.                                     <span class="sr-only">Next</span>
  171.                                 </a>
  172.                             </div>
  173.                             <!--End slider news-->
  174.                            
  175.                             <!--Start box news-->
  176.                             <div class="col-12 col-md-6 pt-2 pl-md-1 mb-3 mb-lg-4">
  177.                                 <div class="row">
  178.                                     <!--news box-->
  179.                                     <div class="col-6 pb-1 pt-0 pr-1">
  180.                                         <div class="card border-0 rounded-0 text-white overflow zoom">
  181.                                             <div class="position-relative">
  182.                                                 <!--thumbnail img-->
  183.                                                 <div class="ratio_right-cover-2 image-wrapper">
  184.                                                     <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  185.                                                         <img class="img-fluid"
  186.                                                             src="https://bootstrap.news/source/img5.jpg"
  187.                                                             alt="simple blog template bootstrap">
  188.                                                     </a>
  189.                                                 </div>
  190.                                                 <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
  191.                                                     <!-- category -->
  192.                                                     <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Lifestyle</a>
  193.            
  194.                                                     <!--title-->
  195.                                                     <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  196.                                                         <h2 class="h5 text-white my-1">Should you see the Fantastic Beasts sequel?</h2>
  197.                                                     </a>
  198.                                                 </div>
  199.                                             </div>
  200.                                         </div>
  201.                                     </div>
  202.                                    
  203.                                     <!--news box-->
  204.                                     <div class="col-6 pb-1 pl-1 pt-0">
  205.                                         <div class="card border-0 rounded-0 text-white overflow zoom">
  206.                                             <div class="position-relative">
  207.                                                 <!--thumbnail img-->
  208.                                                 <div class="ratio_right-cover-2 image-wrapper">
  209.                                                     <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  210.                                                         <img class="img-fluid"
  211.                                                             src="https://bootstrap.news/source/img6.jpg"
  212.                                                             alt="bootstrap templates for blog">
  213.                                                     </a>
  214.                                                 </div>
  215.                                                 <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
  216.                                                     <!-- category -->
  217.                                                     <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Motocross</a>
  218.                                                     <!--title-->
  219.                                                     <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  220.                                                         <h2 class="h5 text-white my-1">Three myths about Florida elections recount</h2>
  221.                                                     </a>
  222.                                                 </div>
  223.                                             </div>
  224.                                         </div>
  225.                                     </div>
  226.                                    
  227.                                     <!--news box-->
  228.                                     <div class="col-6 pb-1 pr-1 pt-1">
  229.                                         <div class="card border-0 rounded-0 text-white overflow zoom">
  230.                                             <div class="position-relative">
  231.                                                 <!--thumbnail img-->
  232.                                                 <div class="ratio_right-cover-2 image-wrapper">
  233.                                                     <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  234.                                                         <img class="img-fluid"
  235.                                                             src="https://bootstrap.news/source/img7.jpg"
  236.                                                             alt="bootstrap blog wordpress theme">
  237.                                                     </a>
  238.                                                 </div>
  239.                                                 <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
  240.                                                     <!-- category -->
  241.                                                     <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Fitness</a>
  242.                                                     <!--title-->
  243.                                                     <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  244.                                                         <h2 class="h5 text-white my-1">Finding Empowerment in Two Wheels and a Helmet</h2>
  245.                                                     </a>
  246.                                                 </div>
  247.                                             </div>
  248.                                         </div>
  249.                                     </div>
  250.                                    
  251.                                     <!--news box-->
  252.                                     <div class="col-6 pb-1 pl-1 pt-1">
  253.                                         <div class="card border-0 rounded-0 text-white overflow zoom">
  254.                                             <div class="position-relative">
  255.                                                 <!--thumbnail img-->
  256.                                                 <div class="ratio_right-cover-2 image-wrapper">
  257.                                                     <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  258.                                                         <img class="img-fluid"
  259.                                                             src="https://bootstrap.news/source/img8.jpg"
  260.                                                             alt="blog website templates bootstrap">
  261.                                                     </a>
  262.                                                 </div>
  263.                                                 <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
  264.                                                     <!-- category -->
  265.                                                     <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Adventure</a>
  266.                                                     <!--title-->
  267.                                                     <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">
  268.                                                         <h2 class="h5 text-white my-1">Ditch receipts and four other tips to be a shopper</h2>
  269.                                                     </a>
  270.                                                 </div>
  271.                                             </div>
  272.                                         </div>
  273.                                     </div>
  274.                                     <!--end news box-->
  275.                                 </div>
  276.                             </div>
  277.                             <!--End box news-->
  278.                         </section>
  279.                         <!--END SECTION-->
  280.                     </div>
  281.                 </div>
  282.                 <!--end code-->
  283.                
  284.                 <div class="row mb-4">
  285.                     <div class="col-12 text-center">
  286.                         <p>Naufaldillah</p>
  287.                     </div>
  288.                 </div>
  289.             </div>
  290.         </div>
  291.     </body>
  292. </html>
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!