Studi Kasus Web Sekolah
Studi Kasus Web Sekolah
html
Copy dan Pastekan kode dibawah ini kedalam file yang telah dibuat.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="top">
<div class='bghitam'></div>
<div class="menu">
<ul>
<li><a href="">BERANDA</a></li>
<li><a href="">VISI & MISI</a></li>
<li><a href="">GALLERY</a></li>
<li><a href="">FASILITAS</a></li>
</ul>
</div>
<div class="text">
<span><a href="https://www.youtube.com/channel/UCTsSDGnhqlkqX2z2xlKg6Wg">READ
MORE</a></span>
</div>
</div>
<div id="jurusan">
<h2>KOMPETENSI KEAHLIAN</h2>
<div class='grid'>
<div class='keahlian'>
<h3>Tata Busana</h3>
<p>Program studi Tata Busana sering juga disebut dengan nama Fashion Design. Pada Program studi ini
di pelajari teknik mendesain, belajar membuat pola, menjahit, dan seluk beluk produksi busana atau
fashion.</p>
</div>
<div class='keahlian'>
<h3>Tata Boga</h3>
<p>Program studi Tata Boga mempelajari teknik penyajian makanan dengan memperhatikan kualitas,
rasa, estetika, dan kebutuhan gizi. Akan mempelajari mengolah berbagai hidangan dari daerah dan
negara.</p>
</div>
<div class='keahlian'>
<h3>Otomasi Industri</h3>
<p>Teknik otomasi insustri adalah suatu teknik yang menerapkan sistem pengajaran yang mengarah ke
bidang perakitan sistem-sistem di dunia industri yang berbasis otomasis/outomatic.</p>
</div>
<div class='keahlian'>
<h3>Teknik Listrik</h3>
<p>Teknik Tenaga Listrik adalah bidang ilmu yang mempeljari teknik-teknik yang berhubungan dengan
tenaga listrik dan permasalahannya sehingga tenaga listrik dapat disalurkan dengan baik.</p>
</div>
<div class='keahlian'>
<p>Teknik Mesin adalah ilmu teknik mengenai aplikasi dari prinsip fisika untuk analisis, desain,
manufuktur, dan pemeliharaan sebuah sistem mekanik.</p>
</div>
<div class='keahlian'>
<p>Program Rekayasa Perangkat Lunak adalah satu bidang profesi yang mendalami cara-cara
pengembangan perangkat lunak termasuk pembuatan, pemeliharaan, menajemen organisasi
pengembangan perangkat lunak dan menajemen kualitas.</p>
</div>
</div>
</div>
<div class="depan">
<img src="img/depan.jpg">
</div>
<div class="organisasi">
<h1>STRUKTUR ORGANISASI</h1>
<div class="grid2">
<div class="struktur">
<img src="img/logo_smk.png">
<p><b>KEPALA SEKOLAH</b></p>
</div>
<div class="struktur">
<img src="img/logo_smk.png">
<h2>Nama Waka</h2>
<p><b>WAKA KURIKULUM</b></p>
</div>
<div class="struktur">
<img src="img/logo_smk.png">
<h2>Nama Waka</h2>
<p><b>WAKA KESISWAAN</b></p>
</div>
<div class="struktur">
<img src="img/logo_smk.png">
<h2>Nama Waka</h2>
<p><b>WAKA HUMAS</b></p>
</div>
</div>
<div class="struktur">
<img src="img/logo_smk.png">
<h2>Nama Waka</h2>
</div>
</div>
<div class="subscribe">
<a href='#'>SUBSCRIBE</a>
</div>
<div class="berita">
<h1>BERITA TERBARU</h1>
<div class="grid4">
<div class="grid3">
<img src="img/berita1.jpg">
<p>BERITA TERBARU</p>
<h2>Siap-siap! SPP SMA dan SMK di Jatim Bakal Naik, Segini Biaya yang Mungkin Harus Dibayar
Ortu</h2>
<p>SURYAMALANG.COM, SURABAYA – Para wali murid jenjang SMA dan SMK harus siap mengeluarkan
anggaran lebih besar untuk biaya pendidikan anak-anaknya. Sebab, Dinas Pendidikan (Dindik) Jawa
Timur (Jatim) berencana menaikkan besaran SPP mulai tahun ajaran baru pada Juli 2018. Kepala Dindik
Jatim, Saiful Rachman</p>
</div>
<div class="grid3">
<img src="img/berita2.jpg">
<p>BERITA TERBARU</p>
<h2>SPP SMK Negeri dan Swasta di Jawa Timur (Contoh Postingan)</h2>
<p>Surabaya – Kebijakan SPP gratis di Jawa Timur tidak hanya untuk SMA dan SMK Negeri. Kebijakan
yang akan dimulai bulan Juli ini juga berlaku untuk sekolah swasta. Namun, ada regulasi yang berbeda.
Kepala Dinas Pendidikan Jatim Saiful Rachman mengatakan kebijakan</p>
</div>
<div class="grid3">
<img src="img/berita3.jpg">
<p>BERITA TERBARU</p>
<p>Menjelang tahun ajaran baru, berbagai kesibukan mulai tampak terjadi. Kesibukan karena
mempersiapkan berbagai kebutuhan untuk memasuki sekolah baru, ujian naik kelas, ujian nasional
bahkan persiapan tes masuk perguruan tinggi idaman. Hari-hari ini pihak sekolah terutama</p>
</div>
</div>
</div>
<div class="kontak">
<div class="des">
<h1>Pusat Informasi</h1>
<h2>Kontak kami</h2>
</div>
</div>
</body>
</html>
Copy dan Pastekan kode dibawah ini kedalam file yang telah dibuat.
body {font-family: Arial, Helvetica, sans-serif; margin: 0; font-weight: lighter;}
.top {background-image: url(img/bg.jpg); background-size: cover; height: 90vh; opacity: 90%; z-index: -
2;}
.bghitam {background: black; height: 90vh; position: absolute; top:0; left: 0; right: 0; opacity: 50%; z-
index: -3;}
.menu ul{list-style: none;display: inline-flex; float: right; padding-right: 80px; padding-top: 20px;}
.text { text-align: right; padding-right: 90px;padding-top: 230px; color: white; font-weight: lighter;}
.text span a{text-decoration: none; color: white; border: 1px solid transparent; padding-top: 20px;}
.grid {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 80%; margin: auto; }
.subscribe {background: black; height: 100px; color: white; font-weight: lighter; text-align: center;
opacity: 90%; padding-top: 20px; padding-bottom: 40px;}
.subscribe a{ border: 1px solid transparent; background: red; color: white; text-decoration: none;
padding: 10px; border-radius: 5px; }
.grid4 {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 90%; margin: auto;}
.grid3 {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.19); padding: 20px;}
.footer {background: black; color: white; opacity: 90%; padding: 20px;padding-left: 120px;}