Building Responsive Forms With Flexbox

Developer
Envato Tuts+
Size
2,474 Kb
Views
54,648
  1. Building Responsive Forms With Flexbox Previews
  2. Building Responsive Forms With Flexbox HTML Codes
  3. Building Responsive Forms With Flexbox CSS Codes

How do I make an building responsive forms with flexbox?

Read the full tutorial on Envato Tuts+.. What is a building responsive forms with flexbox? How do you make a building responsive forms with flexbox? This script and codes were developed by Envato Tuts+ on 28 July 2022, Thursday.

Building Responsive Forms With Flexbox Previews
IQ Test

Building Responsive Forms With Flexbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Building Responsive Forms With Flexbox</title> <link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <form> <ul class="flex-outer"> <li> <label for="first-name">First Name</label> <input type="text" id="first-name" placeholder="Enter your first name here"> </li> <li> <label for="last-name">Last Name</label> <input type="text" id="last-name" placeholder="Enter your last name here"> </li> <li> <label for="email">Email</label> <input type="email" id="email" placeholder="Enter your email here"> </li> <li> <label for="phone">Phone</label> <input type="tel" id="phone" placeholder="Enter your phone here"> </li> <li> <label for="message">Message</label> <textarea rows="6" id="message" placeholder="Enter your message here"></textarea> </li> <li> <p>Age</p> <ul class="flex-inner"> <li> <input type="checkbox" id="twenty-to-twentynine"> <label for="twenty-to-twentynine">20-29</label> </li> <li> <input type="checkbox" id="thirty-to-thirtynine"> <label for="thirty-to-thirtynine">30-39</label> </li> <li> <input type="checkbox" id="fourty-to-fourtynine"> <label for="fourty-to-fourtynine">40-49</label> </li> <li> <input type="checkbox" id="fifty-to-fiftynine"> <label for="fifty-to-fiftynine">50-59</label> </li> <li> <input type="checkbox" id="sixty-to-sixtynine"> <label for="sixty-to-sixtynine">60-69</label> </li> <li> <input type="checkbox" id="other"> <label for="other">Other</label> </li> </ul> </li> <li> <button type="submit">Submit</button> </li> </ul> </form>
</div>
</body>
</html>

Building Responsive Forms With Flexbox - Script Codes CSS Codes

body { font: normal 18px/1.5 "Fira Sans", "Helvetica Neue", sans-serif; background: #3AAFAB; color: #fff; padding: 50px 0;
}
.container { width: 80%; max-width: 1200px; margin: 0 auto;
}
.container * { box-sizing: border-box;
}
.flex-outer,
.flex-inner { list-style-type: none; padding: 0;
}
.flex-outer { max-width: 800px; margin: 0 auto;
}
.flex-outer li,
.flex-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.flex-inner { padding: 0 8px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.flex-outer > li:not(:last-child) { margin-bottom: 20px;
}
.flex-outer li label,
.flex-outer li p { padding: 8px; font-weight: 300; letter-spacing: .09em; text-transform: uppercase;
}
.flex-outer > li > label,
.flex-outer li p { -webkit-box-flex: 1; -ms-flex: 1 0 120px; flex: 1 0 120px; max-width: 220px;
}
.flex-outer > li > label + *,
.flex-inner { -webkit-box-flex: 1; -ms-flex: 1 0 220px; flex: 1 0 220px;
}
.flex-outer li p { margin: 0;
}
.flex-outer li input:not([type='checkbox']),
.flex-outer li textarea { padding: 15px; border: none;
}
.flex-outer li button { margin-left: auto; padding: 8px 16px; border: none; background: #333; color: #f2f2f2; text-transform: uppercase; letter-spacing: .09em; border-radius: 2px;
}
.flex-inner li { width: 100px;
}
Building Responsive Forms With Flexbox - Script Codes
Building Responsive Forms With Flexbox - Script Codes
Home Page Home
Developer Envato Tuts+
Username tutsplus
Uploaded July 28, 2022
Rating 4
Size 2,474 Kb
Views 54,648
Do you need developer help for Building Responsive Forms With Flexbox?

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!

Envato Tuts+ (tutsplus) Script Codes
Name
Building a Vertical Timeline With CSS and a Touch of JavaScript
Material Design Lite buttons demo
Material Design Lite topbar demo
Building a Horizontal Timeline With CSS and JavaScript
How to Create a Fixed Header Which Animates on Page Scroll
Material Design Lite card demo
Remix CodePen Challenge
How to Animate a Coffee Drinking Sprite With ScrollMagic
How to Build a Blog Layout With Bulma
CSS Tooltip Magic
Create amazing sales emails 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!