diff --git a/Images/football.svg b/Images/football.svg new file mode 100644 index 000000000..469c8925b --- /dev/null +++ b/Images/football.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Images/forrestgump.jpg b/Images/forrestgump.jpg new file mode 100644 index 000000000..b2cd04c8e Binary files /dev/null and b/Images/forrestgump.jpg differ diff --git a/Images/graduated.svg b/Images/graduated.svg new file mode 100644 index 000000000..9c9effe2b --- /dev/null +++ b/Images/graduated.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Images/karaoke.svg b/Images/karaoke.svg new file mode 100644 index 000000000..cefa88a41 --- /dev/null +++ b/Images/karaoke.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/Images/manrunning.jpg b/Images/manrunning.jpg new file mode 100644 index 000000000..58cdfa01c Binary files /dev/null and b/Images/manrunning.jpg differ diff --git a/Images/medal.svg b/Images/medal.svg new file mode 100644 index 000000000..9b40921a5 --- /dev/null +++ b/Images/medal.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Images/meeting.svg b/Images/meeting.svg new file mode 100644 index 000000000..9cd8fc4c0 --- /dev/null +++ b/Images/meeting.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Images/runner.svg b/Images/runner.svg new file mode 100644 index 000000000..2eb65ebe0 --- /dev/null +++ b/Images/runner.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Images/shrimpboat.jpg b/Images/shrimpboat.jpg new file mode 100644 index 000000000..731b0a378 Binary files /dev/null and b/Images/shrimpboat.jpg differ diff --git a/Images/table-tennis.svg b/Images/table-tennis.svg new file mode 100644 index 000000000..1aa003194 --- /dev/null +++ b/Images/table-tennis.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/index.css b/css/index.css index 7dd97920d..72d9f0881 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,232 @@ -/* Compile your LESS file! */ \ No newline at end of file +/* 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; +} +/* Set every element's box-sizing to border-box */ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + /*border: 1px solid red !important;*/ +} +html, +body { + height: 100%; + font-size: 62.5%; +} +p { + font-size: 0.95rem; + padding: 2%; +} +h1 { + font-size: 4rem; + line-height: 2; +} +h2, +h3, +h4, +h5, +h6 { + font-size: 1.5rem; + line-height: 2; + padding-top: 1.5%; + text-align: center; +} +.header { + text-align: center; + width: 80%; + margin: auto; + padding: 3%; +} +.header h1 { + font-size: 2rem; +} +.top-content { + text-align: center; + width: 80%; + margin: auto; + padding: 3%; +} +.top-content h1 { + font-size: 2rem; +} +.gallery { + display: flex; + justify-content: space-evenly; +} +.gallery .card { + width: 30%; + border: 1px solid black; + display: flex; + flex-direction: column; + padding: 3%; +} +.gallery .card .image { + margin: auto; + background-color: blue; + width: 80%; + padding: 20%; +} +.gallery .card .image h3 { + font-size: 0.5rem; +} +.bottom-content { + border: 1px solid black; +} +.bottom-content .top-section { + background-color: grey; +} +.bottom-content .container { + width: 100%; + display: flex; +} +.bottom-content .container .showcase { + width: 50%; + padding: 3%; + align-self: center; +} +.bottom-content .container .showcase .image { + margin: 5% auto; + background-color: blue; + width: 80%; + padding: 20%; +} +.bottom-content .container .howto { + width: 50%; + display: flex; + flex-direction: column; +} +.bottom-content .container .howto .card p { + font-size: 1rem; +} +.bottom-content .container .howto .card .image { + margin: auto; + background-color: blue; + width: 80%; + padding: 10%; +} diff --git a/index.html b/index.html index a7f9e3ad1..5064b265f 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,82 @@ - - + - - + + + My Resume - - - -

My Resume

+
+

User Interface

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero fugit necessitatibus voluptatem consequatur excepturi doloremque exercitationem distinctio numquam, voluptatibus maiores a nesciunt laudantium quasi repudiandae dicta pariatur corporis accusantium! Distinctio?

+
+
+
+

Getting Started

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita enim, beatae commodi pariatur odio ex, maiores deleniti explicabo earum quasi provident illo voluptatem numquam consequatur facilis quos cumque aliquam fugiat?

+
+
+
+
+

Article 1

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio fuga vel nam reiciendis eum quam, cum inventore consectetur, consequuntur expedita facere magni quasi ipsam incidunt laudantium voluptatum sequi tempora dolor!

+
+
+
+

Article 1

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio fuga vel nam reiciendis eum quam, cum inventore consectetur, consequuntur expedita facere magni quasi ipsam incidunt laudantium voluptatum sequi tempora dolor!

+
+
+

Article 1

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio fuga vel nam reiciendis eum quam, cum inventore consectetur, consequuntur expedita facere magni quasi ipsam incidunt laudantium voluptatum sequi tempora dolor!

+
+
+
+

Development Mastery

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium animi minima iste. Magnam alias ducimus adipisci eos ab rerum fugiat ipsam architecto eveniet facilis at sed, voluptatum assumenda provident suscipit.

+
+ +
+
+

How do I use

+
+ + + +
+
+

Showcase

+
+
+
+
+
+

How to

+
+

Create Controls

+
+
+
+

Use Controls

+
+
+
+

Customize Controls

+
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 191ce142e..026e04155 100644 --- a/less/index.less +++ b/less/index.less @@ -49,11 +49,120 @@ table { } /* Set every element's box-sizing to border-box */ -* { +*{ box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + /*border: 1px solid red !important;*/ } html, body { - height: 100%; + height: 100%; + font-size: 62.5%; + } +p{ + font-size: .95rem; + padding: 2%; +} + +h1{ + font-size: 4rem; + line-height: 2; +} + +h2, h3, h4, h5, h6{ + font-size: 1.5rem; + line-height: 2; + padding-top: 1.5%; + text-align: center; + +} + +.header { + text-align: center; + width: 80%; + margin: auto; + padding: 3%; + h1 { + font-size: 2rem; + } +} + +.top-content { + + text-align: center; + width: 80%; + margin: auto; + padding: 3%; + h1 { + font-size: 2rem; + } +} + +.gallery { + display: flex; + justify-content: space-evenly; + + .card { + width: 30%; + border: 1px solid black; + display: flex; + flex-direction: column; + padding: 3%; + + .image { + margin: auto; + background-color: blue; + width: 80%; + padding: 20%; + + h3 { + font-size: .5rem; + } + } + } +} + +.bottom-content { + border: 1px solid black; + .top-section { + background-color: grey; + } + .container { + width: 100%; + display: flex; + .showcase { + width: 50%; + padding: 3%; + align-self: center; + .image { + margin: 5% auto; + background-color: blue; + width: 80%; + padding: 20%; + } + } + .howto { + width: 50%; + display: flex; + flex-direction: column; + .card { + p { + font-size: 1rem; + } + .image { + margin: auto; + background-color: blue; + width: 80%; + padding: 12%; + } + + + + } + } + } +}