Mobile Twitter Log-in Design

Developer
Billy Crist
Size
3,177 Kb
Views
28,336
  1. Mobile Twitter Log-in Design Previews
  2. Mobile Twitter Log-in Design HTML Codes
  3. Mobile Twitter Log-in Design CSS Codes

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
IQ Test

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
Name
A Perfect Minimal iPhone Template
Full Page Vertical Hover Sliders
Hotel Booking ..in progress
A Bouncy Menu Toggle
Re-invented CSS Drop-down Menu
SuprLiTE CSS Arrows
Random Swim Slider
Switches
A Sphere
A Simple, Fashionable, Loader
Create amazing captions 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!