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.

+ +
+
+

PRICING TABLES

+ +
+
+
+ +
+

ABOUT

+

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.

+
+

SKILLS

+

PHOTOSHOP

+ +

HTML / CSS

+ +

ILLUSTRATOR

+ +

PHP

+ +

WORDPRESS

+ +
+ Do you want be one of Avengers? Join us! + +
+
+
+
+
TEAM
+

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. +

+
+ + + +
+ +
+
+
+
+
CLIENTS
+ +
+
+ +
+ Matthew Broderic + (CEO Hopicola Inc.)
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard my text ever since the 1500s, when lorem upsum is the best text for you.

+
+ + + +
+
+
+
+
+

CONTACT

+

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. +

+
+
+
+
+ +
+
+
+
+ +
+970 897 580 (7:00-20:00)
+ +
info@company.com
+ +
USA, San Francisco, 57010, Little Parry St. 826/31
+
+
+
+ +
+
+
+
+ + + \ 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