From 9f73b9bb09a194f9f176adcab7852f6eb7b6bb51 Mon Sep 17 00:00:00 2001 From: hysteria222 Date: Mon, 26 Jun 2023 01:48:00 -0700 Subject: [PATCH 1/3] Pushing until I can get feedback on what to do next. --- about.html | 1 + contact.html | 1 + index.html | 50 ++++++++++++- style/index.css | 188 +++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 238 insertions(+), 2 deletions(-) diff --git a/about.html b/about.html index df1043036..0a51b7184 100644 --- a/about.html +++ b/about.html @@ -3,6 +3,7 @@ + Document diff --git a/contact.html b/contact.html index 7c293bd11..3a0ded5b9 100644 --- a/contact.html +++ b/contact.html @@ -3,6 +3,7 @@ + Document diff --git a/index.html b/index.html index d01f779ff..a7e5726e0 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,57 @@ - Document + + + + + + + + + Heidi's Site +
+

Heidi Gunter

+
+ + + + +

INTRODUCING MY SITE

+ +
+ + Oh, so this is the part where I introduce myself, yeah? Right. Well, to start, my name is Heidi Gunter, which is lucky because if my father had had it his way, I'd be named Olga Gunter, and well, high-school sure would have been fun. That's not really what you are here to learn about me, but hey, it's a funny way to start. I am a thirty year old single mother residing in the south of the US. I work full time as a dispatcher for a private ambulance company, while also being enrolled at BloomTech. I took on this adventure as an opportunity to better myself for my family. The thing I enjoy most about coding is seeing my hard work come to life. Mostly, I prefer designing things, but find Javascript to be interesting, so far at least. + +
+ +

MY PROJECTS

+ +
+ greyscaleforest picture taken from up high +
+ +
+ black and white marble with gold accents + hands in cloudy water + tarot card the lovers + severed hand holding a rose + +
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
+
+ +
+ +
\ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..3e4ef63b1 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,187 @@ -/* Add CSS styling here */ \ No newline at end of file +/* 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; +} +/* 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; +} + +* { + box-sizing: border-box; +} + +body { + background-image: url("https://static.vecteezy.com/system/resources/thumbnails/000/633/918/small/seamless_background_286_finger_print.jpg"); + overflow-x: hidden; +} + +h1 { + font-family: Staatliches, sans-serif; + font-size: 4rem; + padding: 0.05%; +} + +h2 { + text-align: center; + font-family: Staatliches, sans-serif; + font-size: 2rem; + background-color: white; + padding: 1%; +} + +a { + background-color: #8F2D56; + color: white; + border: 2px solid black; + font-family: Gudea, sans-serif; + letter-spacing: 4px; + padding: 1%; + margin: 0.05%; +} + +nav { + width: 100vw; + display: flex; + flex-flow: row; + justify-content: center; + margin-top: 1%; + margin-bottom: 1%; +} + +span { + font-family: Agdasima, sans-serif; + font-size: 1.5rem; + text-align: justify; + letter-spacing: 1px; +} + +.titlename { + display: flex; + justify-content: center; + margin-top: 2%; + background-color: white; +} + +.aboutsection { + display: flex; + justify-content: center; + margin: 0 auto; + margin-top: 2%; + margin-bottom: 2%; + border: 5px solid #D81159; + width: 70%; + padding: 2%; + background-color: white; +} + + +.highlightedproject { + display: flex; + justify-content: center; + margin: 0 auto; + width: 70%; + height: 400px; + margin-top: 2%; + margin-bottom: 2%; +} + +.highlightedproject img { + width: 100%; + border: 5px solid #5C374C; +} + +.highlightedproject img:hover { + border: 5px solid #218380; + transition: 2s; +} + +.projectimages { + display: flex; + justify-content: center; + margin: 0 auto; + width: 90%; + height: 60vh; +} + +.projectimages img { + width: 20%; + padding: 1%; +} + +.projectdescriptions { + margin-top: 1%; + margin-bottom: 5%; + background-color: white; + border: 5px solid black; + height: 93%; +} + +span.projectdescptext { + overflow-wrap: break-word; + font-family: Agdasima, sans-serif; + font-size: 1.5rem; + padding: 1%; + text-align: justify; +} + +.footer { + display: flex; + justify-content: center; + width: 100%; + background-color: white; + height: 15vh; + margin-top: 2%; + border-top: 2px solid black; +} + +.footer button { + background-color: #8F2D56; + color: white; + width: 10%; + height: 50%; + border: 2px solid black; + font-family: Gudea, sans-serif; + letter-spacing: 4px; + margin-top: 2%; +} \ No newline at end of file From e6117dd26c1cef86c175b2504f379c1e005eb1db Mon Sep 17 00:00:00 2001 From: hysteria222 Date: Mon, 17 Jul 2023 19:40:17 -0700 Subject: [PATCH 2/3] Final. --- index.html | 6 +++--- style/index.css | 21 +++++++++++++++++---- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index a7e5726e0..3cdb111fa 100644 --- a/index.html +++ b/index.html @@ -21,9 +21,9 @@

Heidi Gunter

INTRODUCING MY SITE

diff --git a/style/index.css b/style/index.css index 3e4ef63b1..b1aa99af0 100644 --- a/style/index.css +++ b/style/index.css @@ -80,6 +80,12 @@ a { margin: 0.05%; } +a:hover { + background-color: #CE6A85; + transition: 2s; + color: black; +} + nav { width: 100vw; display: flex; @@ -150,19 +156,20 @@ span { } .projectdescriptions { + display: flex; margin-top: 1%; margin-bottom: 5%; background-color: white; border: 5px solid black; - height: 93%; + height: 56vh; } span.projectdescptext { - overflow-wrap: break-word; font-family: Agdasima, sans-serif; - font-size: 1.5rem; - padding: 1%; + font-size: 1.5vw; text-align: justify; + letter-spacing: 1px; + padding: 2%; } .footer { @@ -184,4 +191,10 @@ span.projectdescptext { font-family: Gudea, sans-serif; letter-spacing: 4px; margin-top: 2%; +} + +.footer button:hover { + background-color: #CE6A85; + transition: 2s; + color: black; } \ No newline at end of file From ff862859dd77df0062813b57b08725c9086920db Mon Sep 17 00:00:00 2001 From: hysteria222 Date: Thu, 27 Jul 2023 21:21:50 -0500 Subject: [PATCH 3/3] Pushing final for now. --- about.html | 27 ++++++- contact.html | 35 ++++++++- index.html | 6 +- projects.html | 26 ++++++- style/index.css | 187 +++++++++++++++++++++++++++++++++++++++++++++++- 5 files changed, 270 insertions(+), 11 deletions(-) diff --git a/about.html b/about.html index 0a51b7184..10f841c61 100644 --- a/about.html +++ b/about.html @@ -4,9 +4,32 @@ - Document + + + ABOUT -

ABOUT

+
+
+

ABOUT ME

+
+ + +
+ + +
Oh, so this is the part where I introduce myself, yeah? Right. Well, to start, my name is Heidi Gunter, which is lucky because if my father had had it his way, I'd be named Olga Gunter, and well, high-school sure would have been fun. That's not really what you are here to learn about me, but hey, it's a funny way to start. I am a thirty year old single mother residing in the south of the US. I work full time as a dispatcher for a private ambulance company, while also being enrolled at BloomTech. I took on this adventure as an opportunity to better myself for my family. The thing I enjoy most about coding is seeing my hard work come to life. Mostly, I prefer designing things, but find Javascript to be interesting, so far at least.
+ +
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ +
+ CONTACT ME +
+ \ No newline at end of file diff --git a/contact.html b/contact.html index 3a0ded5b9..39123f677 100644 --- a/contact.html +++ b/contact.html @@ -2,11 +2,40 @@ - + - Document + + + CONTACT -

CONTACT

+
+
+

CONTACT

+
+ + +
+ +
+ + hgunter22206@gmail.com + + 256-453-2848 + + heidi_gunter +
+ +
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ +
+ CONTACT ME +
+ \ No newline at end of file diff --git a/index.html b/index.html index 3cdb111fa..d6cd6b124 100644 --- a/index.html +++ b/index.html @@ -31,7 +31,7 @@

INTRODUCING MY SITE

- Oh, so this is the part where I introduce myself, yeah? Right. Well, to start, my name is Heidi Gunter, which is lucky because if my father had had it his way, I'd be named Olga Gunter, and well, high-school sure would have been fun. That's not really what you are here to learn about me, but hey, it's a funny way to start. I am a thirty year old single mother residing in the south of the US. I work full time as a dispatcher for a private ambulance company, while also being enrolled at BloomTech. I took on this adventure as an opportunity to better myself for my family. The thing I enjoy most about coding is seeing my hard work come to life. Mostly, I prefer designing things, but find Javascript to be interesting, so far at least. + Hi! My name's Heidi, and this is a thing I made to highlight certain projects and introduce myself, as well as leave my contact info. I'm not the best at introducing myself, but there's a whiole page dedicated to that, so I'll leave it there and you can take a look if you like! I assume I'll be using this as a resume of sorts later on, but even if that's not true, I learned a lot while making this and I'm pretty proud of how it turned out. So, if you're seeing this, thanks for looking!
@@ -52,8 +52,8 @@

MY PROJECTS

-
- +
+ CONTACT ME
\ No newline at end of file diff --git a/projects.html b/projects.html index 266e620b0..9a169ae42 100644 --- a/projects.html +++ b/projects.html @@ -3,9 +3,31 @@ - Document + + + + projects -

PROJECTS

+
+
+

PROJECTS

+
+ + +
+ +
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ +
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ +
+ CONTACT ME +
\ No newline at end of file diff --git a/style/index.css b/style/index.css index b1aa99af0..a0a08f7ac 100644 --- a/style/index.css +++ b/style/index.css @@ -78,6 +78,29 @@ a { letter-spacing: 4px; padding: 1%; margin: 0.05%; + text-decoration: none; +} + +a.contact{ + background-color: white; + color: black; + border: none; + letter-spacing: 0px; + font-family: Gudea, sans-serif; + font-size: 1.5vw; +} + +a.footercontact { + background-color: #8F2D56; + color: white; + border: 2px solid black; + font-family: Gudea, sans-serif; + letter-spacing: 4px; + padding: 1%; + margin: 0.05%; + text-decoration: none; + height: 8vh; + margin-top: 2%; } a:hover { @@ -121,6 +144,30 @@ span { background-color: white; } +.freesection { + display: flex; + justify-content: center; + margin: 0 auto; + margin-top: 2%; + margin-bottom: 2%; + border: 5px solid #D81159; + width: 70%; + padding: 2%; + background-color: white; +} + +.contactinfo { + display: flex; + justify-content: center; + margin: 0 auto; + margin-top: 2%; + margin-bottom: 2%; + border: 5px solid #D81159; + width: 70%; + padding: 2%; + background-color: white; +} + .highlightedproject { display: flex; @@ -172,6 +219,14 @@ span.projectdescptext { padding: 2%; } +span.contact { + font-family: Agdasima, sans-serif; + font-size: 1.5vw; + text-align: center; + letter-spacing: 1px; + padding: 2%; +} + .footer { display: flex; justify-content: center; @@ -182,6 +237,16 @@ span.projectdescptext { border-top: 2px solid black; } +.footerhome { + display: flex; + justify-content: center; + width: 100%; + background-color: white; + height: 15vh; + margin-top: 2%; + border-top: 2px solid black; +} + .footer button { background-color: #8F2D56; color: white; @@ -197,4 +262,124 @@ span.projectdescptext { background-color: #CE6A85; transition: 2s; color: black; -} \ No newline at end of file +} + +.contactinfo img { + width: 100px; + height: 100px; + display: flex; + flex-direction: column; + margin: 0 auto; + margin-bottom: 25%; + margin-top: 25%; +} + + +@media (max-width: 800px) { +nav { + display: flex; + flex-direction: column; +} +} + +@media (max-width: 800px) { +a { + display: flex; + flex-direction: column; + width: 40%; + justify-content: center; + margin: 0 auto; + text-align: center; + +} +} + +@media (max-width: 800px) { + .projectimages { + display: flex; + flex-flow: row wrap; + } +} + +@media (max-width: 800px) { + .projectimages img { + width: 40%; + height: 80%; + } +} + +@media (max-width: 800px) { + .projectdescriptions { + display: flex; + flex-direction: row; + width: 78%; + height: 50%; + } +} + +@media (max-width: 800px) { + .footerhome { + margin-top: 70%; + } +} + +@media (max-width: 800px) { + a.contact { + margin-left: 5%; + } +} + + +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + } + } + + @media (max-width: 500px) { + a { + display: flex; + flex-direction: column; + width: 40%; + justify-content: center; + margin: 0 auto; + text-align: center; + + } + } + + @media (max-width: 500px) { + .projectimages { + display: flex; + flex-flow: row wrap; + } + } + + @media (max-width: 500px) { + .projectimages img { + width: 40%; + height: 80%; + } + } + + @media (max-width: 500px) { + .projectdescriptions { + display: flex; + flex-direction: row; + width: 78%; + height: 50%; + } + } + + @media (max-width: 500px) { + .footerhome { + margin-top: 70%; + } + } + + @media (max-width: 500px) { + a.contact { + margin-left: 5%; + } + } \ No newline at end of file