diff --git a/about.html b/about.html new file mode 100644 index 000000000..289aaad24 --- /dev/null +++ b/about.html @@ -0,0 +1,55 @@ + + + + + + + + + + + + About Sara + + +
+

Home

+ + +
+ +
+
+

About Me

+
+ +
+
+ My Kitten +
+

Sara Chandler

+

+ is a biologist turned programmer. Living in Seattle and attending Ada Developers Academy, + she enjoys spending her time hanging out with her cat, Pterodactyl, reading comics, and playing video games. +

+
+
+ + + + + + diff --git a/code-journal.html b/code-journal.html new file mode 100644 index 000000000..3e0b0ed5e --- /dev/null +++ b/code-journal.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + Sara's Projects + + +
+

Home

+ + +
+ +
+
+

Things I'm working on

+
+ +
+
+ Blep Cat +
+

Witch Princess

+
+

Story and Art Director

+
+

+ A children's story about a princess who wants to be a witch. Coming Soon! +

+
+ +
+
+ Charitie +
+

Charitie

+
+

Vice President and Secretary

+
+

+ A charity supporting workspace for makers, artists, and craftspersons. +

+
+
+ + + + + diff --git a/images/Artboard2-100.jpg b/images/Artboard2-100.jpg new file mode 100644 index 000000000..9e9155fe8 Binary files /dev/null and b/images/Artboard2-100.jpg differ diff --git a/images/Bittencopy.jpg b/images/Bittencopy.jpg new file mode 100644 index 000000000..c190dcdc4 Binary files /dev/null and b/images/Bittencopy.jpg differ diff --git a/images/ada.jpg b/images/ada.jpg new file mode 100644 index 000000000..0d38f6e7d Binary files /dev/null and b/images/ada.jpg differ diff --git a/images/blep-cat.jpg b/images/blep-cat.jpg new file mode 100644 index 000000000..2efa225d3 Binary files /dev/null and b/images/blep-cat.jpg differ diff --git a/images/charitie.png b/images/charitie.png new file mode 100644 index 000000000..f11c7c170 Binary files /dev/null and b/images/charitie.png differ diff --git a/images/header-background.jpg b/images/header-background.jpg new file mode 100644 index 000000000..44b8c6b51 Binary files /dev/null and b/images/header-background.jpg differ diff --git a/images/static-icon.jpg b/images/static-icon.jpg new file mode 100644 index 000000000..a8409d64d Binary files /dev/null and b/images/static-icon.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..4226520bf --- /dev/null +++ b/index.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + Static Sara + + +
+

Home

+ + +
+ +
+
+
+ Saracha +
+

Hi, I'm

+

Sara Chandler

+

+ I like coding, cats, and comics. +

+
+
+ + + + + diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 000000000..c56589132 --- /dev/null +++ b/portfolio.html @@ -0,0 +1,74 @@ + + + + + + + + + + + + Sara's Portfolio + + +
+

Home

+ + +
+ +
+
+

My Ada Code Projects

+
+ +
+
+ Ada Lovelace +
+
+

Hotel

+
+
+

Intermediate Ruby

+
+
+

+ A program detailing the business logic for a hotel. Makes reservations and calculates the bill for your hotel! +

+
+
+ +
+
+

MeowSpace

+
+
+

HTML and CSS

+
+
+

+ A website featuring cats and cat related stories. +

+
+
+
+ + + + + diff --git a/styles/about-styles.css b/styles/about-styles.css new file mode 100644 index 000000000..65db77fc0 --- /dev/null +++ b/styles/about-styles.css @@ -0,0 +1,149 @@ +*{ + margin: 0; +} +a:link { + color: #102C3A; +} +a:visited { + color: #835E64; +} +a:hover { + color: #2B6179; +} +header { + height: 90px; + background: -webkit-linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* For Firefox 3.6 to 15 */ + background: linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* Standard syntax (must be last) */ +} + +header { + float: left; + padding: 25px 0; + width: 100%; + position: fixed; + top: 0; + font-family: 'Monoton', cursive; + z-index: 5; +} + +header li{ + float: right; +} + +header h2 a[href="index.html"] { + text-decoration: none; + + font-size: 2em; + display: inline-block; + float: left; +} + +nav ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; +} + +nav li { + float: right; +} + +nav ul li a[href="about.html"] { + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + + font-size: 2em +} +nav ul li a[href="portfolio.html"] { + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + + font-size: 2em +} +nav ul li a[href="code-journal.html"] { + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + + font-size: 2em +} +body { + background: pink; /* For browsers that do not support gradients */ + background: -webkit-linear-gradient(#5BDFEB, #132937); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(#5BDFEB, #132937); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(#5BDFEB, #132937); /* For Firefox 3.6 to 15 */ + background: linear-gradient(#5BDFEB, #132937); /* Standard syntax (must be last) */ +} +.circle { + border-radius: 50%; + display: inline-block; + position: relative; +} +.circle img { + border-radius: 50%; + display: inline-block; + position: relative; + top: 150px; + border:0px solid #fff; + max-width: 500px; + max-height: 500px; + width: auto; + height: auto; +} + +main section h2 { + display: inline-block; + position: relative; + left: 100px; + bottom: 100px; + text-align: center; + font-family: 'Bungee Shade', cursive; + font-size: 2em; +} + +main section h1 { + display: inline-block; + position: relative; + left: 500px; + top: 200px; + text-align: center; + font-family: 'Bungee Shade', cursive; + font-size: 4em; +} + + + +main section p { + display: inline-block; + width: 550px; + position: relative; + right: 200px; + top: 80px; + text-align: center; + font-family: 'Raleway', sans-serif; + font-size: 1.5em; +} + + +footer { + display: inline-block; + float: left; + width: 1000px; + position: relative; + top: 170px; +} + +#disclaimer { + font-family: 'Monofett', cursive; + display: inline-block; + float: left; + width: 400px; +} diff --git a/styles/port-styles.css b/styles/port-styles.css new file mode 100644 index 000000000..144c8ffff --- /dev/null +++ b/styles/port-styles.css @@ -0,0 +1,199 @@ +*{ + margin: 0; +} +a:link { + color: #102C3A; +} +a:visited { + color: #835E64; +} +a:hover { + color: #2B6179; +} +header { + height: 90px; + background: -webkit-linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* For Firefox 3.6 to 15 */ + background: linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* Standard syntax (must be last) */ +} + +header { + float: left; + padding: 25px 0; + width: 100%; + position: fixed; + top: 0; + font-family: 'Monoton', cursive; + z-index: 5; +} + +header li{ + float: right; +} + +header h2 a[href="index.html"] { + text-decoration: none; + + font-size: 2em; + display: inline-block; + float: left; +} + +nav ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; +} + +nav li { + float: right; +} + +nav ul li a[href="about.html"] { + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + + font-size: 2em +} +nav ul li a[href="portfolio.html"] { + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + + font-size: 2em +} +nav ul li a[href="code-journal.html"] { + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + + font-size: 2em +} +body { + background: pink; /* For browsers that do not support gradients */ + background: -webkit-linear-gradient(#5BDFEB, #132937); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(#5BDFEB, #132937); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(#5BDFEB, #132937); /* For Firefox 3.6 to 15 */ + background: linear-gradient(#5BDFEB, #132937); /* Standard syntax (must be last) */ +} +.circle { + border-radius: 50%; + display: inline-block; + position: relative; +} +.circle img { + border-radius: 50%; + display: inline-block; + position: relative; + top: 230px; + border:0px solid #fff; + max-width: 500px; + max-height: 500px; + width: auto; + height: auto; +} + + +main section h2 { + display: inline-block; + position: relative; + left: 100px; + bottom: 100px; + text-align: center; + font-family: 'Bungee Shade', cursive; + font-size: 3em; +} + +main section h1 { + display: inline-block; + position: relative; + left: 200px; + top: 200px; + text-align: center; + font-family: 'Bungee Shade', cursive; + font-size: 4em; +} + +#meowspace { + display: inline-block; + position: relative; + left: 170px; + top: 60px; + font-family: 'Raleway', sans-serif; + font-size: 1.5em; +} +#meowtitle { + display: inline-block; + position: relative; + left: 400px; + top: 100px; + text-align: center; + font-family: 'Bungee Shade', cursive; +} +#meowpara { + display: inline-block; + width: 550px; + position: relative; + right: 550px; + top: 150px; + text-align: center; + font-family: 'Raleway', sans-serif; +} +#hoteltitle { + display: inline-block; + position: relative; + left: 0px; + bottom: 60px; + text-align: center; + font-family: 'Bungee Shade', cursive; +} +#hotel { + display: inline-block; + position: relative; + right: 70px; + bottom: 110px; + font-family: 'Raleway', sans-serif; + font-size: 1.5em; +} +#hotelpara { + display: inline-block; + width: 550px; + position: relative; + right: 830px; + top: 25px; + text-align: center; + font-family: 'Raleway', sans-serif; +} + +main section p { + display: inline-block; + width: 550px; + position: relative; + left: 580px; + bottom: 40px; + text-align: center; + font-family: 'Raleway', sans-serif; + font-size: 1.5em; +} + + +footer { + display: inline-block; + float: left; + width: 1000px; + position: relative; + top: 170px; +} + +#disclaimer { + font-family: 'Monofett', cursive; + display: inline-block; + float: left; + width: 400px; +} diff --git a/styles/proj-styles.css b/styles/proj-styles.css new file mode 100644 index 000000000..ee6d32e42 --- /dev/null +++ b/styles/proj-styles.css @@ -0,0 +1,179 @@ +*{ + margin: 0; +} +a:link { + color: #102C3A; +} +a:visited { + color: #835E64; +} +a:hover { + color: #2B6179; +} +header { + height: 90px; + background: -webkit-linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* For Firefox 3.6 to 15 */ + background: linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* Standard syntax (must be last) */ +} + +header { + float: left; + padding: 25px 0; + width: 100%; + position: fixed; + top: 0; + font-family: 'Monoton', cursive; + z-index: 5; +} + +header li{ + float: right; +} + +header h2 a[href="index.html"] { + text-decoration: none; + + font-size: 2em; + display: inline-block; + float: left; +} + +nav ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; +} + +nav li { + float: right; +} + +nav ul li a[href="about.html"] { + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + + font-size: 2em +} +nav ul li a[href="portfolio.html"] { + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + + font-size: 2em +} +nav ul li a[href="code-journal.html"] { + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + + font-size: 2em +} +body { + background: pink; /* For browsers that do not support gradients */ + background: -webkit-linear-gradient(#5BDFEB, #132937); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(#5BDFEB, #132937); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(#5BDFEB, #132937); /* For Firefox 3.6 to 15 */ + background: linear-gradient(#5BDFEB, #132937); /* Standard syntax (must be last) */ +} +.circle { + border-radius: 50%; + display: inline-block; + position: relative; +} +.circle img { + border-radius: 50%; + display: inline-block; + position: relative; + top: 230px; + border:0px solid #fff; + max-width: 500px; + max-height: 500px; + width: auto; + height: auto; +} +.circle_charitie { + border-radius: 50%; + display: inline-block; + position: relative; +} +.circle_charitie img { + border-radius: 50%; + display: inline-block; + position: relative; + top: 200px; + border:0px solid #fff; + max-width: 500px; + max-height: 500px; + width: 380px; + height: auto; +} + +main section h2 { + display: inline-block; + position: relative; + left: 100px; + bottom: 200px; + text-align: center; + font-family: 'Bungee Shade', cursive; + font-size: 3em; +} + +main section h1 { + display: inline-block; + position: relative; + left: 200px; + top: 200px; + text-align: center; + font-family: 'Bungee Shade', cursive; + font-size: 4em; +} + +#vp { + display: inline-block; + position: relative; + right: 150px; + bottom: 150px; + font-family: 'Raleway', sans-serif; + font-size: 1.5em; +} +#art { + display: inline-block; + position: relative; + right: 360px; + bottom: 150px; + font-family: 'Raleway', sans-serif; + font-size: 1.5em; +} + +main section p { + display: inline-block; + position: relative; + left: 520px; + bottom: 100px; + text-align: center; + font-family: 'Raleway', sans-serif; + font-size: 1.5em; +} + + +footer { + display: inline-block; + float: left; + width: 1000px; + position: relative; + top: 170px; +} + +#disclaimer { + font-family: 'Monofett', cursive; + display: inline-block; + float: left; + width: 400px; +} diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 000000000..045356312 --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,146 @@ +*{ + margin: 0; +} +a:link { + color: #102C3A; +} +a:visited { + color: #835E64; +} +a:hover { + color: #2B6179; +} +header { + height: 90px; + background: -webkit-linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* For Firefox 3.6 to 15 */ + background: linear-gradient(#E8428A, #F18987, #DAE0D4, #66B0BB); /* Standard syntax (must be last) */ +} + +header { + float: left; + padding: 25px 0; + width: 100%; + position: fixed; + top: 0; + font-family: 'Monoton', cursive; + z-index: 5; +} + +header li{ + float: right; +} + +header h2 a[href="index.html"] { + text-decoration: none; + + font-size: 2em; + display: inline-block; + float: left; +} + +nav ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; +} + +nav li { + float: right; +} + +nav ul li a[href="about.html"] { + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + + font-size: 2em +} +nav ul li a[href="portfolio.html"] { + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + + font-size: 2em +} +nav ul li a[href="code-journal.html"] { + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + + font-size: 2em +} +body { + background: pink; /* For browsers that do not support gradients */ + background: -webkit-linear-gradient(#5BDFEB, #132937); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(#5BDFEB, #132937); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(#5BDFEB, #132937); /* For Firefox 3.6 to 15 */ + background: linear-gradient(#5BDFEB, #132937); /* Standard syntax (must be last) */ +} +.circle { + border-radius: 50%; + display: inline-block; + position: relative; +} +.circle img { + border-radius: 50%; + display: inline-block; + position: relative; + top: 150px; + border:0px solid #fff; + max-width: 500px; + max-height: 500px; + width: auto; + height: auto; +} + +main section h2 { + display: inline-block; + position: relative; + left: 100px; + bottom: 200px; + text-align: center; + font-family: 'Bungee Shade', cursive; + font-size: 3em; +} + +main section h1 { + display: inline-block; + position: relative; + left: 100px; + bottom: 100px; + text-align: center; + font-family: 'Bungee Shade', cursive; + font-size: 4em; +} + +main section p { + display: inline-block; + position: relative; + left: 520px; + bottom: 15px; + text-align: center; + font-family: 'Raleway', sans-serif; + font-size: 1.5em; +} + + +footer { + display: inline-block; + float: left; + width: 1000px; + position: relative; + top: 150px; +} + +#disclaimer { + font-family: 'Monofett', cursive; + display: inline-block; + float: left; + width: 400px; +}