From 65c890ac6afc346d1af2301dc28754e6d53ed27e Mon Sep 17 00:00:00 2001 From: Matt Wallace Date: Sun, 16 Apr 2023 11:35:09 -0400 Subject: [PATCH 1/2] website complete --- index.html | 66 ++++++++++++++++++++++++++++++++++++++++++++++++- style/index.css | 53 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 117 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d01f779ff..add09a3ee 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,72 @@ Document + - +
+

Matt Wallace

+ +
+ +
+ +
+

Matt Wallace

+ +

+ This is sample text to be replaced later +

+
+
+
+
+
+ +

Portfolio Item

+
+
+ +

Portfolio Item

+
+
+ +

Portfolio Item

+
+
+ +

Portfolio Item

+
+
+
+
+ +

Portfolio Item

+
+
+ +

Portfolio Item

+
+
+ +

Portfolio Item

+
+
+ +

Portfolio Item

+
+
+
+ + + \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..2446f33f9 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,52 @@ -/* Add CSS styling here */ \ No newline at end of file +header{ + background-color: lightgray; + padding: 20px; + margin-bottom: 50px; +} + +footer{ + background-color: lightgray; + text-align: center; + padding: 20px; +} + +.topsection{ + display: flex; + flex-direction: row; + justify-content: center; +} + +.about{ + padding: 20px; + width: 50%; +} +.row{ + display: flex; + justify-content: space-evenly; + flex-direction: row; + padding: 20px; +} +.portfolio-element{ + text-align: center; +} +button{ + background-color: white; + color:black; + border:black solid 1px; + padding: 5px 10px; + +} + +button:hover{ + background-color: black; + color:white; + border:white solid 1px; +} + +button a{ + text-decoration: none; + color: inherit; + +} + + From 5683f6f43aec23766d1a7c0d2c2947f3188d25a0 Mon Sep 17 00:00:00 2001 From: Matt Wallace Date: Sun, 16 Apr 2023 21:53:42 -0400 Subject: [PATCH 2/2] Completed Module 4 --- style/index.css | 49 +++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 45 insertions(+), 4 deletions(-) diff --git a/style/index.css b/style/index.css index 2446f33f9..6430c0336 100644 --- a/style/index.css +++ b/style/index.css @@ -12,19 +12,19 @@ footer{ .topsection{ display: flex; - flex-direction: row; justify-content: center; } .about{ - padding: 20px; width: 50%; + text-align: center; + padding: 25px; } .row{ display: flex; justify-content: space-evenly; flex-direction: row; - padding: 20px; + padding: 25px; } .portfolio-element{ text-align: center; @@ -33,7 +33,7 @@ button{ background-color: white; color:black; border:black solid 1px; - padding: 5px 10px; + padding: 10px 15px; } @@ -49,4 +49,45 @@ button a{ } +@media(max-width: 800px){ +.row div{ + width: 20%; +} +} +@media(max-width: 500px){ + header{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + nav{ + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + button{ + width: 40%; + margin: 1% 0; + } + .topsection{ + display: flex; + flex-direction: column; + align-items: center; + } + .topsection div{ + width: 90%; + } + .row{ + display: flex; + flex-wrap: wrap; + justify-content: space-around; + padding: 25px; + } + .row div{ + width: 40%; + margin: 4% 0; + } +}