FORM

[Banbastic]

I'll post all my progress with working and learning form label and input feel free to correct

[Banbastic]

label for="datemax">Enter a date within the range Input type="submit" value="submit">

[Banbastic]

*{ margin: 0; padding: 0;

}

.main{ width: 100%; background: url(pexels-pixabay-372748.jpg); background-position: center; background-size: cover; height: 109vh; }

.navbar{ width: 1200px; height: 75px; margin: auto; }

.icon{ width: 200px; float: left; height: 70px; }

.logo{ color: gold; font-size: 35px; font-family: Arial; padding-left: 20px; float: left; padding-top: 10px; }

.menu{ width: 400px; float: left; height: 70px; }

ul{ float: left; display: flex; justify-content: center; align-items: center; }

ul li{ list-style: none; margin-left: 62px; margin-top: 27px; font-size: 14px; }

ul li a{ text-decoration: none; color: #fff; font-family: Arial; font-weight: bold; transition: 0.4s ease-in-out; }

ul li a:hover{ color: gold; }

.search{ width: 330px; float: left; margin-left: 270px; }

.srch{ font-family: 'Times New Roman'; width: 200px; height: 40px; background: transparent; border: 1px solid gold; margin-top: 13px; color: #fff; border-right: none; font-size: 16px; float: left; padding: 10px; border-bottom-left-radius: 5px; border-top-left-radius: 5px; }

.btn{ width: 100px; height: 40px; background: gold; border: 2px solid gold; margin-top: 13px; color: #fff; font-size: 15px; border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; }

.btn:focus{ outline: none; }

.srch:focus{ outline: none; }

.content{ width: 1200px; height: auto; margin: auto; color: #fff; position: relative; }

.content .par{ padding-left: 20px; padding-bottom: 25px; font-family: Arial; letter-spacing: 1.2px; line-height: 30px; }

.content h1{ font-family: 'Times New Roman'; font-size: 50px; padding-left: 20px; margin-top: 9%; letter-spacing: 2px; }

.content .cn{ width: 160px; height: 40px; background: gold; border: none; margin-bottom: 10px; margin-left: 20px; font-size: 18px; border-radius: 10px; cursor: pointer; }

.content .cn a{ text-decoration: none; color: #000; transition: .3s ease; }

.cn:hover{ background-color: #fff; }

.content span{ color: gold; font-size: 60px; }

.form{ width: 250px; height: 380px; background: linear-gradient(to top, rgba(0,0,0,0.8)50%,rgba(0,0,0,0.8)50%); position: absolute; top: 20px; left: 870px; border-radius: 10px; padding: 25px; }

.form h2{ width: 220px; font-family: sans-serif; text-align: center; color: gold; font-size: 22px; background-color: #fff; border-radius: 10px; margin: 2px; padding: 8px; }

.form input{ width: 240px; height: 35px; background: transparent; border-bottom: 1px solid gold; border-top: none; border-right: none; border-left: none; color: #fff; font-size: 15px; letter-spacing: 1px; margin-top: 30px; font-family: sans-serif; }

.form input:focus{ outline: none; }

::placeholder{ color: #fff; font-family: Arial; }

.btnn{ width: 240px; height: 40px; background: gold; border: none; margin-top: 30px; font-size: 18px; border-radius: 10px; cursor: pointer; color: #fff; transition: 0.4s ease; }

.btnnL:hover{ background: #fff; color: gold; }

.btnn a{ text-decoration: none; color: #000; font-weight: bold; }

.form .link{ font-family: Arial, Helvetica, sans-serif; font-size: 17px; padding-top: 20px; text-align: center; }

.form link a{ text-decoration: none; color: gold; }

.link{ padding-top: 15px; padding-bottom: 10px; text-align: center; }