Skip to content

Instantly share code, notes, and snippets.

@stevommmm

stevommmm/index.html

Created April 20, 2016 12:49
Show Gist options
  • Save stevommmm/01a8602db8f6496f95e82e2974b03bdc to your computer and use it in GitHub Desktop.
Save stevommmm/01a8602db8f6496f95e82e2974b03bdc to your computer and use it in GitHub Desktop.
Download ZIP
Search Form
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>{{title}}</title>
<style type="text/css">
body {
font-family: 'Helvetica Neue', 'Roboto', sans-serif;
color: #fff;
margin: 0;
background-image: linear-gradient(60deg, #556, #a9a);
background-attachment: fixed;
}
h2 {
font-weight: 100;
font-variant: small-caps;
font-size: 2em;
border: 3px double rgba(255,255,255,0.1);
padding: 6px;
text-align: center;
}
.container {
width: 320px;
margin: 10% auto;
}
.search-bar, .search-button {
box-sizing: border-box;
border: 3px solid white;
outline: none;
box-shadow: 1px 1px 6px -2px rgba(0,0,0,0.8);
display: inline-block;
position: relative;
}
.search-bar {
margin: 15px -10px 15px 10px;
padding: 5px;
border-radius: 4px;
height: 30px;
width: 250px;
}
.search-button {
margin: 10px 10px 10px 0;
height: 50px;
width: 50px;
border-radius: 99px;
cursor: pointer;
background-color: #333;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Search Form</h2>
<input type="text" class="search-bar">
<input type="submit" class="search-button" value="GO!">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment