diff --git a/index.html b/index.html index 1e2f1127..0b550ac7 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,6 @@ - @@ -40,13 +39,194 @@ color: rgb(249, 245, 245); border-radius: 8px; } +input[type=text], input[type=password] { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + box-sizing: border-box; +} + +/* Set a style for all buttons */ +button { + background-color: #04AA6D; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + cursor: pointer; + width: 100%; +} + +button:hover { + opacity: 0.8; +} + +/* Extra styles for the cancel button */ +.cancelbtn { + width: auto; + padding: 10px 18px; + background-color: #f44336; +} + +/* Center the image and position the close button */ +.imgcontainer { + text-align: center; + margin: 24px 0 12px 0; + position: relative; +} + +img.avatar { + width: 40%; + border-radius: 50%; +} + +.container { + padding: 16px; +} + +span.psw { + float: right; + padding-top: 16px; +} + +/* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + padding-top: 60px; +} + +/* Modal Content/Box */ +.modal-content { + background-color: #fefefe; + margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ + border: 1px solid #888; + width: 80%; /* Could be more or less, depending on screen size */ +} + +/* The Close Button (x) */ +.close { + position: absolute; + right: 25px; + top: 0; + color: #000; + font-size: 35px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: red; + cursor: pointer; +} + +/* Add Zoom Animation */ +.animate { + -webkit-animation: animatezoom 0.6s; + animation: animatezoom 0.6s +} + +@-webkit-keyframes animatezoom { + from {-webkit-transform: scale(0)} + to {-webkit-transform: scale(1)} +} + +@keyframes animatezoom { + from {transform: scale(0)} + to {transform: scale(1)} +} + +/* Change styles for span and cancel button on extra small screens */ +@media screen and (max-width: 300px) { + span.psw { + display: block; + float: none; + } + .cancelbtn { + width: 100%; + } +} +input[type=text], input[type=password] { + width: 100%; + padding: 15px; + margin: 5px 0 22px 0; + display: inline-block; + border: none; + background: #f1f1f1; +} + +input[type=text]:focus, input[type=password]:focus { + background-color: #ddd; + outline: none; +} + +hr { + border: 1px solid #f1f1f1; + margin-bottom: 25px; +} + +/* Set a style for all buttons */ +button { + background-color: #04AA6D; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + cursor: pointer; + width: 100%; + opacity: 0.9; +} + +button:hover { + opacity:1; +} + +/* Extra styles for the cancel button */ +.cancelbtn { + padding: 14px 20px; + background-color: #f44336; +} + +/* Float cancel and signup buttons and add an equal width */ +.cancelbtn, .signupbtn { + float: left; + width: 50%; +} + +/* Add padding to container elements */ +.container { + padding: 16px; +} + +/* Clear floats */ +.clearfix::after { + content: ""; + clear: both; + display: table; +} + +/* Change styles for cancel button and signup button on extra small screens */ +@media screen and (max-width: 300px) { + .cancelbtn, .signupbtn { + width: 100%; + } +} - - + @@ -84,7 +264,8 @@

RapiDoc

  • Contact
    • - + + EMERGENCY @@ -94,7 +275,64 @@

    RapiDoc

    +

    Login Form

    + + + + + +
    +
    +

    Sign Up

    +

    Please fill in this form to create an account.

    +
    + + + + + + + + + + + + +

    By creating an account you agree to our Terms & Privacy.

    + +
    + + +
    +
    +

    Welcome to RapiDoc

    @@ -630,5 +868,15 @@

    Daily Newsletter

    var element = document.body; element.classList.toggle("dark-mode"); } + +// Get the modal +var modal = document.getElementById('id01'); + +// When the user clicks anywhere outside of the modal, close it +window.onclick = function(event) { + if (event.target == modal) { + modal.style.display = "none"; + } +} diff --git a/style.css b/style.css index 6dbaf105..6cc8cbce 100644 --- a/style.css +++ b/style.css @@ -1200,3 +1200,20 @@ section { visibility: visible; opacity: 1; } +.container { + padding: 16px; +} + +span.psw { + float: right; + padding-top: 16px; +} +@media screen and (max-width: 300px) { + span.psw { + display: block; + float: none; + } + .cancelbtn { + width: 100%; + } +} \ No newline at end of file