diff --git a/css/index.css b/css/index.css index 7dd97920d..db24f7098 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,215 @@ -/* Compile your LESS file! */ \ No newline at end of file +@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) +*/ +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; + font-family: 'Anton', sans-serif; +} +/* 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%; + background-color: #994a4a; +} +ul.header-nav li { + float: none; + display: inline-block; + text-align: center; + list-style: none; + 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; + text-decoration: none; +} +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 a7f9e3ad1..763ecc062 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -14,6 +15,44 @@ -

My Resume

+
+ +
+ + +
+ +
+

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 191ce142e..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,6 +79,80 @@ table { } html, body { - height: 100%; + height: 100%; + background-color: rgb(153, 74, 74); + +} +ul.header-nav li { + float: none; + display: inline-block; + text-align: center; + list-style: none; + 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 { + color: black; + text-decoration: none; +} +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; +&:hover{ +color:@main-color; +} +} + +.twolists + { + .flexcenter() + } + @media (max-width: 500px) + { + display: flex; + flex-direction: column; + } + + +.ulspace + { + margin-left: 2rem; + margin-right: 2rem; + } +.footer + {.centerbottom()} + +