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

Tugas 10 Pemrograman Web C: Latihan Membuat PDF

Image
index.php: 1: <?php include("koneksi.php"); ?> 2: <!DOCTYPE html> 3: <html> 4: <head> 5: <title>List Mahasiswa Institut Teknologi Sumeru</title> 6: <link rel="stylesheet" href="styles.css"> 7: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> 8: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins"> 9: </head> 10: <body> 11: <div class="container"> 12: <header> 13: <h2>INSTITUT TEKNOLOGI SUMERU</h2> 14: <h3>DAFTAR MAHASISWA DEPARTEMEN SISTEM GACHA</h3> 15: </header> 16: <br> 17: <table border="1" style="margin-left:auto;margin-right:auto;"> 18: <thead> 19: <tr> 20: <th>NIM</th> 2
Read more

Tugas 8 Pemrograman Web C: Latihan MySQL

Image
config.php: 1: <?php 2: $server = "sql305.byethost24.com"; 3: $user = "b24_32977667"; 4: $password = "000webhostampas"; 5: $nama_database = "b24_32977667_pendaftaran_siswa"; 6: $db = mysqli_connect($server, $user, $password, $nama_database); 7: if( !$db ){ 8: die("Gagal terhubung dengan database: " . mysqli_connect_error()); 9: } 10: ?> database.sql: 1: CREATE DATABASE `pendaftaran_siswa`; 2: CREATE TABLE `pendaftaran_siswa`.`calon_siswa` ( 3: `id` INT NOT NULL AUTO_INCREMENT , 4: `nama` VARCHAR(64) NOT NULL , 5: `alamat` VARCHAR(255) NOT NULL , 6: `jenis_kelamin` VARCHAR(16) NOT NULL , 7: `agama` VARCHAR(16) NOT NULL , 8: `sekolah_asal` VARCHAR(64) NOT NULL , 9: PRIMARY KEY (`id`) 10: ) ENGINE = InnoDB; 11: INSERT INTO `calon_siswa` (`id`, `nama`, `alamat`, `jenis_kelamin`, `agama`, `sekolah_asal`) VALUES (NULL, 'Lia', 'Jl. Mangga No
Read more

Tugas 6 Pemrograman Web C: Latihan JQuery

Image
Index.html: 1: <!doctype html> 2: <html lang="en"> 3: <head> 4: <!-- Required meta tags --> 5: <meta charset="utf-8"> 6: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7: <!-- Bootstrap CSS --> 8: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> 9: <title>Contoh Program Jquery Sederhana Part 1</title> 10: </head> 11: <body> 12: <br> 13: <br> 14: <br> 15: <!-- Buat h1 untuk menampilkan nilai ketika tombol tekan di klik--> 16: <center><h1></h1></center> 17: <!-- Buat tombol--> 18: <center><b
Read more