02-Flight Order

Homework task 02 for Web Forms

by Polina Petrova

HTML

<form>
        <h1>Flight Order</h1>
        <div class="row">
            <div class="col">
                <label for="dest-from">From</label>
                <select name="dest-from" id="dest-from" autofocus title="Enter a city">
                    <option value="none" selected="selected">Enter a city</option>
                    <option value="sf">Sofia</option>
                    <option value="vn">Varna</option>
                    <option value="pd">Plovdiv</option>
                </select>
            </div>
            <div class="col">
                <label for="dest-to">To</label>
                <select name="dest-to" id="dest-to" autofocus title="Enter a city">
                    <option value="none" selected="selected">Enter a city</option>
                    <option value="sf">Sofia</option>
                    <option value="vn">Varna</option>
                    <option value="pd">Plovdiv</option>
                </select>
                <span>
                    <input type="checkbox" name="prefer-directs" id="prefer-directs" />
                    <label for="prefer-directs" class="prefer-directs">Prefer directs</label>
                </span>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <label for="departure-date">Departure Date</label>
                <input type="date" id="departureDate" value="2014-06-09" required>
            </div>

            <div class="col">
                <label for="departure-start-time">Time interval</label>
                <input type="time" class="start-end-time" id="departure-start-time" name="departure-start-time" value="00:00">
                <input type="time" class="start-end-time" id="departure-end-time" name="departure-end-time" value="12:00">
            </div>
        </div>

        <div class="row">
            <div class="col">
                <label for="return-date">Return Date</label>
                <input type="date"...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, select {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*RESET end*/
html{    
    font-family:Tahoma, Arial,sans-serif;
    color:#000;
    font-size:100%; 
}
form {
    margin:0 auto;
    width:600px;    
    background-color: pink; 
    height:auto;
}
label{
    display:block;
    font-size:0.9rem;
    font-style:italic;
}
.prefer-directs{
    display:inline;
}
div.row{    
    display:inline-block;  
    width:100%;
    margin-bottom:1rem;
}
.col{
    width:46%; 
    display:inline-block;
    float:left;
    padding-left:1rem;
}

input, select{
    font-size:1rem;    
    border:1px solid #ccc;
    line-height:1.2rem;
    padding:0.1rem;
}
h1{
    color:#000;
    text-align:center;
    font-style:italic;
    font-size:3rem;
    line-height: 3rem;
    font-weight:bold;
    padding:1rem 0;
    text-transform:uppercase;
}
input[type="text"],select{
    width:100%;
}

input[type="date"] 
{
    width:98%;
}
input[type="time"]{
    width:47%;
}
.persons{
    display:inline-block;    
    width:31%;
}
input[type="number"]{
    width:90%;
    padding:0.2rem;
}
button{
   ...