diff --git a/README.md b/README.md new file mode 100644 index 0000000..aa2d21c --- /dev/null +++ b/README.md @@ -0,0 +1,27 @@ +# TeamProfileHomePage +MINI PROJECT WEB PROFILE SEDERHANA + +# DEFAULT CHROME SIZE 100% NOT RESPONSIVE WEB +setting default web + + +# Team Profile Home Page + +Ini adalah proyek web untuk membuat halaman home page yang menampilkan profil tim. + +## Instalasi +1. Clone repositori ini. +2. Buka file `index.html` di browser. + +## Penggunaan +- Halaman ini akan menampilkan profil anggota tim dengan foto, nama, jabatan, dan deskripsi singkat. + +## Kontribusi +1. Fork repositori ini. +2. Buat branch baru: `git checkout -b fitur-baru`. +3. Lakukan perubahan dan commit: `git commit -am 'Menambahkan fitur baru'`. +4. Push ke branch Anda: `git push origin fitur-baru`. +5. Buat pull request. + +## Lisensi +Proyek ini dilisensikan di bawah [Lisensi MIT](LICENSE). diff --git a/assets/foto-profile/Picsart_23-09-07_20-39-51-380.jpg b/assets/foto-profile/Picsart_23-09-07_20-39-51-380.jpg new file mode 100644 index 0000000..aeb342c Binary files /dev/null and b/assets/foto-profile/Picsart_23-09-07_20-39-51-380.jpg differ diff --git a/assets/foto-profile/Yudha.jpg b/assets/foto-profile/Yudha.jpg new file mode 100644 index 0000000..762b607 Binary files /dev/null and b/assets/foto-profile/Yudha.jpg differ diff --git a/assets/foto-profile/arif.jpg b/assets/foto-profile/arif.jpg new file mode 100644 index 0000000..94b3da6 Binary files /dev/null and b/assets/foto-profile/arif.jpg differ diff --git a/assets/icon-pack/icons8-github-50.png b/assets/icon-pack/icons8-github-50.png new file mode 100644 index 0000000..3637546 Binary files /dev/null and b/assets/icon-pack/icons8-github-50.png differ diff --git a/assets/icon-pack/icons8-insta-50.png b/assets/icon-pack/icons8-insta-50.png new file mode 100644 index 0000000..75a06fd Binary files /dev/null and b/assets/icon-pack/icons8-insta-50.png differ diff --git a/assets/icon-pack/icons8-man-50.png b/assets/icon-pack/icons8-man-50.png new file mode 100644 index 0000000..bffaba1 Binary files /dev/null and b/assets/icon-pack/icons8-man-50.png differ diff --git a/assets/logo/logo-icon.jpg b/assets/logo/logo-icon.jpg new file mode 100644 index 0000000..b1f03c5 Binary files /dev/null and b/assets/logo/logo-icon.jpg differ diff --git a/assets/logo/logo-nobg.png b/assets/logo/logo-nobg.png new file mode 100644 index 0000000..7ed9f81 Binary files /dev/null and b/assets/logo/logo-nobg.png differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..6291149 --- /dev/null +++ b/css/style.css @@ -0,0 +1,381 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + color: black; + font-family: "Poppins", sans-serif; + object-fit: contain; +} + +body { + --sb-track-color: transparent; + --sb-thumb-color: yellow; + --sb-size: 7px; +} + +body::-webkit-scrollbar { + width: var(--sb-size); +} + +body::-webkit-scrollbar-track { + background: var(--sb-track-color); + border-radius: 24px; +} + +body::-webkit-scrollbar-thumb { + background: var(--sb-thumb-color); + border-radius: 24px; +} + +@supports not selector(::-webkit-scrollbar) { + body { + scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); + } +} + +.container { + background-color: whitesmoke; + padding: 160px; + border-bottom-right-radius: 200px; + box-shadow: black 1px 1px 30px 0px; + object-fit: contain; +} + +.foto-logo { + max-width: 350px; + position: absolute; + width: 250px; + left: 10px; + top: 0; + border-radius: 62px 0px 53px 66px; + object-fit: contain; +} + +@media (max-width: 992px) { + .foto-logo { + width: 150px; + top: 100px; + } +} + +@media (max-width: 768px) { + .foto-logo { + max-width: 120px; + } +} + +.nav-links { + position: relative; + display: flex; + gap: 50px; + justify-content:center ; + list-style: none; + bottom: 80px; + object-fit: contain; + padding: 20px; + margin-left: auto; + margin-right: auto; +} + +@media (max-width: 992px) and (max-width: 1199px) { + .nav-links { + flex-wrap: wrap; + row-gap: 10px; + } + .nav-brand { + margin-right: 0; + margin-bottom: 10px; + } +} + +@media (max-width: 768px) and (max-width: 991px) { + .nav-links { + flex-direction: column; + align-items: center; + } + .navbar-brand,.navbar-nav { + margin:0; + } +} + +@media (max-width: 481px) and (max-width: 767px) { + .nav-links { + flex-direction: column; + align-items: center; + } + .navbar-brand,.navbar-nav { + margin:0; + } +} + +.nav-links a { + text-decoration: none; + font-size: 20px; + object-fit: contain; +} + +.container-ourstory { + position: relative; + padding: 50px; + margin-top: 110px; + align-items: center; + object-fit: contain; +} + +.judul-ourstory { + text-align: center; + object-fit: contain; +} + +.deskripsi-ourstory { + text-align: center; + object-fit: contain; +} + +.judul-figure { + position: relative; + text-align: center; + font-size: 40px; + object-fit: contain; + width: 25%; + height: auto; +} + +.card { + position: relative; + display: flex; + justify-content: center; + gap: 100px; + + border-radius: 20px 20px 0px 0px; +} + +.card2 { + position: relative; + top: -20px; + width: 100%; + display: flex; + justify-content: center; + gap: 100px; +} + +.card-image { + position: relative; + object-fit: contain; + width: 25%; + height: auto; + filter: grayscale(100%); + border-radius: 0px 2px 0px 0px; + margin: 10px; + box-shadow: rgb(189, 189, 189) 1px 1px 10px 1px; +} + +.card-image { + transition: filter 1.2s ease; +} + +.card-image:hover { + filter: none; +} + +.home { + transition: transform 0.3s ease; +} + +.home:hover { + transform: scale(1.2); + text-decoration: underline; + text-decoration-color: yellow; +} + +.vandm { + transition: transform 0.3s ease; +} + +.vandm:hover { + transform: scale(1.2); + text-decoration: underline; + text-decoration-color: yellow; +} + +.project { + transition: transform 0.3s ease; +} + +.project:hover { + transform: scale(1.2); + text-decoration: underline; + text-decoration-color: yellow; +} + +.contact { + transition: transform 0.3s ease; +} + +.contact:hover { + transform: scale(1.2); + text-decoration: underline; + text-decoration-color: yellow; +} + +.container-figure { + display: flex; + align-items: center; + justify-content: center; + margin: 90px; +} + +.team-profile { + position: relative; + width: 100%; + height: 100%; + display: flex; + text-align: center; + justify-content: center; + gap: 120px; + margin-bottom: 10px; +} + +.profile { + position: relative; + padding: 200px; + width: 266%; + height: 76%; +} + +.container-nama2 { + position: relative; + width: 100%; + display: flex; + text-align: center; + justify-content: center; + gap: 120px; + top: -20px; + border-radius: 0px 0px 30px 30px; +} + +.nama-anggota { + background-color: white; + box-shadow: black 0px 10px 5px 0px; + position: relative; + object-fit: contain; + width: 25%; + height: auto; + align-items: center; + font-weight: 500; + font-size: 20px; + margin-bottom: 60px; + text-decoration: none; + border-radius: 0px; + padding: 20px 0px; + bottom: 30px; + box-shadow: rgb(189, 189, 189) 1px 1px 10px 1px; + border-radius: 0px 0px 20px 20px; + display: flex; + flex-direction: column; + align-items: center; +} + +.nama-anggota2 { + background-color: white; + box-shadow: black 0px 10px 5px 0px; + position: relative; + object-fit: contain; + width: 25%; + height: auto; + align-items: center; + font-weight: 500; + font-size: 20px; + margin-bottom: 60px; + text-decoration: none; + border-radius: 0px; + padding: 20px 0px; + bottom: 30px; + box-shadow: rgb(189, 189, 189) 1px 1px 10px 1px; + border-radius: 0px 0px 20px 20px; + display: flex; + flex-direction: column; + align-items: center; +} + +.media-sosial { + position: relative; + display: flex; +} + +.profile h3{ + position: relative; + text-align: center; + font-size: small; + +} + +.foto-profile { + position: relative; + width: 100%; + height: 75%; +} + +.no-underline { + text-decoration: none; + gap: 20px; + font-size: smaller; + margin: 10px; +} + +.t-m { + margin-top: 10px; +} + +/*nyoba ubah*/ +li { + list-style-type: none; +} + +.team-profile { + display: flex; + flex-wrap: wrap; +} + +.profile { + max-width: 250px; + box-shadow: black 20px 20px 20px 5px ; + flex: 0 0 calc(33.33% - 20px); + align-items: center; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; +} + +.profile img{ + max-width: 90%; +} +.profile h3 { + margin-bottom: 10px; +} + +@media (max-width: 600px) { + .profile { + width: 100%; + height: 70%; + flex: 0 0 100%; + + } + .team-profile { + position: relative; + width: 100%; + height: 100%; + display: flex; + text-align: center; + justify-content: center; + gap: 1%; + + + } +} + + +.icon { + position: relative; + width: 20px; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..af828f0 --- /dev/null +++ b/index.html @@ -0,0 +1,164 @@ + + + + + + + + + Team Profle JENGS GROUP + + + + +
+
+

Our Story

+

Jengset sebuah kelompok yang berisikan beberapa anak kuliahan yang + ingin terus berkembangg bersama dan meraih cita cita untuk menjadi expert dalam bidang IT bersama-sama.

+
+
+

Profile Team

+
+
+ +
+ +
+ + + \ No newline at end of file