Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title></title>
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="styles.css">
- <style>
- html {
- height: 100vh;
- width: 100vw;
- display: flex;
- }
- * {
- text-transform: uppercase;
- font-family: "Roboto",sans-serif;
- margin: 0;
- top: 0;
- padding: 0;
- box-sizing: border-box;
- white-space: pre-line;
- text-align: center;
- color: white;
- }
- body {
- height: 100%;
- overflow: auto;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- gap: 10px;
- background-color: #f4f4f4;
- position: relative;
- }
- h1 {
- margin: 0;
- }
- mark.green {
- color: #d46220; /*#DCB343;*/
- background:none;
- }
- img {
- max-height: 50vh;
- max-width: 50vw;
- object-fit: scale-down;
- background-color: white;
- border-radius: 80px;
- background: rgb(2,0,36);
- background: linear-gradient(130deg, #f0cb24 0%, rgba(43, 42, 41, 1) 50%, rgba(2,0,36,1) 100%);
- }
- .form__group {
- position: relative;
- padding: 15px 0 0;
- margin-top: 10px;
- width: 50%;
- }
- .form__field {
- font-family: inherit;
- width: 100%;
- border: 0;
- border-bottom: 2px solid #9b9b9b;
- outline: 0;
- font-size: 1.3rem;
- color: #fff;
- padding: 7px 0;
- background: transparent;
- transition: border-color 0.2s;
- }
- .form__field::placeholder {
- color: transparent;
- }
- .form__field:placeholder-shown ~ .form__label {
- font-size: 1.3rem;
- cursor: text;
- top: 20px;
- }
- .form__label {
- position: absolute;
- top: 0;
- display: block;
- transition: 0.2s;
- font-size: 1rem;
- color: #9b9b9b;
- }
- .form__field:focus {
- padding-bottom: 6px;
- border-bottom-width: 3px;
- border-image: linear-gradient(to right, #11998e,#38ef7d);
- border-image-slice: 1;
- }
- /* reset input */
- .form__field{
- &:required,&:invalid { box-shadow:none; }
- }
- /* demo */
- body {
- font-family: 'Poppins', sans-serif;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
- font-size: 1.5rem;
- background-color:#222222;
- }
- </style>
- </head>
- <body>
- <!-- <div class = "circlee"></div> -->
- <div height="100px" style="position: relative; display: flex;">
- <div>
- <div class="form__group field">
- <label for="i1" class="form__label">Volt</label>
- <input type="input" class="form__field" placeholder="Name" id='i1' />
- </div>
- </div>
- <div>
- <div class="form__group field">
- <label for="i2" class="form__label">Gerc</label>
- <input type="input" class="form__field" placeholder="Name" id='i2' />
- </div>
- </div>
- </div>
- <div style="position: relative; display: flex; width: 1000px">
- <div style="flex: 1 0 1; width: 50%;text-align: center;" id = "l1"></div>
- <div style="flex: 1 0 1; width: 50%;text-align: center;" id = "l2" width="500"></div>
- </div>
- </body>
- <script>
- document.getElementById("i1").addEventListener("keypress", function(event) {
- if (event.key !== "Enter")
- return;
- event.preventDefault();
- var txt = document.getElementById("i1").value;
- document.getElementById("l1").append(`${txt} Volt = ${(+txt/0.2).toPrecision(2)} smm\n`);
- });
- document.getElementById("i2").addEventListener("keypress", function(event) {
- if (event.key !== "Enter")
- return;
- event.preventDefault();
- var txt = document.getElementById("i2").value;
- document.getElementById("l2").append(`${txt} Gerc = ${(+txt/150).toPrecision(2)} sm\n`);
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement