Difference between revisions of "Team:Central Calgary/wiki1"
Line 1: | Line 1: | ||
<html> | <html> | ||
<header> | <header> | ||
+ | <style> | ||
+ | |||
+ | @font-face { | ||
+ | font-family: "RobotoThin"; | ||
+ | src: url("RobotoThin.ttf"); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: "BebasNeue"; | ||
+ | src: url("BebasNeue.otf"); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: "RobotoRegular"; | ||
+ | src: url("Roboto-Regular.ttf"); | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: "RobotoLight"; | ||
+ | src: url("Roboto-Light.ttf"); | ||
+ | } | ||
+ | h1 { | ||
+ | font-family: "RobotoLight"; | ||
+ | font-size: 24px; | ||
+ | } | ||
+ | * { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | body { | ||
+ | background-color: #f2faff; | ||
+ | background-size: 100% auto; | ||
+ | } | ||
+ | .headerSticky-scroll { | ||
+ | background: #333333 none repeat scroll 0 0; | ||
+ | height: 70px; | ||
+ | position: fixed; | ||
+ | width: 100%; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | #center { | ||
+ | background: #eee none repeat scroll 0 0; | ||
+ | margin: 10px auto; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | width: 70%; | ||
+ | } | ||
+ | #menuText { | ||
+ | color: #ffffff; | ||
+ | font-family: "RobotoLight"; | ||
+ | left: 12px; | ||
+ | position: absolute; | ||
+ | top: 5px; | ||
+ | } | ||
+ | #homeText { | ||
+ | display: table-cell; | ||
+ | font-family: "RobotoLight"; | ||
+ | font-size: 36px; | ||
+ | padding-bottom: 30px; | ||
+ | position: relative; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | #name { | ||
+ | margin-left: 80px; | ||
+ | margin-top: 10px; | ||
+ | position: fixed; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | .parentMenu { | ||
+ | font-family: "RobotoLight"; | ||
+ | font-weight: 100; | ||
+ | margin-left: 25%; | ||
+ | margin-right: 30%; | ||
+ | position: fixed; | ||
+ | top: 8px; | ||
+ | vertical-align: middle; | ||
+ | width: 710px; | ||
+ | } | ||
+ | .nav { | ||
+ | color: #ffffff; | ||
+ | display: inline-block; | ||
+ | margin: 2px 22px 8px; | ||
+ | overflow: hidden; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .nav ul { | ||
+ | padding: 0; | ||
+ | } | ||
+ | .nav ul li { | ||
+ | display: inline-block; | ||
+ | list-style-type: none; | ||
+ | transition: all 0.2s ease 0s; | ||
+ | } | ||
+ | .nav > ul > li > a > .caret { | ||
+ | border-left: 4px solid transparent; | ||
+ | border-right: 4px solid transparent; | ||
+ | border-top: 4px solid #ffffff; | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | height: 0; | ||
+ | transition: color 0.1s linear 0s; | ||
+ | vertical-align: middle; | ||
+ | width: 0; | ||
+ | } | ||
+ | .nav > ul > li > a { | ||
+ | color: #ffffff; | ||
+ | display: block; | ||
+ | line-height: 56px; | ||
+ | padding: 0 24px; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .nav > ul > li:hover { | ||
+ | } | ||
+ | .nav > ul > li:hover > a { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | .nav > ul > li:hover > a > .caret { | ||
+ | border-top-color: #ff9b19; | ||
+ | } | ||
+ | .nav > ul > li > div { | ||
+ | background-color: #ff9b19; | ||
+ | border-radius: 0 0 4px 4px; | ||
+ | border-top: 0 none; | ||
+ | box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); | ||
+ | display: none; | ||
+ | margin: 0; | ||
+ | opacity: 0; | ||
+ | position: absolute; | ||
+ | transition: opacity 0.2s ease 0s; | ||
+ | visibility: hidden; | ||
+ | width: 165px; | ||
+ | } | ||
+ | .nav > ul > li:hover > div { | ||
+ | display: block; | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | } | ||
+ | .nav > ul > li > div ul > li { | ||
+ | display: block; | ||
+ | } | ||
+ | .nav > ul > li > div ul > li > a { | ||
+ | color: #fff; | ||
+ | display: block; | ||
+ | padding: 12px 24px; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .nav > ul > li > div ul > li:hover > a { | ||
+ | background-color: rgba(255, 255, 255, 0.1); | ||
+ | } | ||
+ | #socialParent { | ||
+ | display: inline-block; | ||
+ | margin-left: 10%; | ||
+ | position: fixed; | ||
+ | } | ||
+ | #bodyContent { | ||
+ | position: relative; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | #homeonetext { | ||
+ | display: block; | ||
+ | margin-left: 500px; | ||
+ | position: absolute; | ||
+ | text-align: justify; | ||
+ | width: 800px; | ||
+ | } | ||
+ | #homeoneline { | ||
+ | color: #ffffff; | ||
+ | margin-bottom: 8px; | ||
+ | margin-top: 4px; | ||
+ | } | ||
+ | #homeoneimage { | ||
+ | position: absolute; | ||
+ | } | ||
+ | #hometwotext { | ||
+ | display: block; | ||
+ | margin-left: 150px; | ||
+ | position: absolute; | ||
+ | text-align: justify; | ||
+ | width: 800px; | ||
+ | } | ||
+ | #hometwoline { | ||
+ | color: #ffffff; | ||
+ | margin-bottom: 8px; | ||
+ | margin-top: 4px; | ||
+ | } | ||
+ | #hometwoimage { | ||
+ | margin-left: 67%; | ||
+ | position: absolute; | ||
+ | } | ||
+ | #homeOne { | ||
+ | background: #7f7f79 none repeat scroll 0 0; | ||
+ | color: #ffffff; | ||
+ | display: block; | ||
+ | font-family: "RobotoLight"; | ||
+ | height: 300px; | ||
+ | padding-left: 20px; | ||
+ | padding-right: 20px; | ||
+ | padding-top: 90px; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | } | ||
+ | #homeTwo { | ||
+ | background: #4c4c49 none repeat scroll 0 0; | ||
+ | color: #ffffff; | ||
+ | display: block; | ||
+ | font-family: "RobotoLight"; | ||
+ | height: 300px; | ||
+ | padding-left: 20px; | ||
+ | padding-right: 20px; | ||
+ | padding-top: 90px; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | } | ||
+ | #homeThree { | ||
+ | background: #8a7b65 none repeat scroll 0 0; | ||
+ | color: #ffffff; | ||
+ | display: block; | ||
+ | font-family: "RobotoLight"; | ||
+ | height: 300px; | ||
+ | padding-left: 20px; | ||
+ | padding-right: 20px; | ||
+ | padding-top: 90px; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | } | ||
+ | #homethreetext { | ||
+ | display: block; | ||
+ | margin-left: 500px; | ||
+ | position: absolute; | ||
+ | text-align: justify; | ||
+ | width: 800px; | ||
+ | } | ||
+ | #homethreeline { | ||
+ | color: #ffffff; | ||
+ | margin-bottom: 8px; | ||
+ | margin-top: 4px; | ||
+ | } | ||
+ | #homethreeimage { | ||
+ | position: absolute; | ||
+ | } | ||
+ | #homeFour { | ||
+ | background: #687f7d none repeat scroll 0 0; | ||
+ | color: #ffffff; | ||
+ | display: block; | ||
+ | font-family: "RobotoLight"; | ||
+ | height: 300px; | ||
+ | padding-left: 20px; | ||
+ | padding-right: 20px; | ||
+ | padding-top: 90px; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | } | ||
+ | #footer { | ||
+ | background: #333333 none repeat scroll 0 0; | ||
+ | display: block; | ||
+ | font-weight: bold; | ||
+ | height: 450px; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | } | ||
+ | #map { | ||
+ | box-shadow: 8px 8px 50px #000000; | ||
+ | margin-left: 30px; | ||
+ | margin-top: 118px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | #footerWords { | ||
+ | color: white; | ||
+ | font-family: "RobotoThin"; | ||
+ | font-size: 20px; | ||
+ | margin-left: 35%; | ||
+ | margin-top: 150px; | ||
+ | position: relative; | ||
+ | text-align: justify; | ||
+ | width: 805px; | ||
+ | } | ||
+ | #footerLine { | ||
+ | color: #ffffff; | ||
+ | margin-bottom: 8px; | ||
+ | margin-top: 4px; | ||
+ | width: 805px; | ||
+ | } | ||
+ | #footerTop { | ||
+ | background: #333333 none repeat scroll 0 0; | ||
+ | box-shadow: 0 5px 10px #000000; | ||
+ | margin-bottom: 1000px; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | #footerText { | ||
+ | color: white; | ||
+ | font-family: "RobotoLight"; | ||
+ | margin-top: 1%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | 300 | ||
+ | |||
+ | height: 300px; | ||
+ | |||
+ | 301 | ||
+ | |||
+ | background: #4C4C49; | ||
+ | |||
+ | 302 | ||
+ | |||
+ | color: #ffffff; | ||
+ | |||
+ | 303 | ||
+ | |||
+ | font-family: "RobotoLight"; | ||
+ | |||
+ | 304 | ||
+ | |||
+ | |||
+ | |||
+ | 305 | ||
+ | |||
+ | } | ||
+ | |||
+ | 306 | ||
+ | |||
+ | |||
+ | |||
+ | 307 | ||
+ | |||
+ | #homeThree { | ||
+ | |||
+ | 308 | ||
+ | |||
+ | position: relative; | ||
+ | |||
+ | 309 | ||
+ | |||
+ | display: block; | ||
+ | |||
+ | 310 | ||
+ | |||
+ | padding-top:90px; | ||
+ | |||
+ | 311 | ||
+ | |||
+ | padding-left: 20px; | ||
+ | |||
+ | 312 | ||
+ | |||
+ | padding-right: 20px; | ||
+ | |||
+ | 313 | ||
+ | |||
+ | width: 100%; | ||
+ | |||
+ | 314 | ||
+ | |||
+ | height: 300px; | ||
+ | |||
+ | 315 | ||
+ | |||
+ | background: #8A7B65; | ||
+ | |||
+ | 316 | ||
+ | |||
+ | color: #ffffff; | ||
+ | |||
+ | 317 | ||
+ | |||
+ | font-family: "RobotoLight"; | ||
+ | |||
+ | 318 | ||
+ | |||
+ | |||
+ | |||
+ | 319 | ||
+ | |||
+ | } | ||
+ | |||
+ | 320 | ||
+ | |||
+ | |||
+ | |||
+ | 321 | ||
+ | |||
+ | |||
+ | |||
+ | 322 | ||
+ | |||
+ | #homethreetext { | ||
+ | |||
+ | 323 | ||
+ | |||
+ | position: absolute; | ||
+ | |||
+ | 324 | ||
+ | |||
+ | display: block; | ||
+ | |||
+ | 325 | ||
+ | |||
+ | width: 800px; | ||
+ | |||
+ | 326 | ||
+ | |||
+ | margin-left: 500px; | ||
+ | |||
+ | 327 | ||
+ | |||
+ | text-align: justify; | ||
+ | |||
+ | 328 | ||
+ | |||
+ | } | ||
+ | |||
+ | 329 | ||
+ | |||
+ | |||
+ | |||
+ | 330 | ||
+ | |||
+ | #homethreeline { | ||
+ | |||
+ | 331 | ||
+ | |||
+ | color: #FFFFFF; | ||
+ | |||
+ | 332 | ||
+ | |||
+ | margin-top: 4px; | ||
+ | |||
+ | 333 | ||
+ | |||
+ | margin-bottom: 8px; | ||
+ | |||
+ | 334 | ||
+ | |||
+ | |||
+ | |||
+ | 335 | ||
+ | |||
+ | } | ||
+ | |||
+ | 336 | ||
+ | |||
+ | |||
+ | |||
+ | 337 | ||
+ | |||
+ | #homethreeimage { | ||
+ | |||
+ | 338 | ||
+ | |||
+ | position: absolute; | ||
+ | |||
+ | 339 | ||
+ | |||
+ | |||
+ | |||
+ | 340 | ||
+ | |||
+ | } | ||
+ | |||
+ | 341 | ||
+ | |||
+ | |||
+ | |||
+ | 342 | ||
+ | |||
+ | #homeFour { | ||
+ | |||
+ | 343 | ||
+ | |||
+ | position: relative; | ||
+ | |||
+ | 344 | ||
+ | |||
+ | display: block; | ||
+ | |||
+ | 345 | ||
+ | |||
+ | padding-top:90px; | ||
+ | |||
+ | 346 | ||
+ | |||
+ | padding-left: 20px; | ||
+ | |||
+ | 347 | ||
+ | |||
+ | padding-right: 20px; | ||
+ | |||
+ | 348 | ||
+ | |||
+ | width: 100%; | ||
+ | |||
+ | 349 | ||
+ | |||
+ | height: 300px; | ||
+ | |||
+ | 350 | ||
+ | |||
+ | background: #687F7D; | ||
+ | |||
+ | 351 | ||
+ | |||
+ | color: #ffffff; | ||
+ | |||
+ | 352 | ||
+ | |||
+ | font-family: "RobotoLight"; | ||
+ | |||
+ | 353 | ||
+ | |||
+ | |||
+ | |||
+ | 354 | ||
+ | |||
+ | } | ||
+ | |||
+ | 355 | ||
+ | |||
+ | |||
+ | |||
+ | 356 | ||
+ | |||
+ | /*footer--------------------------------------------------------*/ | ||
+ | |||
+ | 357 | ||
+ | |||
+ | #footer { | ||
+ | |||
+ | 358 | ||
+ | |||
+ | position: absolute; | ||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
Revision as of 20:32, 27 August 2015
Howdy Chocker!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec purus non eros dapibus pulvinar. Curabitur mollis augue ut congue tempus. Vestibulum ac lobortis sem. Suspendisse tempus, massa ut feugiat dapibus, dui sapien pellentesque risus, sit amet dignissim velit lectus non lectus. Vivamus sagittis sem ante, nec congue est ornare non. Aenean in nibh faucibus, posuere nibh quis, lacinia dolor. Nulla blandit rhoncus convallis. Mauris at massa id sapien suscipit suscipit vel sed dui. Cras euismod purus rutrum metus ullamcorper ullamcorper.
Bonjour Pete!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec purus non eros dapibus pulvinar. Curabitur mollis augue ut congue tempus. Vestibulum ac lobortis sem. Suspendisse tempus, massa ut feugiat dapibus, dui sapien pellentesque risus, sit amet dignissim velit lectus non lectus. Vivamus sagittis sem ante, nec congue est ornare non. Aenean in nibh faucibus, posuere nibh quis, lacinia dolor. Nulla blandit rhoncus convallis. Mauris at massa id sapien suscipit suscipit vel sed dui. Cras euismod purus rutrum metus ullamcorper ullamcorper.
Greetings Jar!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec purus non eros dapibus pulvinar. Curabitur mollis augue ut congue tempus. Vestibulum ac lobortis sem. Suspendisse tempus, massa ut feugiat dapibus, dui sapien pellentesque risus, sit amet dignissim velit lectus non lectus. Vivamus sagittis sem ante, nec congue est ornare non. Aenean in nibh faucibus, posuere nibh quis, lacinia dolor. Nulla blandit rhoncus convallis. Mauris at massa id sapien suscipit suscipit vel sed dui. Cras euismod purus rutrum metus ullamcorper ullamcorper.