From 9d53d8857eaa1c9405894a88ca75bc4657e42f35 Mon Sep 17 00:00:00 2001 From: msglm Date: Sat, 14 Jan 2023 05:31:48 -0600 Subject: Inital Commit --- HTML/Tests/Test3/pacific.css | 242 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 242 insertions(+) create mode 100644 HTML/Tests/Test3/pacific.css (limited to 'HTML/Tests/Test3/pacific.css') diff --git a/HTML/Tests/Test3/pacific.css b/HTML/Tests/Test3/pacific.css new file mode 100644 index 0000000..67fc6e5 --- /dev/null +++ b/HTML/Tests/Test3/pacific.css @@ -0,0 +1,242 @@ +* { + box-sizing: border-box; +} + +body { + background-color: #EAEAEA; + color:#555555; + font-family: Arial, Helvetica, sans-serif; +} + +header { + background-color: #002171; + color: #FFFFFF; + letter-spacing: 0.25em; + text-align: center; + padding-top: 0.5em; + padding-bottom: 0.5em; +} + +header a { + text-decoration: none; +} + +header a:link { + color: #FFFFFF +} + +header a:visited { + color: #FFFFFF +} + +header a:hover { + color:#90C7E3; +} + + +h1 { + text-align: center; + margin-top 0; + font-family: Georgia, 'Times New Roman', Times, serif +} + +nav { + text-align: center; + font-weight: bold; + padding: 0; + font-size: 120%; +} + +nav ul { + list-style-type: none; + margin 0; + padding-left: 0; + font-size 1.2em; +} + + +nav li { + border-bottom: 1px solid #002171; +} + +nav a { + text-decoration: none; +} + +nav a:link { + transition: 3s ease-out; + color:#5C7FA3; +} + +nav a:visited { + color: #344873; +} + +nav a:hover { + color: #A52A2A; +} + +main { + background-color: #FFFFFF; + padding: 1px 20px 20px 30px; + display: block; + overflow: auto; +} + +h2 { + color: #197602; + text-shadow: 1px 1px #CCCCCC; + font-family: Georgia, 'Times New Roman', Times, serif; +} + +h3 { + color: #000033; + font-family: Georgia, 'Times New Roman', Times, serif; +} + +main il { + list-style-image: url(marker.gif); +} + +dt { +color: #002171 +} + +footer { + background-color: #FFFFFF; + font-size: 75%; + font-style: italic; + text-align: center; + padding: 2em; + font-family: Georgia, 'Times New Roman', Times, serif; +} + +.resort { + color: #1976D2; + font-weight: bold; +} + +#contact { + font-size: 90%; +} + +#homehero { + height:300px; + background-image: url(coast2.jpg); + background-repeat: no-repeat; + background-size: 100% 100%; +} + +#yurthero { + height: 300px; + background-image: url(yurt.jpg); + background-repeat: no-repeat; + background-size: 100% 100%; +} + + form { display: flex; + flex-flow: column nowrap; } + input, textarea { margin-bottom: .5em; } + + +@media (min-width: 600px) { + + form { + width: 60%; + display: grid; + grid-gap: 1em; + grid-column: 6em / 1fr; + } + + + + input[type="submit"] { + grid-column: 2; + width: 9em; + } + + nav ul { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-around; + } + + nav li { + border-bottom: none; + } + + section { + margin-left: 2em; + margin-right: 2em; + flex 1; + } + + .flow { + display: flex; + flex-direction: row; + } +} + +@media (min-width: 1024px) { + #wrapper { + margin: auto; + width: 80%; + border: 1px solid #002171; + box-shadow: 3px 3px 3px #002171; + } + + nav { + text-align: left; + padding-left: 1em; + } + + @supports (display: grid) { + nav ul { + flex-direction: column; + padding-top: 1em; + } + .hero {grid-area: hero;} + header {grid-area: header;} + nav {grid-area: nav;} + main {grid-area: main;} + footer {grid-area: footer;} + + #wrapper { + display: grid; + grid-template: + "header header" + "nav hero" + "nav main" + "nav footer" + / 180px 1fr; + } + } +} + +table { + border-collapse: collapse; + border: 2px solid #3399CC; +} + +td,th { + padding: 0.5em; + border: 2px solid #3399CC; +} + +td { + text-align: center; +} + +.text { + text-align: left; +} + +tr:nth-last-of-type(even) { + background-color: #F5FAFC; +} + +video, embed { + float: right; + padding-left: 20px; +} -- cgit v1.2.3