From 0574bcae12a6d2c68a3d8aa968a4a73689cd6921 Mon Sep 17 00:00:00 2001 From: Amy Lee Date: Fri, 15 Sep 2017 15:59:26 -0700 Subject: [PATCH 1/8] seeded documents --- content/about.html | 16 ++++++ content/code-journal.html | 10 ++++ content/index.html | 57 +++++++++++++++++++++ content/portfolio.html | 53 +++++++++++++++++++ styles/styles.css | 104 ++++++++++++++++++++++++++++++++++++++ 5 files changed, 240 insertions(+) create mode 100644 content/about.html create mode 100644 content/code-journal.html create mode 100644 content/index.html create mode 100644 content/portfolio.html create mode 100644 styles/styles.css diff --git a/content/about.html b/content/about.html new file mode 100644 index 000000000..5206dc793 --- /dev/null +++ b/content/about.html @@ -0,0 +1,16 @@ + + + + + + + + + About AYL + + +

+ AYL +

+ + diff --git a/content/code-journal.html b/content/code-journal.html new file mode 100644 index 000000000..f540bc682 --- /dev/null +++ b/content/code-journal.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/content/index.html b/content/index.html new file mode 100644 index 000000000..ec783ee6a --- /dev/null +++ b/content/index.html @@ -0,0 +1,57 @@ + + + + + AYL Works + + + + + +
+

Amy Lee

+
+ + + +
+
+ How are you + Maecenas viverra vestibulum pulvinar. Proin congue consectetur dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur condimentum feugiat ex, non pharetra mi tincidunt at. Duis lacinia massa et nunc tempor consequat. Nullam ullamcorper egestas tellus, vel venenatis odio maximus a. Duis non mattis enim. Maecenas at pharetra nunc, non dignissim eros. Fusce non lorem dapibus, pretium augue nec, finibus neque. Pellentesque posuere lectus purus, nec molestie mauris ultricies et. Vivamus vestibulum semper faucibus. Aliquam eget tellus sed ligula dapibus semper ac ut dolor. Pellentesque varius eros nisi. Morbi nec velit velit. Praesent eleifend interdum leo, quis elementum diam vestibulum eu. +
+ +
+ Hey + Mauris suscipit lobortis tellus sed placerat. Donec sit amet dignissim quam. Mauris aliquet sollicitudin sapien, a facilisis leo tempor ac. Vivamus et hendrerit felis, ut dignissim felis. Morbi tristique lacus quis egestas lacinia. Mauris tempor dictum massa, eu aliquet leo mollis ac. Sed id mi sed libero tincidunt tincidunt. Pellentesque eget purus luctus, congue arcu et, efficitur libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque varius, augue et lobortis auctor, felis mauris accumsan sem, interdum iaculis magna justo vitae eros. Etiam id condimentum nisl. Proin imperdiet euismod dui, at gravida ex ultrices vel. Nam luctus tempus felis tempor consequat. Sed sodales ipsum risus, sit amet ullamcorper nisl volutpat ut. +
+ +
+ What up + Duis mauris tellus, dictum sed sem id, congue faucibus mi. Mauris et sem nec tortor vestibulum cursus. Donec finibus accumsan ipsum quis consequat. Proin pellentesque, neque a ultrices scelerisque, odio nulla luctus est, at mollis lorem ex nec nulla. Cras eu suscipit felis. Ut in odio maximus, commodo nisl sit amet, gravida orci. Nullam aliquam, massa at interdum sollicitudin, ipsum neque hendrerit massa, a bibendum urna erat quis nibh. Nunc molestie ipsum quis euismod aliquam. Nulla facilisi. Vivamus iaculis massa quis ipsum convallis, vehicula malesuada leo hendrerit. Nullam porta finibus dignissim. Vestibulum imperdiet, risus et pretium fringilla, lacus ante aliquam ex, eget vulputate enim dui nec libero. Donec ultrices, arcu et iaculis cursus, tortor neque vestibulum ante, vitae auctor mi lectus in massa. Nullam id ultricies quam. Ut quis tortor vitae justo suscipit ultrices. Aliquam pretium faucibus blandit. +
+
+ + + + + diff --git a/content/portfolio.html b/content/portfolio.html new file mode 100644 index 000000000..8861e6899 --- /dev/null +++ b/content/portfolio.html @@ -0,0 +1,53 @@ + + + + + AYL Portfolio + + + +
+

Amy Lee

+
+ + + +
+

yooooo

+
+

Portfolio 1

+

+
+ +
+

Portfolio 2

+

+
+ +
+

Portfolio 3

+

+
+ +
+ + + + diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 000000000..cdf88bea5 --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,104 @@ +body { + display:block; + background-color: snow; +} + +a { + text-decoration: none; + color: black; + font-family: Bungee; + display: inline-block; + position: relative; +} + +/*header h2 { + text-align: center; +}*/ + +header a:hover { + color: orange; + text-transform: uppercase; + transform: rotateY(360deg); + transition: transform 5s ease; + position: relative; +} + +a:hover { + color: orange; +} + +header { + width: 100%; + border-bottom: solid black 1px; + position: fixed; + text-align: center; + background: green; +} + +nav { + padding-top: 80px; + position: relative; +} + +footer { + width: 100%; + border: solid black 2px; + margin: auto; + position: relative; +} + +footer h4, p { + display: inline-block; +} + +.footer-text { + margin: auto; + width: 60%; + text-align: center; +} + +.container { + position: relative; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + /*opacity: .70; */ +} + +nav ul { + text-align: center; +} +nav li { + display: inline-block; + margin: 0 20px; +} + +.sticky-nav { + position: sticky top: 10px; + opacity: 0.7; + border: dashed blue 2px; +} + +.circle { + shape-outside: circle(10px); +} + +main { + min-height: 50%; + overflow: scroll; + border: pink solid 3px; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} + +main section:first-of-type { + background-color: blue; + grid-column: 1 / 3; + grid-row: 1 / 4; +} + +main section { + border: solid black 2px; +} From c099cec221093169b92f46f92d33db6045566e32 Mon Sep 17 00:00:00 2001 From: Amy Lee Date: Sun, 17 Sep 2017 09:45:02 -0700 Subject: [PATCH 2/8] added social media buttons to footer, main display is now flex, experimenting with css shapes --- content/about.html | 58 ++++++++-- content/code-journal.html | 84 +++++++++++++- content/index.html | 68 +++++++----- content/portfolio.html | 57 ++++++---- styles/styles.css | 227 +++++++++++++++++++++++++++++++++++--- 5 files changed, 420 insertions(+), 74 deletions(-) diff --git a/content/about.html b/content/about.html index 5206dc793..a993dee19 100644 --- a/content/about.html +++ b/content/about.html @@ -2,15 +2,59 @@ - - - - + + + About AYL -

- AYL -

+
+

Amy Lee

+ +
+ +
+

+ AYL +

+

+ Amy likes stories +

+
+ +
+
+

© 2017

+

Amy Lee

+
+ +
+ diff --git a/content/code-journal.html b/content/code-journal.html index f540bc682..840c2f56d 100644 --- a/content/code-journal.html +++ b/content/code-journal.html @@ -2,9 +2,91 @@ - + AYL Code Journal + + + + +
+

Amy Lee

+ +
+ +
+
+

Title

+

+ hey +

+
+
+

Title1

+

+ hello +

+
+
+

Title2

+

+ hi +

+
+
+

Title3

+

+ what happens +

+
+
+

Title4

+

+ when more +

+
+
+

Title5

+

+ are added +

+
+ +
+ +
+
+

© 2017

+

Amy Lee

+
+ +
diff --git a/content/index.html b/content/index.html index ec783ee6a..76d7ed791 100644 --- a/content/index.html +++ b/content/index.html @@ -5,45 +5,46 @@ AYL Works - + + +

Amy Lee

+
- -
-
- How are you +
+ -
- Hey +
+ Hey, square. Mauris suscipit lobortis tellus sed placerat. Donec sit amet dignissim quam. Mauris aliquet sollicitudin sapien, a facilisis leo tempor ac. Vivamus et hendrerit felis, ut dignissim felis. Morbi tristique lacus quis egestas lacinia. Mauris tempor dictum massa, eu aliquet leo mollis ac. Sed id mi sed libero tincidunt tincidunt. Pellentesque eget purus luctus, congue arcu et, efficitur libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque varius, augue et lobortis auctor, felis mauris accumsan sem, interdum iaculis magna justo vitae eros. Etiam id condimentum nisl. Proin imperdiet euismod dui, at gravida ex ultrices vel. Nam luctus tempus felis tempor consequat. Sed sodales ipsum risus, sit amet ullamcorper nisl volutpat ut. -
+ -
- What up +
+ What up, triangle? Duis mauris tellus, dictum sed sem id, congue faucibus mi. Mauris et sem nec tortor vestibulum cursus. Donec finibus accumsan ipsum quis consequat. Proin pellentesque, neque a ultrices scelerisque, odio nulla luctus est, at mollis lorem ex nec nulla. Cras eu suscipit felis. Ut in odio maximus, commodo nisl sit amet, gravida orci. Nullam aliquam, massa at interdum sollicitudin, ipsum neque hendrerit massa, a bibendum urna erat quis nibh. Nunc molestie ipsum quis euismod aliquam. Nulla facilisi. Vivamus iaculis massa quis ipsum convallis, vehicula malesuada leo hendrerit. Nullam porta finibus dignissim. Vestibulum imperdiet, risus et pretium fringilla, lacus ante aliquam ex, eget vulputate enim dui nec libero. Donec ultrices, arcu et iaculis cursus, tortor neque vestibulum ante, vitae auctor mi lectus in massa. Nullam id ultricies quam. Ut quis tortor vitae justo suscipit ultrices. Aliquam pretium faucibus blandit. -
+
@@ -51,7 +52,18 @@

Amy Lee

© 2017

Amy Lee

-
+ + diff --git a/content/portfolio.html b/content/portfolio.html index 8861e6899..ba4dc2d72 100644 --- a/content/portfolio.html +++ b/content/portfolio.html @@ -4,42 +4,44 @@ AYL Portfolio + + +

Amy Lee

+
- -

yooooo

-
+

Portfolio 1

-
+

Portfolio 2

-
+

Portfolio 3

@@ -47,7 +49,22 @@

Portfolio 3

+
+

© 2017

+

Amy Lee

+
+
diff --git a/styles/styles.css b/styles/styles.css index cdf88bea5..8cf12650d 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1,12 +1,20 @@ +html { + box-sizing: border-box; +} + body { - display:block; - background-color: snow; + display: block; + background-color: white; + font-family: 'Work Sans', sans-serif; + /*font-family: 'Raleway', sans-serif;*/ + /*font-family: 'Bungee', sans-serif;*/ + /*font-family: 'Play', sans-serif;*/ } a { text-decoration: none; color: black; - font-family: Bungee; + font-family: 'Bungee', sans-serif; display: inline-block; position: relative; } @@ -15,7 +23,7 @@ a { text-align: center; }*/ -header a:hover { +header a[href ^= "index"]:hover { color: orange; text-transform: uppercase; transform: rotateY(360deg); @@ -29,22 +37,33 @@ a:hover { header { width: 100%; - border-bottom: solid black 1px; + /*border-bottom: solid gray 1px;*/ + /*box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);*/ position: fixed; text-align: center; - background: green; + /*background: white;*/ + background: linear-gradient(180deg,rgba(0,0,0,.45),transparent 90%); + top: 0px; + /*overflow: visible;*/ +} + +header h2 { + margin-bottom: 0; + color: white; } nav { - padding-top: 80px; + padding-top: 10px; position: relative; } footer { width: 100%; - border: solid black 2px; + /*border: solid black 2px;*/ margin: auto; position: relative; + bottom: 0; + background-color: #f9f7f7; } footer h4, p { @@ -52,9 +71,10 @@ footer h4, p { } .footer-text { - margin: auto; + /*margin: auto;*/ + padding-left: 10px; width: 60%; - text-align: center; + /*text-align: center;*/ } .container { @@ -73,11 +93,13 @@ nav li { margin: 0 20px; } -.sticky-nav { - position: sticky top: 10px; +/*.sticky-nav { + position: sticky; + top: 10px; opacity: 0.7; border: dashed blue 2px; -} + background: lightgray; +}*/ .circle { shape-outside: circle(10px); @@ -87,18 +109,187 @@ main { min-height: 50%; overflow: scroll; border: pink solid 3px; - display: grid; + margin-top: 130px; + display: flex; + padding: 30px; + /*margin-top:30px;*/ + /*display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; - grid-auto-rows: minmax(100px, auto); + grid-auto-rows: minmax(100px, auto);*/ } -main section:first-of-type { +/*main section:first-of-type { background-color: blue; grid-column: 1 / 3; grid-row: 1 / 4; +}*/ + +main article { + padding: 20px; +} + +main article:hover { + box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); +} + +nav.container { + padding: 0px; +} + +/*.blog-post:hover { + box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); +}*/ + +p.blog-post { + margin: 20px; +} + +.blog-post { + flex-wrap: wrap; + margin: 20px; + width: 60%; +} + +.featured.project { + /*just to see the shape*/ + margin: 10px; + border: black solid 2px; + +} + +.project { + border: black dotted 2px; + margin: auto; +} + +.footer-text { + display: inline-block; +} + +/*every nth section, make the hover background color different, make it animate? but also give it a slight gray shadow to make it look like its hovering*/ + + +/*social media link styling below*/ +.social-menu { + display: inline-block; +} +.social-menu ul { + padding:0; + list-style: none; +} +.footer-social-icons { + width: 350px; + display:block; + margin: 0 auto; +} +.social-icon { + color: #fff; +} +ul.social-icons { + margin-top: 10px; +} +.social-icons li { + vertical-align: top; + display: inline; + height: 100px; +} +.social-icons a { + color: gray; + text-decoration: none; +} + +.fa-github { + padding:10px 14px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: transparent; +} +.fa-github:hover { + background-color: darkslategrey; +} + +.fa-facebook { + padding:10px 14px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: transparent; +} +.fa-facebook:hover { + background-color: #3d5b99; +} +.fa-twitter { + padding:10px 12px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: transparent; +} +.fa-twitter:hover { + background-color: #00aced; +} +/*.fa-rss { + padding:10px 14px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: transparent; +}*/ +/*.fa-rss:hover { + background-color: #eb8231; +}*/ +/*.fa-youtube { + padding:10px 14px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: transparent; +}*/ +/*.fa-youtube:hover { + background-color: #e64a41; +}*/ +.fa-linkedin { + padding:10px 14px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: transparent; +} +.fa-linkedin:hover { + background-color: #0073a4; +} +/*.fa-google-plus { + padding:10px 9px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: transparent;*/ +} +.fa-google-plus:hover { + background-color: #e25714; } -main section { - border: solid black 2px; +#egg { + width: 136px; + height: 190px; + background: #ffc000; + display: block; + -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; + border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } From db94a46615205e0cf1c029feff9a6ba10730fa0e Mon Sep 17 00:00:00 2001 From: Amy Lee Date: Sun, 17 Sep 2017 10:40:36 -0700 Subject: [PATCH 3/8] basic shapes added, reconfigure home page, each page gets a themed color --- content/about.html | 2 +- content/code-journal.html | 2 +- content/index.html | 27 +++++++---- content/portfolio.html | 2 +- styles/styles.css | 95 ++++++++++++++++++++++++++++++++++++--- 5 files changed, 111 insertions(+), 17 deletions(-) diff --git a/content/about.html b/content/about.html index a993dee19..4300e6d61 100644 --- a/content/about.html +++ b/content/about.html @@ -7,7 +7,7 @@ About AYL - +

Amy Lee