Syntax

This document contains the code for a website template made with Bootstrap. It includes the basic structure of HTML tags and Bootstrap classes for headers, navigation, sidebar, content area, and footer sections. The content area features three sample news articles with images and links to full article pages. Styling and images are linked from external CSS and image files.

Uploaded by

Enggie-chanII

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

28 views

Syntax

Uploaded by

Enggie-chanII

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 2

1. <!

DOCTYPE html>
2. <html>
3. <head>
4. <title>Uji coba</title>
5. <link rel="stylesheet" href="assets/css/bootstrap.min.css">
6. </head>
7. <body>
8. <div class="container">
9. <div class="row">
10. <div class="col-md-12">
11. 
12. <img class="img-fluid mx-auto d-block" src="assets/images/logo.png" style="height: 200px;">
13. 
14. <nav class="navbar navbar-light bg-light justify-content-between"> <a class="navbar-brand">Navbar</a>
15. <form class="form-inline">
16. <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
17. <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
18. </form>
19. </nav>
20. </div>
21. </div>
22. </div>
<div class="container mt-3">
23. <div class="row">
24. 
25. <div class="col-md-4">
26. <div class="card mb-3">
27. <div class="card-header">
28. <h4 class="text-mono text-center">codelatte.org</h4>
29. </div>
30. <div class="card-body">
31. <img src="assets/images/logosidebar.png" style="height: 110px;" class="mx-auto d-block">
32. <br />
33. <blockquote class="card-blockquote">
34. <p class="text-center">Membuat Template Website Menggunakan Bootstrap</p>
35. </blockquote>
36. </div>
37. </div>
38. <div class="card mb-3">
39. <div class="card-header">
40. <h4 class="text-mono text-center">codelatte.org</h4>
41. </div>
42. <div class="card-body">
43. <img src="assets/images/logosidebar.png" style="height: 110px;" class="mx-auto d-block">
44. <br />
45. <blockquote class="card-blockquote">
46. <p class="text-center">Membuat Template Website Menggunakan Bootstrap</p>
47. </blockquote>
48. </div>
49. </div>
50. </div>
51. 
52. <div class="col-md-8 mb-3">
53. <div class="card">
54. <div class="card-header">
55. <h4 class="text-mono text-center">News</h4>
56. </div>
57. <div class="card-body">
58. <img style="float:left;" src="https://place-hold.it/130x130" class="img mr-3" />
59. <h5 class="card-title">News Article 1</h5>
60. <small><p>19/07/2018</p></small>
61. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. <a href="article.html">Read More</a>
62. </p>
63. <img style="float:left;" src="https://place-hold.it/130x130" class="img mr-3" />
64. <h5 class="card-title">News Article 2</h5>
65. <small><p>19/07/2018</p></small>
66. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. <a href="article.html">Read More</a>
67. </p>
68. <img style="float:left;" src="https://place-hold.it/130x130" class="img mr-3" />
69. <h5 class="card-title">News Article 3</h5>
70. <small><p>19/07/2018</p></small>
71. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. <a href="article.html">Read More</a>
72. </p>
73. </div>
74. </div>
75. </div>
76. </div>
77. 
78. <div class="footer-bottom">
79. <div class="container">
80. <div class="row">
81. <div class="col-md-12">
82. <p class="text-md-center">© Copyright 2018 - Made <a href="https://codelatte.org/">Codelatte
Indonesia</a>. All rights reserved.</p>
83. </div>
84. </div>
85. </div>
86. </div>
87. </div>
88. </body>
89. </html>