Skip to content

Commit

Permalink
Final Project
Browse files Browse the repository at this point in the history
  • Loading branch information
@yudha556
yudha556 committed Apr 25, 2024
1 parent 0acd44a commit 1678037
Show file tree
Hide file tree
Showing 6 changed files with 204 additions and 56 deletions.
Binary file added asset foto/1-removebg-preview.png
View file
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/2-removebg-preview.png
View file
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/3-removebg-preview.png
View file
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/4-removebg-preview.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 14 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
/* Styling untuk mobile */
@media (max-width: 576px) {
.container h2 {
font-size: 10px;
font-size: 8px;
}
}
</style>
Expand All @@ -20,16 +20,16 @@
<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">
<img src="./asset foto/1-removebg-preview.png" class="bulat">
<img src="./asset foto/2-removebg-preview.png" class="bintang">
<img src="./asset foto/3-removebg-preview.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">
<img src="./asset foto/4-removebg-preview.png" class="kubus">
<div class="parent">
<h2><span>Inspiratif, bersemangat, dan siap menaklukkan dunia!</span><br> Alumni tahun 2023 adalah kelompok
yang
Expand Down Expand Up @@ -70,4 +70,13 @@ <h3>Teknik Bisnis Sepeda Motor</h3>
</ul>
</div>
</div>
<div class="akhir">
<h1>Thank you for making this trip amazing."</h1>
<h2>give advice</h2>
<ul class="link">
<li><a href="https://www.instagram.com/gua_yudha/">instagram</a></li>
<li><a href="https://github.com/yudha556">Github</a></li>
<p>Beri tahu saya jika ada saran</p>
</ul>
</div>
</body>
241 changes: 190 additions & 51 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

* {
margin: 0;
padding: 0;
Expand Down Expand Up @@ -35,25 +34,29 @@ span {
text-align: center;
padding: 30px;
margin: 5px;
margin-top: 20px;
}

.aset img {
margin: 10px;
width: 15%;
padding: 0px;

}

.awal {
display: flex;
flex-direction: column;
margin-top: -80px;
}

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

}

/*slide 2*/
Expand All @@ -62,15 +65,16 @@ span {
}

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

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

Expand All @@ -81,9 +85,9 @@ span {
.parent img {
width: 550px;
height: 400px;
margin-right: -250px;
margin-right: 50px;
border-radius: 80px 40px;
transform: translateY(-220px);
transform: translateY(-250px);
background-color: #000000;
}

Expand Down Expand Up @@ -174,41 +178,82 @@ span {
font-size: 13px;
}

/*slide 4*/
.akhir {
width: 100%;
display: flex;
flex-direction: column;
height: 800px;
}

.akhir h1 {
width: 40%;
margin-top: 100px;
}

.akhir h2 {
text-align: right;
margin-right: 30px;
font-size: 40px;
margin-bottom: 10px;
margin-top: 170px;
}

.link {
display: flex;
flex-direction: column;
margin-right: 30px;
gap: 5px;
text-decoration: none;
}

.link li a {
float: right;
text-align: right;
text-decoration: none;
}

.link p {
text-align: center;
margin-top:200px;
font-size: 10px;
}

/*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;
font-size: 10px;
margin-bottom: 70px;
margin-top: -50px;
margin-left: 20px;
margin-top: 24px;
margin-left: 10px;
width: 90%;
}

.aset img {
width: 50px;
align-items: center;
justify-content: flex-start;

width: 25%;
margin: 0px;
margin-top: 3px;
position: relative;
margin: 0;
margin-right: 0px;
margin-top: 100px;
}

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

Expand All @@ -235,14 +280,14 @@ footer {
}

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

.galeri h1 {
Expand All @@ -258,49 +303,143 @@ footer {
align-items: center;
}

.profile {
gap: 40px;
/* bagian slide 3 */
.profil {
width: 100%;
margin-top: 40px;
width: 90%;
margin-left: 20px;

}

.profil h1 {
align-items: center;
justify-content: center;
padding: 0px;
font-size: 120%;
margin-bottom: 50px;
}

.profil img {
margin: 0;
margin-left: 15px;
transform: translateY(-150px);
width: 110px;
height: 110px;
border-radius: 30px 30px 30px 30px;
}

.jurusan {
padding: 20px;
/*kelas tkj*/
.tkj {
display: contents;
width: 40%;
}

.jurusan img {
width: 200px;
.tkj img {
margin-left: 25%;
}

.footer {
margin-top: 50px;
text-align: center;
.tkj li {
margin: 70px;
text-align: left;
width: 80%;
margin-left: 33px;
margin-top: 5px;
font-size: 10px;
}
}

/* Tablet */
@media (min-width: 577px) and (max-width: 768px) {
.container {
.tkj p {
font-size: 6px;
}

/* akl */
.akl {
display: contents;
width: 40%;
}

.akl img {
margin-left: 25%;
}

.akl li {
margin: 70px;
text-align: left;
width: 80%;
margin: 0 auto;
margin-left: 33px;
margin-top: 5px;
font-size: 10px;
}

.parent {
flex-direction: row;
.akl p {
font-size: 6px;
}

.parent img {
width: 50%;
/* tbsm */
.tbsm {
display: contents;
width: 40%;
}
}

/* Desktop */
@media (min-width: 769px) {
.tbsm img {
margin-left: 25%;
}

.container {
width: 60%;
margin: 0 auto;
.tbsm li {
margin: 70px;
text-align: left;
width: 80%;
margin-left: 33px;
margin-top: 5px;
font-size: 10px;
}

.tbsm p {
font-size: 6px;
}

/*class akhir*/
.akhir {
width: 90%;
margin-top: -100px;
height: 500px;

}

.akhir h1 {
font-size: 14px;
width: 90%;
}

.akhir h2 {
font-size: 20px;
margin-right: -15px;
margin-top: 40px;
}

.link li a {
font-size: 12px;
margin-right: -40px;
}

.link p {
margin-top: 110px;
width: 90%;
margin-left: 50px;
font-size: 3px;
}

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

.parent {
flex-direction: row;
}

.parent img {
width: 50%;
}
}
}

0 comments on commit 1678037

Please sign in to comment.