2023-03-06 09:45:34 -06:00
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< html >
< head >
< title > pacific.css< / title >
< meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >
< style type = "text/css" >
<!--
2023-03-06 11:29:19 -06:00
body {color: #a9b7c6; background-color: #2b2b2b; font-family: monospace}
pre {color: #a9b7c6; background-color: #2b2b2b; font-family: monospace}
table {color: #888888; background-color: #313335; font-family: monospace}
2023-03-06 09:45:34 -06:00
.strings {color: #6a8759}
.numbers {color: #6897bb}
.ST0 {color: #808080; background-color: #323232}
.comments {color: #808080}
2023-03-06 11:29:19 -06:00
.ST2 {color: #e8bf6a; font-family: monospace; font-style: italic}
.ST1 {color: #287bde}
.at_rule_symbol {color: #cc7832}
2023-03-06 09:45:34 -06:00
-->
< / style >
< / head >
< body >
2023-03-06 11:29:19 -06:00
< table width = "100%" > < tr > < td align = "center" > /home/caleb/ASDV-WebDev/Assignments/MP07_CalebFontenot/public_html/pacific.css< / td > < / tr > < / table >
2023-03-06 09:45:34 -06:00
< pre >
< span class = "ST0" > /*< / span >
< span class = "comments" > Click < / span > < span class = "ST1" > nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt< / span > < span class = "comments" > to change this license< / span >
< span class = "comments" > Click < / span > < span class = "ST1" > nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css< / span > < span class = "comments" > to edit this template< / span >
< span class = "comments" > */< / span >
< span class = "comments" > /*< / span >
< span class = "comments" > Created on : Jan 25, 2023, 9:50:47 AM< / span >
< span class = "comments" > Author : caleb< / span >
< span class = "comments" > */< / span >
< span class = "strings" > *< / span > {
box-sizing: border-box;
}
< span class = "strings" > body< / span > {
background-color: < span class = "numbers" > #EAEAEA< / span > ;
color: < span class = "numbers" > #555555< / span > ;
font-family: Arial, Helvetica, sans-serif;
}
< span class = "strings" > header< / span > {
background-color: < span class = "numbers" > #002171< / span > ;
color: < span class = "numbers" > #FFFFFF< / span > ;
text-align: center;
}
< span class = "strings" > nav< / span > {
< span class = "comments" > //float: left;< / span >
< span class = "comments" > //width: 160px;< / span >
font-weight: bold;
padding: < span class = "numbers" > 0< / span > ;
font-size: < span class = "numbers" > 120%< / span > ;
text-align: center;
2023-03-06 11:29:19 -06:00
text-decoration: none;
2023-03-06 09:45:34 -06:00
}
< span class = "strings" > nav< / span > < span class = "strings" > ul< / span > {
list-style-type: none;
margin: < span class = "numbers" > 0< / span > ;
padding-left: < span class = "numbers" > 0< / span > ;
font-size: < span class = "numbers" > 1.2em< / span > ;
}
< span class = "strings" > nav< / span > < span class = "strings" > li< / span > {
border-bottom: < span class = "numbers" > 1px< / span > solid darkblue;
}
< span class = "strings" > nav< / span > < span class = "strings" > a< / span > < span class = "ST2" > :< / span > < span class = "ST2" > link< / span > , < span class = "strings" > a< / span > < span class = "ST2" > :< / span > < span class = "ST2" > visited< / span > {
color: < span class = "numbers" > #344873< / span > ;
2023-03-06 11:29:19 -06:00
text-decoration: none;
2023-03-06 09:45:34 -06:00
}
< span class = "strings" > nav< / span > < span class = "ST2" > :< / span > < span class = "ST2" > hover< / span > {
color: < span class = "numbers" > #A52A2A< / span > ;
}
< span class = "strings" > header< / span > < span class = "strings" > a< / span > < span class = "ST2" > :< / span > < span class = "ST2" > link< / span > < span class = "strings" > a< / span > < span class = "ST2" > :< / span > < span class = "ST2" > visited< / span > {
text-decoration: none;
color: < span class = "numbers" > #FFFFFF< / span > ;
}
< span class = "strings" > main< / span > {
padding: < span class = "numbers" > 1px< / span > < span class = "numbers" > 20px< / span > < span class = "numbers" > 20px< / span > < span class = "numbers" > 30px< / span > ;
display: block;
overflow: auto;
background-color: < span class = "numbers" > #FFFFFF< / span > ;
}
< span class = "strings" > h1< / span > {
margin-bottom: < span class = "numbers" > 0< / span > ;
font-family: Georgia, < span class = "strings" > " Times New Roman" < / span > , sans-serif;
< span class = "comments" > //font-size: 3em;< / span >
padding-bottom: < span class = "numbers" > 0.5em< / span > ;
letter-spacing: < span class = "numbers" > 0.25em< / span > ;
}
< span class = "strings" > h2< / span > {
color: < span class = "numbers" > #1976D2< / span > ;
font-family: Georgia, < span class = "strings" > " Times New Roman" < / span > , sans-serif;
text-shadow: < span class = "numbers" > 1px< / span > < span class = "numbers" > 1px< / span > < span class = "numbers" > #CCCCCC< / span > ;
}
< span class = "strings" > h3< / span > {
color: < span class = "numbers" > #000033< / span > ;
font-family: Georgia, < span class = "strings" > " Times New Roman" < / span > , sans-serif;
}
< span class = "strings" > dt< / span > {
color: < span class = "numbers" > #002171< / span > ;
}
< span class = "strings" > footer< / span > {
font-size: < span class = "numbers" > 75%< / span > ;
font-style: italic;
font-family: Georgia, < span class = "strings" > " Times New Roman" < / span > , sans-serif;
text-align: center;
padding: < span class = "numbers" > 2em< / span > ;
}
< span class = "strings" > img< / span > {
height: < span class = "numbers" > 100%< / span > ;
width: < span class = "numbers" > 100%< / span > ;
}
2023-03-06 11:29:19 -06:00
< span class = "comments" > /* Classes and ids */< / span >
< span class = "strings" > .< / span > < span class = "strings" > resort< / span > {
2023-03-06 09:45:34 -06:00
color: < span class = "numbers" > #1976D2< / span > ;
font-weight: bold;
}
2023-03-06 11:29:19 -06:00
< span class = "strings" > .< / span > < span class = "strings" > text< / span > {
text-align: left;
padding: unset;
< span class = "comments" > /* border: none ; */< / span >
}
< span class = "ST2" > :< / span > < span class = "ST2" > nth-of-type< / span > {
background-color: < span class = "numbers" > #F5FAFC< / span > ;
}
< span class = "strings" > #contact< / span > { font-size: < span class = "numbers" > 90%< / span > }
2023-03-06 09:45:34 -06:00
2023-03-06 11:29:19 -06:00
< span class = "strings" > #homehero< / span > {
2023-03-06 09:45:34 -06:00
height: < span class = "numbers" > 300px< / span > ;
< span class = "comments" > //margin-left: 190px;< / span >
background-image: < span class = "strings" > url(" images/coast2.jpg" )< / span > ;
background-repeat: no-repeat;
background-size: < span class = "numbers" > 100%< / span > < span class = "numbers" > 100%< / span > ;
}
2023-03-06 11:29:19 -06:00
< span class = "strings" > #yurthero< / span > {
2023-03-06 09:45:34 -06:00
height: < span class = "numbers" > 300px< / span > ;
background-image: < span class = "strings" > url(" images/yurt.jpg" )< / span > ;
background-repeat: no-repeat;
background-size: < span class = "numbers" > 100%< / span > < span class = "numbers" > 100%< / span > ;
< span class = "comments" > //margin-left: 190px;< / span >
}
2023-03-06 11:29:19 -06:00
< span class = "strings" > #trailhero< / span > {
2023-03-06 09:45:34 -06:00
height: < span class = "numbers" > 300px< / span > ;
background-image: < span class = "strings" > url(" images/trail.jpg" )< / span > ;
background-repeat: no-repeat;
background-size: < span class = "numbers" > 100%< / span > < span class = "numbers" > 100%< / span > ;
< span class = "comments" > //margin-left: 190px;< / span >
}
2023-03-06 11:29:19 -06:00
< span class = "strings" > #body< / span > {
2023-03-06 09:45:34 -06:00
background-color: < span class = "numbers" > #FFFFFF< / span > ;
< span class = "comments" > //margin-left: 190px;< / span >
width: auto;
}
2023-03-06 11:29:19 -06:00
< span class = "strings" > #wrapper< / span > {
2023-03-06 09:45:34 -06:00
background-color: < span class = "numbers" > #90C7E3< / span > ;
< span class = "comments" > //width: 80%;< / span >
background-image: linear-gradient(to bottom, < span class = "numbers" > #FFFFFF< / span > , < span class = "numbers" > #90C7E3< / span > );
< span class = "comments" > //min-width: 960px;< / span >
< span class = "comments" > //max-width: 2048px;< / span >
< span class = "comments" > //box-shadow: 1px 1px 1px #000033;< / span >
< span class = "comments" > //margin-left: auto;< / span >
< span class = "comments" > //margin-right: auto;< / span >
}
2023-03-06 11:29:19 -06:00
< span class = "strings" > #headerlink< / span > {
2023-03-06 09:45:34 -06:00
color: white;
text-decoration: none;
}
2023-03-06 11:29:19 -06:00
< span class = "strings" > table< / span > {
border: < span class = "numbers" > 2px< / span > solid < span class = "numbers" > #3399CC< / span > ;
border-collapse: collapse;
}
< span class = "strings" > table< / span > < span class = "strings" > td< / span > , < span class = "strings" > th< / span > {
padding: < span class = "numbers" > 0.5em< / span > ;
border: < span class = "numbers" > 2px< / span > solid < span class = "numbers" > #3399CC< / span > ;
}
< span class = "strings" > table< / span > < span class = "strings" > td< / span > {
text-align: center;
2023-03-06 09:45:34 -06:00
}
2023-03-06 11:29:19 -06:00
< span class = "strings" > nav< / span > < span class = "strings" > li< / span > {
2023-03-06 09:45:34 -06:00
box-shadow: < span class = "numbers" > 1px< / span > < span class = "numbers" > 1px< / span > < span class = "numbers" > 1px< / span > blue;
< span class = "comments" > //font-size: 0.5em;< / span >
}
< span class = "comments" > // Medium Styles< / span >
< span class = "at_rule_symbol" > @media< / span > (min-width: < span class = "numbers" > 600px< / span > ) {
nav ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
}
nav li {
boarder-bottom: none;
}
section {
margin-left: < span class = "numbers" > 2em< / span > ;
margin-right: < span class = "numbers" > 2em< / span > ;
flex: < span class = "numbers" > 1< / span > ;
}
.flow {
display: flex;
flex-direction: row;
}
}
< span class = "at_rule_symbol" > @media< / span > (min-width: < span class = "numbers" > 1024px< / span > ) {
< span class = "numbers" > #wrapper< / span > {
margin: auto;
width: < span class = "numbers" > 80%< / span > ;
border: < span class = "numbers" > 1px< / span > solid < span class = "numbers" > #002171< / span > ;
box-shadow: < span class = "numbers" > 3px< / span > < span class = "numbers" > 3px< / span > < span class = "numbers" > 3px< / span > < span class = "numbers" > #002171< / span > ;
}
nav { text-align: left;
padding-left: < span class = "numbers" > 1em< / span > ;
}
< span class = "at_rule_symbol" > @supports< / span > (display: grid)
nav ul {flex-direction: column;
padding-top: < span class = "numbers" > 1em< / span > ;}
.hero { grid-area: hero;}
header { grid-area: header;}
nav { grid-area: nav;}
main { grid-area: main;}
footer { grid-area: footer; }
< span class = "numbers" > #wrapper< / span > { display: grid;
grid-template: < span class = "strings" > " header header" < / span >
< span class = "strings" > " nav hero" < / span >
< span class = "strings" > " nav main" < / span >
< span class = "strings" > " nav footer" < / span >
/ < span class = "numbers" > 180px< / span > < span class = "numbers" > 1fr< / span > ;
}
}
2023-03-06 11:29:19 -06:00
2023-03-06 09:45:34 -06:00
< / pre > < / body >
< / html >
