diff --git a/index.html b/index.html index d01f779ff..da5dff849 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,94 @@ + Document +
+
+

Scott Allen

+
+ +
+ +
+
+ main image +
+
+

Scott Allen

+ +

I have a passion for learning new things and have recently begun learning how to code. I am currently a student at Lambda School where I am learning how to be a web developer. I love the creativity of being a developer and the ability to make something from the ground up. I build projects because it's something that I love to do.

+
+
+ +
+
+ stock image +
+

Text

+
+
+
+ stock image +
+

Text

+
+
+
+ stock image +
+

Text

+
+
+
+ stock image +
+

Text

+
+
+
+ stock image +
+

Text

+
+
+
+ stock image +
+

Text

+
+
+
+ stock image +
+

Text

+
+
+
+ stock image +
+

Text

+
+
+
+ + + + \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..824c46780 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,216 @@ -/* Add CSS styling here */ \ No newline at end of file +/* Add CSS styling here */ +@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=PT+Serif&display=swap'); + +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; +} + +*{ + box-sizing:border-box; + border:1px solid grey; + max-width:100%; +} + +/*General Styles*/ +html{ + font-size:62.5%; +} + +body{ + font-size:1.6rem; + line-height:1.5; + font-family: 'PT Serif', serif; +} + +h1{ + font-family: 'Bebas Neue', cursive; + font-size:6rem; + margin-left:1%; +} + +h2{ + font-family: 'Bebas Neue', cursive; + font-size:4rem; +} + + +section{ + padding:2% 0; +} + +/*Styles for the header*/ +header{ + background-color:gainsboro; +} + +nav{ + display:flex; + margin-left:2.5%; +} + +nav a{ + display:inline-block; + text-decoration:none; + width:7.5%; + background-color:white; + border:2px blue; + text-align:center; + color:black; + margin-bottom:2%; + padding:.3% 0; +} + +nav a:hover{ + color:white; + background-color:black; +} + + +/*About section styles*/ +#about{ + display:flex; +} + +.main-image{ + margin:0 1%; + width:60%; +} + +.main-image img{ + width:100%; +} + +.about-text{ + display:flex; + justify-content:flex-end; + flex-direction:column; + width:40%; +} + +.about-text p{ + padding:3% 0; +} + +.button-projects{ + width:25%; + padding:1% 0; + font-size:1.6rem; +} + +/*Images section styling*/ + +#projects{ + display:flex; + flex-wrap:wrap; +} + +#projects div{ + width:25%; + margin-bottom:4%; +} + +#projects div img{ + padding:0 5%; + width:75%; +} + +.image-text{ + display:flex; + flex-direction:column; + align-items:center; +} + +.image-text div{ + padding:2% 0 0 7.5%; +} + +/*footer styling*/ + +footer{ + background-color:gainsboro; + padding:5%; + text-align:center; +} + +footer div{ + text-align:center; + font-size:1.8rem; +} + +footer button{ + font-size:1.6rem; +} + + +/*Styling for 800 px*/ +@media (max-width:800px){ + nav a{ + width:15%; + } + + .button-projects{ + width:50%; + } + + .about-text{ + margin-right:1%; + } +} + +/*Styling for 500 px*/ +@media (max-width:500px){ + header{ + background-color:white; + } + + h1{ + text-align:center; + } + + nav{ + flex-direction:column; + align-items:center; + padding:.5%; + border:1px black; + } + + #about{ + flex-wrap:wrap; + justify-content:center; + } + + .main-image{ + width:85%; + } + + .button-projects{ + width:50%; + background-color:white; + } + + .about-text{ + width:70%; + align-items:center; + } + + #projects div{ + width:50%; + } +}