From 93cf78e34ddebae3e9c966b372d7c09b2310f7ee Mon Sep 17 00:00:00 2001 From: TimLaptop Date: Wed, 20 May 2020 21:13:32 -0700 Subject: [PATCH 1/5] started resume --- css/index.css | 176 +++++++++++++++++++++++++++++++++++++++++++++++- index.html | 55 ++++++++++++++- less/index.less | 77 +++++++++++++++++++++ 3 files changed, 306 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 7dd97920d..7d89819f4 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,175 @@ -/* 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; +} +html, +body { + height: 100%; +} +body { + max-width: 1050px; + margin: 0 auto; + background-color: #bb5c37; +} +.header { + display: flex; + background-color: #79af30; + justify-content: space-between; +} +.header h1 { + padding: 10px; +} +.header .navbar { + padding: 10px; +} +.header .navbar a { + padding-left: 10px; +} +.main-content { + display: flex; + flex-direction: column; + margin-left: 30px; + margin-right: 30px; + padding: 20px; + background-color: #128a84; +} +.main-content img { + border: 10px solid #79af30; +} +.about { + display: flex; + flex-direction: row; + justify-content: space-around; +} +.work { + display: flex; + flex-direction: row; +} diff --git a/index.html b/index.html index a7f9e3ad1..6cd78f028 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,59 @@ -

My Resume

+
+

My Resume

+ +
+
+ Scooby Profile Picture +

Scoobert Doo - Mystery Inc

+

Ruh Roh!

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +
+
+
+

About Me

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

+
+
+

Stuff I'm Good At

+
    +
  • Solving Mysteries
    • +
  • Running from ghouls and ghosts
    • +
  • Eating all food
    • +
  • Being Scared
    • +
  • Hanging with my gang!
    • +
+
+
+
+
+

Work History

+

Cartoon Network - 1990

+
    +
  • Performing with the gang
    • +
  • Unmasking villains
    • +
  • Advertising Scooby Snacks
    • +
+
+
+

Hollywood Studios - 2000

+
    +
  • Working in 3D
    • +
  • Working with live actors
    • +
  • Eating lots of food
    • +
+
+
+ \ No newline at end of file diff --git a/less/index.less b/less/index.less index 191ce142e..e14b262ae 100644 --- a/less/index.less +++ b/less/index.less @@ -3,6 +3,9 @@ v2.0 | 20110126 License: none (public domain) */ +// Variables + + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, @@ -57,3 +60,77 @@ html, body { height: 100%; } +//variables + +@main-color: #128a84; +@secondary-color: #79af30; +@third-color: #bb5c37; +@font-color: #4b0055; +@button-color: #8e6345; +@padding: 10px; + +//mixins + + +//styles + body { + max-width: 1050px; + margin: 0 auto; + background-color: @third-color; + } + + //header + .header { + display: flex; + background-color: @secondary-color; + justify-content: space-between; + h1 { + padding: @padding; + } + .navbar { + padding: @padding; + a { + padding-left: @padding; + } + } + } + + + + //main content + + .main-content { + display: flex; + flex-direction: column; + margin-left: @padding * 3; + margin-right: @padding * 3; + padding: @padding * 2; + background-color: @main-color; + img { + border: 10px solid @secondary-color; + } + h2 { + + } + } + + //about + + .about { + display: flex; + flex-direction: row; + justify-content: space-around; + } + + //work + + .work { + display: flex; + flex-direction: row; + } + + //footer + + .footer { + + } \ No newline at end of file From 4a8a1551329777eb310e1251033180a98295c615 Mon Sep 17 00:00:00 2001 From: TimLaptop Date: Wed, 20 May 2020 22:25:41 -0700 Subject: [PATCH 2/5] Made it pretty --- css/index.css | 80 +++++++++++++++++++++++++++++++++++++++++++------ index.html | 6 ++-- less/index.less | 67 ++++++++++++++++++++++++++++++++++++----- 3 files changed, 133 insertions(+), 20 deletions(-) diff --git a/css/index.css b/css/index.css index 7d89819f4..4fa45b7b4 100644 --- a/css/index.css +++ b/css/index.css @@ -137,39 +137,101 @@ body { body { max-width: 1050px; margin: 0 auto; - background-color: #bb5c37; + background-color: white; + background-image: url("https://i.pinimg.com/originals/c7/57/51/c75751ace6af6d42ccfff2c36bd2488c.png"); } .header { display: flex; background-color: #79af30; justify-content: space-between; + padding-top: 40px; + padding-bottom: 20px; } .header h1 { - padding: 10px; + padding: 20px; + font-size: 25px; + color: #4b0055; + font-weight: 700f; } .header .navbar { - padding: 10px; + padding: 20px; } .header .navbar a { - padding-left: 10px; + padding-left: 20px; + font-size: 25px; + color: #4b0055; + font-weight: 700f; + text-decoration: none; +} +.header .navbar a:hover { + color: #bb5c37; } .main-content { display: flex; flex-direction: column; - margin-left: 30px; - margin-right: 30px; - padding: 20px; - background-color: #128a84; + margin-left: 60px; + margin-right: 60px; + padding: 40px; + background-color: #bb5c37; } -.main-content img { +.main-content .profile-image { + width: 250px; + height: 250px; border: 10px solid #79af30; + background-image: url("https://vignette.wikia.nocookie.net/ravencbbctvseries/images/c/c0/Scooby_Doo.jpg/revision/latest?cb=20180619023113"); + background-size: cover; + transition: ease-in 0.5s; +} +.main-content .profile-image:hover { + border: 10px solid #79af30; + background-image: url("https://i.pinimg.com/564x/3a/d0/b7/3ad0b7132464268d0591fd645b0c9548.jpg"); +} +.main-content h2 { + font-size: 25px; + color: #4b0055; + font-weight: 700f; + font-size: 40px; +} +.main-content button { + padding: 10px; + background-color: #8e6345; + color: white; + font-size: 40px; + width: 300px; + height: 100px; +} +.main-content button:hover { + background-color: #79af30; + background-image: url("https://66.media.tumblr.com/7cfec08406bc000fb798af5ee4bcbe22/tumblr_pq6vnwODEE1xwpz8uo2_500.png"); } .about { display: flex; flex-direction: row; justify-content: space-around; + margin-left: 60px; + margin-right: 60px; + padding: 40px; + background-color: #128a84; +} +.about h2 { + font-size: 25px; + color: #4b0055; + font-weight: 700f; } .work { display: flex; flex-direction: row; + margin-left: 60px; + margin-right: 60px; + padding: 40px; + background-color: #128a84; +} +.work h2 { + font-size: 25px; + color: #4b0055; + font-weight: 700f; +} +.footer { + background-color: #79af30; + padding: 20px; } diff --git a/index.html b/index.html index 6cd78f028..7e9113bd0 100644 --- a/index.html +++ b/index.html @@ -24,18 +24,18 @@

My Resume

- Scooby Profile Picture +

Scoobert Doo - Mystery Inc

Ruh Roh!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
+

About Me

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

-
+

Stuff I'm Good At

  • Solving Mysteries
    • diff --git a/less/index.less b/less/index.less index e14b262ae..a0df707bc 100644 --- a/less/index.less +++ b/less/index.less @@ -67,16 +67,28 @@ html, body { @third-color: #bb5c37; @font-color: #4b0055; @button-color: #8e6345; -@padding: 10px; +@padding: 20px; //mixins +.titlefonts (){ + font-size: 25px; + color: @font-color; + font-weight: 700f; +} +.interior () { + margin-left: @padding * 3; + margin-right: @padding * 3; + padding: @padding * 2; + background-color: @main-color; +} //styles body { max-width: 1050px; margin: 0 auto; - background-color: @third-color; + background-color: white; + background-image: url("https://i.pinimg.com/originals/c7/57/51/c75751ace6af6d42ccfff2c36bd2488c.png"); } //header @@ -84,14 +96,22 @@ html, body { display: flex; background-color: @secondary-color; justify-content: space-between; + padding-top: @padding * 2; + padding-bottom: @padding; h1 { padding: @padding; + .titlefonts(); } .navbar { padding: @padding; a { - padding-left: @padding; - } + padding-left: @padding; + .titlefonts(); + text-decoration: none; + } + a:hover { + color: @third-color; + } } } @@ -105,12 +125,34 @@ html, body { margin-left: @padding * 3; margin-right: @padding * 3; padding: @padding * 2; - background-color: @main-color; - img { + background-color: @third-color; + .profile-image { + width: 250px; + height: 250px; border: 10px solid @secondary-color; + background-image: url("https://vignette.wikia.nocookie.net/ravencbbctvseries/images/c/c0/Scooby_Doo.jpg/revision/latest?cb=20180619023113"); + background-size: cover; + transition: ease-in .5s; } + .profile-image:hover { + border: 10px solid @secondary-color; + background-image: url("https://i.pinimg.com/564x/3a/d0/b7/3ad0b7132464268d0591fd645b0c9548.jpg"); + } h2 { - + .titlefonts (); + font-size: 40px; + } + button { + padding: 10px; + background-color: @button-color; + color: white; + font-size: 40px; + width: 300px; + height: 100px; + } + button:hover { + background-color: @secondary-color; + background-image: url("https://66.media.tumblr.com/7cfec08406bc000fb798af5ee4bcbe22/tumblr_pq6vnwODEE1xwpz8uo2_500.png"); } } @@ -120,6 +162,10 @@ html, body { display: flex; flex-direction: row; justify-content: space-around; + .interior (); + h2 { + .titlefonts (); + } } //work @@ -127,10 +173,15 @@ html, body { .work { display: flex; flex-direction: row; + .interior (); + h2 { + .titlefonts(); + } } //footer .footer { - + background-color: @secondary-color; + padding: @padding; } \ No newline at end of file From 7b77389bbfc06f6d659f798e34c154f702de9583 Mon Sep 17 00:00:00 2001 From: TimLaptop Date: Thu, 21 May 2020 15:50:21 -0700 Subject: [PATCH 3/5] added styling --- css/index.css | 30 +++++++++++++++++++++++------- index.html | 10 +++++----- less/index.less | 26 ++++++++++++++++++++++---- 3 files changed, 50 insertions(+), 16 deletions(-) diff --git a/css/index.css b/css/index.css index 4fa45b7b4..debb6caa5 100644 --- a/css/index.css +++ b/css/index.css @@ -151,7 +151,7 @@ body { padding: 20px; font-size: 25px; color: #4b0055; - font-weight: 700f; + font-weight: 700; } .header .navbar { padding: 20px; @@ -160,7 +160,7 @@ body { padding-left: 20px; font-size: 25px; color: #4b0055; - font-weight: 700f; + font-weight: 700; text-decoration: none; } .header .navbar a:hover { @@ -189,7 +189,7 @@ body { .main-content h2 { font-size: 25px; color: #4b0055; - font-weight: 700f; + font-weight: 700; font-size: 40px; } .main-content button { @@ -207,20 +207,33 @@ body { .about { display: flex; flex-direction: row; - justify-content: space-around; + justify-content: center; margin-left: 60px; margin-right: 60px; padding: 40px; background-color: #128a84; } -.about h2 { +.about .aboutme { + padding-right: 125px; +} +.about .aboutme h2 { font-size: 25px; color: #4b0055; - font-weight: 700f; + font-weight: 700; +} +.about .stuff { + padding-right: 125px; + padding-left: 125px; +} +.about .stuff h2 { + font-size: 25px; + color: #4b0055; + font-weight: 700; } .work { display: flex; flex-direction: row; + justify-content: space-between; margin-left: 60px; margin-right: 60px; padding: 40px; @@ -229,7 +242,10 @@ body { .work h2 { font-size: 25px; color: #4b0055; - font-weight: 700f; + font-weight: 700; +} +.work div p { + font-weight: 650; } .footer { background-color: #79af30; diff --git a/index.html b/index.html index 7e9113bd0..8606e21a5 100644 --- a/index.html +++ b/index.html @@ -25,10 +25,10 @@

    My Resume

    -

    Scoobert Doo - Mystery Inc

    -

    Ruh Roh!

    +

    Scoobert Doo

    +

    Where Are You?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    - +
    @@ -47,8 +47,8 @@

    Stuff I'm Good At

    -
    -

    Work History

    +

    Work History

    +

    Cartoon Network - 1990

    • Performing with the gang
      • diff --git a/less/index.less b/less/index.less index a0df707bc..1cde5802d 100644 --- a/less/index.less +++ b/less/index.less @@ -73,7 +73,7 @@ html, body { .titlefonts (){ font-size: 25px; color: @font-color; - font-weight: 700f; + font-weight: 700; } .interior () { @@ -159,13 +159,25 @@ html, body { //about .about { + display: flex; flex-direction: row; - justify-content: space-around; + justify-content: center; .interior (); - h2 { - .titlefonts (); + .aboutme { + padding-right: 125px; + h2 { + .titlefonts (); + } + } + .stuff { + padding-right: 125px; + padding-left: 125px; + h2 { + .titlefonts(); } + } + } //work @@ -173,10 +185,16 @@ html, body { .work { display: flex; flex-direction: row; + justify-content: space-between; .interior (); h2 { .titlefonts(); } + div { + p { + font-weight: 650; + } + } } //footer From 503be053a5f92af9e79c9a1206c09e00308ce070 Mon Sep 17 00:00:00 2001 From: TimLaptop Date: Sun, 24 May 2020 18:17:40 -0700 Subject: [PATCH 4/5] fine-tuning --- contact.html | 37 ++++++++++ css/contact.css | 181 ++++++++++++++++++++++++++++++++++++++++++++++++ css/index.css | 78 +++++++++++++++++++-- index.html | 7 +- less/index.less | 61 ++++++++++++++-- 5 files changed, 352 insertions(+), 12 deletions(-) create mode 100644 contact.html create mode 100644 css/contact.css diff --git a/contact.html b/contact.html new file mode 100644 index 000000000..1daa96434 --- /dev/null +++ b/contact.html @@ -0,0 +1,37 @@ + + + + + + + + My Resume + + + + + + + +
      +

      My Resume

      + +
      +
      +

      Contact

      +
      + +
      +
      +
      +

      © Scooby Dooby Doo 2020

      +
      + + \ No newline at end of file diff --git a/css/contact.css b/css/contact.css new file mode 100644 index 000000000..eef0f120e --- /dev/null +++ b/css/contact.css @@ -0,0 +1,181 @@ +/* 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; +} +html, +body { + height: 100%; +} +body { + max-width: 1050px; + margin: 0 auto; + background-color: white; + background-image: url("https://i.pinimg.com/originals/c7/57/51/c75751ace6af6d42ccfff2c36bd2488c.png"); +} +.header { + display: flex; + background-color: #79af30; + justify-content: space-between; + padding-top: 40px; + padding-bottom: 20px; +} +.header h1 { + padding: 20px; + font-size: 25px; + color: #4b0055; + font-weight: 700; + font-family: 'Bangers', cursive; + letter-spacing: 2px; +} +.header .navbar { + padding: 20px; +} +.header .navbar a { + padding-left: 20px; + font-size: 25px; + color: #4b0055; + font-weight: 700; + font-family: 'Bangers', cursive; + letter-spacing: 2px; + text-decoration: none; +} +.header .navbar a:hover { + color: #bb5c37; +} + + + + +.footer { + background-color: #79af30; + padding: 20px; +} + diff --git a/css/index.css b/css/index.css index debb6caa5..49eabf69e 100644 --- a/css/index.css +++ b/css/index.css @@ -140,6 +140,11 @@ body { background-color: white; background-image: url("https://i.pinimg.com/originals/c7/57/51/c75751ace6af6d42ccfff2c36bd2488c.png"); } +@media (max-width: 500px) { + body { + width: 100%; + } +} .header { display: flex; background-color: #79af30; @@ -152,6 +157,8 @@ body { font-size: 25px; color: #4b0055; font-weight: 700; + font-family: 'Bangers', cursive; + letter-spacing: 2px; } .header .navbar { padding: 20px; @@ -161,6 +168,8 @@ body { font-size: 25px; color: #4b0055; font-weight: 700; + font-family: 'Bangers', cursive; + letter-spacing: 2px; text-decoration: none; } .header .navbar a:hover { @@ -174,6 +183,11 @@ body { padding: 40px; background-color: #bb5c37; } +@media (max-width: 500px) { + .main-content { + width: 100%; + } +} .main-content .profile-image { width: 250px; height: 250px; @@ -190,9 +204,34 @@ body { font-size: 25px; color: #4b0055; font-weight: 700; + font-family: 'Bangers', cursive; + letter-spacing: 2px; font-size: 40px; + padding-top: 20px; +} +.main-content .where { + font-size: 18px; + color: white; + font-family: 'Chelsea Market', cursive; + font-size: 20px; + border-top: none; + padding-top: 25px; +} +.main-content p { + font-size: 18px; + color: white; + font-family: 'Chelsea Market', cursive; + border-top: 2x dashed #4b0055; + border-bottom: 5px dashed #4b0055; + padding: 40px 50px 40px 0; } .main-content button { + margin-top: 30px; + font-size: 25px; + color: #4b0055; + font-weight: 700; + font-family: 'Bangers', cursive; + letter-spacing: 2px; padding: 10px; background-color: #8e6345; color: white; @@ -200,6 +239,12 @@ body { width: 300px; height: 100px; } +@media (max-width: 500px) { + .main-content button { + width: 100%; + align-items: center; + } +} .main-content button:hover { background-color: #79af30; background-image: url("https://66.media.tumblr.com/7cfec08406bc000fb798af5ee4bcbe22/tumblr_pq6vnwODEE1xwpz8uo2_500.png"); @@ -214,21 +259,33 @@ body { background-color: #128a84; } .about .aboutme { - padding-right: 125px; + width: 50%; + padding-left: 0; + padding-right: 40px; + font-size: 18px; + color: white; + font-family: 'Chelsea Market', cursive; } .about .aboutme h2 { font-size: 25px; color: #4b0055; font-weight: 700; + font-family: 'Bangers', cursive; + letter-spacing: 2px; } .about .stuff { - padding-right: 125px; - padding-left: 125px; + width: 50%; + padding-left: 20px; + font-size: 18px; + color: white; + font-family: 'Chelsea Market', cursive; } .about .stuff h2 { font-size: 25px; color: #4b0055; font-weight: 700; + font-family: 'Bangers', cursive; + letter-spacing: 2px; } .work { display: flex; @@ -243,9 +300,22 @@ body { font-size: 25px; color: #4b0055; font-weight: 700; + font-family: 'Bangers', cursive; + letter-spacing: 2px; } .work div p { - font-weight: 650; + font-size: 18px; + color: white; + font-family: 'Chelsea Market', cursive; + font-family: 'Bangers', cursive; + letter-spacing: 2px; + border-bottom: 2px dashed #79af30; +} +.work div ul { + font-size: 18px; + color: white; + font-family: 'Chelsea Market', cursive; + padding-top: 10px; } .footer { background-color: #79af30; diff --git a/index.html b/index.html index 8606e21a5..edd52bd2d 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ - + + My Resume @@ -20,13 +21,13 @@

      My Resume

      Home About Portfolio - Contact + Contact

      Scoobert Doo

      -

      Where Are You?

      +

      Where Are You?

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      diff --git a/less/index.less b/less/index.less index 1cde5802d..1bb62df6d 100644 --- a/less/index.less +++ b/less/index.less @@ -68,12 +68,22 @@ html, body { @font-color: #4b0055; @button-color: #8e6345; @padding: 20px; +@banger: 'Bangers', cursive; +@chelsea: 'Chelsea Market', cursive; //mixins .titlefonts (){ font-size: 25px; color: @font-color; font-weight: 700; + font-family: @banger; + letter-spacing: 2px; +} + +.bodyfont () { + font-size: 18px; + color: white; + font-family: @chelsea; } .interior () { @@ -89,6 +99,11 @@ html, body { margin: 0 auto; background-color: white; background-image: url("https://i.pinimg.com/originals/c7/57/51/c75751ace6af6d42ccfff2c36bd2488c.png"); + + @media (max-width: 500px) { + width: 100%; + + } } //header @@ -98,6 +113,7 @@ html, body { justify-content: space-between; padding-top: @padding * 2; padding-bottom: @padding; + h1 { padding: @padding; .titlefonts(); @@ -126,6 +142,10 @@ html, body { margin-right: @padding * 3; padding: @padding * 2; background-color: @third-color; + @media (max-width: 500px) { + width: 100%; + + } .profile-image { width: 250px; height: 250px; @@ -133,6 +153,7 @@ html, body { background-image: url("https://vignette.wikia.nocookie.net/ravencbbctvseries/images/c/c0/Scooby_Doo.jpg/revision/latest?cb=20180619023113"); background-size: cover; transition: ease-in .5s; + } .profile-image:hover { border: 10px solid @secondary-color; @@ -141,14 +162,33 @@ html, body { h2 { .titlefonts (); font-size: 40px; + padding-top: 20px; + } + .where { + .bodyfont(); + font-size: 20px; + border-top: none; + padding-top: 25px; + } + p { + .bodyfont(); + border-top: 2x dashed @font-color; + border-bottom: 5px dashed @font-color; + padding: 40px 50px 40px 0; } button { + margin-top: 30px; + .titlefonts (); padding: 10px; background-color: @button-color; color: white; font-size: 40px; width: 300px; - height: 100px; + height: 100px; + @media (max-width: 500px) { + width: 100%; + align-items: center; + } } button:hover { background-color: @secondary-color; @@ -165,14 +205,18 @@ html, body { justify-content: center; .interior (); .aboutme { - padding-right: 125px; + width: 50%; + padding-left: 0; + padding-right: @padding*2; + .bodyfont (); h2 { .titlefonts (); } } .stuff { - padding-right: 125px; - padding-left: 125px; + width: 50%; + padding-left: @padding; + .bodyfont (); h2 { .titlefonts(); } @@ -192,7 +236,14 @@ html, body { } div { p { - font-weight: 650; + .bodyfont(); + font-family: @banger; + letter-spacing: 2px; + border-bottom: 2px dashed @secondary-color; + } + ul { + .bodyfont(); + padding-top: 10px; } } } From f8f6924114a9f771e4d724a24eb710441a653091 Mon Sep 17 00:00:00 2001 From: TimLaptop Date: Sun, 24 May 2020 18:47:15 -0700 Subject: [PATCH 5/5] added more stuff --- contact.html | 7 ++++++- css/contact.css | 40 ++++++++++------------------------------ css/index.css | 21 +++++---------------- index.html | 6 +++--- less/index.less | 16 ++++------------ 5 files changed, 28 insertions(+), 62 deletions(-) diff --git a/contact.html b/contact.html index 1daa96434..ec495c18f 100644 --- a/contact.html +++ b/contact.html @@ -27,7 +27,12 @@

      My Resume

      Contact

      - + Scoobert Doo
      + 123 Mystery Lane
      + Hollywood, CA 95350
      + Phone: 877-856-6309
      + Email: ruhroh@scoobysnacks.com
      + Website: www.scoobertdoo.com