From 86e60f6c88b71d84300b70ec38b65595c513b7aa Mon Sep 17 00:00:00 2001 From: Easton Date: Thu, 30 Mar 2023 14:25:19 -0600 Subject: [PATCH 1/5] Finished setting up HTML and the CSS reset getting ready to practice styling and flexbox --- index.html | 61 ++++++++++++++++++++++++++++++++++++++++++++++++- style/index.css | 49 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 108 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d01f779ff..f7b909092 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,67 @@ Document + + - +
+

Easton Fritsch

+ +
+
+ illustration of traveler from destiny 2 +
+

Easton Fritsch

+ +

I really like the game Destiny 2. It has been my passion for some time now. I have a total of 480 hrs logged on Steam. If you need to know anything about the various lore or characters in Destiny 2, you've come to the right place!

+
+
+
+
+ illustration of Zavala +

Commander Zavala

+
+
+ illustration of Cayde-6 +

Cayde-6

+
+
+ illustration of Ikora +

Ikora

+
+
+ illustration of destiny 2 ghost +

Your Ghost

+
+
+ illustration of Mithrax +

Mithrax

+
+
+ illustration of drifter +

Drifter

+
+
+ illustration of ADA-1 +

ADA-1

+
+
+ illustration of Saint-14 +

Saint-14

+
+
+
+ +
+ \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..3a3d775f4 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,48 @@ -/* 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; +} + +*{ + border:2px solid gray; +} \ No newline at end of file From 6a66a851fe19397c6e29542e2cdcb14f2336455a Mon Sep 17 00:00:00 2001 From: Easton Date: Thu, 30 Mar 2023 15:41:27 -0600 Subject: [PATCH 2/5] added more CSS to style and some adjustments to HTML --- index.html | 14 +++++++------- style/index.css | 26 +++++++++++++++++++++++++- 2 files changed, 32 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index f7b909092..5a637637b 100644 --- a/index.html +++ b/index.html @@ -4,26 +4,26 @@ Document - +

Easton Fritsch

illustration of traveler from destiny 2 -
+

Easton Fritsch

I really like the game Destiny 2. It has been my passion for some time now. I have a total of 480 hrs logged on Steam. If you need to know anything about the various lore or characters in Destiny 2, you've come to the right place!

-
+
diff --git a/style/index.css b/style/index.css index 3a3d775f4..1d76142e9 100644 --- a/style/index.css +++ b/style/index.css @@ -44,5 +44,29 @@ table { } *{ - border:2px solid gray; + font-size:62.5%; + border:1px solid gray; +} + +header{ + background-color: black; + +} + +header h1{ + font-size:3rem; + font-family: 'Anton', sans-serif; + color: white; + margin:1%; + text-align: left; +} + +nav { + font-size:1.5rem; + text-align: center; + +} + +nav .home { + } \ No newline at end of file From 15bafebeee84331597f6f1deefc33b3d65ece177 Mon Sep 17 00:00:00 2001 From: Easton Date: Thu, 30 Mar 2023 16:25:46 -0600 Subject: [PATCH 3/5] Added more CSS for the header and main info section as well as changed HTML accordingly --- index.html | 6 ++-- style/index.css | 84 +++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 74 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 5a637637b..204ae8831 100644 --- a/index.html +++ b/index.html @@ -17,13 +17,13 @@

Easton Fritsch

Collections -
+
illustration of traveler from destiny 2 - +

Easton Fritsch

I really like the game Destiny 2. It has been my passion for some time now. I have a total of 480 hrs logged on Steam. If you need to know anything about the various lore or characters in Destiny 2, you've come to the right place!

- +
diff --git a/style/index.css b/style/index.css index 1d76142e9..64a49daed 100644 --- a/style/index.css +++ b/style/index.css @@ -44,29 +44,87 @@ table { } *{ - font-size:62.5%; + box-sizing: border-box; + max-width: 100%; border:1px solid gray; } -header{ - background-color: black; - +/*Genral Styles*/ + +html{ + font-size:62.5%; +} + +body { + font-size: 1.6rem; + line-height: 1.5; + font-family: 'Delicious Handrawn', cursive; } -header h1{ - font-size:3rem; +h1{ + font-size:5rem; font-family: 'Anton', sans-serif; - color: white; - margin:1%; - text-align: left; } -nav { - font-size:1.5rem; +.text{ + font-size:2rem; +} + +section{ + padding:4% 0; + width: 96%; + margin:0 2%; +} + +/*Header Styles*/ + +header{ + background-color: gray; +} + +nav a{ + display: flexbox; + padding:0 1%; text-align: center; + border-radius:10px; + font-size:2.5rem; + color: black; + text-decoration: none; + border:1px solid black; + background-color: white; } -nav .home { - +.home{ + background-color:black; + color: white; +} + +/*main info section*/ + +.main-info{ + position: relative; +} + +.text, image{ + display: inline-block; +} + +.traveler{ + width:30%; + border-radius:20%; +} + +.text{ + width:55%; + margin-left:5%; + text-align:center; + line-height:2; + position:absolute; + top:120px; +} + +section h2{ + font-size:6rem ; + font-family: 'Anton', sans-serif; } \ No newline at end of file From 79f59f089fba96398072da259fcf63af31186ce4 Mon Sep 17 00:00:00 2001 From: Easton Date: Fri, 31 Mar 2023 14:55:40 -0600 Subject: [PATCH 4/5] finished implimeting flexbox in CSS and made final changes to match up closley to option 1 --- index.html | 15 +++++----- style/index.css | 73 ++++++++++++++++++++++++++++--------------------- 2 files changed, 49 insertions(+), 39 deletions(-) diff --git a/index.html b/index.html index 204ae8831..2508a021d 100644 --- a/index.html +++ b/index.html @@ -11,10 +11,10 @@

Easton Fritsch

@@ -25,7 +25,7 @@

Easton Fritsch

I really like the game Destiny 2. It has been my passion for some time now. I have a total of 480 hrs logged on Steam. If you need to know anything about the various lore or characters in Destiny 2, you've come to the right place!

-
+
illustration of Zavala

Commander Zavala

@@ -42,6 +42,8 @@

Easton Fritsch

illustration of destiny 2 ghost

Your Ghost

+
+
illustration of Mithrax

Mithrax

@@ -58,9 +60,6 @@

Easton Fritsch

illustration of Saint-14

Saint-14

-
-
-

Have other Destiny questions?

diff --git a/style/index.css b/style/index.css index 64a49daed..37b87fa0f 100644 --- a/style/index.css +++ b/style/index.css @@ -46,7 +46,7 @@ table { *{ box-sizing: border-box; max-width: 100%; - border:1px solid gray; + } /*Genral Styles*/ @@ -79,52 +79,63 @@ section{ /*Header Styles*/ header{ - background-color: gray; + background-color: lightgray; + padding:1%; + margin-bottom:1%; } nav a{ - display: flexbox; - padding:0 1%; - text-align: center; - border-radius:10px; - font-size:2.5rem; - color: black; + font-size:2rem ; text-decoration: none; - border:1px solid black; - background-color: white; + color: black; } -.home{ - background-color:black; - color: white; -} - /*main info section*/ .main-info{ - position: relative; + display: flex; + flex-direction: row; + justify-content: center; } -.text, image{ - display: inline-block; +section h2{ + font-size:6rem ; + font-family: 'Anton', sans-serif; } -.traveler{ - width:30%; - border-radius:20%; +.text { + padding:3%; + font-size:3rem ; } -.text{ - width:55%; - margin-left:5%; - text-align:center; - line-height:2; - position:absolute; - top:120px; +.row-1{ + display: flex; + justify-content: space-evenly; + flex-direction: row; + padding:1%; } -section h2{ - font-size:6rem ; - font-family: 'Anton', sans-serif; +.row-1 div{ + margin:0 2%; + font-size:3rem ; +} + +.row-2{ + display: flex; + justify-content: space-evenly; + flex-direction: row; + padding:3%; +} + +.row-2 div{ + margin:0 2%; + font-size:3rem ; +} + +footer{ + background-color: lightgray; + padding:2%; + font-size:2.5rem; + } \ No newline at end of file From 69218c37d73a56976bcd8905c0a2e75fb6621559 Mon Sep 17 00:00:00 2001 From: Easton Date: Tue, 4 Apr 2023 12:44:40 -0600 Subject: [PATCH 5/5] added media CSS to be responisve as well as made quality of life changes in HTML for the row class in characters section --- index.html | 4 +-- style/index.css | 70 +++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 58 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 2508a021d..75e87dfe7 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@

Easton Fritsch

I really like the game Destiny 2. It has been my passion for some time now. I have a total of 480 hrs logged on Steam. If you need to know anything about the various lore or characters in Destiny 2, you've come to the right place!

-
+
illustration of Zavala

Commander Zavala

@@ -43,7 +43,7 @@

Easton Fritsch

Your Ghost

-
+
illustration of Mithrax

Mithrax

diff --git a/style/index.css b/style/index.css index 37b87fa0f..3e05b4099 100644 --- a/style/index.css +++ b/style/index.css @@ -109,26 +109,14 @@ section h2{ font-size:3rem ; } -.row-1{ +.row{ display: flex; justify-content: space-evenly; flex-direction: row; padding:1%; } -.row-1 div{ - margin:0 2%; - font-size:3rem ; -} - -.row-2{ - display: flex; - justify-content: space-evenly; - flex-direction: row; - padding:3%; -} - -.row-2 div{ +.row div{ margin:0 2%; font-size:3rem ; } @@ -138,4 +126,58 @@ footer{ padding:2%; font-size:2.5rem; +} + +@media(max-width: 800px){ + .main-info{ + display: flex; + flex-direction: column; + align-items: center; + + } + .main-info div{ + width:90%; + } +} + +@media(max-width: 500px){ + header{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + nav{ + display: flex; + flex-direction: column; + } + nav button{ + margin:2% 0; + } + .main-info{ + display: flex; + flex-direction: column; + align-items: center; + + } + .main-info div{ + width:90%; + } + .row{ + display: flex; + flex-wrap: wrap; + justify-content:space-around; + } + .row div{ + width:40%; + margin:2% 0; + } + footer{ + display: flex; + flex-direction: column; + align-items: center; + } + footer button{ + margin:2% 0; + } } \ No newline at end of file