diff --git a/ProjectImages/GitHub-Mark.png b/ProjectImages/GitHub-Mark.png new file mode 100644 index 000000000..e28a83730 Binary files /dev/null and b/ProjectImages/GitHub-Mark.png differ diff --git a/ProjectImages/LinkedIn-Logo.png b/ProjectImages/LinkedIn-Logo.png new file mode 100644 index 000000000..ad0b0040c Binary files /dev/null and b/ProjectImages/LinkedIn-Logo.png differ diff --git a/ProjectImages/SPblurryBlep.jpg b/ProjectImages/SPblurryBlep.jpg new file mode 100644 index 000000000..b39b9828d Binary files /dev/null and b/ProjectImages/SPblurryBlep.jpg differ diff --git a/ProjectImages/SPburrito.jpg b/ProjectImages/SPburrito.jpg new file mode 100644 index 000000000..ae2987e7d Binary files /dev/null and b/ProjectImages/SPburrito.jpg differ diff --git a/ProjectImages/SPlayingOnSide.jpg b/ProjectImages/SPlayingOnSide.jpg new file mode 100644 index 000000000..a09a4500c Binary files /dev/null and b/ProjectImages/SPlayingOnSide.jpg differ diff --git a/ProjectImages/SPlookingDownAtCamera.jpg b/ProjectImages/SPlookingDownAtCamera.jpg new file mode 100644 index 000000000..2ac67f6fd Binary files /dev/null and b/ProjectImages/SPlookingDownAtCamera.jpg differ diff --git a/ProjectImages/SPlookingDumb.jpg b/ProjectImages/SPlookingDumb.jpg new file mode 100644 index 000000000..f78210db3 Binary files /dev/null and b/ProjectImages/SPlookingDumb.jpg differ diff --git a/ProjectImages/SProllinInSunBeam.jpg b/ProjectImages/SProllinInSunBeam.jpg new file mode 100644 index 000000000..65bf3a558 Binary files /dev/null and b/ProjectImages/SProllinInSunBeam.jpg differ diff --git a/ProjectImages/SPshrimpin.jpg b/ProjectImages/SPshrimpin.jpg new file mode 100644 index 000000000..edd54efa8 Binary files /dev/null and b/ProjectImages/SPshrimpin.jpg differ diff --git a/ProjectImages/SPshrimpyLaying.jpg b/ProjectImages/SPshrimpyLaying.jpg new file mode 100644 index 000000000..cfbc325d3 Binary files /dev/null and b/ProjectImages/SPshrimpyLaying.jpg differ diff --git a/ProjectImages/SPsideView.jpg b/ProjectImages/SPsideView.jpg new file mode 100644 index 000000000..0d1c0a8df Binary files /dev/null and b/ProjectImages/SPsideView.jpg differ diff --git a/ProjectImages/SPsideView2.jpg b/ProjectImages/SPsideView2.jpg new file mode 100644 index 000000000..22c06e510 Binary files /dev/null and b/ProjectImages/SPsideView2.jpg differ diff --git a/ProjectImages/SPsitting.jpg b/ProjectImages/SPsitting.jpg new file mode 100644 index 000000000..d991fa328 Binary files /dev/null and b/ProjectImages/SPsitting.jpg differ diff --git a/ProjectImages/SPsittingOnDresser.jpg b/ProjectImages/SPsittingOnDresser.jpg new file mode 100644 index 000000000..48452709b Binary files /dev/null and b/ProjectImages/SPsittingOnDresser.jpg differ diff --git a/ProjectImages/SPsittingWeird.jpg b/ProjectImages/SPsittingWeird.jpg new file mode 100644 index 000000000..def64a1f9 Binary files /dev/null and b/ProjectImages/SPsittingWeird.jpg differ diff --git a/ProjectImages/SPsleeping.jpg b/ProjectImages/SPsleeping.jpg new file mode 100644 index 000000000..0fa3c51ad Binary files /dev/null and b/ProjectImages/SPsleeping.jpg differ diff --git a/ProjectImages/selfie1.jpg b/ProjectImages/selfie1.jpg new file mode 100644 index 000000000..883994900 Binary files /dev/null and b/ProjectImages/selfie1.jpg differ diff --git a/about.html b/about.html index df1043036..a19e46aa9 100644 --- a/about.html +++ b/about.html @@ -1,11 +1,46 @@ + + + Document + +

ABOUT

+
+
+
+ Picture of Madysan Miller +
+
+ + + +
+
+

My name is Madysan Miller, I'm 21 and I'm studying Full Stack Web Development at Bloomtech. I have a cat named Sweet Potato and a bearded dragon named Pogo. I like baking, playing video games, music, and drawing. This will be changed when I have proffessional things to put here but this is a decent filler for now.

+
+
+ \ No newline at end of file diff --git a/contact.html b/contact.html index 7c293bd11..f402d9628 100644 --- a/contact.html +++ b/contact.html @@ -1,11 +1,30 @@ + + + Document + +

CONTACT

+
+
+

+

+

+
\ No newline at end of file diff --git a/index.html b/index.html index d01f779ff..3143ee6eb 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,75 @@ + + + Document - + +
+

HOME

+
+
+ Sweet Potato +
+
+
+

Madysan Miller

+ My Projects +
+ +
+

I'm studying Fullstack Web Design at Bloomtech and here are a few of my projects.

+
+ +
+ +
+
+ +

Project 1

+
+
+ +

Project 2

+
+
+ +

Project 3

+
+
+ +

Project 4

+
+
+ +

Project 5

+
+
+ +

Project 6

+
+
+ + \ No newline at end of file diff --git a/projects.html b/projects.html index 266e620b0..0167a070e 100644 --- a/projects.html +++ b/projects.html @@ -1,11 +1,77 @@ + + + Document + +

PROJECTS

+
+
+
+ Sweet Potato +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non laboriosam inventore voluptatem id possimus. Saepe, voluptas dicta! Repudiandae eius similique accusamus eligendi quae praesentium asperiores vitae voluptatem nisi neque!

+ +
+
+
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non laboriosam inventore voluptatem id possimus. Saepe, voluptas dicta! Repudiandae eius similique accusamus eligendi quae praesentium asperiores vitae voluptatem nisi neque!

+ +
+ +
+
+ +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non laboriosam inventore voluptatem id possimus. Saepe, voluptas dicta! Repudiandae eius similique accusamus eligendi quae praesentium asperiores vitae voluptatem nisi neque!

+ +
+
+
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non laboriosam inventore voluptatem id possimus. Saepe, voluptas dicta! Repudiandae eius similique accusamus eligendi quae praesentium asperiores vitae voluptatem nisi neque!

+ +
+ +
+
+ +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non laboriosam inventore voluptatem id possimus. Saepe, voluptas dicta! Repudiandae eius similique accusamus eligendi quae praesentium asperiores vitae voluptatem nisi neque!

+ +
+
+
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis non laboriosam inventore voluptatem id possimus. Saepe, voluptas dicta! Repudiandae eius similique accusamus eligendi quae praesentium asperiores vitae voluptatem nisi neque!

+ +
+ +
+
+ \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..23599044d 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,357 @@ -/* Add CSS styling here */ \ No newline at end of file +/* Add CSS styling here */ + +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; +} + +/* end reset */ + +*{ + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + border: 1px solid grey; +} + + +/* general styles */ +nav { + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: row; + width: 100%; + height: 100px; + font-size: 1.5rem; + font-family: 'Playfair Display'; + background-color: #188ac7; + color:white; + padding: 0px 15px 0px 15px; + margin-bottom: 30px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} +.menu { + padding: 2% 0; + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: row; + padding: 1% 0; + width: 100%; + border-radius: 10px; + +} +.menu a{ + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: row; + padding: 2% 0; + width: 100%; + text-align: center; + border-radius: 10px; + color: black; + text-decoration: none; + font-size: 100%; + + /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 4px 20px 0 rgba(0, 0, 0, 0.19); */ +} + + +.HomeTitle{ + font-size: 40px; + display: flex; + justify-content:space-between; + align-items: left; + flex-direction: column; + +} + +.photo1 { + display: inline-block;; + justify-content: space-between; + flex-flow: row wrap; + padding: 0%; + margin-right: 0%; + width: auto; + height: auto; + max-width: 20%; + +} + +.HomeHeader { + font-size: 40px; + display: inline-block; + vertical-align: top; + justify-content:space-between; + align-items: center; + flex-direction: column; + padding: 0% 0; + width: 70%; + +} + +.HomeHeader .button{ + background-color: #188ac7; + border: none; + color: white; + padding: 15px 92px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + border-radius: 10px; + +} + +.HomeP{ + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: column; + padding: 2%; + font-size: 30px; +} + + + +.gallery { + display: flex; + justify-content: space-between; + flex-flow: row wrap; + padding: 0 30px; +} + +.card { + display: flex; + flex-direction: column; + width: 30%; + text-align: center; + margin: 20px 0px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + overflow: hidden; + border-radius: 10px; +} + +.card:hover { + box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.4), 0 10px 24px 0 rgba(0, 0, 0, 0.23); +} + + + +.card img { + width: 100%; + height: 90%; + max-height: 364px; + object-fit: cover; + animation-duration: 4s; +} + +.card h2 { + padding: 10px; +} + + +.About{ + font-size: 40px; + font-family: 'Playfair Display' ; + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: column; + padding: 2% 0; +} + +.project { + display: flex; + padding: 15px; + margin: 30px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + border-radius: 10px; +} + +.project .photo { + width: 40%; + height: 90%; + max-height: 364px; + object-fit: cover; + border-radius: 10px; +} + +.project:hover { + box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.4), 0 10px 24px 0 rgba(0, 0, 0, 0.23); +} + +.description { + padding: 20px 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + color: #188ac7; + font-family: 'Playfair Display'; + font-size: 1.5rem; +} + +.description button { + width: 30%; + background-color: inherit; + border-color: #188ac7; + color: #188ac7 ; + text-decoration: none; + padding: 5px 20px 5px 20px; + font-family: 'Playfair Display'; + font-size: 1rem; + border-radius: 5px; + cursor: pointer; +} + +.description button:hover { + background-color:#188ac7; + color: white; +} + +.About{ + display: flex; + padding: 30px; + width: 90%; + margin: auto; + margin-top: 60px; + margin-bottom: 60px; + /* color: #188ac7; */ + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + flex-grow: 2; +} + +.About .photo{ + height: 350px; + border-radius: 10px; +} + +.About a{ + display: flex; + justify-content: center; + align-items: center; + width: 100PX; + height: 100px; + margin-top: 25PX; + border-radius: 10px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.About a:hover { + background-color:#188ac7; +} + +.About .social { + width: 80px; +} + +.About a:hover .social { + filter: grayscale(100) contrast(100) invert(100); +} + +.About .right { + padding-left: 30px; +} + +.right { + display: flex; + flex-direction: column; + border-left: 2px solid lightgray; + margin-left: 30px; +} + +.links { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 80px; + font-size: 1.5rem; + font-family: 'Playfair Display'; + background-color: #188ac7; + color:rgb(173, 182, 196); + padding: 15px 15px 15px 15px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +footer .button { + background-color: rgb(173, 182, 196); + color: #188ac7; + text-decoration: none; + text-align: center; + padding: 5px 10px 5px 10px; + font-family: 'Playfair Display'; + border-radius: 5px; +} + +footer .button:hover { + color: white; +} + +footer .footer-links { + margin-top: 10px; + font-size: 1rem; +} + +footer .footer-links a { + padding: 0px 10px; + color: white; + text-decoration: none; +} + +footer .footer-links a:hover { + color: white; +} + +footer .footer-links a:not(:last-child){ + border-right: 2px solid rgb(173, 182, 196); +} diff --git a/style/responsive.css b/style/responsive.css new file mode 100644 index 000000000..acbedc705 --- /dev/null +++ b/style/responsive.css @@ -0,0 +1,176 @@ + +@media(max-width: 800px) { + nav { + display: flex; + flex-direction: row; + justify-content: center; + background-color: #188ac7; + font-size: 30px; + padding: 0%; + width: 100%; + margin-bottom: 0%; + + } + .menu { + padding: 2% 0; + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: row; + padding: 1% 0; + width: 80%; + border-radius: 10px; + + } + .menu a{ + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: row; + padding: 2% 0; + width: 60%; + text-align: center; + border-radius: 10px; + color: black; + text-decoration: none; + font-size: 100%; + /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 4px 20px 0 rgba(0, 0, 0, 0.19); */ + } + + .HomeTitle{ + font-size: 40px; + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: column; + padding: 2%; + + } + + .photo1 { + display: inline-block; + justify-content: space-between; + flex-flow: row wrap; + padding: 0%; + margin-right: 0%; + width: auto; + height: auto; + max-width: 30%; + + } + + .HomeHeader { + font-size: 40px; + display: inline-block; + vertical-align: top; + padding: 5% 0; + width: 65%; + text-align: center; + + } + + .HomeHeader .button{ + background-color: #188ac7; + border: none; + color: white; + padding: 15px 92px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + border-radius: 10px; + + } + + .HomeP{ + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: column; + padding: 2%; + font-size: 30px; + } + +} + +@media(max-width: 500px) { + + + nav { + display: flex; + flex-direction: column; + justify-content: center; + background-color: #188ac7; + font-size: 30px; + padding: 20%; + width: 100%; + margin-bottom: 0%; + } + + .menu { + display: flex; + flex-direction: column; + align-items: center; + + } + + .menu a{ + display: flex; + flex-direction: column; + align-items: center; + border-color: black; +} + +.photo1{ + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: column; + max-width: fit-content; + margin: 1%; +} + +.HomeTitle{ + font-size: 40px; + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: column; + padding: 2%; +} + +.HomeHeader{ + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: column; + width: 100%; +} +.HomeHeader .button{ + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: column; + font-size: 30px; +} + +.HomeP{ + display: flex; + justify-content:space-between; + align-items: center; + flex-direction: column; + font-size: 22px; +} + +.gallery { +display: flex; +flex-wrap: wrap; +justify-content: space-around; +} + +.gallery .card{ + width: 40%; + margin: 4%; +} + +}