diff options
author | | 1970-01-01 00:00:00 +0000 |
---|---|---|
committer | | 2025-01-14 03:20:53 +0000 |
commit | 588e25e5d0a30c25ca952ccaa1a2f1f1c92a03f6 (patch) | |
tree | f1dbc0e6ff59af610a6043889606a8534ef6b1d4 /09/css/styles.css | |
parent | rescue 12 (diff) | |
download | html-588e25e5d0a30c25ca952ccaa1a2f1f1c92a03f6.tar html-588e25e5d0a30c25ca952ccaa1a2f1f1c92a03f6.tar.gz html-588e25e5d0a30c25ca952ccaa1a2f1f1c92a03f6.tar.bz2 html-588e25e5d0a30c25ca952ccaa1a2f1f1c92a03f6.tar.xz html-588e25e5d0a30c25ca952ccaa1a2f1f1c92a03f6.zip |
rescue
Diffstat (limited to '09/css/styles.css')
-rw-r--r-- | 09/css/styles.css | 345 |
1 files changed, 0 insertions, 345 deletions
diff --git a/09/css/styles.css b/09/css/styles.css deleted file mode 100644 index 90196dc..0000000 --- a/09/css/styles.css +++ /dev/null @@ -1,345 +0,0 @@ -/* - 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{ - 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; -} - -.mobile h3{ - font-family: "Lora",serif; - font-weight: 400; - font-style: normal; -} - -/* Style rules for navigation area */ -nav{ - background-color: #2A1F14; -} - -nav ul{ - list-style: none; - text-align: center; -} - -nav li{ - display: block; - font-size: 1.5em; - font-family: Geneva,Arial,sans-serif; - font-weight: bold; - border-top: 0.5px solid #F6EEE4; -} - -nav li a{ - display: block; - color: #F6EEE4; - padding-top: 0.5em; - padding-bottom: 0.5em; - padding-left: 2em; - padding-right: 2em; - text-decoration: none; -} - -/* 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; -} - -/* 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{ - display: none; - } - - /* Tablet Viewport: Style rules for nav area */ - nav li{ - border-top: 0px; - display: inline-block; - font-size: 1.25em; - } - nav li a{ - padding: 0.5em; - } - - .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; - } -} |