diff --git a/css/images/matthew-henry-49707-unsplash.jpg b/css/images/matthew-henry-49707-unsplash.jpg new file mode 100644 index 0000000..4f36cd5 Binary files /dev/null and b/css/images/matthew-henry-49707-unsplash.jpg differ diff --git a/css/images/riccardo-annandale-140624-unsplash.jpg b/css/images/riccardo-annandale-140624-unsplash.jpg new file mode 100644 index 0000000..8db5d76 Binary files /dev/null and b/css/images/riccardo-annandale-140624-unsplash.jpg differ diff --git a/css/images/samson-creative-91091-unsplash.jpg b/css/images/samson-creative-91091-unsplash.jpg new file mode 100644 index 0000000..dda972b Binary files /dev/null and b/css/images/samson-creative-91091-unsplash.jpg differ diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..b0dc262 --- /dev/null +++ b/css/index.css @@ -0,0 +1,342 @@ +.button { + font-family: Concert One, cursive; + display: inline-block; + border-radius: 4px; + background-color: #ffffff; + border: none; + color: #5887f9; + text-align: center; + font-size: 28px; + padding: 7px; + width: 200px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; +} +.button span { + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; +} +.button span:after { + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; +} +.button:hover span { + padding-right: 25px; +} +.button:hover span:after { + opacity: 1; + right: 0; +} +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +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; +} +.container { + width: 100%; + margin: 0 auto; +} +.head { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + height: 100%; +} +.about { + background: #fff; +} +hr { + border-top: #e0e0e0; +} +header { + background-image: linear-gradient(to right top, #5574f7, #4086fd, #3196ff, #31a4ff, #42b2ff, #46b3ff, #4ab5ff, #4eb6ff, #46abff, #45a0ff, #4c94fd, #5887f9); + background-attachment: fixed; + height: 100vh; +} +h1 { + font-size: 6.25em; + font-family: Concert One,cursive; + color: #fff; + text-shadow: 6px 7px gray; +} +nav { + display: flex; + justify-content: flex-end; +} +a { + font-size: 1.25rem; + color: #5887f9; + text-decoration: none; + margin: 10px 20px 0px 0px; +} +.head p { + font-family: Concert One, cursive; + font-size: 2rem; +} +.head-content { + display: flex; +} +.header-image { + width: 400px; +} +#dropbtn { + background-color: transparent; + color: white; + padding: 16px; + font-size: 30px; + border: none; +} +#dropbtn .dropdown { + position: relative; + display: inline-block; +} +.dropdown-content { + display: none; + position: absolute; + background-color: transparent; + min-width: 160px; +} +.dropdown-content a { + font-family: Concert One, cursive; + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} +.dropdown-content a:hover { + background-color: #5F76D0; +} +.dropdown:hover .dropdown-content { + display: block; +} +.dropdown:hover .dropbtn { + background-color: #fff; + color: black; +} +.about { + text-align: center; + margin-top: 3rem; + font-size: 1.75rem; +} +.about h2 { + margin-bottom: 20px; +} +.about p { + font-family: Concert One, cursive; + margin-bottom: 20px; + color: grey; +} +.about i { + margin-bottom: 30px; + color: #e0e0e0; +} +h2 { + font-family: Concert One,cursive; + font-size: 2rem; + color: #e0e0e0; +} +#dev { + display: flex; +} +@media (max-width: 500px) { + #dev { + display: block; + } +} +@media (max-width: 800px) { + #dev { + flex-direction: column-reverse; + margin-top: 10px; + } +} +.dev-img { + position: relative; + float: left; + width: 500px; + height: 500px; + margin-top: 20px; + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; + border-radius: 100%; +} +.dev { + text-align: center; + margin-top: 3rem; + font-size: 1.75rem; + display: flex; + flex-direction: column; + justify-content: center; +} +@media (max-width: 500px) { + .dev { + border-bottom: none; + } +} +.dev p { + font-family: Concert One, cursive; + margin-bottom: 20px; + color: grey; +} +#dev2 { + display: flex; + flex-direction: row-reverse; +} +@media (max-width: 500px) { + #dev2 { + display: block; + flex-direction: column; + } +} +@media (max-width: 800px) { + #dev2 { + flex-direction: column-reverse; + } +} +footer { + flex-direction: column; + align-items: center; + font-size: 3rem; + display: flex; + justify-content: center; + margin: 30px 0px; +} +footer i { + margin: 0px 10px; + color: #e0e0e0; +} +footer p { + font-size: 1rem; + color: #e0e0e0; +} diff --git a/images/26815494_2033996160219727_4810885567640792423_n__1_.jpg b/images/26815494_2033996160219727_4810885567640792423_n__1_.jpg new file mode 100644 index 0000000..db61f54 Binary files /dev/null and b/images/26815494_2033996160219727_4810885567640792423_n__1_.jpg differ diff --git a/images/IMG_0497.jpg b/images/IMG_0497.jpg new file mode 100644 index 0000000..d89847b Binary files /dev/null and b/images/IMG_0497.jpg differ diff --git a/images/IMG_0498.jpg b/images/IMG_0498.jpg new file mode 100644 index 0000000..4587a9f Binary files /dev/null and b/images/IMG_0498.jpg differ diff --git a/images/christopher-campbell-28567-unsplash.jpg b/images/christopher-campbell-28567-unsplash.jpg new file mode 100644 index 0000000..2a71ec6 Binary files /dev/null and b/images/christopher-campbell-28567-unsplash.jpg differ diff --git a/images/hunters-race-408744-unsplash.jpg b/images/hunters-race-408744-unsplash.jpg new file mode 100644 index 0000000..9c9973f Binary files /dev/null and b/images/hunters-race-408744-unsplash.jpg differ diff --git a/images/luis-villasmil-1222180-unsplash.jpg b/images/luis-villasmil-1222180-unsplash.jpg new file mode 100644 index 0000000..fda9649 Binary files /dev/null and b/images/luis-villasmil-1222180-unsplash.jpg differ diff --git a/images/oliver.jpg b/images/oliver.jpg new file mode 100644 index 0000000..66b1bd3 Binary files /dev/null and b/images/oliver.jpg differ diff --git a/images/profile-pic-sc.jpg b/images/profile-pic-sc.jpg new file mode 100644 index 0000000..e2bcb85 Binary files /dev/null and b/images/profile-pic-sc.jpg differ diff --git a/images/samson-creative-91091-unsplash.jpg b/images/samson-creative-91091-unsplash.jpg new file mode 100644 index 0000000..dda972b Binary files /dev/null and b/images/samson-creative-91091-unsplash.jpg differ diff --git a/images/sebastian-hemetsberger-1300767-unsplash (1).jpg b/images/sebastian-hemetsberger-1300767-unsplash (1).jpg new file mode 100644 index 0000000..ccf20b5 Binary files /dev/null and b/images/sebastian-hemetsberger-1300767-unsplash (1).jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..6923f05 --- /dev/null +++ b/index.html @@ -0,0 +1,76 @@ + + + + + + + Mentor Me + + + + + + + + + + + + + +
+
+ +
+ About + Team + Log In +
+
+ +
+

MentorMe

+

Have a question? Ask a mentor.
+ Want to help an entrepreneurs grow? Come be a mentor.
+ Click below and register with us. +

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

About Mentor Me

+

Mentor Me lets you lend your business skills to an entrepreneurs across the globe.
+ New entrepreneurs often have a lot of questions, and don’t always have a mentor to ask.
+ As an entrepreneur, whenever you need business advice, our volunteers are happy to help.
+ By posting your questions, you can communicate directly and solve a problem. As an experience
+ business owner you can help pay it forward just by installing the Be My Mentor app.

+
+
+ + + + + + + + + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..0342803 --- /dev/null +++ b/js/index.js @@ -0,0 +1,49 @@ +const btn = document.querySelectorAll('button'); +btn.forEach(function(e){ + e.addEventListener('click',function(e){ + console.log('i was clicked'); + }) +}); + +//Used click to change the background on the buttons to black and then dblclick to change back to default color +const button = document.querySelectorAll('.btn'); +button.forEach(function(element){ + element.addEventListener('click', function(e){ + // console.log('click works!') + e.target.style.background = 'black'; + }) + button.forEach(function(element){ + element.addEventListener('dblclick', function(e){ + // console.log('dblclick works!') + e.target.style.background = ''; + }) + }) + +// button.forEach(function(element){ + +// }) +}); + +// Used Mouseover and Mouseleave (changes color of p tags to blue when mouse hovers over and back to black when mouse isnt hovering over.) +const input = document.querySelectorAll('p'); +input.forEach(function(element){ + element.addEventListener('mouseover', function(e){ + // console.log('mouseover works!') + e.target.style.color = 'blue'; + }) + input.forEach(function(element){ + element.addEventListener('mouseleave', function(e){ + // console.log('mouseleave works!') + e.target.style.color = ''; + }) + }) + }); + + + const newParagraph = document.createElement('p'); + +newParagraph.textContent = "Born in Los Angeles California in 1990 and moved to Riverside when I was 6. Later moved to Des Moines Iowa. Proud father of 3 girls Arianna, Jasmin and Jordyn. I enjoy watching sports, especially football and boxing. When im not spending time with my family, you can find me at the gym or on my computer coding. I love to code and learn new tricks when it comes to web development. I love to spend time with my family any chance I get. " + +const bottomContent = document.querySelector('.dev') +bottomContent.appendChild(newParagraph); + diff --git a/less/about.less b/less/about.less new file mode 100644 index 0000000..a55b5c6 --- /dev/null +++ b/less/about.less @@ -0,0 +1,25 @@ +.about { + text-align: center; + margin-top: 3rem; + font-size: 1.75rem; + + h2{ + margin-bottom: 20px; + } + + p { + font-family: Concert One, cursive; + margin-bottom: 20px; + color: @grey + } + + i { + margin-bottom: 30px; + color: @lg; + } +} + +h2 { + .h2 +} + diff --git a/less/footer.less b/less/footer.less new file mode 100644 index 0000000..f46fbc4 --- /dev/null +++ b/less/footer.less @@ -0,0 +1,19 @@ +footer { + flex-direction: column; + align-items: center; + font-size: 3rem; + display: flex; + justify-content: center; + margin: 30px 0px; + + i { + margin: 0px 10px; + color: @lg; + } + + p { + font-size: 1rem; + color: @lg; + + } +} diff --git a/less/global.less b/less/global.less new file mode 100644 index 0000000..732790f --- /dev/null +++ b/less/global.less @@ -0,0 +1,24 @@ + +.container { + + width: @wide; + margin: 0 auto; +} + +.head{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + height: 100%; +} + + +.about { + background: @white; +} + +hr { + border-top: @lg; +} + diff --git a/less/header.less b/less/header.less new file mode 100644 index 0000000..7db2888 --- /dev/null +++ b/less/header.less @@ -0,0 +1,93 @@ +header { + // background-image: linear-gradient(to top, #111011, #1d1a1e, #28242d, #312f3c, #393b4c, #454d5f, #526071, #607483, #7e929c, #9fb1b5, #c + background-image: linear-gradient(to right top,#5574f7,#4086fd,#3196ff,#31a4ff,#42b2ff,#46b3ff,#4ab5ff,#4eb6ff,#46abff,#45a0ff,#4c94fd,#5887f9); + + background-attachment: fixed; + height: 100vh; + +} + +h1 { + .h1; +} + +nav { + display: flex; + justify-content: flex-end; +} + +a { + font-size: 1.25rem; + color: #5887f9 ; + text-decoration: none; + margin: 10px 20px 0px 0px; +} + +.head p { + font-family: Concert One, cursive; + font-size: 2rem; +} + +// .register-button { +// .button +// } + +// .register-button:hover { +// background-color: @white; +// color: black; +// } + +.head-content { + display: flex; +} + +.header-image { + width: 400px; +} + +#dropbtn { + background-color: @clear ; + color: white; + padding: 16px; + font-size: 30px; + border: none; + + .dropdown { + position: relative; + display: inline-block; + } + + +} + + + +.dropdown-content { + display: none; + position: absolute; + background-color: @clear; + min-width: 160px; + + a { + font-family: Concert One, cursive; + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + + } +} + + +.dropdown-content a:hover { + background-color: #5F76D0; +} + +.dropdown:hover .dropdown-content { + display: block; +} + +.dropdown:hover .dropbtn { + background-color: @white; + color: black; +} diff --git a/less/index.less b/less/index.less new file mode 100644 index 0000000..ab077f3 --- /dev/null +++ b/less/index.less @@ -0,0 +1,14 @@ +//variables and mix ins +@import "variables"; +@import "mixins"; + +//general styles +@import "reset"; +@import "global"; + +//components +@import "header"; +@import "about"; +@import "team"; +@import "footer"; + diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000..8024de3 --- /dev/null +++ b/less/mixins.less @@ -0,0 +1,64 @@ +// .buttons () { +// text-align: center; +// background: @clear; +// font-size: 1.25rem; +// border-radius: 10px; +// border: 1px solid @white; +// color: @white; + +// } + +.button { + font-family: Concert One, cursive; + display: inline-block; + border-radius: 4px; + background-color: #ffffff; + border: none; + color: #5887f9; + text-align: center; + font-size: 28px; + padding: 7px; + width: 200px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; + } + + .button span { + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; + } + + .button span:after { + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; + } + + .button:hover span { + padding-right: 25px; + } + + .button:hover span:after { + opacity: 1; + right: 0; + } + +.h1 () { + font-size: 6.25em; + font-family: Concert One,cursive; + color: @white; + text-shadow: 6px 7px gray; +} + +.h2 () { + font-family: Concert One,cursive; + font-size: 2rem; + color: @lg; +} + diff --git a/less/reset.less b/less/reset.less new file mode 100644 index 0000000..af94440 --- /dev/null +++ b/less/reset.less @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +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; +} \ No newline at end of file diff --git a/less/team.less b/less/team.less new file mode 100644 index 0000000..4a217d7 --- /dev/null +++ b/less/team.less @@ -0,0 +1,76 @@ + + +#dev { + display: flex; + + @media @mobile { + display: block; + } + + @media @tablet { + flex-direction: column-reverse; + margin-top: 10px; + } + + +} +// .dev-img { +// width: 100%; +// border-radius: 250px; + +// @media @mobile{ +// border-top: 10px solid @lg; +// } + + +// } + +.dev-img { + position: relative; + float: left; + width: 500px; + height: 500px; + margin-top: 20px; + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; + border-radius: 100%; +} + +.dev { + + text-align: center; + margin-top: 3rem; + font-size: 1.75rem; + display: flex; + flex-direction: column; + justify-content: center; + + // border-bottom: 2px solid @lg; + + @media @mobile { + border-bottom: none; + } + + + p { + font-family: Concert One, cursive; + margin-bottom: 20px; + color: @grey + } +} + +#dev2{ + display: flex; + flex-direction: row-reverse; + + @media @mobile { + display: block; + flex-direction: column; + } + + @media @tablet { + flex-direction: column-reverse; + } +} + diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000..3b7f633 --- /dev/null +++ b/less/variables.less @@ -0,0 +1,15 @@ +//media queries +@mobile: ~"(max-width: 500px)"; +@tablet: ~"(max-width: 800px)"; + + +//colors +@blue: #0BA5FE; +@white: #fff; +@clear: transparent; +@grey: grey; +@lg: #e0e0e0; + +//width +@wide: 100%; + diff --git a/team.html b/team.html new file mode 100644 index 0000000..e9cb3a2 --- /dev/null +++ b/team.html @@ -0,0 +1,163 @@ + + + + + + + Mentor Me/Team + + + + + + + + + + + +
+
+ +
+ Home + About + Log In +
+
+ +
+

Dev Team

+

Built from the ground up by an amzing group.
+ Meet the dev team that made it all possible.

+ +
+ +
+ + + +
+ +
+

Alberto Rodriguez

+

Alberto Rodriguez is a 35-year-old film star who enjoys football, photography and listening to the radio. He is creative and brave, but can also be very stingy and a bit unkind. + + He is an Irish Buddhist who defines himself as straight. He finished school and then left academia. He has a severe phobia of sheep + + Physically, Alberto is in pretty good shape. He is short with cocao skin, pink hair and brown eyes. + + He grew up in a working class neighbourhood. His parents separated when he was small, but remained friends and provided a happy, stable home. + + He is currently single. His most recent romance was with a cleaner called Kiara Brenda Griffiths, who was the same age as him. They broke up because Kiara felt Alberto was too busy for the relationship. + + Alberto's best friend is a film star called Lee Rees. They have a very firey friendship. He also hangs around with a film star called Stephanie Thomson. They enjoy tree shaping together.

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

Oliver Abreu

+

Oliver Abreu is a 29-year-old junior doctor who enjoys football, camping and worship. He is considerate and inspiring, but can also be very boring and a bit untrustworthy. + + He is a Colombian Christian who defines himself as straight. He has a post-graduate degree in medicine. + + Physically, Oliver is in pretty good shape. He is very tall with walnut skin, grey hair and brown eyes. + + He grew up in an upper class neighbourhood. He was raised in a happy family home with two loving parents. + + He is currently married to Latoya Freddie O'Quinn. Latoya is the same age as him and works as an IT technician. + + Oliver has two children with wife Latoya: Allison aged 1 and Chris aged 3. + + Oliver's best friend is a junior doctor called Francis Thomas. They get on well most of the time. He also hangs around with Bryan Mason and Arlo Parker. They enjoy jigsaw puzzles together.

+
+
+ + +
+
+
+
+
+

Levi Simpson

+

Levi Simpson is a 27-year-old health centre receptionist who enjoys running, writing and listening to the radio. She is brave and creative, but can also be very mean and a bit boring. + + She is a Canadian Muslim who defines herself as straight. She started studying medicine at college but never finished the course. She has a severe phobia of blood, and is obsessed with cats. + + Physically, Levi is in pretty good shape. She is average-height with fair skin, brown hair and green eyes. She has a tattoo of a cat on her upper back. + + She grew up in a working class neighbourhood. Her parents separated when she was small, but remained friends and provided a happy, stable home. + + She is currently in a relationship with Manuel Howard Bryan. Manuel is 11 years older than her and works as a legal secretary. + + Levi's best friend is a health centre receptionist called Bess Blair. They get on well most of the time. She also hangs around with Betsy Issac and Bailee Mccarthy. They enjoy Rubix cube together.

+
+
+ + +
+
+
+
+
+

Dalton Willey

+

Dalton Willey is a 27-year-old gym assistant who enjoys tennis, golf and vandalising bus stops. She is exciting and kind, but can also be very sneaky and a bit stingy. + + She is a Japanese Muslim who defines herself as straight. She has a degree in sports science. + + Physically, Dalton is in pretty good shape. She is very tall with brown skin, pink hair and brown eyes. + + She grew up in a middle class neighbourhood. She was raised by her mother, her father having left when she was young. + + Dalton's best friend is a gym assistant called Lillian Murray. They get on well most of the time. She also hangs around with Kenneth Hunter and Cara Henderson. They enjoy spreading fake news on Facebook together.

+
+
+ + +
+
+
+ +
+
+

Sammy Chang

+

Sammy Chang is a 25-year-old government politician who enjoys watching sport, helping old ladies across the road and listening to music. He is loveable and considerate, but can also be very unfriendly and a bit untrustworthy. + + He is an Australian Christian who defines himself as straight. He started studying philosophy, politics and economics at college but never finished the course. + + Physically, Sammy is in pretty good shape. He is average-height with pale skin, brown hair and black eyes. He has asymmetrical ears. + + He grew up in a working class neighbourhood. He was raised by his father, his mother having left when he was young. + + He is currently in a relationship with Tia Saffron Brooks. Tia is 14 years older than him and works as a screenplay writer. + + Sammy's best friend is a government politician called Hannah Li. They have a very firey friendship. He also hangs around with Johnnie Hernandez and Lynda Quinn. They enjoy reading together.

+
+
+ + +
+
+
+ + + + \ No newline at end of file