A Pen by Joanez Andrades
How do I make an a pen by joanez andrades?
What is a a pen by joanez andrades? How do you make a a pen by joanez andrades? This script and codes were developed by Joanez Andrades on 25 January 2023, Wednesday.
A Pen by Joanez Andrades - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Joanez Andrades</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="pt-br"> <head> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <meta charset="utf-8"> <title>Formulário com 3d</title> </head> <body> <div class="container"> <div class="card"> <section class="signup"> <form> <h2>Novo Usuário</h2> <input type="email" id="account_email" placeholder="E-mail" required> <input type="password" id="account_password" placeholder="Senha" required> <input type="password" id="account_password_confirmation" placeholder="Confirme a senha" required> <button>Cadastrar</button> <div class="bnt-one"> <a href="javascript:;" class="toggle"><span class="link">Fazer Login</span></a> </div> </form> </section> <section class="signin"> <form> <h2>Login</h2> <input type="email" id="user_email" placeholder="E-mail" required /> <input type="password" id="user_password" placeholder="Senha" required /> <button>Entrar</button> <div class="bnt-one"> <span><a class="link" href="javascript:;" class="toggle">Cadastre-se</a></span> </div> </form> </section> </div> </div> </body>
</html> <script src="js/index.js"></script>
</body>
</html>
A Pen by Joanez Andrades - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans);
html, body{ background: linear-gradient(90deg, #EB3349 10%, #F45C43 90%);
}
a{ color: rgba(236, 240, 241,1.0); text-decoration: none; font-size: 1em; font-family: 'Quatrocento Sans', san-serif;
}
h2{ font-family: 'Quattrocento Sans', sans-serif; font-size: 2em; color: #FFF;
}
/* Import de Icons */
.container{ width: 80%; margin: 0 auto; height: auto; perspective: 500px; position: relative;
}
.card{ width: 300px; height: 300px; margin: 0 auto; border-radius: 5px; border: none; position: absolute; transform-style: preserve-3d; transition: transform 1s
}
.card section{ backface-visibility: hidden; border-radius: 5px; position: absolute;
}
.signup{ margin-top: -3em; transform: rotateX(180deg);
}
.card.flipped{ transform: rotateX(180deg);
}
.bnt-one{ width: 100%; height: 3em; margin-top: 1em; text-align: center; color: #FFF;
}
.link{ padding: .3em; text-align: center; border: 2px solid rgba(236, 240, 241, .2); cursor: pointer; transition: 1s;
}
.link:hover{ padding: .3em; text-align: center; border: 2px solid rgba(236, 240, 241, 1); cursor: pointer;
}
form{ width: 100%; padding: 10px;
}
input{ background: rgba(236, 240, 241, 0.1); width: 95%; height: 2em; color: rgba(192, 57, 43, 0.5); border: none; border-radius: 3px; font-size: 1.2em; font-family: 'Quattrocento Sans', sans-serif; display: block; margin: 0.2em; padding: 2px 5px;
}
button{ background:rgba(192, 57, 43, 0.4); width: 100%; height: 3em; border: none; margin: 0.2em; color: rgba(236, 240, 241,1.0); font-size: 1em; font-family: 'Quattrocento Sans', sans-serif; transition: 1s;
}
button:hover{ background: rgba(39, 174, 96,1.0);
}
A Pen by Joanez Andrades - Script Codes JS Codes
$(function ($) { $('section').on('click', 'a', function() { $('.card').toggleClass('flipped'); })
});
Developer | Joanez Andrades |
Username | JoanezAndrades |
Uploaded | January 25, 2023 |
Rating | 3 |
Size | 2,596 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Pricing Table | 5,961 Kb |
Social buttons | 4,881 Kb |
Contact form | 3,090 Kb |
Cover Page | 1,919 Kb |
Slide page simple with jquery | 4,103 Kb |
UIKit - Navs | 1,762 Kb |
Notes with angular-js | 3,697 Kb |
Redesign concept IMDB series page | 11,144 Kb |
Message App Ui | 7,346 Kb |
Slider Animation css3 | 2,527 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Starfield old school style | Bolloxim | 5,214 Kb |
A Pen by Patrick Cox | Pcridesagain | 2,899 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Resume | Rottingroom | 5,483 Kb |
Degree Picker | Idered | 4,307 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Hello People | Danburrows | 2,365 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!