CCF_100/ASDV-WebDev
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
2dc89a3b93
ASDV-WebDev/Assignments/HTML/MP06_CalebFontenot/Printed HTMLs/pacific.html

227 lines
9.1 KiB
HTML
Raw Blame History

<!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">
<!--
body {color: #a9b7c6; background-color: #2b2b2b; font-family: monospace; font-weight: bold}
pre {color: #a9b7c6; background-color: #2b2b2b; font-family: monospace; font-weight: bold}
table {color: #888888; background-color: #313335; font-family: monospace; font-weight: bold}
.at_rule_symbol {color: #cc7832}
.ST1 {color: #287bde}
.strings {color: #6a8759}
.numbers {color: #6897bb}
.ST0 {color: #808080; background-color: #323232}
.comments {color: #808080}
.ST2 {color: #e8bf6a; font-family: monospace; font-weight: bold; font-style: italic}
-->
</style>
</head>
<body>
<table width="100%"><tr><td align="center">/home/caleb/ASDV-WebDev/Assignments/MP06_CalebFontenot/public_html/pacific.css</td></tr></table>
<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;
<span class="comments">//text-decoration: none;</span>
}
<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>;
}
<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">&quot;Times New Roman&quot;</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">&quot;Times New Roman&quot;</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">&quot;Times New Roman&quot;</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">&quot;Times New Roman&quot;</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>;
}
<span class="comments">// Classes and ids</span>
.resort {
color: <span class="numbers">#1976D2</span>;
font-weight: bold;
}
<span class="numbers">#contact</span> { font-size: <span class="numbers">90%</span>}
<span class="numbers">#homehero</span> {
height: <span class="numbers">300px</span>;
<span class="comments">//margin-left: 190px;</span>
background-image: <span class="strings">url(&quot;images/coast2.jpg&quot;)</span>;
background-repeat: no-repeat;
background-size: <span class="numbers">100%</span> <span class="numbers">100%</span>;
}
<span class="numbers">#yurthero</span> {
height: <span class="numbers">300px</span>;
background-image: <span class="strings">url(&quot;images/yurt.jpg&quot;)</span>;
background-repeat: no-repeat;
background-size: <span class="numbers">100%</span> <span class="numbers">100%</span>;
<span class="comments">//margin-left: 190px;</span>
}
<span class="numbers">#trailhero</span> {
height: <span class="numbers">300px</span>;
background-image: <span class="strings">url(&quot;images/trail.jpg&quot;)</span>;
background-repeat: no-repeat;
background-size: <span class="numbers">100%</span> <span class="numbers">100%</span>;
<span class="comments">//margin-left: 190px;</span>
}
<span class="numbers">#body</span> {
background-color: <span class="numbers">#FFFFFF</span>;
<span class="comments">//margin-left: 190px;</span>
width: auto;
}
<span class="numbers">#wrapper</span> {
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>
}
<span class="numbers">#headerlink</span> {
color: white;
text-decoration: none;
}
table {
border: <span class="numbers">0px</span>;
}
nav li {
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">&quot;header header&quot;</span>
<span class="strings">&quot;nav hero&quot;</span>
<span class="strings">&quot;nav main&quot;</span>
<span class="strings">&quot;nav footer&quot;</span>
/ <span class="numbers">180px</span> <span class="numbers">1fr</span>;
}
}
</pre></body>
</html>
Reference in New Issue View Git Blame Copy Permalink