diff --git a/about.html b/about.html index df1043036..10f841c61 100644 --- a/about.html +++ b/about.html @@ -3,9 +3,33 @@ - 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 7c293bd11..39123f677 100644 --- a/contact.html +++ b/contact.html @@ -2,10 +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 d01f779ff..d6cd6b124 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,57 @@ - Document + + + + + + + + + Heidi's Site +
+

Heidi Gunter

+
+ + + + +

INTRODUCING MY SITE

+ +
+ + 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! + +
+ +

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." +
+
+ +
+ 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 440e53514..a0a08f7ac 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,385 @@ -/* 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%; + 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 { + background-color: #CE6A85; + transition: 2s; + color: black; +} + +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; +} + +.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; + 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 { + display: flex; + margin-top: 1%; + margin-bottom: 5%; + background-color: white; + border: 5px solid black; + height: 56vh; +} + +span.projectdescptext { + font-family: Agdasima, sans-serif; + font-size: 1.5vw; + text-align: justify; + letter-spacing: 1px; + 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; + width: 100%; + background-color: white; + height: 15vh; + margin-top: 2%; + 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; + width: 10%; + height: 50%; + border: 2px solid black; + font-family: Gudea, sans-serif; + letter-spacing: 4px; + margin-top: 2%; +} + +.footer button:hover { + background-color: #CE6A85; + transition: 2s; + color: black; +} + +.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