Flexbox - one-line form

Developer
Tryggvi Gylfason
Size
3,021 Kb
Views
28,336
  1. Flexbox - one-line form Previews
  2. Flexbox - one-line form HTML Codes
  3. Flexbox - one-line form CSS Codes

How do I make an flexbox - one-line form?

What is a flexbox - one-line form? How do you make a flexbox - one-line form? This script and codes were developed by Tryggvi Gylfason on 15 October 2022, Saturday.

Flexbox - one-line form Previews
IQ Test

Flexbox - one-line form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox - one-line form</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<body> <div class="vid-container"> <video class="dog" src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Coverr-Lulu.mp4" autoplay loop></video> </div> <div class="cover"> <form class="flex-form"> <input type="search" placeholder="Where do you want to go?"> <label for="from">From</label> <input type="date" name="from"> <label for="from">To</label> <input type="date" name="to"> <select name="" id=""> <option value="1">1 Guest</option> <option value="2">2 Guest</option> <option value="3">3 Guest</option> <option value="4">4 Guest</option> <option value="5">5 Guest</option> </select> <input type="submit" value="Search"> </form> </div>
</body>
</html>
</body>
</html>

Flexbox - one-line form - Script Codes CSS Codes

/* Some CSS Setup - nothing to do with flexbox */
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
body { font-family: sans-serif; margin: 0; overflow: hidden; background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
}
a { color: white;
}
.cover { height: 100vh; width: 100%;
}
/*Video*/
.dog { height: 100%; width: 100%; -webkit-filter: blur(5px); filter: blur(5px); position: absolute; top: 0; z-index: -1;
}
/*Hack to get them to align properly */
.flex-form > *:not([type="date"]) { border-top: 1px solid white; border-bottom: 1px solid white;
}
.flex-form input[type="submit"] { background: #FF5A5F; border-top: 1px solid #FF5A5F; border-bottom: 1px solid #FF5A5F; color: white;
}
.flex-form > * { border: 0; padding: 10px; background: white; line-height: 50px; font-size: 20px; border-radius: 0; outline: 0; border-right: 1px solid rgba(0, 0, 0, 0.2); -webkit-appearance: none;
}
.flex-form > *:last-child { border-right: 0;
}
/*Flexbox Starts Here*/
.cover { display: flex; justify-content: center; align-items: center;
}
.flex-form { display: flex; border: 20px solid rgba(0, 0, 0, 0.3); border-radius: 5px;
}
input[type="search"] { flex-basis: 350px;
}
Flexbox - one-line form - Script Codes
Flexbox - one-line form - Script Codes
Home Page Home
Developer Tryggvi Gylfason
Username tryggvigy
Uploaded October 15, 2022
Rating 3
Size 3,021 Kb
Views 28,336
Do you need developer help for Flexbox - one-line form?

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!

Tryggvi Gylfason (tryggvigy) Script Codes
Name
ImmutableJS Object as key
Macintosh 128k - Terminal
A Pen by Tryggvi Gylfason
Image inside HTML
CSS embedding
Flexbox - mobile app layout
P R E S S E D
Redux - applyMiddleware
Redux - Template
Icelandic characters
Create amazing video scripts 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!