diff options
Diffstat (limited to '11/css')
| -rw-r--r-- | 11/css/styles.css | 399 | ||||
| -rw-r--r-- | 11/css/styles.min.css | 1 |
2 files changed, 400 insertions, 0 deletions
diff --git a/11/css/styles.css b/11/css/styles.css new file mode 100644 index 0000000..6a88bd0 --- /dev/null +++ b/11/css/styles.css @@ -0,0 +1,399 @@ +/* + 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 skip navigation link */ +.skip { + position: absolute; + left: -999px; +} +.skip:focus { + color: #FFFFFF; + background-color: #2A1F14; + text-decoration: none; + padding: 0.5%; + top: auto; + left: auto; + right: 1px; + z-index: 1; +} + +/* 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; +} + +.social img{ + display: inline-block; + padding: 4%; +} + +/* 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; + } + + /* Tablet Viewport: Style rules for footer area */ + footer{ + overflow: auto; + } + .copyright{ + float: left; + width: 65%; + } + .social{ + float: right; + width: 25%; + } +} + +/* 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; + } +} diff --git a/11/css/styles.min.css b/11/css/styles.min.css new file mode 100644 index 0000000..5b3ee17 --- /dev/null +++ b/11/css/styles.min.css @@ -0,0 +1 @@ +body,header,nav,main,footer,img,h1,h3,ul,aside,figure,figcaption,video{margin:0;padding:0;border:0}body{background-color:#F6EEE4}img,video{max-width:100%;display:block}.skip{position:absolute;left:-999px}.skip:focus{color:#FFF;background-color:#2A1F14;text-decoration:none;padding:.5%;top:auto;left:auto;right:1px;z-index:1}.mobile,.mobile-tablet{display:block}.tab-desk,.desktop,#nav-links{display:none}.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}nav{background-color:#2A1F14}.mobile-nav a{color:#FFF;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}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}.link{color:#4D3319;text-decoration:none;font-weight:700;font-style:italic}.action{font-size:1.75em;font-weight:700;text-align:center}.round{border-radius:6px}aside{text-align:center;font-size:1.5em;font-weight:700;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:0 auto 0 auto}.tel-link a{color:#F6EEE4;text-decoration:none;font-weight:700}#questions p{cursor:pointer}#answer{text-align:center;font-weight:700;width:80%;margin:0 auto}#answer h2{display:none}fieldset,input,textarea{margin-bottom:2%}fieldset legend{font-weight:700;font-size:1.25em}label{display:block;padding-top:2%}form #submit{margin:0 auto 0 auto;display:block;padding:2%;background-color:#78593A;color:#F6EEE4;font-size:1.25em;border-radius:10px}footer{text-align:center;font-size:.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}.social img{display:inline-block;padding:4%}@media screen and (min-width:620px),print{.tab-desk{display:block}.mobile,.mobile-nav{display:none}nav ul{list-style:none;text-align:center}nav li{border-top:0;display:inline-block;font-size:1.25em;font-family:Geneva,Arial,sans-serif;font-weight:700}nav li a{padding:.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}form{width:70%;margin:0 auto 0 auto}footer{overflow:auto}.copyright{float:left;width:65%}.social{float:right;width:25%}}@media screen and (min-width:1000px),print{.desktop{display:inline}.mobile-tablet{display:none}nav li{font-size:1.5em}nav li a{border-bottom:.5em;border-left:1.5em;border-right:1.5em}nav li a:hover{color:#2A1F14;background-color:#F6EEE4;opacity:.5}info ul{margin-left:5%}.grid{grid-template-columns:auto auto auto;grid-gap:30px}aside{grid-column:1 / span 3;font-size:2em}table{border:1px solid #2A1F14;border-collapse:collapse;margin:0 auto 0 auto}caption{font-size:1.5em;font-weight:700;padding:1%}th,td{border:1px solid #2A1F14;padding:1%}th{background-color:#2A1F14;color:#FFF;font-size:1.15em}tr:nth-child(odd){background-color:#DECCBA}form{width:auto}.form-grid{display:grid;grid-template-columns:auto auto;grid-gap:20px}.btn{grid-column:1 / span 2}}@media screen and (min-width:1921px){body{background:linear-gradient(#F6EEE4,#78593A)}#wrapper{width:1920px;margin:0 auto 0 auto}main{background-color:#F6EEE4}.grid{grid-template-columns:auto auto auto auto}aside{grid-column:1 / span 4;font-size:3em}}@media print{body{background-color:#FFF;color:#000}} |