Add responsive design

• Add css grid for responsive design
• Minore fixes

css/style.css

@@ -16,6 +16,7 @@ h2 {
 	margin: 0 0 0 25px;
 }
 
+
 .end {
 	margin: 0 0 15px 0;
 }
@@ -30,7 +31,7 @@ h2 {
 }
 
 .end h4 {
-	margin: 0 11px 0 4px;
+	margin: 0 10px 0 5px;
 }
 
 .startDate,
@@ -54,4 +55,124 @@ h2 {
 	color: #fff;
 	display: inline-block;
 	margin: 0 0 0 30px;
+}
+
+
+@media (max-width: 841px) {
+	.outDate {
+		display: block;
+		margin: 15px 0 0 0;
+	}
+}
+
+@media (max-width: 620px) {
+	.dts-out {
+		display: block;
+		margin: 15px 0 0 0;
+	}
+}
+
+@media (max-width: 570px) {
+	.start {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: 1fr 1fr 1fr 1fr;
+		gap: 5px 5px;
+		grid-template-areas:
+			"time-title time-title"
+			"start-year start-month"
+			"start-date start-hours"
+			"start-minutes start-seconds";
+	}
+
+	.time-title {
+		grid-area: time-title;
+		text-align: center;
+		text-transform: uppercase;
+		letter-spacing: 2px;
+	}
+
+	.start-year {
+		grid-area: start-year;
+	}
+
+	.start-month {
+		grid-area: start-month;
+	}
+
+	.start-date {
+		grid-area: start-date;
+	}
+
+	.start-hours {
+		grid-area: start-hours;
+	}
+
+	.start-minutes {
+		grid-area: start-minutes;
+	}
+
+	.start-seconds {
+		grid-area: start-seconds;
+	}
+
+	.start-year,
+	.start-month,
+	.start-date,
+	.start-hours,
+	.start-minutes,
+	.start-seconds {
+		width: 90%;
+	}
+
+	.end {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: 1fr 1fr 1fr 1fr;
+		gap: 5px 5px;
+		margin: 20px 0 0 0;
+		grid-template-areas: "time-title time-title"
+			"end-year end-month"
+			"end-date end-hours"
+			"end-minutes end-seconds";
+	}
+
+
+	.time-title {
+		grid-area: time-title;
+	}
+
+	.end-year {
+		grid-area: end-year;
+	}
+
+	.end-month {
+		grid-area: end-month;
+	}
+
+	.end-date {
+		grid-area: end-date;
+	}
+
+	.end-hours {
+		grid-area: end-hours;
+	}
+
+	.end-minutes {
+		grid-area: end-minutes;
+	}
+
+	.end-seconds {
+		grid-area: end-seconds;
+	}
+
+	.end-year,
+	.end-month,
+	.end-date,
+	.end-hours,
+	.end-minutes,
+	.end-seconds {
+		width: 90%;
+		margin: 0 0 13px 0;
+	}
 }

index.html

@@ -18,7 +18,7 @@ <h2>TimeStamp to date</h2>
 
 	<h2>Calculate remaining time</h2>
 	<div class="start">
-		<h4>Start date</h4>
+		<h4 class="time-title">Start date</h4>
 		<input type="number" class="start-year startDate" placeholder="Year">
 		<input type="number" class="start-month startDate" placeholder="Month">
 		<input type="number" class="start-date startDate" placeholder="Date">
@@ -28,7 +28,7 @@ <h4>Start date</h4>
 	</div>
 
 	<div class="end">
-		<h4>End date</h4>
+		<h4 class="time-title">End date</h4>
 		<input type="number" class="end-year endDate" placeholder="Year">
 		<input type="number" class="end-month endDate" placeholder="Month">
 		<input type="number" class="end-date endDate" placeholder="Date">