diff --git a/css/Style.css b/css/Style.css new file mode 100644 index 0000000000000000000000000000000000000000..e9d494659be481f4372d20b635a98870bdfaad2d --- /dev/null +++ b/css/Style.css @@ -0,0 +1,297 @@ +/*-------------------------*/ +/*----------Reset----------*/ +/*-------------------------*/ + + +html { + font-family: sans-serif; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +body { + margin: 0; +} + +img { + display: block; + border: 0; + width: 100%; + height: auto; +} + +/*------------------------*/ +/*----------Text----------*/ +/*------------------------*/ + +body, +button, +input, +select, +textarea { + color: #404040; + font-family: 'Helvetica', Arial, sans-serif; + font-size: 18px; + line-height: 1.5; +} + +a { color: inherit; } + +h1, +h2, +h3 { + margin: 0; + padding: 1em 0; +} + +h1/*header*/{ + text-align: right; + font-size: 1em; + text-decoration: none; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); +} + +h2/*main*/{ + text-align: center; + text-decoration: underline; +} + +h3/*footer*/{ + text-align: left; + font-size: 0.8em; + text-decoration: none; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); +} + +h4{ + text-align: center; + text-decoration: underline; +} + + + + +.paragraph1{ + margin: 2%; + +} +.paragraph2{ + margin: 2% + +} +.p3{ + margin: 2%; + background-color: rgb(189, 231, 189); +} + +ul1 { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + position: -webkit-sticky; /* Safari */ + position: sticky; + top: 0; + +} + +li1 { + padding-right: 1%; + float: right; + +} + +li1 a { + display: block; + color: white; + text-align: center; + padding: 14px 16px; + font-size: 1.3em; + text-decoration: none; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); + +} + +li1 a:hover:not(.active) { + background-color: #557c1f +} + +.active { + background-color: #4CAF50; +} + +input[type=submit] { + background-color: #88bd2c; + color: rgb(0, 0, 0); + padding: 12px 20px; + + cursor: pointer; + +} + +input[type=submit]:hover { + background-color: #688f23; +} + +/*---------------------------*/ +/*----------General----------*/ +/*---------------------------*/ + +.site { + background: #f1f1f1; + min-height: 100vh; +} + +.header, +.navigation, +.content, +.footer { + padding: 0; + +} + +.content { + background: white; + border-left: 1px solid black; + border-right: 1px solid black; + + +} +.header { + background: #88bd2c; + color: white; +} + +.navigation { + background: #688f23; +} + + + +.footer { + + background: #8e8e8e; + color: white; +} + + +/*---------------------------*/ +/*----------Images----------*/ +/*---------------------------*/ + +.logo_img{ + padding-left: 10%; + float: left; /*not sure how to move it along without stretching coloumn*/ + +} + +.picture1{ + float: right; + } + + + +.picture2{ + grid-column: 4/5; + grid-row: 3/4; + display: block; + border: 0; + width: 100%; + height: auto; + } + +.picture3{ + float: right; + height: 15%; + width: 15%; + + margin: 10px; + padding-top: 1px; + padding-left: 1px; + padding-right: 1px; + padding-bottom: 1px; + } +.picture3 img{ + border-radius: 50%; + } + +.picture4{ + float: right; + height: 20%; + width: 20%; + + margin: 2%; + padding-top: 1px; + padding-left: 1px; + padding-right: 1px; + padding-bottom: 1px; + } + + +/*-----------------------------------------------------------------------------------------------*/ +/*----------Displays grids on anything with the min width of 700px , most modern phones----------*/ +/*-----------------------------------------------------------------------------------------------*/ + + +@media screen and (min-width: 700px) { + @supports (display: grid) { + + .site { + display: grid; + grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr; + + grid-template-rows: [row1-start] minmax(1em, auto) [row2-start] minmax(1em, auto) [row3-start] 1fr [row4-start] auto; + } + + .header, + .navigation, + .footer { + grid-column-start:1; + grid-column-end: 9; + border-bottom: 1px solid black; + + } + + .header{ + padding-right: 10%; + } + + + .navigation{ + + grid-row-start: 2/3; + border-bottom: 1px solid black; + display: inline-block; + padding-right: 8%; + + } + + + + .content { + grid-column: 2/8; + grid-row: 3/4; + margin: 15px; + border-top: 1px solid black; + border-bottom: 1px solid black; + } + + + + + + + .footer{ + grid-row: 4/5; + border-top: 1px solid black; + padding-left: 10%; + } + + + + + + + } + +} \ No newline at end of file