diff --git a/.gitignore b/.gitignore index e43b0f988..88d94b42d 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ .DS_Store +photo-creds.rtf +notes.txt diff --git a/about.html b/about.html new file mode 100644 index 000000000..49ca88e0b --- /dev/null +++ b/about.html @@ -0,0 +1,72 @@ + + + + + Angelica's Portfolio Site | About + + + + + + +
+ +
+ +
+
+
+

Where I'm from

+ falling on green hills +
+

+ Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. +

+
+ +
+
+

What I'm doing

+ old letters, pictures, and writing ink +
+

+ Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. +

+
+ +
+
+

Where I'm going

+ view of skyscrapers from the ground +
+

+ Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. +

+
+
+ + + + + + diff --git a/code-journal/index.html b/code-journal/index.html new file mode 100644 index 000000000..e08b50923 --- /dev/null +++ b/code-journal/index.html @@ -0,0 +1,77 @@ + + + + + Angelica's Portfolio Site | + + + + + + +
+ +
+ +
+ +
+

Egestas Ullamcorper Ultricies Sem

+

+ Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. +

+

+ + Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. +

+

+ Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. +

+

+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. +

+
+
+ + + + + diff --git a/code-journal/week-five.html b/code-journal/week-five.html new file mode 100644 index 000000000..88b229629 --- /dev/null +++ b/code-journal/week-five.html @@ -0,0 +1,92 @@ + + + + + Angelica's Portfolio Site | + + + + + + +
+ +
+ +
+ +
+

Week Five

+

+ Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. +

+

+ Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. +

+

+ Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. +

+

+ Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. +

+

+ + Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. +

+

+ Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. +

+

+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. +

+

+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. +

+

+ Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +

+
+
+ + + + + diff --git a/code-journal/week-four.html b/code-journal/week-four.html new file mode 100644 index 000000000..f40525b37 --- /dev/null +++ b/code-journal/week-four.html @@ -0,0 +1,82 @@ + + + + + Angelica's Portfolio Site | + + + + + + +
+ +
+ +
+ +
+

Week Four

+

+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. +

+

+ Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +

+

+ Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. +

+

+ Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. +

+

+ Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. +

+

+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. +

+
+
+ + + + + diff --git a/code-journal/week-one.html b/code-journal/week-one.html new file mode 100644 index 000000000..0766ea99a --- /dev/null +++ b/code-journal/week-one.html @@ -0,0 +1,83 @@ + + + + + Angelica's Portfolio Site | + + + + + + +
+ +
+ +
+ +
+

Week One

+

+ Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. +

+

+ + Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. +

+

+ Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. +

+

+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. +

+

+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. +

+

+ Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +

+
+
+ + + + + diff --git a/code-journal/week-six.html b/code-journal/week-six.html new file mode 100644 index 000000000..a830bfa9a --- /dev/null +++ b/code-journal/week-six.html @@ -0,0 +1,83 @@ + + + + + Angelica's Portfolio Site | + + + + + + +
+ +
+ +
+ +
+

Week Six

+

+ Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. +

+

+ + Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. +

+

+ Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. +

+

+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. +

+

+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. +

+

+ Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +

+
+
+ + + + + diff --git a/code-journal/week-three.html b/code-journal/week-three.html new file mode 100644 index 000000000..b31b40ac7 --- /dev/null +++ b/code-journal/week-three.html @@ -0,0 +1,73 @@ + + + + + Angelica's Portfolio Site | + + + + + + +
+ +
+ +
+ +
+

Week Three

+

+ Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. +

+

+ Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. +

+

+ Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. +

+
+
+ + + + + diff --git a/code-journal/week-two.html b/code-journal/week-two.html new file mode 100644 index 000000000..72d32fd0e --- /dev/null +++ b/code-journal/week-two.html @@ -0,0 +1,84 @@ + + + + + Angelica's Portfolio Site | + + + + + + +
+ +
+ +
+ +
+

Week Two

+

+ Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. +

+

+ + Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. +

+

+ Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. +

+

+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. + Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+

+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. +

+

+ Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +

+
+
+ + + + + diff --git a/images/yellow.jpg b/images/yellow.jpg new file mode 100644 index 000000000..34c8a0c9a Binary files /dev/null and b/images/yellow.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..c2c79ac78 --- /dev/null +++ b/index.html @@ -0,0 +1,97 @@ + + + + + Angelica's Portfolio Site | Home + + + + + + +
+ +
+ +
+
+ +
+

site name

+

+ something something doughnut +

+ a benjamin button +
+
+ +
+ +
+ brown bear in a body of water + Name + Title +
+
+

+ Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +

+

+ Learn more here. +

+
+
+ +
+ +

Portfolio stuff

+

+ Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. +

+ +

+ Here's my portfolio. Check it out: Portfolio. +

+
+ +
+ +

Code Journal stuff

+

+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. +

+

+ Here's my code journal. Check it out: Code Journal. +

+
+ +
+ +

Thank you's

+

+ Thank you to the following people: Amet Cursus Inceptos Pharetra Ornare Porta Bibendum Pharetra Tristique Lorem Ullamcorper Porta +

+
+
+ + + + + diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 000000000..f8d6872f4 --- /dev/null +++ b/portfolio.html @@ -0,0 +1,137 @@ + + + + + Angelica's Portfolio Site | Portfolio + + + + + + +
+ +
+ +
+ + +
+ + rustic meal on wodden table +
+

+ Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. +

+
+ +

Random Menu

+
+ +
+ + gas system in space +
+

+ Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+
+ +

Solar System

+
+ +
+ + typewriter and other stationary on light wodden floor +
+

+ Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. +

+
+ +

Word Guess

+
+ +
+ + assortment of frozen berries +
+

+ Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. +

+
+ +

Grocery Store

+
+ +
+ + close-up of a typewriter +
+

+ Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. +

+
+ +

Scrabble

+
+ +
+ + yellow taxi cabs in the middle of a street +
+

+ Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. +

+
+ +

Ride Share

+
+ +
+ + hotel-like buildings across the street from each other +
+

+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. +

+
+ +

Hotel

+
+ +
+ + glasses lying on a minimalist laptop and mouse on top of a warm-toned wooden table +
+

+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. +

+
+ +

Start-up Static Website

+
+ +
+ + + + + diff --git a/stylesheets/about.css b/stylesheets/about.css new file mode 100644 index 000000000..a3ba0659d --- /dev/null +++ b/stylesheets/about.css @@ -0,0 +1,20 @@ +/* section styles */ + +section { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +section * { + margin: 5px; +} + +section h2 { + text-align: center; +} + +section div.doing-info { + order: 1; +} diff --git a/stylesheets/code-journal.css b/stylesheets/code-journal.css new file mode 100644 index 000000000..aa75caeb1 --- /dev/null +++ b/stylesheets/code-journal.css @@ -0,0 +1,42 @@ +/* universal styles */ + +body { + height: 90%; +} + +aside a:hover, a.active { + text-decoration: underline; +} + +/* main styles */ + +main { + display: grid; + grid-template-columns: 1fr 5fr; +} + +/* section styles */ + +section.journal-section { + background-color: rgba(255, 255, 255, 1); + border: none; + min-height: 76vh; + max-height: 76vh; + overflow-x: scroll; + justify-content: flex-start; +} + +/* aside styles */ + +aside { + border-right: solid 1px rgba(209, 154, 1, 1); + text-align: center; +} + +aside ul li { + padding: 10px; +} + +aside ul li a { + text-decoration: none; +} diff --git a/stylesheets/home.css b/stylesheets/home.css new file mode 100644 index 000000000..1f3d2c744 --- /dev/null +++ b/stylesheets/home.css @@ -0,0 +1,61 @@ +/* modifications to main styles */ + +header { + background-color: rgba(0, 0, 0, 0); +} + +nav a { + text-decoration: none; + color: rgba(255, 255, 255, 1); +} + +main { + margin-top: 0; +} + +/* hero banner styles */ + +section.hero { + height: 100vh; + padding: 0; + background: rgba(238, 238, 238, 1) url("../images/yellow.jpg") no-repeat center center; + background-attachment: fixed; + color: rgba(255, 255, 255, 1); + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +section.hero a { + color: rgba(255, 255, 255, 1); +} + +/* about section styles */ + +section.home-about { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +section.home-about div.photo-and-info { + width: 50%; + text-align: center; +} + +div.photo-and-info img { + border-radius: 50%; +} + +div.photo-and-info strong, div.photo-and-info span { + display: block; + margin: 10px; +} + +section.home-about div.about-info { + margin: 0; + width: 50%; + height: auto; +} diff --git a/stylesheets/main.css b/stylesheets/main.css new file mode 100644 index 000000000..aa268bf1d --- /dev/null +++ b/stylesheets/main.css @@ -0,0 +1,108 @@ +/* universal styles */ + +html, body { + height: 100%; +} + +ul { + list-style-type: none; + padding: 0; +} + +a { + color: rgba(209, 154, 1, 1); +} + +* { + font-family: Futura, sans-serif; +} + +/* header styles */ + +header { + background-color: rgba(209, 154, 1, 1); + position: fixed; + top: 0; + width: 100%; +} + +header ul { + display: flex; + flex-wrap: wrap; +} + +header ul li { + display: inline-block; + margin: 0 1rem; +} + +header ul > li:first-child { + margin: 0 auto 0 2rem; +} + +header ul > li:last-child { + margin-right: 2rem; +} + +header ul li a { + display: inline-block; + padding: 0.5rem; + min-width: 6rem; + text-align: center; +} + +/* nav styles */ + +nav ul { + margin: 0; +} + +nav ul li a { + color: rgba(255, 255, 255, 1); + text-decoration: none; +} + +/* main styles */ + +main { + margin-top: 5vh; +} + +/* footer styles */ + +footer { + height: 70px; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + position: relative; + bottom: 0; + width: 100%; + background-color: rgba(238, 238, 238, 1); +} + +/* images styles */ + +img { + max-width: 300px; +} + +/* sections styles */ + + +section { + min-height: 50vh; + border-bottom: solid 1px rgba(238, 238, 238, 1); + padding: 5vh 10vw; +} + +section:nth-of-type(2n) { + background: whitesmoke; +} + +section { + display: flex; + flex-direction: column; + justify-content: center; +} diff --git a/stylesheets/normalize.css b/stylesheets/normalize.css new file mode 100644 index 000000000..47b010e47 --- /dev/null +++ b/stylesheets/normalize.css @@ -0,0 +1,341 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/stylesheets/portfolio.css b/stylesheets/portfolio.css new file mode 100644 index 000000000..5d6dc1a80 --- /dev/null +++ b/stylesheets/portfolio.css @@ -0,0 +1,65 @@ +/* universal styles */ + +body { + height: 90%; +} + +/* main styles */ + +main { + padding: 40px 30px; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +/* individual project styles */ +div.project { + max-height: 250px; + max-width: 300px; + border: solid 2px rgba(238, 238, 238, 1); + text-align: center; + border-radius: 5%; + margin: 20px; +} + +a.project-info { + display: block; + width: 300px; + height: 172px; + border-top-left-radius: 5%; + border-top-right-radius: 5%; + text-decoration: none; +} + +a.project-info img { + border-top-left-radius: 5%; + border-top-right-radius: 5%; + width: 100%; + height: 172px; + transition: 1s; +} + +a.project-info:hover img { + opacity: 0.3; +} + +div.project-description { + margin-top: -193px; + height: 172px; + opacity: 0; + transition: 1s; + display: flex; + flex-direction: column; + justify-content: center; +} + +div.project-description:hover { + opacity: 1; +} + +div.project-description p { + color: rgba(0, 0, 0, 1); + padding-top: 20px; + -webkit-transform: translate3d(0, 0, 0); +}