overall
Would you like to react to this message? Create an account in a few clicks or log in to continue.
Search
 
 

Display results as :
 


Rechercher Advanced Search

Log in

I forgot my password

Latest topics
» Patch Notes
by atoyr Sun Oct 04, 2020 8:46 am

» Texture Ranks
by atoyr Wed Sep 23, 2020 7:00 pm

» General Rules and Guidelines
by atoyr Tue Sep 22, 2020 8:22 pm

» Simple CSS3 Login Form
by atoyr Tue Sep 22, 2020 2:25 pm

» How we made the second menu
by atoyr Tue Aug 25, 2020 2:48 am


Simple CSS3 Login Form

Go down

Simple CSS3 Login Form Empty Simple CSS3 Login Form

Post by atoyr on Tue Sep 22, 2020 2:25 pm

Simple CSS3 Login Form Previe10






LetterGuess we need to talk before we start the coding.
Hello everyone and thank you for being here! It's been a month since I've uploaded anything but I came with a simple CSS3 Design. It's mainly done as a source, to see the entire project's CSS and HTML, to learn from it rather than a practice use like using it on forumotion.
If anyone would like that, feel free to use our Troubleshooting Category.







DocumentationLet's see the codes and talk a bit about them.
I want to say that it isn't done special for, forumotion, it can be used anywhere and we will keep the code as it is. We'll show the code below but we will leave the project as well for anyone who'd like to download it and see it themselfs. Since we didn't post in a while, we'll give this one to our guests as well Very Happy

Code:
<html>
<head>
<title>Login</title>

<link rel="stylesheet" href="style.css">

</head>

<body>
<div id="block">
<h1><div class="imgcontainer">
    <img src="https://cdn0.iconfinder.com/data/icons/twitter-21/512/164_Add_Contact_User_Twitter-256.png" alt="Avatar" class="avatar">
  </div></h1>
<div id="form">
<form action="/login?logout" method="post">
  

  <div class="container">
    <p><label for="uname"><b>Username</b></label>
    <input class="holder" type="text" placeholder="Enter Username" name="uname" required></p>

    <p><label for="psw"><b>Password</b></label>
    <input class="holder" type="password" placeholder="Enter Password" name="psw" required></p>

   <span> <button type="submit" class="button" src="/login?logout">Login</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
   </span>
  </div>

  <div class="secondContainer">
   <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>

  </div></div>
</form>
</div>
</body>

</html>

I'd like you to focus more on the CSS that is below, here we only care about Classes and IDs so we can work them. ID's are more favorable for js and classes for CSS but it doesn't matter how you select something, as long as you do it. That's exactly what we try to do, select each part of the code and design it.

Code:
body {
    background: #f48568;
    font-family: Trebuchet MS;
    font-size: 15px;
}

#block {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    width: 30%;
    padding: 40px 0px;
    border-radius: 3px;
    box-shadow: 0 4px 5px #00000033;
}

#block h1 {
    display: block;
    margin-right: 5em;
}

.imgcontainer img{
    width: 64px;
opacity:0.7;
transition:2s;
}

#block:hover .imgcontainer img{
opacity:1;
cursor:pointer;}

input.holder{
    font-family: 'Trebuchet MS';
    border: 1px solid #f48568;
    font-size: 15px;
    padding: 5px 5px;
}
#form label b{
    font-size: 0;
}

.button {
    font-family: Trebuchet MS;
    background: white;
    border: 1px solid #f48568;
    margin: 3px;
    padding: 3px 10px;
    color: #f48568;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
}

.secondContainer{
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #787777;
}

.psw {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    color: #787777;
}

I don't know what to say except the position: flex which plays a big part on this code, and that's why I did it. Using this positioning it allows me to center how I want the entire content of the popup rather than divide them too much.

We didn't use any kind of JS in this code, since it's mostly about CSS3 and only want to cover that in this topic, to help people, design their stuff a bit better. Most of the codes, contain the standard codes for CSS and to make them work properly you have to take care of the HTML as well. The original code for the form I found on Internet, but the make was done by me,adding <p> classes and so on and so forth to customize the standard form to our needs!
Attachments
Simple CSS3 Login Form Attachment
projectcode.zip Project CodeYou don't have permission to download attachments.(2 Kb) Downloaded 0 times
atoyr
atoyr
learning.js
learning.js
Messages : 18
Points : 30
Reputation : 1

View user profile https://atoyr.forumotion.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum