From ed2b64d58ed7272302750f8e7913945b582e3731 Mon Sep 17 00:00:00 2001 From: sushant Date: Tue, 18 Jul 2023 16:16:47 +0530 Subject: [PATCH] create a login and sign page for user --- index.html | 6 +- login.html | 74 ++++++++++++++++ signup.html | 0 style.css | 250 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 329 insertions(+), 1 deletion(-) create mode 100644 login.html create mode 100644 signup.html diff --git a/index.html b/index.html index 4104b76..4663f7a 100644 --- a/index.html +++ b/index.html @@ -68,7 +68,11 @@
  • Team
  • Contact
  • Winter - Camp1.0
    • + Camp1.0 +
  • Login
    • + + +
  • Explore
    • diff --git a/login.html b/login.html new file mode 100644 index 0000000..bd61790 --- /dev/null +++ b/login.html @@ -0,0 +1,74 @@ + + + + + + + Document + + + +
    +
    +
    +
    +
    +
    +
    +

    + Have an account? +

    +
    + Log in +
    +
    +
    +
    +
    +
    +
    +

    + Don't have an account? +

    +
    + Sign up +
    +
    +
    +
    +
    +
    + + +
    +
    +
    + + + \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css index f478735..479a457 100644 --- a/style.css +++ b/style.css @@ -1778,3 +1778,253 @@ section { .internship-imgs { border-radius: 5px; } +/* login form */ + +@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto); +body { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + font-family: "Roboto", sans-serif; + background-color: #2979FF; + overflow: hidden; +} + +.table { + display: table; + width: 100%; + height: 100%; +} + +.table-cell { + display: table-cell; + vertical-align: middle; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} + +.container { + position: relative; + width: 600px; + margin: 30px auto 0; + height: 320px; + background-color: #82B1FF; + top: 50%; + margin-top: -160px; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +.container .box { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; +} +.container .box:before, .container .box:after { + content: " "; + position: absolute; + left: 152px; + top: 50px; + background-color:#009688; + transform: rotateX(52deg) rotateY(15deg) rotateZ(-38deg); + width: 300px; + height: 285px; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +.container .box:after { + background-color: #18FFFF; + top: -10px; + left: 80px; + width: 320px; + height: 180px; +} +.container .container-forms { + position: relative; +} +.container .btn { + cursor: pointer; + text-align: center; + margin: 0 auto; + width: 60px; + color: #fff; + background-color: #03A9F4; + opacity: 1; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +.container .btn:hover { + opacity: 0.7; +} +.container .btn, .container input { + padding: 10px 15px; +} +.container input { + margin: 0 auto 15px; + display: block; + width: 220px; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -webkit-transition: all 0.3s; + transition: all 0.3s; +} +.container .container-forms .container-info { + text-align: left; + font-size: 0; +} +.container .container-forms .container-info .info-item { + text-align: center; + font-size: 16px; + width: 300px; + height: 320px; + display: inline-block; + vertical-align: top; + color: #fff; + opacity: 1; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -webkit-transition: all 0.3s; + transition: all 0.3s; +} +.container .container-forms .container-info .info-item p { + font-size: 20px; + margin: 20px; +} +.container .container-forms .container-info .info-item .btn { + background-color: transparent; + border: 1px solid #fff; +} +.container .container-forms .container-info .info-item .table-cell { + padding-right: 35px; +} +.container .container-forms .container-info .info-item:nth-child(2) .table-cell { + padding-left: 35px; + padding-right: 0; +} +.container .container-form { + overflow: hidden; + position: absolute; + left: 30px; + top: -30px; + width: 305px; + height: 380px; + background-color: #fff; + box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2); + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +.container .container-form:before { + content: "✔"; + position: absolute; + left: 160px; + top: -50px; + color: #5356ad; + font-size: 130px; + opacity: 0; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +.container .container-form .btn { + position: relative; + box-shadow: 0 0 10px 1px #18FFFF; + margin-top: 30px; +} +.container .form-item { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 1; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +.container .form-item.sign-up { + position: absolute; + left: -100%; + opacity: 0; +} +.container.log-in .box:before { + position: absolute; + left: 180px; + top: 62px; + height: 265px; +} +.container.log-in .box:after { + top: 22px; + left: 192px; + width: 324px; + height: 220px; +} +.container.log-in .container-form { + left: 265px; +} +.container.log-in .container-form .form-item.sign-up { + left: 0; + opacity: 1; +} +.container.log-in .container-form .form-item.log-in { + left: -100%; + opacity: 0; +} +.container.active { + width: 260px; + height: 140px; + margin-top: -70px; +} +.container.active .container-form { + left: 30px; + width: 200px; + height: 200px; +} +.container.active .container-form:before { + content: "✔"; + position: absolute; + left: 51px; + top: 5px; + color: #5356ad; + font-size: 130px; + opacity: 1; +} +.container.active input, .container.active .btn, .container.active .info-item { + display: none; + opacity: 0; + padding: 0px; + margin: 0 auto; + height: 0; +} +.container.active .form-item { + height: 100%; +} +.container.active .container-forms .container-info .info-item { + height: 0%; + opacity: 0; +} + +.rabbit { + width: 50px; + height: 50px; + position: absolute; + bottom: 20px; + right: 20px; + z-index: 3; + fill: #fff; +}