diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..bc94d0f Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..fe35d69 --- /dev/null +++ b/index.html @@ -0,0 +1,78 @@ + + + + + + my portfolio site + + + + + + + + +
+
+ +
+

rafal

+

front end dev beginner

+
+
+
+ +
+

Coding is fun!

+
+ +
+
+

featured work

+
+ + codewars + +
+

codewars

+
+
+
+ + My Github + +
+

my github

+
+
+
+ + Animal Trading Cards + +
+

animal trading card

+
+
+
+
+ + + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..3023cb6 --- /dev/null +++ b/main.css @@ -0,0 +1,356 @@ +body, +html { + max-height: 100%; + max-width: 100%; + margin: 0; + padding: 0; +} + +body { + background-color: #8c8d99; + display: block; +} + +body, +html, +div, +main, +section, +article, +img { + box-sizing: border-box; +} + +h1, +h2, +h3, +h4 { + margin: 0; + padding: 0; +} + +h1 { + font-family: "Roboto", Futura, cursive; + font-size: 1.75em; + letter-spacing: 2px; + text-transform: uppercase; +} + +h2 { + font-size: 1.25em; +} + +h3 { + font-size: 0.8em; +} + +h4 { + font-family: "Roboto 27px", serif; + font-size: 1em; + letter-spacing: 0.2px; +} + +h2, +h3 { + color: #0e3e8c; + font-family: "Roboto", sans-serif; + letter-spacing: 1px; + text-transform: uppercase; +} + +p { + font-size: 0.8em; + color: #000; + background-color: ; + font-family: "Roboto 27px", serif; + letter-spacing: 0.2px; + line-height: 150%; +} + +#container { + background-color: white; + display: flex; + flex-wrap: wrap; + height: 100%; + margin-left: auto; + margin-right: auto; + padding: 0.5em 1em 1em 1em; + width: 85%; +} + + +header.header { + width: 100%; +} + +.header_logo { + display: block; + margin-left: auto; + margin-right: auto; + max-width: 20%; + padding: 1em; + border-radius: 50%; +} + +.header_title { + padding-bottom: 1em; +} + +.header_title h1 { + margin-bottom: 0; + padding-bottom: 0; + text-align: center; +} + +.header_title h3 { + font-size: 0.9em; + padding: 0.25em 0; + text-align: center; +} + + +section.blog { + background-image: url("https://i.imgur.com/ukXmm25.jpg"); + background-size: cover; + height: 200px; + position: relative; + transition: all 0.5s ease; + width: 100%; +} + +section.blog:hover { + filter: grayscale(100%); +} + +article.main_post { + background-color: #383428; + bottom: 0; + box-sizing: border-box; + max-height: 40%; + opacity: 0.75; + padding: 0.5em 1em; + position: absolute; + vertical-align: middle; + width: 100%; +} + +.main_post h4 { + box-sizing: border-box; + color: #fff; + padding-bottom: 0.25em; +} + +.main_post p { + box-sizing: border-box; + color: #fff; + margin: 0; +} + + +main.intro_page { + display: flex; + flex-wrap: wrap; + width: 100%; +} + +main h2, +h3 { + padding: 1em 0; + width: 100%; +} + +main h3 { + padding-bottom: 0; +} + + +section.featured_work { + width: 100%; +} + +.link_work_case { + float: left; +} + +.work_showcase { + max-height: 100%; + width: 100%; + filter: grayscale(0%); + transition: all 0.3s ease-in-out; +} + +.work_showcase:hover { + border-radius: 20%; + filter: grayscale(100%); +} + +.work_description { + display: block; + float: right; +} + + +footer { + background-color: #191a26; + padding: 0.25em; + width: 100%; +} + +footer p { + color: #fff; + font-family: "Roboto", sans-serif; + font-size: 0.8em; + letter-spacing: 1px; + text-align: center; + text-transform: uppercase; +} + +.fa { + padding: 0.25em; + font-size: 20px; + width: 50px; + text-align: center; + text-decoration: none; + margin: 5px 2px; +} + +.fa:hover { + opacity: 0.7; +} + +.fa-skype { + background: #00aff0; + color: white; +} + +.fa-twitter { + background: #55ACEE; + color: white; +} + +.fa-linkedin { + background: #007bb5; + color: white; +} + +@media screen and (min-width: 600px) { + + section.featured_work { + padding-bottom: 1em; + } + + .work_showcase { + width: 50%; + } + + .work_description { + box-sizing: border-box; + padding: 0 1em; + width: 50%; + } + + .work_description h3 { + font-size: 1em; + padding-top: 0; + } +} + +@media screen and (min-width: 760px) { + #container { + padding-bottom: 2em; + } + + + header { + display: flex; + flex-wrap: wrap; + padding-bottom: 1em; + } + + .header_logo { + max-height: 150px; + padding: 1.5em; + width: 20%; + } + + .header_title { + padding: 0; + width: 80%; + } + + .header_title h1 { + font-size: 2.25em; + height: 50%; + line-height: 100px; + padding: 0; + text-align: right; + width: 100%; + } + + .header_title h3 { + font-size: 1.5em; + height: 50%; + padding: 0.25em 0; + text-align: right; + width: 100%; + } + + section.blog { + height: 300px; + } + + article.main_post { + padding: 1em; + } + +@media screen and (min-width: 850px) { + #container { + margin-left: auto; + margin-right: auto; + width: 850px; + } + + + section.blog { + min-height: 450px; + } + + article.main_post { + padding: 1em; + } + + section.featured_work { + margin-right: 10px; + min-height: 200px; + width: calc((100% - 20px) / 3); + } + + section.featured_work.last { + margin-right: 0; + } + + img.work_showcase { + box-sizing: border-box; + width: 100%; + } + + article.work_description { + box-sizing: border-box; + padding: 1em 0 0 0; + width: 100%; + } + + article.work_description.last { + padding-right: 0; + } + + article.work_description h3 { + min-height: 50px; + font-size: 1em; + padding-top: 0; + } + + article.work_description p { + padding-top: 0; + } +}