├── border.png ├── WhatsApp Image 2024-04-18 at 10.22.11.jpeg ├── Home.js ├── Contact.html ├── Me.html ├── index.html ├── Contact.css ├── Me.css └── Home.css /border.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafigeovazi/FirstWeb/main/border.png -------------------------------------------------------------------------------- /WhatsApp Image 2024-04-18 at 10.22.11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rafigeovazi/FirstWeb/main/WhatsApp Image 2024-04-18 at 10.22.11.jpeg -------------------------------------------------------------------------------- /Home.js: -------------------------------------------------------------------------------- 1 | const Nama = "Rafi Geovazi"; 2 | let Usia = 20; 3 | const Asal = "Pariaman"; 4 | const Hobi = "Nonton"; 5 | 6 | let biodata = document.getElementById("biodata"); 7 | 8 | function generateBiodata() { 9 | let generasi; 10 | 11 | if (Usia > 1 && Usia <= 15) { 12 | generasi = "gen alphantek"; 13 | } else if (Usia > 15 && Usia <= 25) { 14 | generasi = "dalam masa kampret bjirr 😅"; 15 | } else if (Usia > 25 && Usia <= 35) { 16 | generasi = "idup apa ini njir"; 17 | } else if (Usia > 35 && Usia <= 45) { 18 | generasi = "Ambil napas dulu rek 😹"; 19 | } else { 20 | generasi = "Udah bau tanah tidur aja wak 💀"; 21 | } 22 | return (biodata.innerHTML = generasi); 23 | } 24 | 25 | console.log(Nama); 26 | console.log(Usia); 27 | console.log(Asal); 28 | console.log(Hobi); 29 | 30 | generateBiodata(); 31 | -------------------------------------------------------------------------------- /Contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 18 | 19 | 20 | 21 |
22 | JANGAN SPAM NOMER GW AMA STIKER JOMOK NJIR

23 | 👇

24 | 25 |
26 | 27 | 28 | 29 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Me.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 18 | 19 | 20 | 21 |
22 | 23 | KLIK DISINI UNTUK MENUJU

24 | INSTA SIGMA ASELI WAK

25 | 😹

26 |
27 |
28 | 29 | 30 | 31 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 18 | 19 | 20 | 21 |
22 | 23 | 27 |

HALO, INI WEBSITE PRIBADI

28 |

RYAN GOSLING

29 | 30 | 31 |
32 | 33 |
34 |
35 | 36 | 37 | 38 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Contact.css: -------------------------------------------------------------------------------- 1 | *, 2 | html { 3 | padding: 0px; 4 | margin: 0px; 5 | } 6 | 7 | body { 8 | background-image: url(favpng_euclidean-vector-page-footer-header.png); 9 | background-color: rgb(255, 255, 255); 10 | background-size: contain; 11 | background-position: center; 12 | background-repeat: no-repeat; 13 | background-attachment: fixed; 14 | height: 65vh; 15 | } 16 | 17 | .ul-navbar { 18 | height: 15vh; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | } 23 | 24 | .li-navbar { 25 | list-style: none; 26 | padding: 5%; 27 | margin: 2%; 28 | color: white; 29 | font-size: 15px; 30 | } 31 | 32 | .li-navbar:hover { 33 | background-color: rgba(56, 4, 105, 0.724); 34 | transition: 0.3s ease-in-out; 35 | border-radius: 50px; 36 | } 37 | 38 | .a-navbar1 { 39 | color: rgb(232, 248, 15); 40 | text-decoration: overline; 41 | font-weight: 800; 42 | } 43 | 44 | .a-navbar2 { 45 | color: aqua; 46 | text-decoration: line-through; 47 | font-weight: 800; 48 | } 49 | 50 | .a-navbar3 { 51 | color: rgb(90, 240, 115); 52 | text-decoration: underline; 53 | font-weight: 800; 54 | } 55 | 56 | .container-content { 57 | text-align: center; 58 | background-color: rgb(49, 16, 105); 59 | color: rgb(255, 254, 254); 60 | display: flex; 61 | justify-content: center; 62 | align-items: center; 63 | } 64 | 65 | .a-content { 66 | background-color: rgba(255, 255, 255, 0.11); 67 | border-radius: 1000px; 68 | color: white; 69 | text-decoration: none; 70 | font-size: 20px; 71 | width: 720px; 72 | height: 480px; 73 | flex-direction: column; 74 | display: flex; 75 | justify-content: space-evenly; 76 | align-items: center; 77 | box-shadow: 10px 5px 5px white; 78 | } 79 | 80 | .h1-footer { 81 | color: black; 82 | display: flex; 83 | justify-content: center; 84 | align-items: center; 85 | } 86 | -------------------------------------------------------------------------------- /Me.css: -------------------------------------------------------------------------------- 1 | *, 2 | html { 3 | padding: 0px; 4 | margin: 0px; 5 | } 6 | 7 | body { 8 | background-image: url(border.png); 9 | background-color: rgb(255, 255, 255); 10 | background-size: contain; 11 | background-position: center; 12 | background-repeat: no-repeat; 13 | background-attachment: fixed; 14 | height: 65vh; 15 | } 16 | 17 | .ul-navbar { 18 | height: 15vh; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | } 23 | 24 | .li-navbar { 25 | list-style: none; 26 | padding: 5%; 27 | margin: 2%; 28 | color: white; 29 | font-size: 15px; 30 | } 31 | 32 | .li-navbar:hover { 33 | background-color: rgba(56, 4, 105, 0.731); 34 | transition: 0.3s ease-in-out; 35 | border-radius: 50px; 36 | } 37 | 38 | .a-navbar1 { 39 | color: rgb(232, 248, 15); 40 | text-decoration: overline; 41 | font-weight: 800; 42 | } 43 | 44 | .a-navbar2 { 45 | color: aqua; 46 | text-decoration: line-through; 47 | font-weight: 800; 48 | } 49 | 50 | .a-navbar3 { 51 | color: rgb(90, 240, 115); 52 | text-decoration: underline; 53 | font-weight: 800; 54 | } 55 | 56 | .container-content { 57 | text-align: center; 58 | background-color: rgb(49, 16, 105); 59 | color: black; 60 | display: flex; 61 | justify-content: center; 62 | align-items: center; 63 | } 64 | 65 | .a-content { 66 | background-color: rgba(255, 255, 255, 0.11); 67 | border-radius: 1000px; 68 | color: white; 69 | text-decoration: none; 70 | font-size: 20px; 71 | width: 720px; 72 | height: 480px; 73 | flex-direction: column; 74 | display: flex; 75 | justify-content: space-evenly; 76 | align-items: center; 77 | box-shadow: 10px 5px 5px white; 78 | } 79 | 80 | .container-footer { 81 | text-align: center; 82 | font-weight: 800; 83 | font-size: 30px; 84 | color: black; 85 | } 86 | .container-footer p { 87 | background-color: rgb(243, 230, 229); 88 | width: 50%; 89 | margin: auto; 90 | } 91 | -------------------------------------------------------------------------------- /Home.css: -------------------------------------------------------------------------------- 1 | *, 2 | html { 3 | padding: 0px; 4 | margin: 0px; 5 | } 6 | 7 | body { 8 | background-image: url(favpng_euclidean-vector-page-footer-header.png); 9 | background-color: rgb(255, 255, 255); 10 | background-size: contain; 11 | background-position: center; 12 | background-repeat: no-repeat; 13 | background-attachment: fixed; 14 | height: 65vh; 15 | } 16 | 17 | .ul-navbar { 18 | height: 15vh; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | } 23 | 24 | .li-navbar { 25 | list-style: none; 26 | padding: 5%; 27 | margin: 2%; 28 | color: rgb(249, 243, 243); 29 | font-size: 15px; 30 | } 31 | 32 | .li-navbar:hover { 33 | background-color: rgba(56, 4, 105, 0.724); 34 | transition: 0.3s ease-in-out; 35 | border-radius: 50px; 36 | } 37 | 38 | .a-navbar1 { 39 | color: rgb(232, 248, 15); 40 | text-decoration: overline; 41 | font-weight: 800; 42 | } 43 | 44 | .a-navbar2 { 45 | color: aqua; 46 | text-decoration: line-through; 47 | font-weight: 800; 48 | } 49 | 50 | .a-navbar3 { 51 | color: rgb(90, 240, 115); 52 | text-decoration: underline; 53 | font-weight: 800; 54 | } 55 | 56 | .container-content { 57 | text-align: center; 58 | background-color: rgb(49, 16, 105); 59 | color: rgb(0, 0, 0); 60 | display: flex; 61 | justify-content: center; 62 | align-items: center; 63 | } 64 | 65 | .a-content { 66 | background-color: rgba(255, 255, 255, 0.11); 67 | border-radius: 1000px; 68 | color: white; 69 | text-decoration: none; 70 | font-size: 20px; 71 | width: 720px; 72 | height: 480px; 73 | flex-direction: column; 74 | display: flex; 75 | justify-content: space-evenly; 76 | align-items: center; 77 | box-shadow: 10px 5px 5px white; 78 | } 79 | 80 | .img-content { 81 | height: 40vh; 82 | transform: rotate(-45deg); 83 | } 84 | 85 | #biodata { 86 | width: 500px; 87 | height: 500px; 88 | background-color: crimson; 89 | } 90 | 91 | .h1-footer { 92 | background-color: aliceblue; 93 | width: 50%; 94 | margin: auto; 95 | text-align: center; 96 | font-weight: 800; 97 | font-size: 30px; 98 | color: black; 99 | display: flex; 100 | justify-content: center; 101 | align-items: center; 102 | } 103 | --------------------------------------------------------------------------------