From a872be8f72284e2f8e8df5041db2cfb9dd8a1ccc Mon Sep 17 00:00:00 2001 From: colinolmstead <49330359+colinolmstead@users.noreply.github.com> Date: Mon, 25 May 2020 16:43:04 -0600 Subject: [PATCH 1/2] added an image file --- css/index.css | 157 +++++++++++++++++++++++++++++++++++++++++++++++- index.html | 18 +++++- less/index.less | 22 +++++++ 3 files changed, 195 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 7dd97920d..8ae42176d 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,156 @@ -/* 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%; +} +ul.header-nav li { + float: none; + display: inline-block; + text-align: center; + list-style: none; + text-decoration: none; + padding: 10px; + border: 1px solid black; +} +ul.header-nav { + display: flex; + justify-content: center; +} +div.header li a { + color: black; + text-decoration: none; +} +div.header li a:hover { + background-color: blue; +} diff --git a/index.html b/index.html index a7f9e3ad1..53d7ef5f9 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,22 @@ -

My Resume

+
+ +
+ + +
+ +
+

Welcome to my Portfolio feel free to browse

+

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

+hot air balloon over water at night + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 191ce142e..8b7aa58bc 100644 --- a/less/index.less +++ b/less/index.less @@ -56,4 +56,26 @@ table { html, body { height: 100%; } +ul.header-nav li { + float: none; + display: inline-block; + text-align: center; + list-style: none; + text-decoration: none; + padding: 10px; + border: 1px solid black; + +} +ul.header-nav { + display: flex; + justify-content: center; +} + +div.header li a { + color: black; + text-decoration: none; +} +div.header li a:hover { + background-color: blue; +} \ No newline at end of file From aba7c254f4444b4e34cc0a49935f089f5b19c0ea Mon Sep 17 00:00:00 2001 From: colinolmstead <49330359+colinolmstead@users.noreply.github.com> Date: Tue, 26 May 2020 00:05:08 -0600 Subject: [PATCH 2/2] sometext --- css/index.css | 59 +++++++++++++++++++++++++++++++++++ index.html | 53 +++++++++++++++++++++++--------- less/index.less | 81 +++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 176 insertions(+), 17 deletions(-) diff --git a/css/index.css b/css/index.css index 8ae42176d..db24f7098 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,17 @@ +@font-face { + font-family: 'Anton'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v11/1Ptgg87LROyAm0K0.ttf) format('truetype'); +} +@font-face { + font-family: 'Chelsea Market'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Chelsea Market'), local('ChelseaMarket-Regular'), url(https://fonts.gstatic.com/s/chelseamarket/v7/BCawqZsHqfr89WNP_IApC8tzKBhl.ttf) format('truetype'); +} /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) @@ -89,6 +103,7 @@ video { font-size: 100%; font: inherit; vertical-align: baseline; + font-family: 'Anton', sans-serif; } /* HTML5 display-role reset for older browsers */ article, @@ -133,6 +148,7 @@ table { html, body { height: 100%; + background-color: #994a4a; } ul.header-nav li { float: none; @@ -142,10 +158,12 @@ ul.header-nav li { text-decoration: none; padding: 10px; border: 1px solid black; + color: skyblue; } ul.header-nav { display: flex; justify-content: center; + color: skyblue; } div.header li a { color: black; @@ -154,3 +172,44 @@ div.header li a { div.header li a:hover { background-color: blue; } +h1 { + font-size: xxx-large; + display: flex; + justify-content: center; + margin-top: 2rem; + margin-bottom: 2rem; +} +:hover { + font-size: x-large; +} +h2 { + font-size: x-large; + display: flex; + justify-content: center; + margin-bottom: 2rem; +} +h2:hover { + color: skyblue; +} +.twolists { + display: flex; + flex-direction: row; + justify-content: center; +} +@media (max-width: 500px) { + display: flex; + flex-direction: column; +} +.ulspace { + margin-left: 2rem; + margin-right: 2rem; +} +.footer { + display: flex; + justify-content: center; + margin-top: 3rem; + font-size: medium; +} +.footer:hover { + color: skyblue; +} diff --git a/index.html b/index.html index 53d7ef5f9..763ecc062 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -14,22 +15,44 @@ -
- -
- - -
+
+ +
+ + +
-

Welcome to my Portfolio feel free to browse

-

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

-hot air balloon over water at night - +

Welcome to my Portfolio feel free to browse

+
+
+

Seasoned technology professional and recent Lambda Coding Academy Graduate

+
+ + + +
+
+ +
\ No newline at end of file diff --git a/less/index.less b/less/index.less index 8b7aa58bc..0d706db6c 100644 --- a/less/index.less +++ b/less/index.less @@ -1,8 +1,32 @@ +@import url('https://fonts.googleapis.com/css2?family=Anton&family=Chelsea+Market&display=swap'); + // Is this working? /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ +@main-font: 'Anton', sans-serif; +@main-color: skyblue; + +.centerbottom() +{ + display: flex; + justify-content: center; + margin-top: 3rem; + font-size: medium; + &:hover{ + color:@main-color; + } +} + +.flexcenter() +{display: flex; +flex-direction: row; +justify-content: center;} + + + + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, @@ -23,6 +47,7 @@ time, mark, audio, video { font-size: 100%; font: inherit; vertical-align: baseline; + font-family: @main-font; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, @@ -54,7 +79,9 @@ table { } html, body { - height: 100%; + height: 100%; + background-color: rgb(153, 74, 74); + } ul.header-nav li { float: none; @@ -64,12 +91,14 @@ ul.header-nav li { text-decoration: none; padding: 10px; border: 1px solid black; + color:@main-color; } ul.header-nav { display: flex; justify-content: center; + color:@main-color; } div.header li a { @@ -78,4 +107,52 @@ div.header li a { } div.header li a:hover { background-color: blue; -} \ No newline at end of file +} + +h1 + { + font-size: xxx-large; + display: flex; + justify-content: center; + margin-top: 2rem; + margin-bottom: 2rem; + } + &:hover + { + + font-size: x-large; + } + + + +h2 +{ +font-size: x-large; +display: flex; +justify-content: center; +margin-bottom: 2rem; +&:hover{ +color:@main-color; +} +} + +.twolists + { + .flexcenter() + } + @media (max-width: 500px) + { + display: flex; + flex-direction: column; + } + + +.ulspace + { + margin-left: 2rem; + margin-right: 2rem; + } +.footer + {.centerbottom()} + +