diff --git a/.gitignore b/.gitignore
index c267e7c..e05de24 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,26 +1,4 @@
-### OSX ###
+/node_modules
+npm-debug.log
.DS_Store
-.AppleDouble
-.LSOverride
-
-# Icon must end with two \r
-Icon
-
-
-# Thumbnails
-._*
-
-# Files that might appear in the root of a volume
-.DocumentRevisions-V100
-.fseventsd
-.Spotlight-V100
-.TemporaryItems
-.Trashes
-.VolumeIcon.icns
-
-# Directories potentially created on remote AFP share
-.AppleDB
-.AppleDesktop
-Network Trash Folder
-Temporary Items
-.apdisk
+/*.env
\ No newline at end of file
diff --git a/Procfile b/Procfile
new file mode 100644
index 0000000..5ec9cc2
--- /dev/null
+++ b/Procfile
@@ -0,0 +1 @@
+web: node index.js
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..b21e9ea
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "w2a2mobilesite",
+ "version": "1.0.0",
+ "description": "w2a2 project advanced css",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/brain11f/advanced-presentation__W2-A2.git"
+ },
+ "author": "Brian",
+ "license": "ISC",
+ "bugs": {
+ "url": "https://github.com/brain11f/advanced-presentation__W2-A2/issues"
+ },
+ "homepage": "https://github.com/brain11f/advanced-presentation__W2-A2#readme",
+ "dependencies": {
+ "express": "^4.13.3"
+ }
+}
diff --git a/public/assets/Arrow.png b/public/assets/Arrow.png
new file mode 100644
index 0000000..f110458
Binary files /dev/null and b/public/assets/Arrow.png differ
diff --git a/public/assets/Dribbble x2.png b/public/assets/Dribbble x2.png
new file mode 100644
index 0000000..ba9c053
Binary files /dev/null and b/public/assets/Dribbble x2.png differ
diff --git a/public/assets/Dribble shot.png b/public/assets/Dribble shot.png
new file mode 100644
index 0000000..9b7e828
Binary files /dev/null and b/public/assets/Dribble shot.png differ
diff --git a/public/assets/Shot copy 2.png b/public/assets/Shot copy 2.png
new file mode 100644
index 0000000..bb9ac07
Binary files /dev/null and b/public/assets/Shot copy 2.png differ
diff --git a/public/assets/Shot copy 3.png b/public/assets/Shot copy 3.png
new file mode 100644
index 0000000..9d4e721
Binary files /dev/null and b/public/assets/Shot copy 3.png differ
diff --git a/public/assets/Shot copy 4.png b/public/assets/Shot copy 4.png
new file mode 100644
index 0000000..67defe3
Binary files /dev/null and b/public/assets/Shot copy 4.png differ
diff --git a/public/assets/Shot copy 5.png b/public/assets/Shot copy 5.png
new file mode 100644
index 0000000..e1c9cdc
Binary files /dev/null and b/public/assets/Shot copy 5.png differ
diff --git a/public/assets/Shot copy 6.png b/public/assets/Shot copy 6.png
new file mode 100644
index 0000000..095d3f4
Binary files /dev/null and b/public/assets/Shot copy 6.png differ
diff --git a/public/assets/Shot copy.png b/public/assets/Shot copy.png
new file mode 100644
index 0000000..7254595
Binary files /dev/null and b/public/assets/Shot copy.png differ
diff --git a/public/assets/Shot.png b/public/assets/Shot.png
new file mode 100644
index 0000000..930f080
Binary files /dev/null and b/public/assets/Shot.png differ
diff --git a/public/assets/Slider copy.jpg b/public/assets/Slider copy.jpg
new file mode 100644
index 0000000..e54965c
Binary files /dev/null and b/public/assets/Slider copy.jpg differ
diff --git a/public/assets/Slider.jpg b/public/assets/Slider.jpg
new file mode 100644
index 0000000..e54965c
Binary files /dev/null and b/public/assets/Slider.jpg differ
diff --git a/public/assets/Web shot.png b/public/assets/Web shot.png
new file mode 100644
index 0000000..37f4f01
Binary files /dev/null and b/public/assets/Web shot.png differ
diff --git a/public/assets/circle-left-icon.png b/public/assets/circle-left-icon.png
new file mode 100644
index 0000000..979c314
Binary files /dev/null and b/public/assets/circle-left-icon.png differ
diff --git a/public/assets/circle-right-icon.png b/public/assets/circle-right-icon.png
new file mode 100644
index 0000000..f622b28
Binary files /dev/null and b/public/assets/circle-right-icon.png differ
diff --git a/public/assets/dribble-icon.png b/public/assets/dribble-icon.png
new file mode 100644
index 0000000..b1eaf04
Binary files /dev/null and b/public/assets/dribble-icon.png differ
diff --git a/public/assets/droplet.svg b/public/assets/droplet.svg
new file mode 100644
index 0000000..e0f19a0
--- /dev/null
+++ b/public/assets/droplet.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/assets/facebook-icon.png b/public/assets/facebook-icon.png
new file mode 100644
index 0000000..f49e644
Binary files /dev/null and b/public/assets/facebook-icon.png differ
diff --git a/public/assets/google-maps.jpg b/public/assets/google-maps.jpg
new file mode 100644
index 0000000..4d9af82
Binary files /dev/null and b/public/assets/google-maps.jpg differ
diff --git a/public/assets/googlePlus-icon.png b/public/assets/googlePlus-icon.png
new file mode 100644
index 0000000..c4ba2b0
Binary files /dev/null and b/public/assets/googlePlus-icon.png differ
diff --git a/public/assets/header-background-image.jpg b/public/assets/header-background-image.jpg
new file mode 100644
index 0000000..34ff18e
Binary files /dev/null and b/public/assets/header-background-image.jpg differ
diff --git a/public/assets/jane-doe.jpg b/public/assets/jane-doe.jpg
new file mode 100644
index 0000000..ec84267
Binary files /dev/null and b/public/assets/jane-doe.jpg differ
diff --git a/public/assets/jannete-doe.jpg b/public/assets/jannete-doe.jpg
new file mode 100644
index 0000000..7a7fc59
Binary files /dev/null and b/public/assets/jannete-doe.jpg differ
diff --git a/public/assets/jessie-doe.jpg b/public/assets/jessie-doe.jpg
new file mode 100644
index 0000000..d718bd1
Binary files /dev/null and b/public/assets/jessie-doe.jpg differ
diff --git a/public/assets/jonathan-doe.jpg b/public/assets/jonathan-doe.jpg
new file mode 100644
index 0000000..b52abeb
Binary files /dev/null and b/public/assets/jonathan-doe.jpg differ
diff --git a/public/assets/lab.svg b/public/assets/lab.svg
new file mode 100644
index 0000000..d26808a
--- /dev/null
+++ b/public/assets/lab.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/assets/linkedIn-icon.png b/public/assets/linkedIn-icon.png
new file mode 100644
index 0000000..e656004
Binary files /dev/null and b/public/assets/linkedIn-icon.png differ
diff --git a/public/assets/location-icon.png b/public/assets/location-icon.png
new file mode 100644
index 0000000..cc163cb
Binary files /dev/null and b/public/assets/location-icon.png differ
diff --git a/public/assets/mail-icon.png b/public/assets/mail-icon.png
new file mode 100644
index 0000000..f8e5ea4
Binary files /dev/null and b/public/assets/mail-icon.png differ
diff --git a/public/assets/matthew-broderic.png b/public/assets/matthew-broderic.png
new file mode 100644
index 0000000..2d5b75e
Binary files /dev/null and b/public/assets/matthew-broderic.png differ
diff --git a/public/assets/menu.svg b/public/assets/menu.svg
new file mode 100644
index 0000000..da79dda
--- /dev/null
+++ b/public/assets/menu.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/public/assets/mobile-icon.png b/public/assets/mobile-icon.png
new file mode 100644
index 0000000..fb72f0e
Binary files /dev/null and b/public/assets/mobile-icon.png differ
diff --git a/public/assets/paint-brush.svg b/public/assets/paint-brush.svg
new file mode 100644
index 0000000..bd09a40
--- /dev/null
+++ b/public/assets/paint-brush.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/assets/settings.svg b/public/assets/settings.svg
new file mode 100644
index 0000000..54b764f
--- /dev/null
+++ b/public/assets/settings.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/assets/twitter-icon.png b/public/assets/twitter-icon.png
new file mode 100644
index 0000000..aeb2a8d
Binary files /dev/null and b/public/assets/twitter-icon.png differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..54614e0
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,405 @@
+
+
+
+
+
+
+ presentation-fundementals-two
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hi there! We`re Avengers, creative design agency we build awesome mobile and websites
+
+
+
+
+
+ SERVICES
+ Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+
+
+ UI & UX DESIGN
+
+
+
+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected support by humour.
+
+
+ LABORATORY
+
+
+
+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected support by humour.
+
+
+ DEVELOPMENT
+
+
+
+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected support by humour.
+
+
+
+
+ PRICING TABLES
+
+
+ BASIC
+ $5.99 / MONTH
+ 3 Projects
+ 2 Users
+ 1 Gb user
+ 1 Calendar
+ SIGN UP
+
+
+ STANDARD
+ $10.99 / MONTH
+ 7 Projects
+ 5 Users
+ 10 Gb user
+ 5 Calendar
+ SIGN UP
+
+
+ PROFESSIONAL
+ $25.99 / MONTH
+ 15 Projects
+ 50 Users
+ 100 Gb user
+ 25 Calendar
+ SIGN UP
+
+
+ PREMIUM
+ $49.99 / MONTH
+ UNLIMITED Projects
+ UNLIMITED Users
+ 1000 Gb user
+ UNLIMITED Calendar
+ SIGN UP
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ All works
+ Webdesign
+ UI design
+ Icons design
+ Brand & Logotypes
+
+
+
+
+
+
+
+ Youtube iphone app
+ UI design, brand & logotypes
+
+
+
+
+
+ Hexagon onepage
+ Webdesign, brand & logotypes
+
+
+
+
+
+ Sketches icon
+ Icons design, brand & logotypes
+
+
+
+
+
+ Logotypes volume
+ UI design, brand & logotypes
+
+
+
+
+
+ Flight control
+ Webdesign, brand & logotypes
+
+
+
+
+
+ Youtube app
+ Icons design, brand & logotypes
+
+
+
+
+
+ Management
+ UI design, brand & logotypes
+
+
+
+
+
+ Korean beef
+ Webdesign, brand & logotypes
+
+
+
+
+
+ Facebook thumbs
+ Icons design, brand & logotypes
+
+
+
+
+
+
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+
+
+ PHOTOSHOP
+
+ HTML / CSS
+
+ ILLUSTRATOR
+
+ PHP
+
+ WORDPRESS
+
+
+ Do you want be one of Avengers? Join us!
+ CONTACT US
+
+
+
+
+
+ Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.
+
+
+
+ JONATHAN DOE
+ CEO, UI&UX designer
+
+
+
+
+
+
+ Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard
+
+
+ JANNETE DOE
+ Bussines & marketing
+
+
+
+
+
+
+ Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard
+
+
+ JANE ELLA DOE
+ UX specialist
+
+
+
+
+
+
+ Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard
+
+
+
+ JESSIE DOE
+ Bussines and legacy
+
+
+
+
+
+
+ Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard
+
+
+
+
+
+
+
+
+
+ Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..6228ce6
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,633 @@
+/*menu navigation*/
+
+@media (max-width: 700px) {
+ .menu-icon {
+ display: inline-block;
+ width: 2.5em;
+ height: 2.5em;
+ fill: currentColor;
+ }
+ .drop-down-menu {
+ position: fixed;
+ display: inline-block;
+ z-index: 30;
+ }
+ .drop-down-menu label,
+ .drop-down-menu ul li {
+ display: block;
+ width: 50em;
+ height: 1.8em;
+ background: #d8d8d8;
+ padding: 15px 20px;
+ }
+ .drop-down-menu label:hover,
+ .drop-down-menu ul li:hover {
+ background-color: #1d1c21;
+ color: white;
+ cursor: pointer;
+ }
+ .drop-down-menu input {
+ display: none;
+ z-index: 30;
+ }
+ .drop-down-menu input ~ ul {
+ visibility: hidden;
+ opacity: 0;
+ }
+ .drop-down-menu input:checked + label {
+ background-color: #1d1c21;
+ color: white;
+ }
+ .drop-down-menu input:not(:checked) ~ ul {
+ visibility: visible;
+ opacity: 1;
+ }
+ .menu-list-ul {
+ position: absolute;
+ }
+ .menu-list {
+ margin: 0;
+ padding: 0;
+ }
+ .animate {
+ -webkit-transition: all .3s;
+ -moz-transition: all .3s;
+ -ms-transition: all .3s;
+ -ms-transition: all .3s;
+ transition: all .3s;
+ backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ /* Chrome and Safari */
+
+ -moz-backface-visibility: hidden;
+ /* Firefox */
+
+ -ms-backface-visibility: hidden;
+ /* Internet Explorer */
+ }
+}
+@media (min-width: 700px) {
+ .drop-down-menu > input,
+ label {
+ visibility: hidden;
+ position: absolute;
+ }
+ .menu-list-ul {
+ text-align: center;
+ }
+ .menu-list-ul li {
+ display: inline;
+ padding-left: 2em;
+ padding-right: 2em;
+ }
+}
+/*lines next to titles*/
+
+.line {
+ margin-top: 2em;
+ position: relative;
+ font-size: 30px;
+ z-index: 1;
+ overflow: hidden;
+ text-align: center;
+}
+.white-line:before,
+.white-line:after {
+ background-color: #FFFFFF;
+ color: #FFFFFF;
+}
+.black-line:before,
+.black-line:after {
+ background-color: black;
+ color: black;
+}
+.line:before,
+.line:after {
+ position: absolute;
+ top: 51%;
+ width: 50%;
+ height: 1px;
+ content: '\a0';
+}
+.line:before {
+ margin-left: -50%;
+ text-align: right;
+}
+/*Welcome page*/
+
+.welcome {
+ background-image: url("./assets/header-background-image.jpg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ padding-top: 6em;
+}
+.welcome-section {
+ padding-top: 3.5em;
+ padding-bottom: 3.5em;
+ padding-left: 1em;
+ padding-right: 1em;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: center;
+ align-items: center;
+ text-align: center;
+}
+.circle-welcome-icon {
+ margin: 1em;
+ padding: 1em;
+ background-color: #fd6632;
+ -webkit-border-radius: 50em;
+ -moz-border-radius: 50em;
+ border-radius: 50em;
+}
+.welcome-icon {
+ margin: 0;
+}
+.welcome-section h1 {
+ font-size: 1em;
+ margin: 0;
+}
+/*Services */
+
+.services {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: space-between;
+ align-items: flex-start;
+}
+.services > h1 {
+ text-align: center;
+ margin: 0;
+ padding-top: 6%;
+ width: 100%;
+ height: 3em;
+}
+.services-p-one {
+ text-align: center;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 10em;
+}
+.services-p-two {
+ text-align: center;
+ margin: 0;
+ padding: 0;
+ width: 20em;
+ height: 10em;
+}
+.services-p-three {
+ text-align: center;
+ margin: 0;
+ padding: 0;
+ width: 20em;
+ height: 10em;
+}
+.services-price {
+ background-color: #fd6632;
+}
+.services-list {
+ text-align: center;
+ padding: 0;
+ border: 0;
+ margin: 0;
+ list-style: none;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: flex-start;
+ align-items: center;
+}
+.services-list li {
+ padding: 1em;
+}
+
+@media (max-width: 600px) {
+ .services-list li {
+ width: 95%;
+ }
+}
+
+@media (min-width: 601px) {
+ .services-list li {
+ width: 30%;
+ }
+}
+
+.circle-services-icon {
+ display: inline-block;
+ padding: 3em;
+ background-color: #ffffff;
+ -webkit-border-radius: 50em;
+ -moz-border-radius: 50em;
+ border-radius: 50em;
+}
+/*pricing*/
+
+.price {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: flex-start;
+ align-items: flex-start;
+}
+.price > h1 {
+ width: 100%;
+ text-align: center;
+}
+.price-li {
+ width: 11em;
+ margin-bottom: 5%;
+}
+.price-li > h1 {
+ background-color: #7e3319;
+ color: white;
+ font-size: 1em;
+ padding: 3%;
+ margin-bottom: 0;
+}
+.price-li > p {
+ background-color: white;
+ padding: 2%;
+ margin-bottom: 1%;
+ margin-top: 1%;
+}
+.price-li > button {
+ padding: 1%;
+ margin: 1%;
+ font-size: .8em;
+ border-style: solid;
+ border-color: #be4c25;
+ color: white;
+ background: #fd6632;
+ width: 13.5em;
+ border-top-width: 1em;
+ border-bottom-width: 1em;
+ border-left-width: 4.3em;
+ border-right-width: 4.3em;
+}
+.price-ul {
+ width: 80em;
+ text-align: center;
+ padding: 0;
+ border: 0;
+ margin: 0;
+ list-style: none;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: flex-start;
+ align-items: center;
+}
+.price-ul > li {
+ padding-left: 2em;
+ padding-right: 2em;
+}
+/*Portfolio*/
+
+.carousel {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: center;
+ align-items: center;
+}
+.carousel img {
+ height: 17.8em;
+ width: 100%;
+ height: 100%;
+}
+.carousel-nav-bar > ul {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-content: flex-start;
+ align-items: flex-start;
+ list-style: circle;
+ font-size: 2em;
+ display: inline-grid;
+}
+.carousel-selected {
+ color: #fd6632;
+}
+.portfolio nav {
+ text-align: center;
+}
+.portfolio-nav-ul {
+ margin: 1em;
+ padding: 0;
+}
+.portfolio-nav-ul > li {
+ display: inline;
+ padding: 1em;
+}
+@media (min-width: 1000px) {
+ .portfolio-article {
+ margin-left: 5em;
+ margin-right: 5em;
+ }
+}
+.portfolio-article figure {
+ height: 192px;
+ background-color: black;
+}
+.portfolio-article img:hover {
+ opacity: .5;
+ -moz-transition: all .6s;
+ -webkit-transition: all .6s;
+ transition: all .6s;
+}
+.portfolio-article {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: flex-start;
+ align-items: center;
+}
+.portfolio-article article {
+ padding-left: .5em;
+ padding-right: .5em;
+ padding-bottom: 1em;
+ text-align: center;
+}
+.portfolio-article img {
+ height: 12em;
+}
+/*About-Skills*/
+
+.about-skills {
+ background-color: #252629;
+ color: white;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: flex-start;
+ align-items: center;
+ padding-left: 5%;
+}
+.about-header {
+ width: 100%;
+}
+.about-skills-p {
+ width: 20em;
+ padding: 5%;
+ margin-right: 5%;
+}
+.skills {
+ width: 80%;
+}
+.about-skills > small {
+ width: 100em;
+ text-align: center;
+ margin: 1%;
+}
+.about-skills > button {
+ padding: 1%;
+ margin: 1%;
+ border: 0;
+ color: white;
+ background: #fd6632;
+}
+progress[value] {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 100%;
+ height: 1.4em;
+}
+/* Foreground Colors */
+/* IE10 */
+
+progress {
+ color: #fd6632;
+}
+/* Firefox */
+
+progress::-moz-progress-bar {
+ background: #fd6632;
+}
+/* Chrome */
+
+progress::-webkit-progress-value {
+ background: #fd6632;
+}
+/* Polyfill */
+
+progress[aria-valuenow]:before {
+ background: #fd6632;
+}
+/*google maps*/
+
+.google-maps {
+ z-index: 1;
+ position: relative;
+}
+/*team*/
+
+.team {
+ margin: 0 auto;
+ text-align: center;
+}
+.team-section {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: flex-start;
+ align-items: center;
+}
+.team-p {
+ font-size: 1em;
+ width: 20em;
+ display: inline-block;
+}
+.circle-crop {
+ position: relative;
+ overflow: hidden;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ -ms-border-radius: 50%;
+ -o-border-radius: 50%;
+ border-radius: 50%;
+}
+.team-name {
+ font-size: 2em;
+ margin-bottom: 0;
+}
+.team-figcaption {
+ width: 17em;
+}
+.social-media-figure {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-content: flex-start;
+ align-items: center;
+ width: 17em;
+ margin: 1em;
+}
+.team-social-media-icon {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ padding-bottom: .75em;
+ margin-left: 8%;
+ display: flex;
+ position: relative;
+}
+.team-social-media-icon li {
+ display: inline;
+ float: left;
+}
+.team-facebook-icon,
+.team-twitter-icon,
+.team-dribble-icon,
+.team-linkedIn-icon,
+.team-googlePlus-icon {
+ padding-right: .25em;
+ padding-left: .25em;
+ width: 1.75em;
+ height: 1.75em;
+ margin-right: .35em;
+ margin-bottom: .5em;
+ margin-top: .5em;
+}
+.team-facebook-icon {
+ background-color: #305fc6;
+}
+.team-twitter-icon {
+ background-color: #32bdff;
+}
+.team-dribble-icon {
+ background-color: #dd2667;
+}
+.team-linkedIn-icon {
+ background-color: #2ca1eb;
+}
+.team-googlePlus-icon {
+ background-color: #fabc00;
+}
+/*Clients*/
+
+.clients-p {
+ text-align: center;
+}
+.right-button {
+ margin-left: 60%;
+}
+.left-button {}
+/*contact*/
+
+.contact {
+ background-color: #fd6632;
+ padding-top: 1%;
+}
+.contact-header {
+ color: #FFFFFF;
+ font-weight: 700;
+ margin-top: 5%;
+ width: 80%;
+}
+.contact-p {
+ color: #FFFFFF;
+}
+.contact-form-submit-button {
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
+ background: -moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
+ background: -webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
+ background: -o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
+ background: -ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
+ background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
+ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0);
+ background-color: #ffffff;
+ border: 1px solid #dcdcdc;
+ display: inline-block;
+ cursor: pointer;
+ color: #fd6632;
+ font-family: Arial;
+ font-size: 14px;
+ padding: 6px 24px;
+ text-decoration: none;
+ margin-top: .5em;
+ margin-bottom: 2em;
+}
+.contact {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: flex-start;
+ align-items: center;
+}
+.contact-p {
+ text-align: center;
+ margin: 0 auto;
+ margin-top: 3em;
+ font-size: 1.3em;
+ line-height: 1.75em;
+ margin-bottom: 6em;
+ width: 60em;
+}
+.form-box {
+ width: 28em;
+ display: block;
+ height: 3em;
+ background-color: #252629;
+ opacity: .8;
+}
+.contact-message-box {
+ width: 28em;
+ height: 15em;
+ display: inline;
+ background-color: #252629;
+ opacity: .8;
+ font-family: Arial;
+}
+.contact-form-submit-button {
+ margin-left: 14em;
+ margin-top: 1em;
+ margin-bottom: 2em;
+}
+.google-maps-figure {
+ background-color: #252629;
+ opacity: .8;
+ position: absolute;
+ z-index: 3;
+ width: 23.8em;
+ height: 9em;
+ margin-top: 0;
+}
+.google-maps-phoneNumber {
+ margin-right: 2em;
+}
+.google-maps-phoneNumber,
+.google-maps-emailAddress,
+.google-maps-pinAddress {
+ color: #FFFFFF;
+}
+.contact-form {
+ padding: 1em;
+}
+.google-maps-icons {
+ color: #FFFFFF;
+ width: 7%;
+ display: flex;
+}
+.google-maps-image {
+ max-width: 100%;
+}
+.google-maps-section {
+ width: 30em;
+ padding-bottom: 6em;
+}
\ No newline at end of file
diff --git a/readme.md b/readme.md
index ab748e6..eadf23a 100644
--- a/readme.md
+++ b/readme.md
@@ -54,7 +54,38 @@ __DO NOT__ fence yourself in with invisible constraints. Unless it is specifical
In the last assignment we covered the concepts behind semantic and modular HTML. This project assignment is engineered to build on top of those principals and work in more advanced presentation skills, to include RWD.
-
+SOURCES & COLLABORATORS
+-Authored by Sredna Kunowski & Brian Finck
+
+Stackoverflow
+-Use element for icons? html5
+-Keeping a string of text together on one line by Jsous
+-CSS Title with Horizontal Line on either side by Romain Pellerin
+
+MDN
+-HTML element reference
+-
+-menu tag
+-
+-HTML forms guide
+
+W3Schools
+-HTML Tag
+-HTML type Attribute
+-HTML Containers
+-html images
+
+MrColes blog
+-How to use ampersands in HTML: to encode or not to encode?
+
+Icomoon.com
+-Got these icons from the site:facebook,twitter,dribble,linkedin,googleplus, circles left and right.
+
+CSS tricks
+-How to make a triangle in css,https://css-tricks.com/snippets/css/css-triangle/
+
+-Contact form code from James Georde at http://www.sitepoint.com/style-web-forms-css/
+- html placeholders, Placeholder text in an input field with CSS only (no JavaScript) by david jones
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..6225a9a
--- /dev/null
+++ b/server.js
@@ -0,0 +1,17 @@
+'use strict';
+
+var express = require('express');
+var app = express();
+
+
+app.set('port', (process.env.PORT || 5000));
+app.use(express.static(__dirname + '/public'));
+
+app.get('/*', function(req, res) {
+ res.status(404).send('could not find page');
+});
+
+app.listen(app.get('port'), function() {
+ console.log("Node app is running at localhost:" + app.get('port'));
+});
+