├── img ├── wa.png ├── folder.png ├── success.gif ├── windows.png ├── Windows11.jpg ├── dark-mode.png ├── kalkulator.png ├── mahasiswa.jpeg ├── settings.png ├── whatsapp.jpg ├── groove-music.png ├── my works │ ├── dua.jpg │ ├── empat.jpg │ ├── enam.jpg │ ├── lima.jpg │ ├── satu.jpg │ ├── tiga.jpg │ ├── tujuh.jpg │ ├── delapan.jpg │ └── sembilan.jpg ├── skill │ ├── 732212.png │ ├── css-131-722685.png │ ├── 1200px-Laravel.svg.png │ ├── figma-2296071-1912030.png │ ├── flutter-2038877-1720090.png │ └── javascript-2752148-2284965.png ├── Windows11-blur.jpg ├── Windows11-dark.jpg ├── whatsapp-dark.jpg ├── Recycle_Bin_Windows_11_empty.png ├── 4add33f481702532f77a83e96339f797.png └── file-explorer-folder-libraries-icon-18298.png ├── audio ├── unlock.ogg └── windows11.ogg ├── js ├── open-windows.js ├── open-trash.js ├── settings.js ├── dark-mode-switch.min.js ├── calculator.js ├── dark-mode-switch.js ├── open-whatsapp.js └── file.js ├── css ├── settings.css ├── trash.css ├── menuwindows.css ├── key.css ├── darkmode.css ├── kalkulator.css ├── style.css ├── whatsapp.css └── open_file.css ├── index.html └── index-screen.html /img/wa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/wa.png -------------------------------------------------------------------------------- /img/folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/folder.png -------------------------------------------------------------------------------- /img/success.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/success.gif -------------------------------------------------------------------------------- /img/windows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/windows.png -------------------------------------------------------------------------------- /audio/unlock.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/audio/unlock.ogg -------------------------------------------------------------------------------- /img/Windows11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/Windows11.jpg -------------------------------------------------------------------------------- /img/dark-mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/dark-mode.png -------------------------------------------------------------------------------- /img/kalkulator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/kalkulator.png -------------------------------------------------------------------------------- /img/mahasiswa.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/mahasiswa.jpeg -------------------------------------------------------------------------------- /img/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/settings.png -------------------------------------------------------------------------------- /img/whatsapp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/whatsapp.jpg -------------------------------------------------------------------------------- /audio/windows11.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/audio/windows11.ogg -------------------------------------------------------------------------------- /img/groove-music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/groove-music.png -------------------------------------------------------------------------------- /img/my works/dua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/my works/dua.jpg -------------------------------------------------------------------------------- /img/skill/732212.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/skill/732212.png -------------------------------------------------------------------------------- /img/Windows11-blur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/Windows11-blur.jpg -------------------------------------------------------------------------------- /img/Windows11-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/Windows11-dark.jpg -------------------------------------------------------------------------------- /img/my works/empat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/my works/empat.jpg -------------------------------------------------------------------------------- /img/my works/enam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/my works/enam.jpg -------------------------------------------------------------------------------- /img/my works/lima.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/my works/lima.jpg -------------------------------------------------------------------------------- /img/my works/satu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/my works/satu.jpg -------------------------------------------------------------------------------- /img/my works/tiga.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/my works/tiga.jpg -------------------------------------------------------------------------------- /img/my works/tujuh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/my works/tujuh.jpg -------------------------------------------------------------------------------- /img/whatsapp-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/whatsapp-dark.jpg -------------------------------------------------------------------------------- /img/my works/delapan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/my works/delapan.jpg -------------------------------------------------------------------------------- /img/my works/sembilan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/my works/sembilan.jpg -------------------------------------------------------------------------------- /img/skill/css-131-722685.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/skill/css-131-722685.png -------------------------------------------------------------------------------- /img/skill/1200px-Laravel.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/skill/1200px-Laravel.svg.png -------------------------------------------------------------------------------- /img/skill/figma-2296071-1912030.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/skill/figma-2296071-1912030.png -------------------------------------------------------------------------------- /img/Recycle_Bin_Windows_11_empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/Recycle_Bin_Windows_11_empty.png -------------------------------------------------------------------------------- /img/skill/flutter-2038877-1720090.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/skill/flutter-2038877-1720090.png -------------------------------------------------------------------------------- /img/4add33f481702532f77a83e96339f797.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/4add33f481702532f77a83e96339f797.png -------------------------------------------------------------------------------- /img/skill/javascript-2752148-2284965.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/skill/javascript-2752148-2284965.png -------------------------------------------------------------------------------- /img/file-explorer-folder-libraries-icon-18298.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbalroni/portofolio3/HEAD/img/file-explorer-folder-libraries-icon-18298.png -------------------------------------------------------------------------------- /js/open-windows.js: -------------------------------------------------------------------------------- 1 | let win = document.getElementById('windows'); 2 | let menu = document.querySelector('.menu-windows'); 3 | let cls = document.getElementById('cls'); 4 | 5 | win.onclick = function(){ 6 | menu.classList.add('active'); 7 | } 8 | 9 | cls.onclick = function(){ 10 | menu.classList.remove('active'); 11 | } -------------------------------------------------------------------------------- /js/open-trash.js: -------------------------------------------------------------------------------- 1 | let opentrash = document.querySelector('.trash'); 2 | let extrash = document.querySelector('.bar-trs'); 3 | 4 | let buttontrash = document.getElementById('clear'); 5 | 6 | buttontrash.onclick = function(){ 7 | opentrash.classList.add('open'); 8 | } 9 | 10 | extrash.onclick = function(){ 11 | opentrash.classList.remove('open'); 12 | } -------------------------------------------------------------------------------- /js/settings.js: -------------------------------------------------------------------------------- 1 | let iconsettings = document.getElementById('set'); 2 | let pagesettings = document.querySelector('.settings'); 3 | 4 | let closeSetting = document.getElementById('set-close'); 5 | 6 | iconsettings.onclick = function(){ 7 | pagesettings.classList.add('open'); 8 | } 9 | 10 | closeSetting.onclick = function(){ 11 | pagesettings.classList.remove('open'); 12 | } -------------------------------------------------------------------------------- /js/dark-mode-switch.min.js: -------------------------------------------------------------------------------- 1 | function initTheme(){var e=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch");darkSwitch.checked=e,e?document.body.setAttribute("data-theme","dark"):document.body.removeAttribute("data-theme")}function resetTheme(){darkSwitch.checked?(document.body.setAttribute("data-theme","dark"),localStorage.setItem("darkSwitch","dark")):(document.body.removeAttribute("data-theme"),localStorage.removeItem("darkSwitch"))}var darkSwitch=document.getElementById("darkSwitch");window.addEventListener("load",function(){darkSwitch&&(initTheme(),darkSwitch.addEventListener("change",function(){resetTheme()}))}); -------------------------------------------------------------------------------- /css/settings.css: -------------------------------------------------------------------------------- 1 | .settings { 2 | width: 30%; 3 | height: 100%; 4 | background-color: pink; 5 | position: absolute; 6 | top: 0; 7 | right: 0; 8 | box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; 9 | background-color: rgba(255, 255, 255, 0.1); 10 | backdrop-filter: blur(10px); 11 | transition: all 0.5s ease-in-out; 12 | visibility: hidden; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | color: #677F92; 17 | flex-direction: column; 18 | } 19 | 20 | .settings.open { 21 | visibility: visible; 22 | } 23 | 24 | .settings i { 25 | cursor: pointer; 26 | background-color: #677F92; 27 | width: 50px; 28 | height: 50px; 29 | line-height: 50px; 30 | text-align: center; 31 | border-radius: 50px; 32 | color: #ffffff; 33 | } -------------------------------------------------------------------------------- /css/trash.css: -------------------------------------------------------------------------------- 1 | .trash { 2 | position: fixed; 3 | top: 50%; 4 | left: 50%; 5 | margin-top: -250px; 6 | margin-left: -300px; 7 | width: 50%; 8 | height: auto; 9 | background-color: #ffffff; 10 | border-radius: 15px; 11 | box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; 12 | visibility: hidden; 13 | transition: all 1s ease-in-out; 14 | } 15 | 16 | .trash.open { 17 | visibility: visible; 18 | } 19 | 20 | .trash img { 21 | height: 100%; 22 | width: 100%; 23 | padding: 10px; 24 | } 25 | 26 | .trash .bar-trs { 27 | width: 100%; 28 | height: 40px; 29 | } 30 | 31 | .trash .exit-trs i { 32 | cursor: pointer; 33 | position: absolute; 34 | top: 0; 35 | right: 0; 36 | width: 40px; 37 | height: 40px; 38 | line-height: 40px; 39 | text-align: center; 40 | border-radius: 0 15px 0 0; 41 | } 42 | 43 | .trash .exit-trs:hover i { 44 | background-color: #D8383B; 45 | color: #ffffff; 46 | transition: all 0.5s; 47 | } -------------------------------------------------------------------------------- /js/calculator.js: -------------------------------------------------------------------------------- 1 | function insert(num){ 2 | document.form.hasil.value = document.form.hasil.value+num; 3 | } 4 | 5 | function equal(){ 6 | const exp = document. form.hasil.value; 7 | 8 | if(exp){ 9 | document.form.hasil.value = eval(exp); 10 | } 11 | } 12 | 13 | 14 | function clean(){ 15 | document.form.hasil.value = ""; 16 | } 17 | 18 | function back(){ 19 | const exp = document.form.hasil.value; 20 | document.form.hasil.value = exp.substring(0,exp.length-1); 21 | } 22 | 23 | let iconkalkulator = document.getElementById('icon-kalkulator'); 24 | let kalkulator = document.querySelector('.kalkulator'); 25 | 26 | let exitkalkulator = document.querySelector('.ex-kal'); 27 | let minimkalkulator = document.querySelector('.minim-kal'); 28 | 29 | iconkalkulator.onclick = function(){ 30 | kalkulator.style.top = "50%"; 31 | kalkulator.classList.add('open'); 32 | } 33 | 34 | exitkalkulator.onclick = function(){ 35 | kalkulator.classList.remove('open'); 36 | } 37 | 38 | minimkalkulator.onclick = function(){ 39 | kalkulator.style.top = "150%"; 40 | } -------------------------------------------------------------------------------- /js/dark-mode-switch.js: -------------------------------------------------------------------------------- 1 | var darkSwitch = document.getElementById("darkSwitch"); 2 | window.addEventListener("load", function () { 3 | if (darkSwitch) { 4 | initTheme(); 5 | darkSwitch.addEventListener("change", function () { 6 | resetTheme(); 7 | }); 8 | } 9 | }); 10 | 11 | /** 12 | * Summary: function that adds or removes the attribute 'data-theme' depending if 13 | * the switch is 'on' or 'off'. 14 | * 15 | * Description: initTheme is a function that uses localStorage from JavaScript DOM, 16 | * to store the value of the HTML switch. If the switch was already switched to 17 | * 'on' it will set an HTML attribute to the body named: 'data-theme' to a 'dark' 18 | * value. If it is the first time opening the page, or if the switch was off the 19 | * 'data-theme' attribute will not be set. 20 | * @return {void} 21 | */ 22 | function initTheme() { 23 | var darkThemeSelected = 24 | localStorage.getItem("darkSwitch") !== null && 25 | localStorage.getItem("darkSwitch") === "dark"; 26 | darkSwitch.checked = darkThemeSelected; 27 | darkThemeSelected 28 | ? document.body.setAttribute("data-theme", "dark") 29 | : document.body.removeAttribute("data-theme"); 30 | } 31 | 32 | /** 33 | * Summary: resetTheme checks if the switch is 'on' or 'off' and if it is toggled 34 | * on it will set the HTML attribute 'data-theme' to dark so the dark-theme CSS is 35 | * applied. 36 | * @return {void} 37 | */ 38 | function resetTheme() { 39 | if (darkSwitch.checked) { 40 | document.body.setAttribute("data-theme", "dark"); 41 | localStorage.setItem("darkSwitch", "dark"); 42 | } else { 43 | document.body.removeAttribute("data-theme"); 44 | localStorage.removeItem("darkSwitch"); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /js/open-whatsapp.js: -------------------------------------------------------------------------------- 1 | let buttonwa = document.getElementById('wa'); 2 | let reply = document.getElementById('balas'); 3 | let whatsapp = document.querySelector('.whatsapp'); 4 | let exwhatsapp = document.querySelector('.exit-wht'); 5 | let minwhatsapp = document.querySelector('.minim-wht'); 6 | 7 | // zoom in out 8 | let showwhatsapp = document.querySelector('.show-wht'); 9 | let outwhatsapp = document.querySelector('.min-wht'); 10 | 11 | 12 | let icon = document.querySelector('.show-min-wht'); 13 | 14 | // wallpaper 15 | let wa = document.querySelector('.wa'); 16 | 17 | 18 | 19 | reply.onclick = function(){ 20 | whatsapp.style.top = "46%"; 21 | whatsapp.style.width = "55%"; 22 | whatsapp.classList.add('active'); 23 | showwhatsapp.style.display = "block"; 24 | outwhatsapp.style.display = "none"; 25 | wa.style.height = "95%"; 26 | } 27 | buttonwa.onclick = function(){ 28 | whatsapp.style.top = "46.%"; 29 | whatsapp.style.width = "55%"; 30 | whatsapp.classList.add('active'); 31 | showwhatsapp.style.display = "block"; 32 | outwhatsapp.style.display = "none"; 33 | wa.style.height = "95%"; 34 | } 35 | exwhatsapp.onclick = function(){ 36 | whatsapp.classList.remove('active'); 37 | } 38 | minwhatsapp.onclick = function(){ 39 | whatsapp.style.top = "150%"; 40 | whatsapp.style.width = "0"; 41 | } 42 | 43 | showwhatsapp.onclick = function(){ 44 | // whatsapp.style.transition = "all 1s ease-in-out"; 45 | whatsapp.style.width = "90%"; 46 | whatsapp.style.height = "85%"; 47 | whatsapp.style.top = "50%"; 48 | whatsapp.style.left = "50%"; 49 | showwhatsapp.style.display = "none"; 50 | outwhatsapp.style.display = "block"; 51 | wa.style.height = "95%"; 52 | } 53 | 54 | icon.onclick = function(){ 55 | whatsapp.style.width = "55%"; 56 | whatsapp.style.height = "90%"; 57 | whatsapp.style.top = "46%"; 58 | whatsapp.style.left = "52%"; 59 | showwhatsapp.style.display = "block"; 60 | outwhatsapp.style.display = "none"; 61 | wa.style.height = "95%"; 62 | } -------------------------------------------------------------------------------- /css/menuwindows.css: -------------------------------------------------------------------------------- 1 | .menu-windows { 2 | position: fixed; 3 | top: 150%; 4 | left: 50%; 5 | transform: translate(-50%, -50%); 6 | width: 500px; 7 | height: 550px; 8 | background-color: rgb(226, 243, 251); 9 | border-radius: 15px; 10 | box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; 11 | visibility: hidden; 12 | transition: all 1s ease-in-out; 13 | padding: 20px; 14 | transition: all 0.8s ease-in-out; 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: space-around; 18 | } 19 | 20 | .menu-windows.active { 21 | visibility: visible; 22 | top: 53%; 23 | } 24 | 25 | .menu-windows input { 26 | width: 100%; 27 | height: 40px; 28 | padding: 5px; 29 | color: #303030; 30 | border: 0; 31 | border-bottom: 2px solid #0467FF; 32 | } 33 | 34 | .menu-windows .form-control { 35 | border-radius: 0; 36 | } 37 | 38 | .menu-windows .input-group-text { 39 | width: 100%; 40 | height: 40px; 41 | color: #303030; 42 | border: 0; 43 | background-color: #ffffff; 44 | border-bottom: 2px solid #0467FF; 45 | border-radius: 0; 46 | } 47 | 48 | .menu-windows .title { 49 | font-size: 25px; 50 | padding-left: 10px; 51 | border-radius: 0; 52 | } 53 | 54 | .menu-windows .name { 55 | font-size: 25px; 56 | padding-left: 10px; 57 | border-radius: 0; 58 | } 59 | 60 | .footer { 61 | display: flex; 62 | justify-content: space-between; 63 | align-items: center; 64 | width: 90%; 65 | margin: 0 auto; 66 | } 67 | 68 | .footer i { 69 | font-size: 20px; 70 | color: #677F92; 71 | transition: all 0.5s ease-in-out; 72 | } 73 | 74 | .footer i:hover { 75 | transform: scale(1.2); 76 | } 77 | 78 | .menu-windows .col-sm-4 { 79 | display: flex; 80 | align-items: center; 81 | justify-content: center; 82 | } 83 | 84 | .menu-windows .row { 85 | margin-top: 20px; 86 | } 87 | 88 | .menu-windows .img-skill { 89 | width: 40%; 90 | transition: 0.3s; 91 | cursor: pointer; 92 | } 93 | 94 | .menu-windows .img-skill:hover { 95 | transform: scale(1.2); 96 | } -------------------------------------------------------------------------------- /css/key.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | overflow: hidden; 8 | padding: 0; 9 | margin: 0; 10 | } 11 | 12 | .jumbotron-wallpaper { 13 | padding: 0; 14 | margin: 0; 15 | height: 100vh; 16 | background-image: url(../img/Windows11-blur.jpg); 17 | background-attachment: fixed; 18 | background-position: center center; 19 | background-size: cover; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | flex-direction: column; 24 | } 25 | 26 | .jumbotron-wallpaper .input-group { 27 | width: 30%; 28 | margin: 0 auto; 29 | border-radius: 5px; 30 | } 31 | 32 | .jumbotron-wallpaper .input-group input { 33 | background-color: transparent; 34 | background-color: rgba(58, 58, 58, 0.233); 35 | border: 1.8px solid #ffffff; 36 | padding: 10px; 37 | color: #ffffff; 38 | border-radius: 3px; 39 | } 40 | 41 | .jumbotron-wallpaper .input-group .btn { 42 | background-color: #677F92; 43 | border: 1.8px solid #677F92; 44 | color: #ffffff; 45 | border-radius: 3px; 46 | transition: 0.5s; 47 | } 48 | 49 | .jumbotron-wallpaper .input-group .btn:hover { 50 | background-color: #5b6c7a; 51 | border: 1.8px solid #5b6c7a; 52 | } 53 | 54 | .jumbotron-wallpaper .input-group .btn:hover i { 55 | transition: all 0.4s ease-in-out; 56 | } 57 | 58 | .jumbotron-wallpaper .img-profil { 59 | width: 150px; 60 | height: 150px; 61 | margin: 10px; 62 | transition: all 0.5s ease-in-out; 63 | } 64 | 65 | .jumbotron-wallpaper .img-profil:hover { 66 | transform: scale(1.1); 67 | } 68 | 69 | .jumbotron-wallpaper .input-group .btn:hover i { 70 | transform: rotate(90deg); 71 | } 72 | 73 | .jumbotron-wallpaper input:focus { 74 | border: none; 75 | } 76 | 77 | .jumbotron-wallpaper ::-webkit-input-placeholder { 78 | color: #ffffff; 79 | } 80 | 81 | .text { 82 | color: #ffffff; 83 | margin-bottom: 15px; 84 | } 85 | 86 | .text h3 { 87 | word-spacing: 2px; 88 | letter-spacing: 3px; 89 | } 90 | 91 | 92 | /* menu */ 93 | .menu { 94 | height: 40px; 95 | position: absolute; 96 | right: 20px; 97 | bottom: 10px; 98 | } 99 | 100 | .menu i { 101 | font-size: 22px; 102 | color: #ffffff; 103 | } 104 | 105 | .menu .dropdown-menu i { 106 | color: #303030; 107 | } 108 | 109 | @media only screen and (max-width: 600px) { 110 | .jumbotron-wallpaper .input-group { 111 | width: 80%; 112 | } 113 | } -------------------------------------------------------------------------------- /js/file.js: -------------------------------------------------------------------------------- 1 | let popup = document.querySelector('.openfile'); 2 | let exit = document.querySelector('.exit'); 3 | let ex = document.querySelector('.ex'); 4 | let minim = document.querySelector('.minim'); 5 | let show = document.querySelector('.show'); 6 | let showmin = document.querySelector('.min'); 7 | 8 | // container 9 | let jumbotron = document.querySelector('.jumbotron'); 10 | 11 | // button 12 | let button = document.getElementById('file'); 13 | let button2 = document.getElementById('file2'); 14 | 15 | button.onclick = function(){ 16 | popup.style.transform = "none"; 17 | popup.style.marginTop = "-300px"; 18 | popup.style.marginLeft = "-300px"; 19 | popup.style.borderRadius= "15px"; 20 | ex.style.borderRadius = "0 15px 0 0"; 21 | show.style.display = "block"; 22 | showmin.style.display = "none"; 23 | popup.style.width = "50%"; 24 | popup.style.height = "500px"; 25 | popup.style.top= "50%"; 26 | popup.classList.add('active'); 27 | jumbotron.style.height = "400px"; 28 | } 29 | 30 | button2.onclick = function(){ 31 | popup.style.transform = "none"; 32 | popup.style.marginTop = "-300px"; 33 | popup.style.marginLeft = "-300px"; 34 | popup.style.borderRadius= "15px"; 35 | ex.style.borderRadius = "0 15px 0 0"; 36 | show.style.display = "block"; 37 | showmin.style.display = "none"; 38 | popup.style.width = "50%"; 39 | popup.style.height = "500px"; 40 | popup.style.top= "50%"; 41 | popup.classList.add('active'); 42 | jumbotron.style.height = "400px"; 43 | } 44 | 45 | exit.onclick = function(){ 46 | popup.classList.remove('active'); 47 | } 48 | minim.onclick = function(){ 49 | popup.style.top= "150%"; 50 | popup.classList.remove('active'); 51 | popup.style.width = "0"; 52 | } 53 | 54 | show.onclick = function(){ 55 | popup.style.transform = "translate(-50%, -50%)"; 56 | popup.style.marginTop = "0"; 57 | popup.style.marginLeft = "0"; 58 | popup.style.width = "100%"; 59 | popup.style.height = "100%"; 60 | popup.style.borderRadius= "0"; 61 | ex.style.borderRadius = "0"; 62 | show.style.display = "none"; 63 | showmin.style.display = "block"; 64 | jumbotron.style.height = "600px"; 65 | } 66 | 67 | showmin.onclick = function(){ 68 | popup.style.transform = "none"; 69 | popup.style.marginTop = "-300px"; 70 | popup.style.marginLeft = "-300px"; 71 | popup.style.width = "50%"; 72 | popup.style.height = "500px"; 73 | popup.style.borderRadius= "15px"; 74 | ex.style.borderRadius = "0 15px 0 0"; 75 | show.style.display = "block"; 76 | showmin.style.display = "none"; 77 | jumbotron.style.height = "400px"; 78 | } -------------------------------------------------------------------------------- /css/darkmode.css: -------------------------------------------------------------------------------- 1 | [data-theme="dark"] .jumbotron-wallpaper { 2 | transition: all 1s ease-in-out; 3 | background-image: url(../img/Windows11-dark.jpg); 4 | } 5 | 6 | [data-theme="dark"] .navbar { 7 | transition: all 1s ease-in-out; 8 | background-color: #202020; 9 | opacity: 90%; 10 | } 11 | 12 | [data-theme="dark"] .navbar ul li.active, 13 | [data-theme="dark"] .navbar ul li:hover { 14 | background-color: #191919; 15 | } 16 | 17 | [data-theme="dark"] .time i, 18 | [data-theme="dark"] .time h5, 19 | [data-theme="dark"] .up-drop i { 20 | color: #f1f1f1; 21 | } 22 | 23 | [data-theme="dark"] .openfile i, 24 | [data-theme="dark"] .trash .exit-trs i, 25 | [data-theme="dark"] .kalkulator i, 26 | [data-theme="dark"] .whatsapp i { 27 | color: #f1f1f1; 28 | } 29 | 30 | [data-theme="dark"] .openfile .show:hover i, 31 | [data-theme="dark"] .openfile .show-min:hover i, 32 | [data-theme="dark"] .openfile .minim:hover i, 33 | [data-theme="dark"] .whatsapp .show-wht:hover i, 34 | [data-theme="dark"] .whatsapp .show-min-wht:hover i, 35 | [data-theme="dark"] .kalkulator .minim-kal:hover i, 36 | [data-theme="dark"] .whatsapp .minim-wht:hover i { 37 | background-color: #191919; 38 | } 39 | 40 | [data-theme="dark"] .openfile, 41 | [data-theme="dark"] .whatsapp, 42 | [data-theme="dark"] .trash, 43 | [data-theme="dark"] .menu-windows, 44 | [data-theme="dark"] .kalkulator { 45 | background-color: #202020; 46 | } 47 | 48 | [data-theme="dark"] .whatsapp .wa { 49 | background-image: url(../img/whatsapp-dark.jpg); 50 | } 51 | 52 | [data-theme="dark"] .wa .pesan, 53 | [data-theme="dark"] .whatsapp .content { 54 | background-color: #202D36; 55 | color: #f1f1f1; 56 | } 57 | 58 | [data-theme="dark"] .whatsapp .chat .input-group input, 59 | [data-theme="dark"] .whatsapp .chat .input-group span { 60 | background-color: #2D383E; 61 | } 62 | 63 | [data-theme="dark"] .openfile .list-group .list-group-item { 64 | background-color: #202020; 65 | color: #677F92; 66 | } 67 | 68 | [data-theme="dark"] .openfile .list-group .list-group-item:hover { 69 | background-color: #191919; 70 | } 71 | 72 | [data-theme="dark"] .openfile .list-group-item.open { 73 | background-color: #191919; 74 | border-radius: 25px; 75 | } 76 | 77 | [data-theme="dark"] .openfile ::-webkit-scrollbar-thumb { 78 | background-color: #f1f1f1; 79 | } 80 | 81 | [data-theme="dark"] .openfile .jumbotron { 82 | background-color: #202020; 83 | box-shadow: rgba(0, 0, 0, 0.397) 0px 8px 24px; 84 | color: #f1f1f1; 85 | } 86 | 87 | [data-theme="dark"] .menu-windows input { 88 | color: #f1f1f1; 89 | border-bottom: 2px solid #0467FF; 90 | background-color: #363636; 91 | } 92 | 93 | [data-theme="dark"] .menu-windows .input-group-text { 94 | color: #f1f1f1; 95 | background-color: #363636; 96 | border-bottom: 2px solid #0467FF; 97 | } 98 | 99 | [data-theme="dark"] .menu-windows .name, 100 | [data-theme="dark"] .menu-windows, 101 | [data-theme="dark"] .menu-windows .title { 102 | color: #f1f1f1; 103 | } -------------------------------------------------------------------------------- /css/kalkulator.css: -------------------------------------------------------------------------------- 1 | .kalkulator { 2 | width: 30%; 3 | height: 85%; 4 | position: absolute; 5 | top: 50%; 6 | right: 50%; 7 | margin-top: -300px; 8 | margin-left: -175px; 9 | box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; 10 | background-color: #fff; 11 | transition: all 0.5s ease-in-out; 12 | border-radius: 15px; 13 | visibility: hidden; 14 | } 15 | 16 | .kalkulator.open { 17 | visibility: visible; 18 | } 19 | 20 | .kalkulator .bar-kal { 21 | width: 100%; 22 | height: 40px; 23 | } 24 | 25 | .kalkulator i { 26 | font-size: 15px; 27 | color: #677F92; 28 | } 29 | 30 | .kalkulator .exit-kal i { 31 | cursor: pointer; 32 | position: absolute; 33 | top: 0; 34 | right: 0; 35 | width: 40px; 36 | height: 40px; 37 | line-height: 40px; 38 | text-align: center; 39 | border-radius: 0 15px 0 0; 40 | } 41 | 42 | .kalkulator .exit-kal:hover i { 43 | background-color: #D8383B; 44 | color: #ffffff; 45 | transition: all 0.5s; 46 | } 47 | 48 | .kalkulator .minim-kal i { 49 | cursor: pointer; 50 | position: absolute; 51 | top: 0; 52 | right: 35px; 53 | width: 40px; 54 | height: 40px; 55 | line-height: 40px; 56 | text-align: center; 57 | } 58 | 59 | .kalkulator .minim-kal:hover i { 60 | background-color: #dfdfdf; 61 | transition: all 0.5s; 62 | } 63 | 64 | .engine { 65 | padding: 15px; 66 | border-radius: 10px; 67 | width: 90%; 68 | margin: 0 auto; 69 | background-color: #868997; 70 | display: flex; 71 | flex-direction: column; 72 | justify-self: center; 73 | align-items: center; 74 | } 75 | 76 | .kalkulator .hasil { 77 | background-color: #44D7F8; 78 | border: none; 79 | border-radius: 5px; 80 | color: #868997; 81 | padding: 10px; 82 | width: 100%; 83 | height: 80px; 84 | font-size: 30px; 85 | box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px inset; 86 | } 87 | 88 | .kalkulator .button { 89 | color: #77818A; 90 | font-weight: 600; 91 | border-radius: 5px; 92 | font-size: 20px; 93 | background-color: #C9D2D9; 94 | border: none; 95 | width: 77px; 96 | height: 70px; 97 | margin: 4px; 98 | box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; 99 | } 100 | 101 | .kalkulator .button:hover { 102 | background-color: #b7bbbe; 103 | } 104 | 105 | .kalkulator .blue { 106 | height: 150px; 107 | background-color: #124888; 108 | color: #ffffff; 109 | } 110 | 111 | .kalkulator .blue:hover { 112 | background-color: #123f77; 113 | } 114 | 115 | .kalkulator .null { 116 | width: 160px; 117 | } 118 | 119 | @media only screen and (max-width: 800px) { 120 | .kalkulator { 121 | width: 85%; 122 | height: 70%; 123 | } 124 | 125 | .kalkulator .button { 126 | width: 50px; 127 | height: 50px; 128 | } 129 | 130 | .kalkulator .blue { 131 | height: 110px; 132 | } 133 | 134 | .kalkulator .null { 135 | width: 110px; 136 | } 137 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url(responsive.css); 2 | 3 | @import url(open_file.css); 4 | 5 | @import url(menuwindows.css); 6 | 7 | @import url(whatsapp.css); 8 | 9 | @import url(settings.css); 10 | 11 | @import url(kalkulator.css); 12 | 13 | @import url(trash.css); 14 | 15 | @import url(audio.css); 16 | 17 | * { 18 | padding: 0; 19 | margin: 0; 20 | overflow: hidden; 21 | } 22 | 23 | body { 24 | overflow: hidden; 25 | padding: 0; 26 | margin: 0; 27 | } 28 | 29 | .jumbotron-wallpaper { 30 | padding: 0; 31 | margin: 0; 32 | height: 100vh; 33 | background-image: url(../img/Windows11.jpg); 34 | transition: all 1s ease-in-out; 35 | background-attachment: fixed; 36 | background-position: center center; 37 | background-size: cover; 38 | } 39 | 40 | .navbar { 41 | display: flex; 42 | justify-content: center; 43 | align-items: center; 44 | background-color: #D4DFF3; 45 | height: 40px; 46 | opacity: 95%; 47 | } 48 | 49 | .navbar-brand img { 50 | width: 20px; 51 | } 52 | 53 | .content .btn img { 54 | width: 45px; 55 | } 56 | 57 | .content .btn { 58 | font-size: 10px; 59 | color: #ffffff; 60 | } 61 | 62 | .navbar ul { 63 | height: 40px; 64 | justify-content: center; 65 | align-items: center; 66 | display: flex; 67 | /* line-height: 40px; */ 68 | margin-top: 15px; 69 | } 70 | 71 | .navbar ul li { 72 | width: 40px; 73 | height: 40px; 74 | list-style: none; 75 | margin-left: 5px; 76 | margin-right: 5px; 77 | display: flex; 78 | justify-content: center; 79 | align-items: center; 80 | transition: 0.5s; 81 | } 82 | 83 | .navbar ul li:hover { 84 | background-color: rgb(236, 250, 255); 85 | } 86 | 87 | .navbar ul li .img { 88 | width: 30px; 89 | cursor: pointer; 90 | opacity: 100%; 91 | } 92 | 93 | .navbar ul li label { 94 | margin: 0; 95 | padding: 0; 96 | } 97 | 98 | .navbar ul li.active { 99 | background-color: rgb(236, 250, 255); 100 | } 101 | 102 | .time { 103 | padding: 0; 104 | margin: 0; 105 | position: absolute; 106 | bottom: 0; 107 | right: 10px; 108 | display: flex; 109 | align-items: center; 110 | justify-content: center; 111 | } 112 | 113 | .time h5 { 114 | font-size: 15px; 115 | padding: 0; 116 | margin: 10px; 117 | color: #303030; 118 | } 119 | 120 | .time i { 121 | font-size: 12px; 122 | padding: 0; 123 | margin: 5px; 124 | color: #303030; 125 | cursor: pointer; 126 | } 127 | 128 | .up-drop { 129 | font-size: 12px; 130 | padding: 0; 131 | margin: 5px; 132 | } 133 | 134 | .up-drop i { 135 | color: #303030; 136 | } 137 | 138 | 139 | @media only screen and (max-width: 600px) { 140 | .navbar { 141 | height: 80px; 142 | } 143 | 144 | .navbar ul li { 145 | height: 80px; 146 | } 147 | 148 | .openfile .col-sm-3 { 149 | width: 30%; 150 | } 151 | 152 | .openfile .col-sm-8 { 153 | width: 70%; 154 | } 155 | 156 | .menu-windows { 157 | width: 100%; 158 | height: 110%; 159 | } 160 | 161 | .menu-windows .col-sm-4 { 162 | width: 33.33%; 163 | } 164 | 165 | .time { 166 | display: none; 167 | } 168 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Lock! 15 | 16 | 17 | 21 |
22 | 23 |
24 |

M Iqbal Roni Saputra

25 |

FrontEnd & BackEnd Development

26 |
27 | 28 |
29 | 30 |
31 | 32 | 33 | 34 |
35 |
36 | 37 |
38 |
39 | 42 |
43 | GitHub 44 | Facebook 45 | Instagram 46 | WhatsApp 47 |
48 |
49 | 52 | 55 |
56 |
57 | 58 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /css/whatsapp.css: -------------------------------------------------------------------------------- 1 | .whatsapp { 2 | position: absolute; 3 | top: 46%; 4 | left: 52%; 5 | /* transform: translate(-50%, -50%); */ 6 | width: 46%; 7 | height: 55%; 8 | background-color: #ffffff; 9 | border-radius: 15px; 10 | transition: all 1s ease-in-out; 11 | box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; 12 | visibility: hidden; 13 | overflow: hidden; 14 | margin-top: -250px; 15 | margin-left: -175px; 16 | } 17 | 18 | .whatsapp.active { 19 | visibility: visible; 20 | } 21 | 22 | .whatsapp .bar { 23 | width: 100%; 24 | height: 40px; 25 | } 26 | 27 | .whatsapp i { 28 | font-size: 15px; 29 | color: #677F92; 30 | } 31 | 32 | .whatsapp .exit-wht i { 33 | cursor: pointer; 34 | position: absolute; 35 | top: 0; 36 | right: 0; 37 | width: 40px; 38 | height: 40px; 39 | line-height: 40px; 40 | text-align: center; 41 | border-radius: 0 15px 0 0; 42 | } 43 | 44 | .whatsapp .exit-wht:hover i { 45 | background-color: #D8383B; 46 | color: #ffffff; 47 | transition: all 0.5s; 48 | } 49 | 50 | .whatsapp .show-wht i { 51 | cursor: pointer; 52 | position: absolute; 53 | top: 0; 54 | right: 35px; 55 | width: 40px; 56 | height: 40px; 57 | line-height: 40px; 58 | text-align: center; 59 | display: block; 60 | } 61 | 62 | .whatsapp .show-min-wht i { 63 | cursor: pointer; 64 | position: absolute; 65 | top: 0; 66 | right: 35px; 67 | width: 40px; 68 | height: 40px; 69 | line-height: 40px; 70 | text-align: center; 71 | display: none; 72 | } 73 | 74 | 75 | .whatsapp .show-wht:hover i, 76 | .whatsapp .show-min-wht:hover i { 77 | background-color: #dfdfdf; 78 | transition: all 0.5s; 79 | } 80 | 81 | .whatsapp .minim-wht i { 82 | cursor: pointer; 83 | position: absolute; 84 | top: 0; 85 | right: 75px; 86 | width: 40px; 87 | height: 40px; 88 | line-height: 40px; 89 | text-align: center; 90 | } 91 | 92 | .whatsapp .minim-wht:hover i { 93 | background-color: #dfdfdf; 94 | transition: all 0.5s; 95 | } 96 | 97 | .whatsapp .content { 98 | width: 100%; 99 | height: 60px; 100 | background-color: #085E56; 101 | display: flex; 102 | align-items: center; 103 | color: #ffffff; 104 | justify-content: space-between; 105 | box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; 106 | } 107 | 108 | .whatsapp .wa { 109 | width: 100%; 110 | height: 100%; 111 | border-radius: 0 0 15px 15px; 112 | background-image: url(../img/whatsapp.jpg); 113 | background-size: cover; 114 | /* background-attachment: fixed; */ 115 | } 116 | 117 | .whatsapp .content h4 { 118 | font-size: 20px; 119 | padding-left: 10px; 120 | } 121 | 122 | .whatsapp .bar-menu { 123 | width: 20%; 124 | display: flex; 125 | justify-content: space-around; 126 | } 127 | 128 | .whatsapp .bar-menu i { 129 | color: #ffffff; 130 | } 131 | 132 | .whatsapp .detail { 133 | display: flex; 134 | align-items: center; 135 | } 136 | 137 | .whatsapp .detail img { 138 | width: 30px; 139 | height: 30px; 140 | border-radius: 50%; 141 | margin-left: 10px; 142 | } 143 | 144 | .whatsapp .detail i { 145 | margin-left: 20px; 146 | color: #ffffff; 147 | } 148 | 149 | .wa .pesan { 150 | width: 45%; 151 | background-color: #FFFFFF; 152 | border-radius: 10px; 153 | padding: 10px; 154 | margin: 10px; 155 | box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; 156 | } 157 | 158 | .whatsapp .chat .input-group input { 159 | background-color: #ffffff; 160 | border: none; 161 | } 162 | 163 | .whatsapp .chat .input-group span { 164 | background-color: #ffffff; 165 | border: none; 166 | } 167 | 168 | .whatsapp .chat { 169 | position: absolute; 170 | bottom: 10px; 171 | left: 10px; 172 | width: 100%; 173 | margin: 0 auto; 174 | display: flex; 175 | } 176 | 177 | .whatsapp .chat .input-group { 178 | width: 90%; 179 | box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; 180 | border-radius: 15px; 181 | } 182 | 183 | .whatsapp .chat .input-group .emo { 184 | border-radius: 25px 0 0 25px; 185 | } 186 | 187 | .whatsapp .chat .input-group .cam { 188 | border-radius: 0 25px 25px 0; 189 | } 190 | 191 | .whatsapp .chat .vn { 192 | width: 40px; 193 | height: 40px; 194 | text-align: center; 195 | line-height: 40px; 196 | background-color: #085E56; 197 | margin-left: 5px; 198 | border-radius: 50%; 199 | box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; 200 | } 201 | 202 | .whatsapp .chat .vn i { 203 | color: #FFFFFF; 204 | } 205 | 206 | .reply { 207 | cursor: pointer; 208 | color: blue; 209 | } -------------------------------------------------------------------------------- /css/open_file.css: -------------------------------------------------------------------------------- 1 | .openfile { 2 | position: fixed; 3 | top: 50%; 4 | left: 50%; 5 | /* transform: translate(-50%, -50%); */ 6 | margin-top: -300px; 7 | margin-left: -300px; 8 | width: 50%; 9 | height: 500px; 10 | background-color: #ffffff; 11 | border-radius: 15px; 12 | box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; 13 | visibility: hidden; 14 | transition: all 1s ease-in-out; 15 | } 16 | 17 | .openfile .bar { 18 | width: 100%; 19 | height: 40px; 20 | } 21 | 22 | .openfile.active { 23 | visibility: visible; 24 | } 25 | 26 | .openfile i { 27 | font-size: 15px; 28 | color: #677F92; 29 | } 30 | 31 | .openfile .exit i { 32 | cursor: pointer; 33 | position: absolute; 34 | top: 0; 35 | right: 0; 36 | width: 40px; 37 | height: 40px; 38 | line-height: 40px; 39 | text-align: center; 40 | border-radius: 0 15px 0 0; 41 | } 42 | 43 | .openfile .exit:hover i { 44 | background-color: #D8383B; 45 | color: #ffffff; 46 | transition: all 0.5s; 47 | } 48 | 49 | .openfile .show i { 50 | cursor: pointer; 51 | position: absolute; 52 | top: 0; 53 | right: 35px; 54 | width: 40px; 55 | height: 40px; 56 | line-height: 40px; 57 | text-align: center; 58 | display: block; 59 | } 60 | 61 | .openfile .show-min i { 62 | cursor: pointer; 63 | position: absolute; 64 | top: 0; 65 | right: 35px; 66 | width: 40px; 67 | height: 40px; 68 | line-height: 40px; 69 | text-align: center; 70 | display: none; 71 | } 72 | 73 | .openfile .show:hover i, 74 | .openfile .show-min:hover i { 75 | background-color: #dfdfdf; 76 | transition: all 0.5s; 77 | } 78 | 79 | .openfile .minim i { 80 | cursor: pointer; 81 | position: absolute; 82 | top: 0; 83 | right: 75px; 84 | width: 40px; 85 | height: 40px; 86 | line-height: 40px; 87 | text-align: center; 88 | } 89 | 90 | .openfile .minim:hover i { 91 | background-color: #dfdfdf; 92 | transition: all 0.5s; 93 | } 94 | 95 | .openfile .jumbotron { 96 | border: none; 97 | border-radius: 30px; 98 | opacity: 0; 99 | display: none; 100 | background-color: #ffffff; 101 | border-radius: 15px; 102 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 103 | height: 400px; 104 | overflow-y: scroll; 105 | } 106 | 107 | 108 | 109 | .openfile .img-fluid { 110 | border-radius: 15px; 111 | } 112 | 113 | .openfile .jumbotron:target { 114 | opacity: 1; 115 | display: block; 116 | } 117 | 118 | .openfile .list-group .list-group-item { 119 | background-color: #ffffff; 120 | border-radius: 0; 121 | border: none; 122 | text-decoration: none; 123 | color: #677F92; 124 | transition: 0.5s; 125 | margin: 3px; 126 | } 127 | 128 | .openfile .list-group .list-group-item:hover { 129 | background-color: #dbdbdb; 130 | border-radius: 25px; 131 | color: #677F92; 132 | } 133 | 134 | .openfile .list-group-item.open { 135 | background-color: #eeeeee; 136 | border-radius: 25px; 137 | } 138 | 139 | .openfile ::-webkit-scrollbar { 140 | margin-left: 10px; 141 | width: 5px; 142 | background-color: transparent; 143 | } 144 | 145 | .openfile ::-webkit-scrollbar-thumb { 146 | background-color: #677F92; 147 | border-radius: 50px; 148 | } 149 | 150 | .btn-blue { 151 | background-color: #677F92; 152 | border-radius: 50px; 153 | transition: all 0.5s ease-in-out; 154 | } 155 | 156 | .btn-blue:hover { 157 | transform: scale(1.1); 158 | } 159 | 160 | .openfile .icon { 161 | width: 20px; 162 | margin-right: 5px; 163 | } 164 | 165 | .openfile a { 166 | font-size: 12px; 167 | display: flex; 168 | align-items: center; 169 | justify-content: center; 170 | } 171 | 172 | .openfile .web { 173 | margin: 0 auto; 174 | width: 90%; 175 | display: flex; 176 | justify-content: space-around; 177 | } 178 | 179 | .page { 180 | overflow-y: scroll; 181 | height: 400px; 182 | padding: 20px; 183 | } 184 | 185 | .openfile .dsg { 186 | margin: 0 auto; 187 | width: 90%; 188 | display: flex; 189 | justify-content: space-around; 190 | } 191 | 192 | .openfile .container .box { 193 | width: 40%; 194 | height: auto; 195 | background-color: #ffffff; 196 | border-radius: 15px; 197 | box-shadow: inset rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; 198 | } 199 | 200 | .openfile .container .box img { 201 | padding: 10px; 202 | width: 100%; 203 | border-radius: 15px; 204 | } 205 | 206 | /* alert */ 207 | .openfile .alert h5 { 208 | font-size: 18px; 209 | padding: 0; 210 | margin: 0; 211 | } 212 | 213 | .openfile .alert p { 214 | font-size: 14px; 215 | padding: 0; 216 | margin: 0; 217 | } 218 | 219 | .openfile .icon { 220 | cursor: pointer; 221 | } 222 | 223 | .openfile .nav-link { 224 | background-color: #dbdbdb; 225 | border-radius: 15px; 226 | margin-left: 10px; 227 | color: #677F92; 228 | margin-bottom: 10px; 229 | border: none; 230 | } 231 | 232 | .openfile .nav-link.active { 233 | background-color: #677F92; 234 | color: #dbdbdb; 235 | border-radius: 15px; 236 | margin-left: 10px; 237 | } -------------------------------------------------------------------------------- /index-screen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | IqbalRoni | windows 11 19 | 20 | 21 | 22 | 23 | 27 |
28 |
29 | 44 |
45 |
46 | 47 |
48 |
49 |
50 | 51 |
52 |
53 | 54 |
55 | 56 |
57 |

coming soon

58 | 59 |
60 | 61 |
62 |
63 |
64 | 65 |
66 |
67 | 68 |
69 |
70 | 71 |
72 |
73 | 74 |
75 | 76 | 77 |
78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 |
112 |
113 |
114 | 115 |
116 |
117 |
118 | 119 |
120 |
121 | 122 |
123 |
124 | 125 |
126 |
127 | 128 |
129 |
130 | 176 |
177 | 178 |
179 |
180 |
181 | 182 | 183 | 184 |
185 | 186 |
187 |
188 |

Skill

189 |
190 |
191 |
192 | 193 |
194 |
195 | 196 |
197 |
198 | 199 |
200 |
201 |
202 |
203 | 204 |
205 |
206 | 207 |
208 |
209 | 210 |
211 |
212 |
213 |
214 |
215 |
216 |

Tentang Saya

217 |
218 | Perkenalkan saya M Iqbal Roni Saputra. saya masih berada di sekolah SMKN 1 Bondowoso 219 | jurusan Rekayasa Perangkat Lunak, udah itu aja 220 |
221 |
222 |
223 |
224 |
225 |
226 | 227 |

M Iqbal Roni

228 |
229 |
230 |
231 | 234 |
235 |
236 |
237 | 238 |
239 |
240 |
241 | 242 |
243 |
244 | 245 |
246 |
247 | 248 |
249 |
250 | 251 |
252 |
253 |
254 | 274 |
275 |
276 |
277 |
278 | 288 |
289 |
290 |
291 |
292 |

Fisrt My Portofolio

293 | 294 |

Ini adalah portofolio saya yang pertama di buat dengan bootstrap dan scss. Website ini hanya percobaan 295 | atau belajar membuat frontend. Dan ini adalah website Portofolio saya yang pertama 296 |

297 | 298 |
299 |
300 |

Kalkulator JS

301 | 302 |

Ini adalah website kalkulator di buat dengan vanila css,html dan juga js disini saya belajar cara menghitung 303 | menggunakan js website ini hanya untuk belajar saja. 304 |

305 | 306 |
307 |
308 |

Bot Menulis

309 | 310 |

Bot menulis ini di buat dengan kegabutan yang sangat gabut membuat website menulis dari tulisan ketikan menjadi 311 | tulisan tangan ini berfungsi saat tugas online hwehwehweweh 312 |

313 | 314 |
315 |
316 |

Brain

317 | 318 |

Website adalah website belajar membuat suatu project start up perkerjaan disini saya design website dan juga frontend 319 | developmentnya saya membuat flatdesignnya sendiri tanpa mengambil dari google menggunakan Adobe Ilustrator 320 |

321 | 322 |
323 |
324 |

Get Waves

325 | 326 |

Mencoba menggunakan GetWaves untuk memberikan gelombang gelombang pada website agar tidak terlihat 327 | 328 |

329 | 330 |
331 |
332 |

Design Logo Dan Konten Instagram

333 | 334 |

Membuat Logo dari adobe Ilustrator dan adobe Photoshop dan saya juga mempunyai instagram untuk mengisi kegabutan setiap 335 | hari saya nama akunnya adalah @CodingSkuy jangan luppa follow untuk belajar bersama 336 |

337 | 338 |
339 | 340 |
341 |

Design Logo Dan Konten Instagram

342 | 343 |

Membuat Logo dari adobe Ilustrator dan adobe Photoshop dan saya juga mempunyai instagram untuk mengisi kegabutan setiap 344 | hari saya nama akunnya adalah @CodingSkuy jangan luppa follow untuk belajar bersama 345 |

346 | 347 |
348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 |
356 | 357 |
358 |
359 | 360 |
361 |
362 |
363 |
364 | 365 |
366 |
367 | 368 |
369 |
370 |
371 |
372 | 373 |
374 |
375 |
376 |
377 |
378 |
379 |
380 |
381 | 382 |
383 |
384 | 385 |
386 |
387 |
388 |
389 | 390 |
391 |
392 | 393 |
394 |
395 |
396 |
397 |
398 |
399 |
400 | 413 | 426 | 439 | 452 | 465 | 478 | 491 | 504 |
505 |
506 |
507 |
508 |
509 |
510 | 520 |
521 |
522 |
523 |
524 |
525 |
526 | 536 |
537 |
538 |
539 |
540 |
541 |
542 | 543 | 544 | 548 | 549 | 553 |
554 | 555 | 559 |
560 | 561 | 562 | 600 | 601 | 602 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 641 | 642 | 643 | 644 | 645 | 677 | 678 | --------------------------------------------------------------------------------