Kasun002/responsive_form.html

## responsive_form.html
<!DOCTYPE html>
<html>

<head>
    <!-- Page title -->
    <title>Event Page</title>
    <!-- Other possible tags -->
    <script></script>
    <style></style>
    <!-- Can specify document base URL -->
    <base href="">
    <!--  -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
    <noscript></noscript>

    <meta charset="UTF-8">
    <meta name="description" content="This page is responsible for event creation">

    <!-- Detect Key words by search engines -->
    <meta name="keywords" content="HTML, CSS, JavaScript, TypeScript">

    <meta name="author" content="Kasun Abaywardana">

    <!-- This gives the browser instructions on how to control the page's dimensions and scaling.
    The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary
    depending on the device).
    The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Refresh every 30 s -->
    <!-- <meta http-equiv="refresh" content="30"> -->

    <style>
        * {
            font-family: "Audiowide", sans-serif;
        }

        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 20px;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }

        .col-6 {
            flex: 0 0 50%;
            max-width: 50%;
            padding: 0 10px;
            box-sizing: border-box;
        }

        .col-12 {
            flex: 0 0 10%;
            max-width: 100%;
            padding: 0 10px;
            box-sizing: border-box;
        }


        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-weight: bold;
        }

        .form-group .radio-group {
            display: flex;
            align-items: center;
        }

        .form-group .radio-group label {
            font-weight: 500;
            margin-right: 10px;
        }

        input[type="text"],
        select,
        textarea,
        input[type="date"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type="text"]:hover,
        select:hover,
        textarea:hover,
        input[type="date"]:hover {
            background-color: #f5f5f5;
        }

        .btn-next {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin-top: 10px;
            cursor: pointer;
        }

        button:hover {
            background-color: #7faf81;
        }

        @media (max-width: 600px) {
            .col-6 {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }
    </style>
</head>

<body>
    <section class="container">
        <form action="" method="post">
            <div class="row">
                <div class="col-6">
                    <div class="form-group">
                        <label for="title">Title</label>
                        <input type="text" name="title">
                    </div>
                    <div class="form-group">
                        <label for="demoCarID">Demo-Car ID</label>
                        <input type="text" name="demoCarID">
                    </div>
                    <div class="form-group">
                        <label for="licenseCountry">License Country</label>
                        <select name="licenseCountry" id="country-selector">
                            <option value="SL"> SriLanka</option>
                            <option value="UK"> United Kingdom</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="address">Address</label>
                        <textarea name="address" id="address-box" cols="30" rows="4"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="city">City</label>
                        <input type="text" name="">
                    </div>

                </div>
                <div class="col-6">
                    <div class="form-group">
                        <label for="firstName">First Name</label>
                        <input type="text" name="firstName">
                    </div>
                    <div class="form-group">
                        <label for="gender">Gender</label>
                        <div class="radio-group">
                            <label for="male">Male</label><br>
                            <input type="radio" id="gender1" name="gender" value="male">
                            <label for="age2">Female</label><br>
                            <input type="radio" id="gender2" name="gender" value="female">
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="expDate">EXP Date</label>
                        <input type="date" id="exp-date" name="expDate">
                    </div>
                    <div class="form-group">
                        <label for="title">Title</label>
                        <input type="text" name="title">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                    <button id="go-next" name="btnNext" class="btn-next">Next</button>
                </div>
                </div>
            </div>
        </form>

    </section>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<!-- Page title -->
	<title>Event Page</title>
	<!-- Other possible tags -->
	<script></script>
	<style></style>
	<!-- Can specify document base URL -->
	<base href="">
	<!-- -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
	<noscript></noscript>

	<meta charset="UTF-8">
	<meta name="description" content="This page is responsible for event creation">

	<!-- Detect Key words by search engines -->
	<meta name="keywords" content="HTML, CSS, JavaScript, TypeScript">

	<meta name="author" content="Kasun Abaywardana">

	<!-- This gives the browser instructions on how to control the page's dimensions and scaling.
	The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary
	depending on the device).
	The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Refresh every 30 s -->
	<!-- <meta http-equiv="refresh" content="30"> -->

	<style>
	* {
	font-family: "Audiowide", sans-serif;
	}

	.container {
	max-width: 960px;
	margin: 0 auto;
	padding: 20px;
	}

	.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
	}

	.col-6 {
	flex: 0 0 50%;
	max-width: 50%;
	padding: 0 10px;
	box-sizing: border-box;
	}

	.col-12 {
	flex: 0 0 10%;
	max-width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
	}


	.form-group {
	margin-bottom: 20px;
	}

	label {
	display: block;
	font-weight: bold;
	}

	.form-group .radio-group {
	display: flex;
	align-items: center;
	}

	.form-group .radio-group label {
	font-weight: 500;
	margin-right: 10px;
	}

	input[type="text"],
	select,
	textarea,
	input[type="date"] {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	}

	input[type="text"]:hover,
	select:hover,
	textarea:hover,
	input[type="date"]:hover {
	background-color: #f5f5f5;
	}

	.btn-next {
	background-color: #4CAF50;
	color: white;
	border: none;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-top: 10px;
	cursor: pointer;
	}

	button:hover {
	background-color: #7faf81;
	}

	@media (max-width: 600px) {
	.col-6 {
	flex: 0 0 100%;
	max-width: 100%;
	}
	}
	</style>
	</head>

	<body>
	<section class="container">
	<form action="" method="post">
	<div class="row">
	<div class="col-6">
	<div class="form-group">
	<label for="title">Title</label>
	<input type="text" name="title">
	</div>
	<div class="form-group">
	<label for="demoCarID">Demo-Car ID</label>
	<input type="text" name="demoCarID">
	</div>
	<div class="form-group">
	<label for="licenseCountry">License Country</label>
	<select name="licenseCountry" id="country-selector">
	<option value="SL"> SriLanka</option>
	<option value="UK"> United Kingdom</option>
	</select>
	</div>
	<div class="form-group">
	<label for="address">Address</label>
	<textarea name="address" id="address-box" cols="30" rows="4"></textarea>
	</div>
	<div class="form-group">
	<label for="city">City</label>
	<input type="text" name="">
	</div>

	</div>
	<div class="col-6">
	<div class="form-group">
	<label for="firstName">First Name</label>
	<input type="text" name="firstName">
	</div>
	<div class="form-group">
	<label for="gender">Gender</label>
	<div class="radio-group">
	<label for="male">Male</label><br>
	<input type="radio" id="gender1" name="gender" value="male">
	<label for="age2">Female</label><br>
	<input type="radio" id="gender2" name="gender" value="female">
	</div>

	</div>
	<div class="form-group">
	<label for="expDate">EXP Date</label>
	<input type="date" id="exp-date" name="expDate">
	</div>
	<div class="form-group">
	<label for="title">Title</label>
	<input type="text" name="title">
	</div>
	</div>
	</div>
	<div class="row">
	<div class="col-12">
	<div class="form-group">
	<button id="go-next" name="btnNext" class="btn-next">Next</button>
	</div>
	</div>
	</div>
	</form>

	</section>

	</body>

	</html>