IT2 - Vault

Developer
Samuel
Size
2,673 Kb
Views
20,240
  1. IT2 - Vault Previews
  2. IT2 - Vault HTML Codes
  3. IT2 - Vault CSS Codes
  4. IT2 - Vault JS Codes

How do I make an it2 - vault?

What is a it2 - vault? How do you make a it2 - vault? This script and codes were developed by Samuel on 10 November 2022, Thursday.

IT2 - Vault Previews
IQ Test

IT2 - Vault - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>IT2 - Vault</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <section> <div id="buttons"> <button id="open">Open Safe</button> <button id="close">Close Safe</button> </div> <div id="door"> <div id="rad"></div> </div> <iframe src="https://www.youtube.com/embed/TVbrpJ13emo" allowfullscreen></iframe> </section>
</main> <script src="js/index.js"></script>
</body>
</html>

IT2 - Vault - Script Codes CSS Codes

/* html & body */
html, body { height: 100%; overflow: hidden;
}
body { background: #262626; font-family: 'Helvetica Neue', sans-serif; font-size: 62.5%;
}
/* main */
main { height: inherit; width: 1440px;
}
button { background: #1c1c1c; border: 0; box-shadow: inset 0 -4px 0 0 #79bd8f; color: #ccc; font-weight: 100; letter-spacing: 0.1em; margin: 30px 0 0 598px; padding: 20px; text-transform: uppercase; -webkit-transition: background-color 1s; transition: background-color 1s;
}
button:hover { background: #79bd8f;
}
button#close { box-shadow: inset 0 -4px 0 0 #bd4932; margin-left: 15px;
}
button#close:hover { background: #bd4932;
}
button:focus { outline: 0;
}
section { background-image: url('https://i.imgsafe.org/002b864dbc.png'); background-position: left 80px; background-repeat: no-repeat; background-size: 1440px 600px; height: 600px; margin: -325px auto 0 auto; position: relative; top: 50%; width: inherit;
}
div { background-position: center center; background-repeat: no-repeat; background-size: contain;
}
div#door { background-image: url('https://i.imgsafe.org/002b90dcbf.png'); height: 466px; top: 145px; left: 435px; position: absolute; width: 550px;
}
div#rad { background-image: url('https://i.imgsafe.org/002b979586.png'); height: 460px; margin-left: 180px; width: 225px;
}
iframe { height: 231px; margin: 180px 0 0 515px; width: 410px;
}
/* query */
@media screen and (max-width: 726px) { section { -webkit-transform: scale(0.6); transform: scale(0.6); }
}

IT2 - Vault - Script Codes JS Codes

function main() { var buttons = document.getElementsByTagName("button") var door = document.getElementById("door"); var rad = document.getElementById("rad"); for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = function() { if (this.innerHTML === "Open Safe") { door.style.transition = "left 2s ease-in-out"; door.style.transitionDelay = "1.5s"; door.style.left = "-40px"; rad.style.transition = "transform 1.5s ease-in-out"; rad.style.transform = "rotate(360deg)"; } else if (this.innerHTML === "Close Safe") { door.style.transition = "left 2s ease-in-out"; door.style.left = "435px"; rad.style.transition = "transform 1.5s ease-in-out"; rad.style.transitionDelay = "2s"; rad.style.transform = "rotate(0)"; } } } function fluid() { var main = document.getElementsByTagName('main')[0]; var cal = (window.innerWidth - 1440) / 2; main.style.transform = 'translateX(' + cal + 'px)'; } fluid(); window.onresize = function() { fluid(); }
}
window.onload = function() { main();
}
IT2 - Vault - Script Codes
IT2 - Vault - Script Codes
Home Page Home
Developer Samuel
Username SamuelVDP
Uploaded November 10, 2022
Rating 3
Size 2,673 Kb
Views 20,240
Do you need developer help for IT2 - Vault?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Samuel (SamuelVDP) Script Codes
Name
CMT3 - Herhalingsoefening 03
IT2 - Record Player
CMT3 - Opdracht 06 - Isotope
IT3 - Opdracht 04 - Responsive Weekplanner
CMT3 - Herhalingsoefening 02
IT3 - Opdracht 03 - FreshCotton
IT3 - Opdracht 09 - RellaxJS
IT3 - Opdracht 06 - PureCSS
IT3 - Opdracht 05 - Battery API
CMT3 - Herhalingsoefening 01
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!