From ea637ec1c705bc3f787362382dbfcc7888d6759b Mon Sep 17 00:00:00 2001 From: jjiarongcao1 Date: Sun, 17 May 2020 23:55:20 -0400 Subject: [PATCH 1/3] Sprint-Challenge-User-Interface retro, still working on tablet part. --- about.html | 12 +++++ index.html | 33 +++++++++++- style/index.css | 131 ++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 169 insertions(+), 7 deletions(-) create mode 100644 about.html diff --git a/about.html b/about.html new file mode 100644 index 0000000000..e18f483919 --- /dev/null +++ b/about.html @@ -0,0 +1,12 @@ + + + + + + Document + + +

This Is the About Page!

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Id sequi et, quis tenetur dignissimos possimus quam provident temporibus culpa magni perspiciatis qui voluptate ipsam laborum nostrum. Vero corporis esse repellat!

+ + \ No newline at end of file diff --git a/index.html b/index.html index d32d8ad25c..8a82bfb8ff 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,25 @@ +
+
+ + +
+ +
+ +
+
+
@@ -30,7 +49,7 @@

The Past

Why Did It Have To Be Boxes...

-
Box 1
+ +
Box 1
+
Box 2
+
Box 3
+
Box 4
+
Box 5
+
Box 6
+
Box 7
+
Box 8
+
Box 9
+
Box 10
diff --git a/style/index.css b/style/index.css index ae29d6ceee..ea9d458ed4 100644 --- a/style/index.css +++ b/style/index.css @@ -49,6 +49,10 @@ table { * { box-sizing: border-box; + +} +html { + margin: 0 15%; } html, body { @@ -56,19 +60,46 @@ html, body { font-family: 'Roboto', sans-serif; } + h1, h2, h3, h4, h5 { font-size: 18px; margin-bottom: 15px; font-family: 'Rubik', sans-serif; + font-size: 1.3rem; + margin: 20px 0; } p { line-height: 1.4; } -.container { - width: 800px; - margin: 0 auto; +header .navigation { + display: flex; + height: 120px; + align-items: center; +} + +header .navigation .bar { + flex-grow: 1; + display: flex; + justify-content: space-around; + margin-top: 20px; + margin-left: 10px; +} + +header .navigation .bar a { + text-decoration: none; + color: black; +} + +header .navigation .bar li { + display: flex; + align-items: center; +} + +header .image2 img { + width: 100%; + height: auto; } .top-content { @@ -82,7 +113,8 @@ p { .top-content .text-container { width: 48%; padding: 0 1%; - padding-bottom: 20px; + padding-bottom: 20px; + text-align: left; } .middle-content { @@ -112,6 +144,38 @@ p { justify-content: center; } +.middle-content #box1{ + background-color: #358080; +} +.middle-content #box2{ + background-color: #FCD84A; +} +.middle-content #box3{ + background-color: #5F9EA0; +} +.middle-content #box4{ + background-color: #F17D4D; +} +.middle-content #box5{ + background-color: #DD353D; +} +.middle-content #box6{ + background-color: #3F8B24; +} +.middle-content #box7{ + background-color: #9A41CC; +} +.middle-content #box8{ + background-color: #EE66B3; +} +.middle-content #box9{ + background-color: #4D2582; +} +.middle-content #box10{ + background-color: #2A8FF7; +} + + .bottom-content { display: flex; margin: 0 2% 20px; @@ -143,4 +207,61 @@ footer nav { footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} + +@media(max-width: 500px) { + header .navigation { + margin: 40px 0; + flex-direction: column; + height: auto; + } + + header .navigation .bar { + flex-direction: column; + font-size: 1.8rem; + font-family: 'Light 300', 'Titillium Web'; + margin-top: 5px; + margin-left: 20px; + align-items: center; + margin: 10px 0; + margin-top: 30px; + } + + header .navigation .bar li { + margin: 5px; + } + + .top-content + + .middle-content .boxes { + margin-left: 120px; + margin-right: 120px; + } + + .middle-content .boxes .box { + width: 45%; + height: 100px; + margin: 10px 5%; + color: white; + display: flex; + + + align-items: center; + justify-content: center; + } + + .bottom-content{ + flex-direction: center; + flex-flow:row wrap; + max-width: 40%; + } + + footer { + display: flex; + flex-direction: center; + } + + footer nav{ + display: flex; + flex-direction: column; + } From 6caa5f10f056d7642271b81125500aa62b6ef4d2 Mon Sep 17 00:00:00 2001 From: jjiarongcao1 Date: Mon, 18 May 2020 18:11:45 -0400 Subject: [PATCH 2/3] Sprint Challege for user interface, finished tablet part, also modified some other css codes as well. --- index.html | 2 +- style/index.css | 107 ++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 99 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 8a82bfb8ff..c96ad368f7 100644 --- a/index.html +++ b/index.html @@ -93,7 +93,7 @@

Moon