Tugas 5 Pemrograman Web C: Latihan Bootstrap

 index.html

1:  <!DOCTYPE html>   
2:  <html>   
3:  <head>   
4:     <title>Latihan Bootstrap</title>  
5:     <meta charset="utf-8">  
6:     <meta name="viewport" content="width=device-width, initial-scale=1">  
7:     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">  
8:    <script src="bootstrap/js/bootstrap.min.js"></script>  
9:  </head>   
10:  <body>   
11:     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">  
12:       <a class="navbar-brand" href="#">  
13:          <img src="/image/coding-programming-language-svgrepo-com.svg" width="50" alt="">  
14:       </a>  
15:       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">  
16:          <span class="navbar-toggler-icon"></span>  
17:        </button>  
18:       <div class="collapse navbar-collapse" id="navbarSupportedContent">  
19:        <ul class="navbar-nav mr-auto">  
20:         <li class="nav-item active">  
21:          <a class="nav-link" href="#">Pemrograman</a>  
22:         </li>  
23:         <li class="nav-item">  
24:          <a class="nav-link" href="#">Database</a>  
25:         </li>  
26:         <li class="nav-item">  
27:          <a class="nav-link" href="#">Framework</a>  
28:         </li>  
29:         <li class="nav-item">  
30:          <a class="nav-link" href="#">Lainnya</a>  
31:         </li>  
32:        </ul>  
33:       </div>  
34:     </nav>  
35:     <div class="jumbotron text-center">   
36:       <div class="col-md-12">   
37:          <h1>Belajar Programming itu Mudah</h1>   
38:          <p>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p>  
39:       </div>   
40:     </div>  
41:     <div class="container">  
42:       <div class="row">  
43:         <div class="col-lg-3 col-md-6">  
44:           <div class="thumbnail">  
45:             <img src="image/HTML_&_CSS.png" width="100%" alt="Cinque Terre">  
46:             <div class="caption">  
47:               <h3>Belajar HTML & CSS</h3>  
48:               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
49:                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
50:                 quis nostrud exercitation ullamco laboris</p>  
51:             </div>  
52:           </div>  
53:         </div>  
54:         <div class="col-lg-3 col-md-6">  
55:           <div class="thumbnail">  
56:             <img src="image/Programming.png" width="100%" alt="Cinque Terre">  
57:             <div class="caption">  
58:               <h3>Web Programming</h3>  
59:               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
60:                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
61:                 quis nostrud exercitation ullamco laboris</p>  
62:             </div>  
63:           </div>  
64:         </div>  
65:         <div class="col-lg-3 col-md-6">  
66:           <div class="thumbnail">  
67:             <img src="image/Python.png" width="100%" alt="Cinque Terre">  
68:             <div class="caption">  
69:               <h3>Belajar Python</h3>  
70:               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
71:                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
72:                 quis nostrud exercitation ullamco laboris</p>  
73:             </div>  
74:           </div>  
75:         </div>  
76:         <div class="col-lg-3 col-md-6">  
77:           <div class="thumbnail">  
78:             <img src="image/Desain_UI_&_UX.png" width="100%" alt="Cinque Terre">  
79:             <div class="caption">  
80:               <h3>Desain UI & UX</h3>  
81:               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
82:                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
83:                 quis nostrud exercitation ullamco laboris</p>  
84:             </div>  
85:           </div>  
86:         </div>  
87:       </div>  
88:     </div>  
89:  </body>   
90:  </html>


Link Repository: https://github.com/brianakbar/Tugas5_PWebC_LatihanBootstrap

Link Website: https://brianakbar.github.io/Tugas5_PWebC_LatihanBootstrap/


Screenshot:



Comments

Post a Comment

Popular posts from this blog

ETS Pemrograman Web C: ULearning

Image
 Anggota Kelompok : - Elthan Ramanda Berlindo / 5025201092 - Brian Akbar Wicaksana / 5025201207 - Muhammad Andi Akbar Ramadhan / 5025201264 Nama Aplikasi: ULearning Problem statement: Pada era 4.0 saat ini tentunya dibutuhkan banyak kemampuan yang dapat digunakan dalam persaingan untuk mampu beradaptasi dengan era ini. Tidak dapat dipungkiri lagi jika satu skill saja tidak cukup untuk bersaing dalam ketatnya persaingan dalam era ini. Untuk beberapa orang tentunya fokus di satu skill dan menguasainya sudah cukup, akan tetapi bagaimana yang lainnya yang tidak mampu untuk fokus dan mengusai skill di suatu bidang tertentu ? tentunya mereka akan kalah dalam persaingan ini apabila tidak segera mengasah skill mereka. Namun kebanyakan jasa penyedia pembelajaran tersebut berada atau terfokus pada suatu negara maupun lokasi tertentu. Indonesia tentunya akan ikut bersaing dalam persaingan global ini. Namun kebanyakan masyarakatnya masih kurang dalam pendidikan untuk skill - skill ini dan ekon...
Read more

Tugas 2 Pemrograman Web C: Membuat CSS

Image
HTML : 1: <html> 2: <head> 3: <title>Belajar Membuat Website Dengan Mudah</title> 4: <link rel="stylesheet" href="custom.css"/> 5: </head> 6: <body> 7: <div class="header"> 8: <div class="jarak"> 9: <h2>Belajar Membuat Website Dengan Mudah</h2> 10: </div> 11: </div> 12: <div class="menu"> 13: <ul> 14: <li><a href="#">Home</a></li> 15: <li><a href="#">About</a></li> 16: <li><a href="#">Blog</a></li> 17: <li><a href="#">Contact</a></li> 18: </ul> 19: </div> 20: <div class="content"> 21: <div class="jarak"> 22...
Read more