Skip to content

Commit

Permalink
SESI 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@yudha556
yudha556 committed Apr 24, 2024
0 parents commit 0baf0bc
Show file tree
Hide file tree
Showing 9 changed files with 367 additions and 0 deletions.
Binary file added asset foto/DSC04075.JPG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added asset foto/IMG_6176.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added asset foto/Screenshot 2024-04-23 212516.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added asset foto/Screenshot 2024-04-23 212528.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added asset foto/Screenshot 2024-04-23 212539.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added asset foto/Screenshot 2024-04-23 220547.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file added git
Empty file.
95 changes: 95 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SMK MA'ARIF NU 01 KARANGKOBAR</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
</head>
<style>

/* Styling untuk mobile */
@media (max-width: 576px) {
.container h2 {
font-size: 10px;
}
}

</style>

<body>
<div class="pertama">
<h1>SMK MA'ARIF<br><span> NU 01 KARANGKOBAR</span></h1>
<div class="aset">
<img src="./asset foto//Screenshot 2024-04-23 212516.png" class="bulat">
<img src="./asset foto/Screenshot 2024-04-23 212528.png" class="bintang">
<img src="./asset foto/Screenshot 2024-04-23 212539.png" class="segitiga">
</div>
</div>
<div class="awal">
<h1>Come Toghether, Let's celebrate unforgettable achievements,<br><span>Memories and Friendship</span></h1>
</div>
<div class="container">
<img src="./asset foto/Screenshot 2024-04-23 220547.png" class="kubus">
<div class="parent">
<h2><span>Inspiratif, bersemangat, dan siap menaklukkan dunia!</span><br> Alumni tahun 2023 adalah kelompok
yang
penuh potensi, <br>siap untuk menorehkan jejak mereka dalam sejarah dengan <span>dedikasi, inovasi,
dan
semangat </span>yang luar biasa.</h2>
<img src="./asset foto/IMG_6176.jpg">
</div>
</div>
<div class="galeri">
<h1>Galery</h1>
</div>
<article>
<ul class="profile">
<li>
<div class="jurusan">
<a href="belom_ada_isinyaa" target="_blank" class="no_underliner">
<img src="./asset foto/DSC04075.JPG">
</a>
<h3>Teknik Komputer dan Jaringan</h3>
<p>"Mereka adalah para pionir di dunia digital, menggali jaringan dan membangun sistem yang
menjadi tulang punggung teknologi masa depan. Kreatif, cermat, dan siap menghadapi setiap
tantangan di ranah teknologi informasi."</p>
</div>
</li>
<li>
<div class="jurusan">
<a href="belom_ada_isinyaa_wak " target="_blank" class="no_underliner">
<img src="./asset foto/DSC04075.JPG">
</a>
<h3>Akutansi dan Keuangan Lembaga</h3>
<p>"Mengintip masa depan melalui angka dan laporan keuangan, mereka adalah penjaga ketelitian
dan
keandalan informasi keuangan. Dengan ketepatan dan kecermatan, mereka mengarahkan langkah
menuju
kesuksesan finansial."</p>
</div>
</li>
<li>
<div class="jurusan">
<a href="ingfokan_konten" target="_blank" class="no_underliner">
<img src="./asset foto/DSC04075.JPG">
</a>
<h3>Teknik Bisnis Sepeda Motor</h3>
<p>"Dari mesin hingga kenyamanan pengendara, mereka adalah ahli di bidang mobil dan sepeda
motor.
Dengan kecakapan dan keahlian, mereka membawa inovasi dan kenyamanan ke setiap perjalanan."
</p>
</div>
</li>
</ul>
</article>

<footer>
<p>belom jadi wak review aja dulu</p>
<p>kalo ada ide kasi tau yee</p>
</footer>
</body>

</html>
272 changes: 272 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,272 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: black;
object-fit: contain;
}

body {
margin: 0;
padding: 0;
width: 100%;
font-family: "Audiowide", sans-serif;
font-weight: 400;
font-style: normal;
padding-top: 0px;
}

/* bagian slide 1*/
h1 {
font-size: 30px;
color: #000000;
text-align: left;
text-transform: uppercase;
padding: 40px;
}

span {
color: #f27c22;

}

.aset {
text-align: center;
padding: 30px;
margin: 5px;
}

.aset img {
margin: 10px;
}

.awal {
display: flex;
flex-direction: column;
}

.awal h1 {
margin: -10px;
text-align: center;
font-size: 51px;
padding: 20px;
margin-bottom: 100px;
width: 100%;

}

/*slide 2*/
.container {
margin-bottom: 0px;
}

.container img {
margin: 0;
margin-left: -200px;
width: 200px;
margin-top: 120px;
}

.container h2 {
margin-left: -200px;
margin-right: 200px;
font-size: 35px;
}

.parent {
display: flex;
}

.parent img {
width: 550px;
height: 400px;
margin-right: -250px;
border-radius: 80px 40px;
transform: translateY(-220px);
background-color: #000000;
}

/*slide 3 */

.galeri h1 {
padding: 90px;
text-align: center;
margin: 0;
transform: translateY(-80px);

}

/*untuk bagian foto */
li {
list-style: none;
}

.profile {
display: flex;
flex-wrap: wrap;
position: relative;
height: 100%;
text-align: center;
justify-content: center;
gap: 90px;

}

.jurusan {
padding: 200px;
width: 266%;
height: 95%;
max-width: 250px;
box-shadow: #000000 20px 20px 20px 5px;
align-items: center;
padding: 10px;
border: 1px solid #ccc;
border-radius: 20px;
justify-content: space-between;
position: relative;
}

.jurusan img {
width: 100%;
}

.jurusan h3 {
margin-bottom: 10px;
}

.jurusan p {
font-size: small;
}

/*responsive nanti buat kode css diatasnya ini wajib!!!!*/
/*khusus footer aja*/
footer {
margin-top: 90px;
text-align: center;
}
/* Mobile */
@media (max-width: 576px) {
.aset,
.profile {
width: 90%;
}

.awal h1 {
font-size: 14px;
margin-bottom: 70px;
margin-top: -50px;
margin-left: 20px;
width: 90%;

}

.aset img {
width: 50px;
align-items: center;
justify-content: flex-start;
position: relative;
margin: 0;
margin-right: 0px;
margin-top: 100px;
}

.pertama h1 {
font-size: 10px;
margin-left: 30px;
margin-top: -20px;
margin-right: 60px;
}

.parent {
display: flex;
}

.container {
width: 90%;
margin-left: 15px;
}

.container img {
width: 60px;
margin: 0;
margin-top: 70px;
display: flex;
}

.container h2 {
width: 576px;
margin-bottom: 90px;
margin-right: 0px;
}

.parent img {
width: 130px;
height: 100px;
margin-top: 50px;
justify-content: center;
transform: scale(0.8);
transform: translateY(-50px);
border-radius: 20px 40px;
margin-right: 0px;
}

.galeri h1 {
width: 90%;
margin-top: 150px;
margin-bottom: 20px;
justify-content: center;
}

.parent h2 {
font-size: 20px;
margin: 0;
align-items: center;
}

.profile {
gap: 40px;
width: 90%;
margin: 0;
margin-left: 15px;
transform: translateY(-150px);
}

.jurusan {
padding: 20px;
}

.jurusan img {
width: 200px;
}

.footer {
margin-top: 50px;
text-align: center;
}
}

/* Tablet */
@media (min-width: 577px) and (max-width: 768px) {
.container {
width: 80%;
margin: 0 auto;
}

.parent {
flex-direction: row;
}

.parent img {
width: 50%;
}
}

/* Desktop */
@media (min-width: 769px) {

.container {
width: 60%;
margin: 0 auto;
}

}

0 comments on commit 0baf0bc

Please sign in to comment.