diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2641667 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.mp4 diff --git a/README.md b/README.md index e69de29..f5d5bb1 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,4 @@ +#HTML5 as a platform +##By Emmanuel Santos and Ben Spears. + +We have created a mock up for a home page on a site that would be a subscription based music **video** service. This page shows the use of the html5 video element with an autoplay feature which is also muted with no controls, so it can be used as a background for the site. The account creation link leads to a form to fill out, which uses validation to make sure each field is completed, as well as the correct semantic meaning for each type of input field. diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..2342907 --- /dev/null +++ b/css/base.css @@ -0,0 +1,51 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/*base styles*/ +body{ + background: white; + font-family: 'Gruppo'; + text-align: center; +} diff --git a/css/layout.css b/css/layout.css new file mode 100644 index 0000000..ca85473 --- /dev/null +++ b/css/layout.css @@ -0,0 +1,62 @@ +header{ + background-color: rgb(127, 171, 141); + left: 0; + text-align: left; + top: 0; + position: fixed; + z-index: 200; + color: white; +} + +footer{ + background-color: rgb(127, 171, 141); + bottom: 0; + left: 0; + padding: 0.1em 0 0.1em 0; + position: fixed; + z-index: 100; +} + +footer p{ + color: white; + font-size: 1.2em; +} + +.center-box{ + margin-left: auto; + margin-right: auto; +} + +.content-container{ + position: absolute; + background-size: cover; + bottom: 0rem; + min-height: 100%; + min-width: 100%; + right: 0rem; + width: auto; +} + +.account-page{ + overflow: hidden; + color: black; + position: relative; + top: 5em; + z-index: -1; +} + +.smallVideo{ + min-width: 30%; + width: 30%; +} + +.share-box{ + margin: 0 auto; + margin-top: 2em; + width: 20%; +} + +.video-box{ + margin-top: 10em; +} + diff --git a/css/mediaq.css b/css/mediaq.css new file mode 100644 index 0000000..5d35818 --- /dev/null +++ b/css/mediaq.css @@ -0,0 +1,132 @@ +/*DESKTOP*//*DESKTOP*//*DESKTOP*//*DESKTOP +@media (max-width: 900px){ +} +/*TABLET*//*TABLET*//*TABLET*//*TABLET*/ +@media (max-width: 1100px){ + ul{ + font-size: 1.2em; + } + + .tagLine{ + font-size: 2.9em; + } + + .registerButton{ + font-size: 1.5em; + width: 40%; + padding: 0.6em; + } + + .serviceInfo{ + font-size: 2em; + height: auto; + top: 2.2em; + margin-top: 10.4em; + margin-bottom: 1em; + } + + .orange-text{ + font-size: 1em; + } + + form{ + bottom: 5.5em; + left: 0; + margin-left: 8.3em; + } + + fieldset{ + width: 60%; + } + + input{ + border: 2px solid white; + width: 60%; + } + + footer{ + height: 2em; + } + + .orange-text{ + font-size: 1.4em; + } +} +/*MOBILE*//*MOBILE*//*MOBILE*//*MOBILE*/ +@media (max-width: 600px){ + + header{ + padding-bottom: .7em; + text-align: center; + } + + ul{ + font-size: 1.1em; + margin-top: 1em; + margin-right: 2.5em; + } + + .tagLine{ + color: black; + font-size: 2.5rem; + } + + .registerButton{ + width: 70%; + padding: 0.6em; + } + + .serviceInfo{ + font-size: 1.8em; + height: auto; + top: 2.2em; + margin-top: 10em; + } + + .over-video{ + margin-top: -21rem; + background: rgba(255, 255, 255, 0.13); + width: 100%; + height: 15em; + } + + .info-tag{ + font-size: 0.9em; + margin-top: 2em; + } + + .orange-text{ + font-size: 1em; + } + + form{ + bottom: 12em; + left: -6em; + z-index: 101; + } + + fieldset{ + width: 80%; + } + + input{ + border: 2px solid white; + width: 60%; + } + + input[type="submit"]{ + border-radius: .5em; + width: 20%; + } + + button{ + border: none; + border-radius: .5em; + padding: .2em; + width: 20%; + } + + footer{ + height: 1.6em; + } +} diff --git a/css/module.css b/css/module.css new file mode 100644 index 0000000..6c91098 --- /dev/null +++ b/css/module.css @@ -0,0 +1,188 @@ +.main-logo{ + cursor: pointer; + margin-left: 0.1em; + font-size: 3.2rem; +} + +.absolute-title{ + margin-top: -20rem; + background: rgba(255, 255, 255, 0.13); + width: 100%; + height: 15em; +} + +.hidden { + visibility: hidden; +} + +.inline-list{ + display: inline; +} + +form{ + bottom: 11rem; + left: 32rem; + position: fixed; + z-index: 100; +} + +select, +input, +label{ + border: none; + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 0.2rem; + padding: 0.3rem; + z-index: 500; +} + +fieldset{ + background-color: rgba(198, 229, 198, 0.93); + border-bottom-left-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; + border-top-right-radius: 0.5rem; + box-shadow: 0 0 2rem rgb(86, 100, 90); + width: 20%; +} + +legend{ + background: white; + border-top-right-radius: 0.5rem; + color: rgb(18, 18, 39); + padding: 0.6rem; + text-align: left; +} + +button{ + display: block; + margin: 0 auto; + margin-bottom: 0.2rem; + margin-top: 0.2rem; +} + +.registerButton{ + border: none; + background-color: rgb(127, 171, 141); + border-radius: 0.5rem; + color: azure; + font-size: 2rem; + margin-left: auto; + margin-right: auto; + margin-top: .5em; + position: relative; + padding: .2em; + width: 20%; + z-index: 99; +} + +video{ + background-size: cover; + bottom: 0rem; + min-height: 100%; + min-width: 100%; + right: 0rem; + width: auto; + z-index: -100; +} + +.serviceInfo{ + background-color: rgb(36, 52, 41); + bottom: 0rem; + color: white; + font-size: 2.2rem; + height: 11rem; + padding-top: 0.5rem; + position: absolute; + width: 100%; +} + +.info-tag{ + color: azure; + font-size: 1.2rem; + margin-left: 0.3rem; +} + +.tagLine{ + color: white; + font-size: 5rem; + margin-top: 28rem; + z-index: 100; +} + +/**/ +.white-text{ + color: white; +} + +.orange-text{ + font-size: 1.5em; + color: orange; +} + +.full-width{ + width: 100%; +} + +.greeting{ + margin-left: 0.1em; + font-size: 2.5em; +} + +.small-icon{ + width: 15%; +} + +.share-title{ + font-size: 1.5em; + margin-right: 0.1em; +} + +.video-box p{ + font-size: 1.5em; + margin-left: 5%; + margin-bottom: 1em; + text-align: left; +} +/**/ + +.nav-list{ + width: 100%; + margin: 0; + position: fixed; + margin-top: 3.2em; + background: rgb(131, 173, 144); + overflow: hidden; + display: none; + top: 0em; + left: 0; + box-sizing: border-box; + padding: .3em; +} + +.drop-list{ + text-align: left; + font-size: 2.5em; + margin: 0; +} + +.droplist li{ + margin-left: .1em; + z-index: 100; +} + +.drop-list li:hover{ + background: rgb(50, 76, 58); + cursor: pointer; + margin-left: .2em; + color: white; + transition: margin-left .2s; +} + +.menu-btn{ + font-size: .5em; + margin-right: 1em; +} + + diff --git a/css/state.css b/css/state.css new file mode 100644 index 0000000..8c84c50 --- /dev/null +++ b/css/state.css @@ -0,0 +1,14 @@ +.inline-list:hover{ + color: black; + cursor: pointer; + transition: color 0.5s; +} + +.registerButton:hover{ + box-shadow: 0 0 1rem rgb(86, 100, 90);; + color: black; + cursor: pointer; + transition: color 0.5s; +} + + diff --git a/images/fb.png b/images/fb.png new file mode 100644 index 0000000..827e979 Binary files /dev/null and b/images/fb.png differ diff --git a/images/gplus.png b/images/gplus.png new file mode 100644 index 0000000..261dea6 Binary files /dev/null and b/images/gplus.png differ diff --git a/images/twitter.png b/images/twitter.png new file mode 100644 index 0000000..df52e31 Binary files /dev/null and b/images/twitter.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..2b8d9b6 --- /dev/null +++ b/index.html @@ -0,0 +1,70 @@ + + +
+ +t |
Add some of today's most popular videos to your page.
+ + + +