How to design a login page with some effects

Question

0.00/5 (No votes)

See more:

I created a login page with use of html,css and javascript
But it runs only the html code.
I used in notepad++
Runs in chrome as well as firefox
The colour layout animation are not previewed
what should i do?

What I have tried:

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			@import "compass/css3"
			
@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto)
$width: 600px
$height: 320px
$padding: 10px 15px
body
  position: absolute
  left: 0
  top: 0
  width: 100%
  height: 100%
  font-family: 'Roboto', sans-serif
  background-color: #5356ad
  overflow: hidden
.table
  display: table
  width: 100%
  height: 100%
.table-cell
  display: table-cell
  vertical-align: middle
  @include transition(all 0.5s)
.container
  position: relative
  width: $width
  margin: 30px auto 0
  height: $height
  background-color: #999ede
  top: 50%
  margin-top: -160px
  @include transition(all 0.5s)
  .box
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    overflow: hidden
    &:before, &:after
      content: " "
      position: absolute
      left: 152px
      top: 50px
      background-color: #9297e0
      transform: rotateX(52deg) rotateY(15deg) rotateZ(-38deg)
      width: 300px
      height: 285px
      @include transition(all 0.5s)
    &:after
      background-color: #a5aae4
      top: -10px
      left: 80px
      width: 320px
      height: 180px
  .container-forms
    position: relative
  .btn
    cursor: pointer
    text-align: center
    margin: 0 auto
    width: 60px
    color: #fff
    background-color: #ff73b3
    opacity: 1
    @include transition(all 0.5s)
    &:hover
      opacity: 0.7
      
  .btn, input
    padding: $padding
  input
    margin: 0 auto 15px
    display: block
    width: $width/2-80px
    @include transition(all 0.3s)
  .container-forms
    .container-info
      text-align: left
      font-size: 0
      .info-item
        text-align: center
        font-size: 16px
        width: $width/2
        height: $height
        display: inline-block
        vertical-align: top
        color: #fff
        opacity: 1
        @include transition(all 0.3s)
        p
          font-size: 20px
          margin: 20px
        .btn
          background-color: transparent
          border: 1px solid #fff
        .table-cell
          padding-right: 35px
        &:nth-child(2)
          .table-cell
            padding-left: 35px
            padding-right: 0
            
  .container-form
    overflow: hidden
    position: absolute
    left: 30px
    top: -30px
    width: 305px
    height: $height + 60px
    background-color: #fff
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2)
    @include transition(all 0.5s)
    &:before
      content: "✔"
      position: absolute
      left: 160px
      top: -50px
      color: #5356ad
      font-size: 130px
      opacity: 0
      @include transition(all 0.5s)
    .btn
      position: relative
      box-shadow: 0 0 10px 1px #ff73b3
      margin-top: 30px
  .form-item
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    opacity: 1
    @include transition(all 0.5s)
    &.sign-up
      position: absolute
      left: -100%
      opacity: 0
  &.log-in
    .box
      &:before
        position: absolute
        left: 180px
        top: 62px
        height: 265px
      &:after
        top: 22px
        left: 192px
        width: 324px
        height: 220px
    .container-form
      left: 265px
      .form-item
        &.sign-up
          left: 0
          opacity: 1
        &.log-in
          left: -100%
          opacity: 0
  &.active
    width: 260px
    height: 140px
    margin-top: -70px
    .container-form
      left: 30px
      width: 200px
      height: 200px
      &:before
        content: "✔"
        position: absolute
        left: 51px
        top: 5px
        color: #5356ad
        font-size: 130px
        opacity: 1
    input, .btn, .info-item
      display: none
      opacity: 0
      padding: 0px
      margin: 0 auto
      height: 0
    .form-item
      height: 100%
    .container-forms
      .container-info
        .info-item
          height: 0%
          opacity: 0

		</style>
		<script>
			$(".info-item .btn").click(function(){
			  $(".container").toggleClass("log-in");
			});
			$(".container-form .btn").click(function(){
			  $(".container").addClass("active");
			});
		</script>
	</head>
	<body>
		<div class="container">
  <div class="box"></div>
  <div class="container-forms">
    <div class="container-info">
      <div class="info-item">
        <div class="table">
          <div class="table-cell">
            <p>
              Have an account?
            </p>
            <div class="btn">
              Log in
            </div>
          </div>
        </div>
      </div>
      <div class="info-item">
        <div class="table">
          <div class="table-cell">
            <p>
              Don't have an account? 
            </p>
            <div class="btn">
              Sign up
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-form">
      <div class="form-item log-in">
        <div class="table">
          <div class="table-cell">
            <input name="Username" placeholder="Username" type="text" /><input name="Password" placeholder="Password" type="Password" />
            <div class="btn">
              Log in
            </div>
          </div>
        </div>
      </div>
      <div class="form-item sign-up">
        <div class="table">
          <div class="table-cell">
            <input name="email" placeholder="Email" type="text" /><input name="fullName" placeholder="Full Name" type="text" /><input name="Username" placeholder="Username" type="text" /><input name="Password" placeholder="Password" type="Password" />
            <div class="btn">
              Sign up
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
	</body>
</html>

Posted 2-Mar-20 0:29am

Oviya Sivakumar

Updated 2-Mar-20 1:14am

phil.o

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2020-03-02T01:14:00

Solution 1

Start by fixing your CSS. What you've got there looks more like Sass, which needs to be pre-compiled before you can use it in a browser.

Sass: Syntactically Awesome Style Sheets[^]

Posted 2-Mar-20 1:14am

Richard Deeming