diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5de5652 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.sass-cache +css/devtest.css.map diff --git a/css/devtest.css b/css/devtest.css new file mode 100644 index 0000000..a048d9e --- /dev/null +++ b/css/devtest.css @@ -0,0 +1,189 @@ +/* Causes contents to be vertically aligned in the middle */ +.layout-center-aligned { + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-items: center; + align-items: center; } + +/* Standard padding between sections of the page */ +.layout-section-padding { + padding-top: 60px; + padding-bottom: 20px; } + +/* Footer is padded differently */ +.layout-footer-padding { + padding-top: 20px; + padding-bottom: 60px; } + +/* Default values */ +.base { + background-color: #f7f7f7; + text-align: center; + font-family: "open sans", sans-serif; + font-weight: lighter; } + +h1 { + font-size: 230%; + text-align: left; + margin-top: 0px; + margin-bottom: 10px; } + +a { + text-decoration: none; } + +a:hover { + font-weight: bold; } + +/* Allows the setting of SVG icon color when using a reference. + Just set the color style attribute. */ +path { + fill: currentColor; } + +/* Styling for the page header */ +.header, .footer { + background-color: #2196f3; + color: white; } + +.page-name { + font-size: 150%; } + +/* menu and menu-item are for the menu at the top of the header */ +.menu { + font-size: 80%; + font-weight: normal; } + +.menu-item { + color: white; } + +.header-text { + font-size: 400%; + padding-top: 13%; + padding-bottom: 24%; } + +/* End styling for page header */ +/* Styling for services section */ +.quote { + font-size: 240%; + color: gray; } + +.services { + background-color: white; } + .services p { + font-size: 75%; } + .services .icon { + width: 64pt; + height: 64pt; } + +/* End styling for services section */ +/* Styles icons for the Services section and panels */ +.icon { + margin-top: 1em; + color: #2196f3; } + +/* Used for both work samples and team members */ +.panel { + margin-top: 5px; + margin-bottom: 5px; + padding-bottom: 25px; + background-color: white; + box-shadow: 0 1px 3px #666666; + border-radius: 3px; + overflow: hidden; } + .panel img { + width: 100%; } + .panel .name { + padding-top: 20px; + font-size: 110%; + color: gray; + font-weight: normal; } + .panel .title { + color: #e53935; + font-size: 90%; + font-style: italic; } + .panel .link { + padding-top: 20px; + font-size: 60%; } + .panel .icon { + width: 12pt; + height: 12pt; } + +/* styling specific to work samples */ +.work.panel { + text-align: left; } + .work.panel .name, .work.panel .link { + padding-left: 5%; } + +/* Slide show styling */ +#slide { + border-radius: 4px; + position: relative; + overflow: hidden; + z-index: 1; } + +/* This will force the slide div to a fixed size. + * Also places inset shadow on slide image. + * Size is dependent on width of element with a 1:1 aspect ratio. */ +#slide:before { + content: ""; + padding-top: 100%; + width: 100%; + height: 100%; + box-shadow: 0 0 4px #666666 inset; + position: relative; + float: left; + z-index: 2; } + +/* Footer styling */ +.footer { + position: relative; + text-align: left; + font-weight: normal; + font-size: 110%; } + .footer .layout-higher { + top: -.5em; } + .footer svg { + width: 12pt; + height: 12pt; } + .footer a { + color: white; + font-size: 60%; } + +/* This is for the contact section of the footer */ +.contact { + text-align: left; + font-size: 80%; + /* Input fields */ + /* Submit button */ } + .contact .input { + width: 100%; + color: white; + background-color: #2196f3; + border: none; + border-bottom: thin solid gray; + margin-bottom: 20px; + padding-bottom: 5px; + resize: none; + overflow: auto; } + .contact .submit { + color: white; + font-size: 80%; + float: right; + margin-bottom: 20px; + background-color: #e53935; + width: 80px; + height: 25px; + border: none; + border-radius: 4px; + box-shadow: 0 1px 3px #666666; } + .contact .submit:hover { + background-color: #d52925; } + +/* End styling for page footer */ +/* For emphasizing text */ +.emphasis { + color: #2196f3; + font-weight: normal; } + +/*# sourceMappingURL=devtest.css.map */ diff --git a/css/devtest.scss b/css/devtest.scss new file mode 100644 index 0000000..a5d50e7 --- /dev/null +++ b/css/devtest.scss @@ -0,0 +1,258 @@ +$blue: #2196f3; +$off-white: #f7f7f7; +$shadow: #666666; +$red: #e53935; +$dark-red: #d52925; + +@mixin display-flex { + display: -webkit-flex; + display: flex; +} + +@mixin flex-wrap($wrap-option) { + -webkit-flex-wrap: $wrap-option; + flex-wrap: $wrap-option; +} + +@mixin align-items($alignment) { + -webkit-align-items: $alignment; + align-items: $alignment; +} + +/* Causes contents to be vertically aligned in the middle */ +.layout-center-aligned { + @include display-flex; + @include flex-wrap(wrap); + @include align-items(center); +} + +/* Standard padding between sections of the page */ +.layout-section-padding { + padding-top: 60px; + padding-bottom: 20px; +} + +/* Footer is padded differently */ +.layout-footer-padding { + padding-top: 20px; + padding-bottom: 60px; +} + +/* Default values */ +.base { + background-color: $off-white; + text-align: center; + font-family: "open sans", sans-serif; + font-weight: lighter; +} + +h1 { + font-size: 230%; + text-align: left; + margin-top: 0px; + margin-bottom: 10px; +} + +a { + text-decoration: none; +} + +a:hover { + font-weight: bold; +} + +/* Allows the setting of SVG icon color when using a reference. + Just set the color style attribute. */ +path { + fill: currentColor; +} + +/* Styling for the page header */ +.header { + background-color: $blue; + color: white; +} + +.page-name { + font-size: 150%; +} + +/* menu and menu-item are for the menu at the top of the header */ +.menu { + font-size: 80%; + font-weight: normal; + } + +.menu-item { + color: white; +} + +.header-text { + font-size: 400%; + padding-top: 13%; + padding-bottom: 24%; +} +/* End styling for page header */ + +/* Styling for services section */ +.quote { + font-size: 240%; + color: gray; +} + +.services { + background-color: white; + + p { + font-size: 75%; + } + + .icon { + width: 64pt; + height: 64pt; + } +} +/* End styling for services section */ + +/* Styles icons for the Services section and panels */ +.icon { + margin-top: 1em; + color: $blue; +} + +/* Used for both work samples and team members */ +.panel { + margin-top: 5px; + margin-bottom: 5px; + padding-bottom: 25px; + background-color: white; + box-shadow: 0 1px 3px $shadow; + border-radius: 3px; + overflow: hidden; + + img { + width: 100%; + } + + .name { + padding-top: 20px; + font-size: 110%; + color: gray; + font-weight: normal; + } + + .title { + color: $red; + font-size: 90%; + font-style: italic; + } + + .link { + padding-top: 20px; + font-size: 60%; + } + + .icon { + width: 12pt; + height: 12pt; + } +} + +/* styling specific to work samples */ +.work.panel { + text-align: left; + + .name, .link { + padding-left: 5%; + } +} + +/* Slide show styling */ +#slide { + border-radius: 4px; + position: relative; + overflow: hidden; + z-index: 1; +} + +/* This will force the slide div to a fixed size. + * Also places inset shadow on slide image. + * Size is dependent on width of element with a 1:1 aspect ratio. */ +#slide:before { + content: ""; + padding-top: 100%; + width: 100%; + height: 100%; + box-shadow: 0 0 4px $shadow inset; + position: relative; + float: left; + z-index: 2; +} + +/* Footer styling */ +.footer { + @extend .header; + + position: relative; + text-align: left; + font-weight: normal; + font-size: 110%; + + .layout-higher { + top: -.5em; + } + + svg { + width: 12pt; + height: 12pt; + } + + a { + color: white; + font-size: 60%; + } +} + +/* This is for the contact section of the footer */ +.contact { + text-align: left; + font-size: 80%; + + /* Input fields */ + .input { + width: 100%; + color: white; + background-color: $blue; + border: none; + border-bottom: thin solid gray; + margin-bottom: 20px; + padding-bottom: 5px; + resize: none; + overflow: auto; + } + + /* Submit button */ + .submit { + color: white; + font-size: 80%; + float: right; + margin-bottom: 20px; + background-color: $red; + width: 80px; + height: 25px; + border:none; + border-radius: 4px; + box-shadow: 0 1px 3px $shadow; + } + + .submit:hover { + background-color: $dark-red; + } +} +/* End styling for page footer */ + +/* For emphasizing text */ +.emphasis { + color: $blue; + font-weight: normal; +} diff --git a/css/foundation.min.css b/css/foundation.min.css new file mode 100644 index 0000000..d53b602 --- /dev/null +++ b/css/foundation.min.css @@ -0,0 +1 @@ +meta.foundation-version{font-family:"/5.5.2/"}meta.foundation-mq-small{font-family:"/only screen/";width:0}meta.foundation-mq-small-only{font-family:"/only screen and (max-width: 40em)/";width:0}meta.foundation-mq-medium{font-family:"/only screen and (min-width:40.0625em)/";width:40.0625em}meta.foundation-mq-medium-only{font-family:"/only screen and (min-width:40.0625em) and (max-width:64em)/";width:40.0625em}meta.foundation-mq-large{font-family:"/only screen and (min-width:64.0625em)/";width:64.0625em}meta.foundation-mq-large-only{font-family:"/only screen and (min-width:64.0625em) and (max-width:90em)/";width:64.0625em}meta.foundation-mq-xlarge{font-family:"/only screen and (min-width:90.0625em)/";width:90.0625em}meta.foundation-mq-xlarge-only{font-family:"/only screen and (min-width:90.0625em) and (max-width:120em)/";width:90.0625em}meta.foundation-mq-xxlarge{font-family:"/only screen and (min-width:120.0625em)/";width:120.0625em}meta.foundation-data-attribute-namespace{font-family:false}html,body{height:100%}html{box-sizing:border-box}*,*:before,*:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}html,body{font-size:100%}body{background:#fff;color:#222;cursor:auto;font-family:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;font-style:normal;font-weight:normal;line-height:1.5;margin:0;padding:0;position:relative}a:hover{cursor:pointer}img{max-width:100%;height:auto}img{-ms-interpolation-mode:bicubic}#map_canvas img,#map_canvas embed,#map_canvas object,.map_canvas img,.map_canvas embed,.map_canvas object,.mqa-display img,.mqa-display embed,.mqa-display object{max-width:none !important}.left{float:left !important}.right{float:right !important}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.hide{display:none}.invisible{visibility:hidden}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{display:inline-block;vertical-align:middle}textarea{height:auto;min-height:50px}select{width:100%}.row{margin:0 auto;max-width:62.5em;width:100%}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}.row.collapse>.column,.row.collapse>.columns{padding-left:0;padding-right:0}.row.collapse .row{margin-left:0;margin-right:0}.row .row{margin:0 -0.9375em;max-width:none;width:auto}.row .row:before,.row .row:after{content:" ";display:table}.row .row:after{clear:both}.row .row.collapse{margin:0;max-width:none;width:auto}.row .row.collapse:before,.row .row.collapse:after{content:" ";display:table}.row .row.collapse:after{clear:both}.column,.columns{padding-left:0.9375em;padding-right:0.9375em;width:100%;float:left}.column+.column:last-child,.columns+.column:last-child,.column+.columns:last-child,.columns+.columns:last-child{float:right}.column+.column.end,.columns+.column.end,.column+.columns.end,.columns+.columns.end{float:left}@media only screen{.small-push-0{position:relative;left:0;right:auto}.small-pull-0{position:relative;right:0;left:auto}.small-push-1{position:relative;left:8.33333%;right:auto}.small-pull-1{position:relative;right:8.33333%;left:auto}.small-push-2{position:relative;left:16.66667%;right:auto}.small-pull-2{position:relative;right:16.66667%;left:auto}.small-push-3{position:relative;left:25%;right:auto}.small-pull-3{position:relative;right:25%;left:auto}.small-push-4{position:relative;left:33.33333%;right:auto}.small-pull-4{position:relative;right:33.33333%;left:auto}.small-push-5{position:relative;left:41.66667%;right:auto}.small-pull-5{position:relative;right:41.66667%;left:auto}.small-push-6{position:relative;left:50%;right:auto}.small-pull-6{position:relative;right:50%;left:auto}.small-push-7{position:relative;left:58.33333%;right:auto}.small-pull-7{position:relative;right:58.33333%;left:auto}.small-push-8{position:relative;left:66.66667%;right:auto}.small-pull-8{position:relative;right:66.66667%;left:auto}.small-push-9{position:relative;left:75%;right:auto}.small-pull-9{position:relative;right:75%;left:auto}.small-push-10{position:relative;left:83.33333%;right:auto}.small-pull-10{position:relative;right:83.33333%;left:auto}.small-push-11{position:relative;left:91.66667%;right:auto}.small-pull-11{position:relative;right:91.66667%;left:auto}.column,.columns{position:relative;padding-left:0.9375em;padding-right:0.9375em;float:left}.small-1{width:8.33333%}.small-2{width:16.66667%}.small-3{width:25%}.small-4{width:33.33333%}.small-5{width:41.66667%}.small-6{width:50%}.small-7{width:58.33333%}.small-8{width:66.66667%}.small-9{width:75%}.small-10{width:83.33333%}.small-11{width:91.66667%}.small-12{width:100%}.small-offset-0{margin-left:0 !important}.small-offset-1{margin-left:8.33333% !important}.small-offset-2{margin-left:16.66667% !important}.small-offset-3{margin-left:25% !important}.small-offset-4{margin-left:33.33333% !important}.small-offset-5{margin-left:41.66667% !important}.small-offset-6{margin-left:50% !important}.small-offset-7{margin-left:58.33333% !important}.small-offset-8{margin-left:66.66667% !important}.small-offset-9{margin-left:75% !important}.small-offset-10{margin-left:83.33333% !important}.small-offset-11{margin-left:91.66667% !important}.small-reset-order{float:left;left:auto;margin-left:0;margin-right:0;right:auto}.column.small-centered,.columns.small-centered{margin-left:auto;margin-right:auto;float:none}.column.small-uncentered,.columns.small-uncentered{float:left;margin-left:0;margin-right:0}.column.small-centered:last-child,.columns.small-centered:last-child{float:none}.column.small-uncentered:last-child,.columns.small-uncentered:last-child{float:left}.column.small-uncentered.opposite,.columns.small-uncentered.opposite{float:right}.row.small-collapse>.column,.row.small-collapse>.columns{padding-left:0;padding-right:0}.row.small-collapse .row{margin-left:0;margin-right:0}.row.small-uncollapse>.column,.row.small-uncollapse>.columns{padding-left:0.9375em;padding-right:0.9375em;float:left}}@media only screen and (min-width: 40.0625em){.medium-push-0{position:relative;left:0;right:auto}.medium-pull-0{position:relative;right:0;left:auto}.medium-push-1{position:relative;left:8.33333%;right:auto}.medium-pull-1{position:relative;right:8.33333%;left:auto}.medium-push-2{position:relative;left:16.66667%;right:auto}.medium-pull-2{position:relative;right:16.66667%;left:auto}.medium-push-3{position:relative;left:25%;right:auto}.medium-pull-3{position:relative;right:25%;left:auto}.medium-push-4{position:relative;left:33.33333%;right:auto}.medium-pull-4{position:relative;right:33.33333%;left:auto}.medium-push-5{position:relative;left:41.66667%;right:auto}.medium-pull-5{position:relative;right:41.66667%;left:auto}.medium-push-6{position:relative;left:50%;right:auto}.medium-pull-6{position:relative;right:50%;left:auto}.medium-push-7{position:relative;left:58.33333%;right:auto}.medium-pull-7{position:relative;right:58.33333%;left:auto}.medium-push-8{position:relative;left:66.66667%;right:auto}.medium-pull-8{position:relative;right:66.66667%;left:auto}.medium-push-9{position:relative;left:75%;right:auto}.medium-pull-9{position:relative;right:75%;left:auto}.medium-push-10{position:relative;left:83.33333%;right:auto}.medium-pull-10{position:relative;right:83.33333%;left:auto}.medium-push-11{position:relative;left:91.66667%;right:auto}.medium-pull-11{position:relative;right:91.66667%;left:auto}.column,.columns{position:relative;padding-left:0.9375em;padding-right:0.9375em;float:left}.medium-1{width:8.33333%}.medium-2{width:16.66667%}.medium-3{width:25%}.medium-4{width:33.33333%}.medium-5{width:41.66667%}.medium-6{width:50%}.medium-7{width:58.33333%}.medium-8{width:66.66667%}.medium-9{width:75%}.medium-10{width:83.33333%}.medium-11{width:91.66667%}.medium-12{width:100%}.medium-offset-0{margin-left:0 !important}.medium-offset-1{margin-left:8.33333% !important}.medium-offset-2{margin-left:16.66667% !important}.medium-offset-3{margin-left:25% !important}.medium-offset-4{margin-left:33.33333% !important}.medium-offset-5{margin-left:41.66667% !important}.medium-offset-6{margin-left:50% !important}.medium-offset-7{margin-left:58.33333% !important}.medium-offset-8{margin-left:66.66667% !important}.medium-offset-9{margin-left:75% !important}.medium-offset-10{margin-left:83.33333% !important}.medium-offset-11{margin-left:91.66667% !important}.medium-reset-order{float:left;left:auto;margin-left:0;margin-right:0;right:auto}.column.medium-centered,.columns.medium-centered{margin-left:auto;margin-right:auto;float:none}.column.medium-uncentered,.columns.medium-uncentered{float:left;margin-left:0;margin-right:0}.column.medium-centered:last-child,.columns.medium-centered:last-child{float:none}.column.medium-uncentered:last-child,.columns.medium-uncentered:last-child{float:left}.column.medium-uncentered.opposite,.columns.medium-uncentered.opposite{float:right}.row.medium-collapse>.column,.row.medium-collapse>.columns{padding-left:0;padding-right:0}.row.medium-collapse .row{margin-left:0;margin-right:0}.row.medium-uncollapse>.column,.row.medium-uncollapse>.columns{padding-left:0.9375em;padding-right:0.9375em;float:left}.push-0{position:relative;left:0;right:auto}.pull-0{position:relative;right:0;left:auto}.push-1{position:relative;left:8.33333%;right:auto}.pull-1{position:relative;right:8.33333%;left:auto}.push-2{position:relative;left:16.66667%;right:auto}.pull-2{position:relative;right:16.66667%;left:auto}.push-3{position:relative;left:25%;right:auto}.pull-3{position:relative;right:25%;left:auto}.push-4{position:relative;left:33.33333%;right:auto}.pull-4{position:relative;right:33.33333%;left:auto}.push-5{position:relative;left:41.66667%;right:auto}.pull-5{position:relative;right:41.66667%;left:auto}.push-6{position:relative;left:50%;right:auto}.pull-6{position:relative;right:50%;left:auto}.push-7{position:relative;left:58.33333%;right:auto}.pull-7{position:relative;right:58.33333%;left:auto}.push-8{position:relative;left:66.66667%;right:auto}.pull-8{position:relative;right:66.66667%;left:auto}.push-9{position:relative;left:75%;right:auto}.pull-9{position:relative;right:75%;left:auto}.push-10{position:relative;left:83.33333%;right:auto}.pull-10{position:relative;right:83.33333%;left:auto}.push-11{position:relative;left:91.66667%;right:auto}.pull-11{position:relative;right:91.66667%;left:auto}}@media only screen and (min-width: 64.0625em){.large-push-0{position:relative;left:0;right:auto}.large-pull-0{position:relative;right:0;left:auto}.large-push-1{position:relative;left:8.33333%;right:auto}.large-pull-1{position:relative;right:8.33333%;left:auto}.large-push-2{position:relative;left:16.66667%;right:auto}.large-pull-2{position:relative;right:16.66667%;left:auto}.large-push-3{position:relative;left:25%;right:auto}.large-pull-3{position:relative;right:25%;left:auto}.large-push-4{position:relative;left:33.33333%;right:auto}.large-pull-4{position:relative;right:33.33333%;left:auto}.large-push-5{position:relative;left:41.66667%;right:auto}.large-pull-5{position:relative;right:41.66667%;left:auto}.large-push-6{position:relative;left:50%;right:auto}.large-pull-6{position:relative;right:50%;left:auto}.large-push-7{position:relative;left:58.33333%;right:auto}.large-pull-7{position:relative;right:58.33333%;left:auto}.large-push-8{position:relative;left:66.66667%;right:auto}.large-pull-8{position:relative;right:66.66667%;left:auto}.large-push-9{position:relative;left:75%;right:auto}.large-pull-9{position:relative;right:75%;left:auto}.large-push-10{position:relative;left:83.33333%;right:auto}.large-pull-10{position:relative;right:83.33333%;left:auto}.large-push-11{position:relative;left:91.66667%;right:auto}.large-pull-11{position:relative;right:91.66667%;left:auto}.column,.columns{position:relative;padding-left:0.9375em;padding-right:0.9375em;float:left}.large-1{width:8.33333%}.large-2{width:16.66667%}.large-3{width:25%}.large-4{width:33.33333%}.large-5{width:41.66667%}.large-6{width:50%}.large-7{width:58.33333%}.large-8{width:66.66667%}.large-9{width:75%}.large-10{width:83.33333%}.large-11{width:91.66667%}.large-12{width:100%}.large-offset-0{margin-left:0 !important}.large-offset-1{margin-left:8.33333% !important}.large-offset-2{margin-left:16.66667% !important}.large-offset-3{margin-left:25% !important}.large-offset-4{margin-left:33.33333% !important}.large-offset-5{margin-left:41.66667% !important}.large-offset-6{margin-left:50% !important}.large-offset-7{margin-left:58.33333% !important}.large-offset-8{margin-left:66.66667% !important}.large-offset-9{margin-left:75% !important}.large-offset-10{margin-left:83.33333% !important}.large-offset-11{margin-left:91.66667% !important}.large-reset-order{float:left;left:auto;margin-left:0;margin-right:0;right:auto}.column.large-centered,.columns.large-centered{margin-left:auto;margin-right:auto;float:none}.column.large-uncentered,.columns.large-uncentered{float:left;margin-left:0;margin-right:0}.column.large-centered:last-child,.columns.large-centered:last-child{float:none}.column.large-uncentered:last-child,.columns.large-uncentered:last-child{float:left}.column.large-uncentered.opposite,.columns.large-uncentered.opposite{float:right}.row.large-collapse>.column,.row.large-collapse>.columns{padding-left:0;padding-right:0}.row.large-collapse .row{margin-left:0;margin-right:0}.row.large-uncollapse>.column,.row.large-uncollapse>.columns{padding-left:0.9375em;padding-right:0.9375em;float:left}.push-0{position:relative;left:0;right:auto}.pull-0{position:relative;right:0;left:auto}.push-1{position:relative;left:8.33333%;right:auto}.pull-1{position:relative;right:8.33333%;left:auto}.push-2{position:relative;left:16.66667%;right:auto}.pull-2{position:relative;right:16.66667%;left:auto}.push-3{position:relative;left:25%;right:auto}.pull-3{position:relative;right:25%;left:auto}.push-4{position:relative;left:33.33333%;right:auto}.pull-4{position:relative;right:33.33333%;left:auto}.push-5{position:relative;left:41.66667%;right:auto}.pull-5{position:relative;right:41.66667%;left:auto}.push-6{position:relative;left:50%;right:auto}.pull-6{position:relative;right:50%;left:auto}.push-7{position:relative;left:58.33333%;right:auto}.pull-7{position:relative;right:58.33333%;left:auto}.push-8{position:relative;left:66.66667%;right:auto}.pull-8{position:relative;right:66.66667%;left:auto}.push-9{position:relative;left:75%;right:auto}.pull-9{position:relative;right:75%;left:auto}.push-10{position:relative;left:83.33333%;right:auto}.pull-10{position:relative;right:83.33333%;left:auto}.push-11{position:relative;left:91.66667%;right:auto}.pull-11{position:relative;right:91.66667%;left:auto}} diff --git a/images/batman.jpg b/images/batman.jpg new file mode 100644 index 0000000..7acac8b Binary files /dev/null and b/images/batman.jpg differ diff --git a/images/dragon.jpg b/images/dragon.jpg new file mode 100644 index 0000000..62c4cb1 Binary files /dev/null and b/images/dragon.jpg differ diff --git a/images/flash.jpg b/images/flash.jpg new file mode 100644 index 0000000..5d216a7 Binary files /dev/null and b/images/flash.jpg differ diff --git a/images/harp.jpg b/images/harp.jpg new file mode 100644 index 0000000..b5202eb Binary files /dev/null and b/images/harp.jpg differ diff --git a/images/samurai.jpg b/images/samurai.jpg new file mode 100644 index 0000000..5f4e07d Binary files /dev/null and b/images/samurai.jpg differ diff --git a/images/smileys.jpg b/images/smileys.jpg new file mode 100644 index 0000000..fe90274 Binary files /dev/null and b/images/smileys.jpg differ diff --git a/images/supergirl.jpg b/images/supergirl.jpg new file mode 100644 index 0000000..90e8802 Binary files /dev/null and b/images/supergirl.jpg differ diff --git a/images/vulcani.jpg b/images/vulcani.jpg new file mode 100644 index 0000000..d269b54 Binary files /dev/null and b/images/vulcani.jpg differ diff --git a/images/whale.jpg b/images/whale.jpg new file mode 100644 index 0000000..634415e Binary files /dev/null and b/images/whale.jpg differ diff --git a/images/wonderwoman.jpg b/images/wonderwoman.jpg new file mode 100644 index 0000000..f988683 Binary files /dev/null and b/images/wonderwoman.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..1379bca --- /dev/null +++ b/index.html @@ -0,0 +1,782 @@ + + + + + + + MD Template + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ MD Template +
+ +
+
+
+ Service +
+ +
+ Work +
+ +
+ Team +
+ +
+ Contact +
+ +
+ Download +
+
+
+
+ + +
+
+ I Love +
+
+ + +
+
+ + +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus vestibulum lorem risus, + nec suscipit lorem laoreet quis. +
+
+ + +
+
+ +
+
+ + + +

Speeds Up Development

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Cum sociis natoque + penatibus et magnis dis parturient montes. +

+
+ +
+ + + +

User Experience Focused

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. +

+
+ +
+ + + +

Fully Responsive

+ +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aenean commodo ligula eget dolor. Aenean massa. +

+
+
+ +
+
+ + +
+
+ + + +
+
+ +

Work

+ +
+ +
+
+ + +
Project Title
+
PROJECT LINK
+ +
+
+ + +
+
+ + +
Project Title
+
PROJECT LINK
+ +
+
+ + +
+
+ + +
Project Title
+
PROJECT LINK
+ +
+
+ + +
+
+ + +
Project Title
+
PROJECT LINK
+ +
+
+ + +
+
+ + +
Project Title
+
PROJECT LINK
+ +
+
+ + +
+
+ + +
Project Title
+
PROJECT LINK
+ +
+
+
+ +
+
+ + + +
+
+
+ +
+
+
+ + + +
+
+ +

Team

+ +
+ +
+
+ + +
Flash
+
CEO
+ + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
Wonder Woman
+
DESIGNER
+ + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
Super Girl
+
CMO
+ + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
Batman
+
DEVELOPER
+ + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+
+
+ +
+
+ + + +
+
+
+ + +
+
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+
+ + +
+
+ +
+ +
+ +
+ +
+ +
+
+ + +
+
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ +
+ +
+
+
+ + + +
+
+ +
+ spbond.com +
+ +
+ Home +
+ +
+ Blog +
+ +
+
+ + + +
+
+ +
+ Social +
+ +
+ + + Behance + +
+ +
+ + + Facebook + +
+ +
+ + + Github + +
+ +
+ + + Linkedin + +
+ +
+
+ + +
+
+
+ + +
+ + + + + diff --git a/js/devtest.js b/js/devtest.js new file mode 100644 index 0000000..7e6f2f0 --- /dev/null +++ b/js/devtest.js @@ -0,0 +1,93 @@ +// Starts slide show in the #slide element +function startSlideShow() { + var slide = document.getElementById("slide"); + var img_dir = "images/"; + var interval = 5000; + var images = []; + var total_imgs = 0; + var curr_img = 0; + var next_img = 1; + + // Load first image. + images[total_imgs] = new Image(); + images[total_imgs].style.position = "absolute"; + images[total_imgs].style.width = "100%"; + images[total_imgs++].src = img_dir + "dragon.jpg" + + // Display image. + images[0].style.top = "0px"; + images[0].style.left = "0px"; + slide.appendChild(images[curr_img]); + + // Advance the image in the slide show periodically. + setInterval(advanceImage, interval); + + // Load rest of images. + // Ideally the server would produce a listing of files in a slide directory, + // so that images could be added by simply dropping them into the directory. + // Then this could could be implemented in a loop by reading the file. + images[total_imgs] = new Image(); + images[total_imgs].style.position = "absolute"; + images[total_imgs].style.width = "100%"; + images[total_imgs++].src = img_dir + "samurai.jpg" + + images[total_imgs] = new Image(); + images[total_imgs].style.position = "absolute"; + images[total_imgs].style.width = "100%"; + images[total_imgs++].src = img_dir + "vulcani.jpg" + + images[total_imgs] = new Image(); + images[total_imgs].style.position = "absolute"; + images[total_imgs].style.width = "100%"; + images[total_imgs++].src = img_dir + "whale.jpg" + + images[total_imgs] = new Image(); + images[total_imgs].style.position = "absolute"; + images[total_imgs].style.width = "100%"; + images[total_imgs++].src = img_dir + "harp.jpg" + + images[total_imgs] = new Image(); + images[total_imgs].style.position = "absolute"; + images[total_imgs].style.width = "100%"; + images[total_imgs++].src = img_dir + "smileys.jpg" + + // Causes the currently shown image to move to the next image. + function advanceImage() { + if( images[next_img].complete ) { + // Place next image to right of current image. + images[next_img].style.left = images[curr_img].width + "px"; + images[next_img].style.top = "0px"; + slide.appendChild(images[next_img]); + + // Slide current off, and next on. + swapImages(curr_img, next_img); + + curr_img = next_img; + next_img = ++next_img % total_imgs; + } + } + + // Takes indexes to two images. + // Replaces first image with the second using an animated slide. + function swapImages(curr, next) { + var frames = 20; + var step_size = images[curr].width / frames; + var curr_frame = 1; + var animation_length = 1000; + + animate(); + + function animate() { + // Move images by 1 frame. + images[curr].style.left = (-curr_frame * step_size) + "px"; + images[next].style.left = (images[curr].width - curr_frame*step_size) + "px"; + ++curr_frame; + + if( curr_frame <= frames ) { + // Set timer for next frame. + setTimeout(animate, animation_length / frames); + } + else slide.removeChild(slide.firstElementChild); + } + } +}