diff --git a/.DS_Store b/.DS_Store index d14e830..c6a4b53 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/Flexbox Micro-layouts 2/Flexbox Micro-layouts and Patterns.pdf b/Flexbox Micro-layouts 2/Flexbox Micro-layouts and Patterns.pdf new file mode 100644 index 0000000..4e5e68f Binary files /dev/null and b/Flexbox Micro-layouts 2/Flexbox Micro-layouts and Patterns.pdf differ diff --git a/Flexbox Micro-layouts 2/inbox-solid.svg b/Flexbox Micro-layouts 2/inbox-solid.svg new file mode 100644 index 0000000..88a6908 --- /dev/null +++ b/Flexbox Micro-layouts 2/inbox-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Flexbox Micro-layouts 2/smile-regular.svg b/Flexbox Micro-layouts 2/smile-regular.svg new file mode 100644 index 0000000..4ca93c8 --- /dev/null +++ b/Flexbox Micro-layouts 2/smile-regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Screen Shot 2020-02-10 at 5.14.03 PM.png b/Screen Shot 2020-02-10 at 5.14.03 PM.png new file mode 100644 index 0000000..9935c3a Binary files /dev/null and b/Screen Shot 2020-02-10 at 5.14.03 PM.png differ diff --git a/css/basic-site.css b/css/basic-site.css index 400f289..6f2df15 100644 --- a/css/basic-site.css +++ b/css/basic-site.css @@ -9,28 +9,59 @@ html, body { @media (min-width: 320px){ div .text{ - top: 70px; + top: 50px; font-size: 50px; } + .me img{ + width: 300px; + } + p{ + width: 400px; + } } @media (min-width: 480px){ div .text{ - top: 60px; + top: 50px; font-size: 70px; } + .me img{ + width: 350px; + } } @media (min-width: 620px){ div .text{ top: 50px; font-size: 80px; } + .me img{ + width: 360px; + } + } @media (min-width: 768px){ div .text{ top: 50px; font-size: 95px; } + .me img{ + width: 370px; + + } + p{ + width: 500px; + } +} +@media (min-width: 890px){ + .me img{ + width: 380px; + + } +} +@media (min-width: 900px){ + + + } img{ display: block; @@ -66,24 +97,27 @@ h2{ } .me img{ - width: 300px; + min-width: 300px; + max-width: 400px; height: auto; border-radius: 50%; - margin-top: 15px; - padding: 5px; + margin-top: 0; + padding: 25px 20px; display: block; margin-left: auto; margin-right: auto; + } p{ + margin-top: 0; font-family: 'Open Sans', sans-serif; font-weight: bold; max-width: 500px; - min-width: 350px; - width: 50%; + min-width: 300px; text-indent: 5%; + line-height: normal; } .one{ display: flex; @@ -103,21 +137,19 @@ h3{ justify-content: center; } - +.three{ + display: flex; + justify-content: center; +} ul li{ font-family: 'Open Sans', sans-serif; font-weight: bold; font-size: 19px; - width: 50%; + } hr{ - width: 50%; -} -.three{ - display: flex; - justify-content: center; - + width: 90%; } a:visited{ color: black; @@ -133,7 +165,6 @@ a{ text-decoration: none; } a:before{ - content: ""; position: absolute; width: 100%; height: 2px; diff --git a/css/responsive.css b/css/responsive.css new file mode 100644 index 0000000..1f54090 --- /dev/null +++ b/css/responsive.css @@ -0,0 +1,510 @@ +body, html { + margin:0; + height: 100%; + + } + #bg { + height: 100%; + background-image: url("../img/background.jpg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + *, + *::before, + *::after { + box-sizing: border-box; + -webkit-box-sizing: border-box; +} + body { + font-family: sans-serif; + + } + /* NAV BAR */ +.container{ + height: 90px; + background-color: black; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + justify-content: right; + overflow: hidden; +} + +.container .logo { + max-width: 250px; + padding: 0 10px; + overflow: hidden; + } + + .container .logo a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 60px; + } + + .container .logo a img { + max-width: 100%; + max-height: 90px; + + } + + .container .navbar { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + padding: 0 10px; + justify-content: flex-end; + + + } + + .container .navbar ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; + } + + .container .navbar ul li a { + text-decoration: none; + color: white; + font-size: 16px; + display: block; + height: 90px; + line-height: 90px; + text-align: center; + cursor: pointer; + padding: 0 17px; + } + + .container .navbar ul li a:hover { + color: #ffffff; + background-color: #27272b; + } + + .container .navbar ul .close { + display: none; + text-align: right; + padding: 10px; + } + + .container .navbar ul .close span { + font-size: 40px; + display: inline-block; + border: 1px solid #cccccc; + padding: 0 10px; + cursor: pointer; + } + + .container .navbar .icon-bar { + padding: 18px 8px; + width: 50px; + height: 60px; + display: none; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + cursor: pointer; + } + + .container .navbar .icon-bar i { + background-color: #ffffff; + height: 2px; + } + + @media only screen and (max-width: 650px) { + .container { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } + + .container .logo { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + margin-left: 10vw; + } + + .container .navbar { + -webkit-box-flex: 0; + -ms-flex: 0; + flex: 0; + } + + .container .navbar ul { + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + position: fixed; + left: 100%; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + background: #ffffff; + width: 100%; + height: 100%; + overflow: auto; + -webkit-transition: left .3s; + -o-transition: left .3s; + transition: left .3s; + } + + .container .navbar ul li a { + padding: 10px; + font-size: 20px; + height: auto; + line-height: normal; + color: black; + } + + .container .navbar ul .close { + display: block; + } + + .container .navbar .icon-bar { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + + .container .navbar ._Menus-show { + left: 0; + } + } + /* END OF NAV BAR */ + + .centered{ + width: 80%; + margin: 0 auto; + display: flex; + + + } + .column-one{ + justify-content: flex-start; + width: 80%; + + } + .column-two{ + margin-top:20vh; + + + + + + } + + .big-logo img{ + margin-top: 15vh; + + } + + h2{ + color: whitesmoke; + font-family: 'Raleway', sans-serif; + font-size: 35px; + max-width: 550px; + min-width: 400px; + + } + hr{ + color: white; + width: 70px; + float: left; + } + p{ + margin-top: 30px; + color: whitesmoke; + font-family: 'Raleway', sans-serif; + font-size: 17px; + font-weight: lighter; + line-height: 1.6; + max-width: 550px; + min-width: 250px; + } + .btn{ + margin: 20px 0px; + background-color: Transparent; + color: white; + font-weight: bolder; + font-family: 'Open Sans'; + border: solid white 2px; + font-size: 15px; + color: white; + padding: 10px 30px; + + } + a{ + color: white; + text-decoration: none; + } +button a:hover{ + text-decoration: underline; +} + form{ + background-color: white; + width: 360px; + height: auto; + color: black; + + } + #form-container{ + text-align: center; + } + + #form-container h3{ + background-color: white; + text-align: center; + background-color: #f5f5f5; + margin: 0; + padding: 20px ; + + } + #form-container input{ + width: 70%; + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid #d6d6d6; + font-size: 15px; + margin-top: 20px; + margin-bottom: 30px; + padding: 10px; + overflow: visible; + + + + } + #form-container button{ + width: 100%; + background-color: orange; + color: white; + font-family: 'Open Sans'; + font-weight: bold; + font-size: 16px; + border: none; + padding: 15px 0px; + } + + +/* FOOTERS (WHITE AND BLACK) */ +#footer-container{ +display: flex; +flex-direction: column; +height: 25%; +width: 100%; +} +/*white footer*/ +#footer-one{ + background-color: white; + height: 20vh; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; +} +} + +.white{ + line-height: normal; + +} +.big-logos img{ + width: 85%; +} +.white h5{ + color: black; + font-family: 'Open Sans'; + font-size: 1em; + margin-bottom: 0px; + margin-left: 10%; + margin-top: 20px; +} +.white p{ + color: black; + font-family: 'Open Sans'; + font-size: 0.8em; + margin-top: 5px; + margin-left: 10%; + margin-bottom: 20px; +} + + +/*black footer*/ +#footer-two{ + background-color: black; + height: 15vh; + width: 100%; + display: flex; + flex-direction: column; + +} +.black h6{ + font-size: 0.7em; + text-align: center; + font-weight: lighter; + font-family: 'Open Sans'; + color: white; +} + + + .small-logos{ + text-align: center; + margin-top: 25px; +} + + + + +/* MEDIA QUERRIES*/ + @media (min-width: 320px){ + #bg { + height: 190%; + } + .container .logo a img { + max-width: 100%; + max-height: 90px; + position: relative; + + } + .centered{ + flex-direction: column; + } + .column-two{ + margin-top: 5vh; + + } + #footer-two{ + height: 100%; + +} +@media (min-width: 480px){ + #bg { + height: 175%; + } +} +@media (min-width: 590px){ + #bg { + height: 170%; + } + .column-one h2{ + width: 600px; + } + .column-one p{ + width: 600px; + } +} + @media (min-width: 650px){ + #bg { + height: 165%; + } + .container .logo a img { + max-width: 100%; + max-height: 90px; + margin-left: 9vw; + } + .container .navbar { + margin-right: 5vw; + } + .column-two{ + margin-top: 3vh; + + } + .column-one h2{ + width: 600px; + } + .column-one p{ + width: 600px; + } + +} + +@media (min-width: 950px){ + + #bg { + height: 130%; + } + .centered{ + flex-direction: row; + } + .column-two{ + margin-top: 20vh; + } + .column-one h2{ + width: 400px; + } + .column-one p{ + width: 350px; + } + +} + +@media (min-width: 1000px){ + #bg { + height: 120%; + } + + .column-one h2{ + width: 400px; + } + .column-one p{ + width: 400px; + } +} +@media (min-width: 1100px){ + #bg { + height: 105%; + } + .column-one h2{ + width: 500px; + } + .column-one p{ + width: 500px; + } +} + +@media (min-width: 1200px){ + #bg { + height: 100%; + } + + .column-two{ + display: flex; + + } + .column-one h2{ + width: 600px; + } + .column-one p{ + width: 600px; + } +} + + + diff --git a/img/.DS_Store b/img/.DS_Store index 08b38b9..d03d390 100644 Binary files a/img/.DS_Store and b/img/.DS_Store differ diff --git a/img/UvafGZ.gif b/img/UvafGZ.gif deleted file mode 100644 index 1823da5..0000000 Binary files a/img/UvafGZ.gif and /dev/null differ diff --git a/img/background.jpg b/img/background.jpg new file mode 100644 index 0000000..add272c Binary files /dev/null and b/img/background.jpg differ diff --git a/img/big-icons.jpg b/img/big-icons.jpg new file mode 100644 index 0000000..b0fe00d Binary files /dev/null and b/img/big-icons.jpg differ diff --git a/img/big-logo.jpg b/img/big-logo.jpg new file mode 100644 index 0000000..f612856 Binary files /dev/null and b/img/big-logo.jpg differ diff --git a/img/footer-icons.jpg b/img/footer-icons.jpg new file mode 100644 index 0000000..5e7df20 Binary files /dev/null and b/img/footer-icons.jpg differ diff --git a/img/header.jpg b/img/header.jpg deleted file mode 100644 index cecda6f..0000000 Binary files a/img/header.jpg and /dev/null differ diff --git a/img/logo.jpg b/img/logo.jpg new file mode 100644 index 0000000..37af090 Binary files /dev/null and b/img/logo.jpg differ diff --git a/index.html b/index.html index 8fd7bbd..74a9395 100755 --- a/index.html +++ b/index.html @@ -18,11 +18,12 @@ +
- picture of author + picture of author
- +

I’m currently an undergraduate enrolled in the Digital Media and Design program at the University of Connecticut. I was born and raised in Meriden, Connecticut. I have always been an artistic child growing up and throughout high school, I was eager to take every possible art and digital technology course offered to me including digital imaging, web design, video production, ceramics and advanced photography. I would describe my personal style as vibrant, bold and festive. My artistic statement for most of my work pays attention to detail as I am especially inspired by abstract art.

diff --git a/responsive.html b/responsive.html new file mode 100644 index 0000000..73db932 --- /dev/null +++ b/responsive.html @@ -0,0 +1,103 @@ + + + + + + Responsive Practice + + + +
+
+ +
+ +
+ + + +
+ + +
+
+
+
+ + +
+ +

MODERN AXURE TEMPLATE
+ FOR BEAUTIFUL PROTOTYPES

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean + euismod bibendum laoreet. Proin gravida dolor sit amet lacus + accumsan et viverra justo commodo.

+ +
+ +
+
+
+

Try Your FREE Trial Today

+ + + + + +
+
+
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/week-3/.DS_Store b/week-3/.DS_Store new file mode 100644 index 0000000..49408dc Binary files /dev/null and b/week-3/.DS_Store differ diff --git a/week-3/CSS Showcase Proposal (1).pdf b/week-3/CSS Showcase Proposal (1).pdf new file mode 100644 index 0000000..b32764d Binary files /dev/null and b/week-3/CSS Showcase Proposal (1).pdf differ diff --git a/week-4/.DS_Store b/week-4/.DS_Store new file mode 100644 index 0000000..d93bf0a Binary files /dev/null and b/week-4/.DS_Store differ diff --git a/week-4/flexbox defense completion.png b/week-4/flexbox defense completion.png new file mode 100644 index 0000000..405fec5 Binary files /dev/null and b/week-4/flexbox defense completion.png differ