Mobile Twitter Log-in Design

Developer
Size
3,177 Kb
Views
28,336

How do I make an mobile twitter log-in design?

What is a mobile twitter log-in design? How do you make a mobile twitter log-in design? This script and codes were developed by Billy Crist on 04 October 2022, Tuesday.

Mobile Twitter Log-in Design Previews

Mobile Twitter Log-in Design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile Twitter Log-in Design</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='screen'> <img class='logo' src='https://s.cdpn.io/15065/twitter-bird-dark-bgs.png' /> <form action='' class='login cf'> <p class='large'>Welcome</p> <input type='text' placeholder='Username or Email' autofocus /> <input type='password' placeholder='Password' /> <a class='small flo-l' href=''>Did you forget?</a> <div class='flo-r cf'> <input class='flo-l' type='checkbox' id='remember-me' /> <label class='small flo-l' for='remember-me'>Remember me</label> </div> <div class='signup-link flo-l clr-l'> <p class='small'>New to Twitter?</p> <a class='medium' href=''>Sign Up</a> </div> <input class='flo-r' type='submit' value='Sign In' /> </form>
</div>
</body>
</html>

Mobile Twitter Log-in Design - Script Codes CSS Codes

* { margin: 0; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box;
}
a { text-decoration: none;
}
a:hover { text-decoration: underline;
}
.flo-l { float: left;
}
.flo-r { float: right;
}
.clr-b { clear: both;
}
.clr-l { clear: left;
}
.cf { overflow: hidden;
}
input[type='submit'],
input[type='checkbox'],
input[type='checkbox'] + label { cursor: pointer;
}
body, html { height: 100%; width: 100%;
}
body { background: lightgray; font-family: sans-serif;
}
.screen { position: relative; background: #252525; margin: 0 auto; width: 100%; max-width: 320px; min-width: 295px; height: 100%; max-height: 515px; min-height: 480px;
}
.logo { display: block; position: relative; width: 70%; margin: 0 auto;
}
.small { font-size: 0.72em; color: #666666;
}
label.small:hover { color: gray;
}
.large { color: #fff; font-size: 1.3em; line-height: 1em; font-family: Georgia, serif; font-weight: 700; margin-bottom: 0.6em;
}
.medium { font-size: 0.8em; color: #999999;
}
.medium:hover { color: #b3b3b3;
}
.signup-link { margin-top: 1.4em;
}
.login { position: absolute; bottom: 0; width: 100%; padding: 0 1.5em 1.5em;
}
.login input[type='text'],
.login input[type='password'] { width: 100%; margin-bottom: 1.5em; border: 0; border-radius: 3px; height: 2.2em; font-size: 1.2em; color: #666666; padding-left: 0.5em;
}
.login input[type='password'] { margin-bottom: 0.7em;
}
.login input[type='submit'] { margin-top: 0.7em; background: #00A0D1; background: linear-gradient(#00aade, #0096c4); border-radius: 3px; border: 0; height: 2em; color: #fff; font-family: Georgia, serif; font-size: 1.3em; font-weight: 700; padding: 0 0.5em;
}
.login input[type='submit']:hover { background: linear-gradient(#00bdf7, #00aade);
}
.login label.small { padding-left: 0.5em;
}
Mobile Twitter Log-in Design - Script Codes
Mobile Twitter Log-in Design - Script Codes
Home Page Home
Developer Billy Crist
Username billyysea
Uploaded October 04, 2022
Rating 3
Size 3,177 Kb
Views 28,336
Do you need developer help for Mobile Twitter Log-in Design?

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!

Billy Crist (billyysea) Script Codes
Create amazing blog posts with AI!

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!