rescue 10

1 files changed, 365 insertions, 0 deletions

diff --git a/10/css/styles.css b/10/css/styles.css
new file mode 100644
index 0000000..6f0592a
--- /dev/null
+++ b/10/css/styles.css
@@ -0,0 +1,365 @@
+/*
+	Author: Name Surname
+	File Name: styles.css
+	Date: 2024/10/21
+*/
+
+/* CSS Reset */
+body,header,nav,main,footer,img,h1,h3,ul,aside,figure,
+figcaption,video{
+	margin: 0px;
+	padding: 0px;
+	border: 0px;
+}
+
+/* Style rules for body and images */
+body{
+	background-color: #F6EEE4;
+}
+
+img,video{
+	max-width: 100%;
+	display: block;
+}
+
+/* Style rules for mobile viewport */
+
+/* Style rules to show show mobiile class and hide tab-desk class */
+.mobile,.mobile-tablet{
+	display: block;
+}
+
+.tab-desk,.desktop,#nav-links{
+	display: none;
+}
+
+/* Style rules for header area */
+.mobile h1,.mobile h3{
+	padding: 2%;
+	text-align: center;
+}
+
+.mobile h1{
+	font-family: "Emblema One",system-ui;
+	font-weight: 400;
+	font-style: normal;
+	margin: 2% 0 0 3%;
+}
+
+.mobile h3{
+	font-family: "Lora",serif;
+	font-weight: 400;
+	font-style: normal;
+}
+
+/* Style rules for navigation area */
+nav{
+	background-color: #2A1F14;
+}
+
+.mobile-nav a{
+	color: #FFFFFF;
+	text-align: center;
+	font-size: 2em;
+	text-decoration: none;
+	padding: 3%;
+	display: block;
+}
+.mobile-nav a.nav-icon{
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	color: #F6EEE4;
+	padding: 2%;
+}
+.nav-icon div{
+	height: 40px;
+	width: 40px;
+	color: #2A1F14;
+}
+
+/* Style rules for main content */
+main{
+	padding: 2%;
+	font-family: "Lora",serif;
+	font-weight: 400;
+	font-style: normal;
+}
+
+main p{
+	font-size: 1.25em;
+}
+
+main h3{
+	padding-top: 2%;
+}
+
+main ul{
+	list-style: square;
+}
+
+/* Style rules for class and id selectors */
+.link{
+	color: #4D3319;
+	text-decoration: none;
+	font-weight: bold;
+	font-style: italic;
+}
+
+.action{
+	font-size: 1.75em;
+	font-weight: bold;
+	text-align: center;
+}
+
+.round{
+	border-radius: 6px;
+}
+
+aside{
+	text-align: center;
+	font-size: 1.5em;
+	font-weight: bold;
+	text-shadow: 4px 4px 10px #C5A687;
+}
+
+figure{
+	border: 4px solid #2A1F14;
+	box-shadow: 6px 6px 10px #C5A687;
+	max-width: 400px;
+	margin: 2% auto;
+}
+
+figcaption{
+	padding: 2%;
+	border-top: 4px solid #2A1F14;
+}
+
+#info ul{
+	margin-left: 10%;
+}
+
+#contact,#form h2{
+	text-align: center;
+}
+
+.tel-link{
+	background-color: #2A1F14;
+	padding: 2%;
+	width: 80%;
+	margin: 0px auto 0px auto;
+}
+.tel-link a{
+	color: #F6EEE4;
+	text-decoration: none;
+	font-weight: bold;
+}
+
+#questions p{
+	cursor: pointer;
+}
+#answer{
+	text-align: center;
+	font-weight: bold;
+	width: 80%;
+	margin: 0 auto;
+}
+#answer h2{
+	display: none;
+}
+
+/* Style rules for form elements */
+fieldset,input,textarea{
+	margin-bottom: 2%;
+}
+
+fieldset legend{
+	font-weight: bold;
+	font-size: 1.25em;
+}
+
+label{
+	display: block;
+	padding-top: 2%;
+}
+
+form #submit{
+	margin: 0px auto 0px auto;
+	display: block;
+	padding: 2%;
+	background-color: #78593A;
+	color: #F6EEE4;
+	font-size: 1.25em;
+	border-radius: 10px;
+}
+
+/* Style rules for footer content */
+footer{
+	text-align: center;
+	font-size: 0.85em;
+	background-color: #2A1F14;
+	color: #F6EEE4;
+	padding-top: 1%;
+	padding-bottom: 1%;
+	padding-left: 0%;
+	padding-right: 0%;
+}
+
+footer a{
+	color: #F3E6D8;
+	text-decoration: none;
+}
+
+/* Media Query for Tablet Viewport */
+@media screen and (min-width:620px),print{
+	/* Tablet Viewport: Show tab-desk class, hide mobile class */
+	.tab-desk{
+		display: block;
+	}
+	.mobile,.mobile-nav{
+		display: none;
+	}
+
+	/* Tablet Viewport: Style rules for nav area */
+	nav ul{
+		list-style: none;
+		text-align: center;
+	}
+	nav li{
+		border-top: 0px;
+		display: inline-block;
+		font-size: 1.25em;
+		font-family: Geneva,Arial,sans-serif;
+		font-weight: bold;
+	}
+	nav li a{
+		padding: 0.5em;
+		display: block;
+		color: #F6EEE4;
+		text-decoration: none;
+	}
+
+	.grid{
+		display: grid;
+		grid-template-columns: auto auto;
+		grid-gap: 10px;
+	}
+	aside{
+		grid-column: 1 / span 2;
+	}
+
+	/* Tablet Viewport: Style rule for form element */
+	form{
+		width: 70%;
+		margin: 0px auto 0px auto;
+	}
+}
+
+/* Media Query for Desktop Viewport */
+@media screen and (min-width:1000px),print{
+	/* Desktop Viewport: Show desktop class, hide mobile-tablet class. */
+	.desktop{
+		display: inline;
+	}
+	.mobile-tablet{
+		display: none;
+	}
+
+	/* Desktop Viewport: Style rules for nav area */
+	nav li{
+		font-size: 1.5em;
+	}
+	nav li a{
+		border-bottom: 0.5em;
+		border-left: 1.5em;
+		border-right: 1.5em;
+	}
+	nav li a:hover{
+		color: #2A1F14;
+		background-color: #F6EEE4;
+		opacity: 0.5;
+	}
+
+	/* Desktop Viewport: Style rules for main content */
+	info ul{
+		margin-left: 5%;
+	}
+
+	.grid{
+		grid-template-columns: auto auto auto;
+		grid-gap: 30px;
+	}
+	aside{
+		grid-column: 1 / span 3;
+		font-size: 2em;
+	}
+
+	/* Style rules for table */
+	table{
+		border: 1px solid #2A1F14;
+		border-collapse: collapse;
+		margin: 0px auto 0px auto;
+	}
+	caption{
+		font-size: 1.5em;
+		font-weight: bold;
+		padding: 1%;
+	}
+	th,td{
+		border: 1px solid #2A1F14;
+		padding: 1%;
+	}
+	th{
+		background-color: #2A1F14;
+		color: #FFFFFF;
+		font-size: 1.15em;
+	}
+	tr:nth-child(odd){
+		background-color: #DECCBA;
+	}
+	/* Desktop Viewport: Style rules for form elements */
+	form{
+		width: auto;
+	}
+	.form-grid{
+		display: grid;
+		grid-template-columns: auto auto;
+		grid-gap: 20px;
+	}
+	.btn{
+		grid-column: 1 / span 2;
+	}
+}
+
+/* Media Query for Large Desktop Viewports */
+@media screen and (min-width:1921px){
+	body{
+		background: linear-gradient(#F6EEE4,#78593A);
+	}
+
+	#wrapper{
+		width: 1920px;
+		margin: 0px auto 0px auto;
+	}
+
+	main{
+		background-color: #F6EEE4;
+	}
+
+	.grid{
+		grid-template-columns: auto auto auto auto;
+	}
+	aside{
+		grid-column: 1 / span 4;
+		font-size: 3em;
+	}
+}
+
+/* Media Query for Print */
+@media print{
+	body{
+		background-color: #FFFFFF;
+		color: #000000;
+	}
+}