Skip to content
No results
  • Home
  • Quizzes
    • HTML Quiz
    • CSS Quiz
    • JavaScript Quiz
  • HTML & CSS
    • Card Designs
    • Navbars
    • Login Forms
  • JavaScript
    • JavaScript Games
    • API Projects
  • Web Development
    • Frontend
    • Backend
  • Interview Questions
  • Home
  • About us
  • Contact Us
  • Privacy Policy
Twitter Instagram Telegram Pinterest
Coding Torque

Learn by projectsšŸš€

  • Home
  • Quizzes
    • HTML Quiz
    • CSS Quiz
    • JavaScript Quiz
  • HTML & CSS
    • Card Designs
    • Navbars
    • Login Forms
  • JavaScript
    • JavaScript Games
    • API Projects
  • Web Development
    • Frontend
    • Backend
  • Interview Questions
Coding Torque

Learn by projectsšŸš€

prismatic authentication forms using html, css and javascript

Prismatic Forms using HTML, CSS and JavaScript

  • Piyush PatilPiyush Patil
  • February 18, 2023
  • HTML & CSS, JavaScript, Login Forms, Web Development
Share your love
Welcome to Coding Torque! Today, we’re going to take your coding skills to the next level by creating a stunning Prismatic Form using HTML, CSS and JavaScript. This is an amazing card that you won’t want to miss out on – so let’s get started!

Before we start, here are some cards you might like to create:

  • Filter Cards using JavaScript
  • Animated Product Card using JavaScript
  • Profile Cards Hover Effect using HTML & CSS

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML CodeĀ 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome CDN  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Prismatic Forms using HTML CSS and JavaScript - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your <body> tag.

<ul class="nav">
    <li onclick="showLogin()">Login</li>
    <li onclick="showSignup()">Sign up</li>
    <li onclick="showForgotPassword()">Forgot password</li>
    <li onclick="showSubscribe()">Subscribe</li>
    <li onclick="showContactUs()">Contact us</li>
</ul>
<div class="wrapper">
    <div class="rec-prism">
        <div class="face face-top">
            <div class="content">
                <h2>Subscribe</h2>
                <small>Enter your email so we can send you the latest updates!</small>
                <form onsubmit="event.preventDefault()">
                    <div class="field-wrapper">
                        <input type="text" name="email" placeholder="email">
                        <label>e-mail</label>
                    </div>
                    <div class="field-wrapper">
                        <input type="submit" onclick="showThankYou()">
                    </div>
                </form>
            </div>
        </div>
        <div class="face face-front">
            <div class="content">
                <h2>Sign in</h2>
                <form onsubmit="event.preventDefault()">
                    <div class="field-wrapper">
                        <input type="text" name="username" placeholder="username">
                        <label>username</label>
                    </div>
                    <div class="field-wrapper">
                        <input type="password" name="password" placeholder="password" autocomplete="new-password">
                        <label>password</label>
                    </div>
                    <div class="field-wrapper">
                        <input type="submit" onclick="showThankYou()">
                    </div>
                    <span class="psw" onclick="showForgotPassword()">Forgot Password? </span>
                    <span class="signup" onclick="showSignup()">Not a user? Sign up</span>
                </form>
            </div>
        </div>
        <div class="face face-back">
            <div class="content">
                <h2>Forgot your password?</h2>
                <small>Enter your email so we can send you a reset link for your password</small>
                <form onsubmit="event.preventDefault()">
                    <div class="field-wrapper">
                        <input type="text" name="email" placeholder="email">
                        <label>e-mail</label>
                    </div>
                    <div class="field-wrapper">
                        <input type="submit" onclick="showThankYou()">
                    </div>
                </form>
            </div>
        </div>
        <div class="face face-right">
            <div class="content">
                <h2>Sign up</h2>
                <form onsubmit="event.preventDefault()">
                    <div class="field-wrapper">
                        <input type="text" name="email" placeholder="email">
                        <label>e-mail</label>
                    </div>
                    <div class="field-wrapper">
                        <input type="password" name="password" placeholder="password" autocomplete="new-password">
                        <label>password</label>
                    </div>
                    <div class="field-wrapper">
                        <input type="password" name="password2" placeholder="password" autocomplete="new-password">
                        <label>re-enter password</label>
                    </div>
                    <div class="field-wrapper">
                        <input type="submit" onclick="showThankYou()">
                    </div>
                    <span class="singin" onclick="showLogin()">Already a user? Sign in</span>
                </form>
            </div>
        </div>
        <div class="face face-left">
            <div class="content">
                <h2>Contact us</h2>
                <form onsubmit="event.preventDefault()">
                    <div class="field-wrapper">
                        <input type="text" name="name" placeholder="name">
                        <label>Name</label>
                    </div>
                    <div class="field-wrapper">
                        <input type="text" name="email" placeholder="email">
                        <label>e-mail</label>
                    </div>
                    <div class="field-wrapper">
                        <textarea placeholder="your message"></textarea>
                        <label>your message</label>
                    </div>
                    <div class="field-wrapper">
                        <input type="submit" onclick="showThankYou()">
                    </div>
                </form>
            </div>
        </div>
        <div class="face face-bottom">
            <div class="content">
                <div class="thank-you-msg">
                    Thank you!
                </div>
            </div>
        </div>
    </div>
</div>

Output Till Now

CSS CodeĀ 

Create a fileĀ style.css and paste the code below.

* {
  box-sizing: border-box;
}
body {
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  font-size: 14px;
  background: #f6fffd;
  padding: 20px;
  text-align: center;
}
.wrapper {
  width: 250px;
  height: 350px;
  margin: 60px auto;
  perspective: 600px;
  text-align: left;
}
.rec-prism {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 0.5s ease-in;
}
.face {
  position: absolute;
  width: 250px;
  height: 350px;
  padding: 20px;
  background: rgba(250, 250, 250, 0.96);
  border: 3px solid #07ad90;
  border-radius: 3px;
}
.face .content {
  color: #666;
}
.face .content h2 {
  font-size: 1.2em;
  color: #07ad90;
}
.face .content .field-wrapper {
  margin-top: 30px;
  position: relative;
}
.face .content .field-wrapper label {
  position: absolute;
  pointer-events: none;
  font-size: 0.85em;
  top: 40%;
  left: 0;
  transform: translateY(-50%);
  transition: all ease-in 0.25s;
  color: #999;
}
.face .content .field-wrapper input[type="text"],
.face .content .field-wrapper input[type="password"],
.face .content .field-wrapper input[type="submit"],
.face .content .field-wrapper textarea {
  -webkit-appearance: none;
  appearance: none;
}
.face .content .field-wrapper input[type="text"]:focus,
.face .content .field-wrapper input[type="password"]:focus,
.face .content .field-wrapper input[type="submit"]:focus,
.face .content .field-wrapper textarea:focus {
  outline: none;
}
.face .content .field-wrapper input[type="text"],
.face .content .field-wrapper input[type="password"],
.face .content .field-wrapper textarea {
  width: 100%;
  border: none;
  background: transparent;
  line-height: 2em;
  border-bottom: 1px solid #07ad90;
  color: #666;
}
.face .content .field-wrapper input[type="text"]::-webkit-input-placeholder,
.face .content .field-wrapper input[type="password"]::-webkit-input-placeholder,
.face .content .field-wrapper textarea::-webkit-input-placeholder {
  opacity: 0;
}
.face .content .field-wrapper input[type="text"]::-moz-placeholder,
.face .content .field-wrapper input[type="password"]::-moz-placeholder,
.face .content .field-wrapper textarea::-moz-placeholder {
  opacity: 0;
}
.face .content .field-wrapper input[type="text"]:-ms-input-placeholder,
.face .content .field-wrapper input[type="password"]:-ms-input-placeholder,
.face .content .field-wrapper textarea:-ms-input-placeholder {
  opacity: 0;
}
.face .content .field-wrapper input[type="text"]:-moz-placeholder,
.face .content .field-wrapper input[type="password"]:-moz-placeholder,
.face .content .field-wrapper textarea:-moz-placeholder {
  opacity: 0;
}
.face .content .field-wrapper input[type="text"]:focus + label,
.face .content .field-wrapper input[type="password"]:focus + label,
.face .content .field-wrapper textarea:focus + label,
.face
  .content
  .field-wrapper
  input[type="text"]:not(:placeholder-shown)
  + label,
.face
  .content
  .field-wrapper
  input[type="password"]:not(:placeholder-shown)
  + label,
.face .content .field-wrapper textarea:not(:placeholder-shown) + label {
  top: -35%;
  color: #42509e;
}
.face .content .field-wrapper input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 100%;
  background: #07ad90;
  line-height: 2em;
  color: #fff;
  border: 1px solid #07ad90;
  border-radius: 3px;
  padding: 5px;
}
.face .content .field-wrapper input[type="submit"]:hover {
  opacity: 0.9;
}
.face .content .field-wrapper input[type="submit"]:active {
  transform: scale(0.96);
}
.face .content .field-wrapper textarea {
  resize: none;
  line-height: 1em;
}
.face .content .field-wrapper textarea:focus + label,
.face .content .field-wrapper textarea:not(:placeholder-shown) + label {
  top: -25%;
}
.face .thank-you-msg {
  position: absolute;
  width: 200px;
  height: 130px;
  text-align: center;
  font-size: 2em;
  color: #07ad90;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
}
.face .thank-you-msg:after {
  position: absolute;
  content: "";
  width: 50px;
  height: 25px;
  border: 10px solid #07ad90;
  border-right: 0;
  border-top: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(0);
  transform: translate(-50%, -50%) rotate(0deg) scale(0);
  -webkit-animation: success ease-in 0.15s forwards;
  animation: success ease-in 0.15s forwards;
  animation-delay: 2.5s;
}
.face-front {
  transform: rotateY(0deg) translateZ(125px);
}
.face-top {
  height: 250px;
  transform: rotateX(90deg) translateZ(125px);
}
.face-back {
  transform: rotateY(180deg) translateZ(125px);
}
.face-right {
  transform: rotateY(90deg) translateZ(125px);
}
.face-left {
  transform: rotateY(-90deg) translateZ(125px);
}
.face-bottom {
  height: 250px;
  transform: rotateX(-90deg) translateZ(225px);
}
.nav {
  margin: 20px 0;
  padding: 0;
}
.nav li {
  display: inline-block;
  list-style-type: none;
  font-size: 1em;
  margin: 0 10px;
  color: #42509e;
  position: relative;
  cursor: pointer;
}
.nav li:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  border-bottom: 1px solid #42509e;
  transition: all ease-in 0.25s;
}
.nav li:hover:after {
  width: 100%;
}
.psw,
.signup,
.singin {
  display: block;
  margin: 20px 0;
  font-size: 0.75em;
  text-align: center;
  color: #42509e;
  cursor: pointer;
}
small {
  font-size: 0.7em;
}
@-webkit-keyframes success {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(0) scale(0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg) scale(1);
  }
}

Output Till Now

prismatic authentication forms using html, css and javascript

JavaScript CodeĀ 

Create a fileĀ script.js and paste the code below.

let prism = document.querySelector(".rec-prism");

function showSignup() {
    prism.style.transform = "translateZ(-100px) rotateY( -90deg)";
}
function showLogin() {
    prism.style.transform = "translateZ(-100px)";
}
function showForgotPassword() {
    prism.style.transform = "translateZ(-100px) rotateY( -180deg)";
}

function showSubscribe() {
    prism.style.transform = "translateZ(-100px) rotateX( -90deg)";
}

function showContactUs() {
    prism.style.transform = "translateZ(-100px) rotateY( 90deg)";
}

function showThankYou() {
    prism.style.transform = "translateZ(-100px) rotateX( 90deg)";
}
Written by: Piyush Patil
Credits:Ā @nourabusoud
If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpfulšŸ’–

Share your love
smartwatch product card using html and css
Previous Post Smartwatch Product Card using HTML and CSS
Next Post Product Card with floating effect using HTML and CSS
product card with floating effect using html and css
Recent Posts
  • Synonyms Search App using HTML CSS and JavaScript

    Synonyms Search App using HTML CSS and JavaScript

    August 22, 2023
  • Rounded Edges Sliding Panels using HTML and CSS

    Rounded Edges Sliding Panels using HTML and CSS

    August 21, 2023
  • Amazing Carousel using HTML CSS & JavaScript

    Amazing Carousel using HTML CSS & JavaScript

    August 20, 2023
  • Marquee Like Content Scrolling using HTML CSS and JavaScript

    Marquee Like Content Scrolling using HTML CSS and JavaScript

    August 19, 2023
  • Bottle Product Carousel using HTML CSS and JavaScript

    Bottle Product Carousel using HTML CSS and JavaScript

    August 18, 2023
Categories
Advance Algorithms API Projects App Development Backend Beginner Blockchain Development Bootstrap Card Designs Cheatsheets Coding CSS Games CSS Quiz Express JS Frontend HTML & CSS HTML Quiz Intermediate Interview Questions JavaScript JavaScript Games JavaScript Quiz Login Forms MongoDB Navbars Node JS Products Programming Quizzes React React Quiz Reel Roadmaps SCSS TailwindCSS Uncategorized Web Design Web Development

Related Posts

Synonyms Search App using HTML CSS and JavaScript

  • August 22, 2023

Rounded Edges Sliding Panels using HTML and CSS

  • August 21, 2023

Amazing Carousel using HTML CSS & JavaScript

  • August 20, 2023
About Us

Coding Torque is a platform where we share amazing projects related Web development, App development, Software development, etc with Source Code.

Important Links
  • About us
  • Contact Us
  • Privacy Policy
Categories
Advance Algorithms API Projects App Development Backend Beginner Blockchain Development Bootstrap Card Designs Cheatsheets Coding CSS Games CSS Quiz Express JS Frontend HTML & CSS HTML Quiz Intermediate Interview Questions JavaScript JavaScript Games JavaScript Quiz Login Forms MongoDB Navbars Node JS Products Programming Quizzes React React Quiz Reel Roadmaps SCSS TailwindCSS Uncategorized Web Design Web Development

Copyright Ā© 2023 - Coding Torque | Design by Piyush Patil

Twitter Instagram Telegram Pinterest