From a3d109165c16ca0f64156a7e100a696c9a24699c Mon Sep 17 00:00:00 2001 From: Nhat Vu Date: Tue, 9 Aug 2022 12:02:06 -0400 Subject: [PATCH] I have made an edit to a file! --- assets/css/style.css | 111 +++++++++++++--- index.html | 303 ++++++++++++++++++++++--------------------- 2 files changed, 245 insertions(+), 169 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 098a004..cb686aa 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,6 +1,10 @@ +* { + box-sizing: border-box; +} body { - + background-image: linear-gradient(to bottom, whitesmoke 0%, rgb(35, 47, 58) 100%); + font-family: 'Open Sans', sans-serif; } /* Navigation Styles */ @@ -11,17 +15,22 @@ nav ul { display: table; width: 100%; } + nav li { display: table-cell } + li a { display: block; color: white; padding: 30px 30px 30px 30px; text-decoration: none; + text-align: center; } + li a:hover { - background-color: rgb(40, 39, 39); + background-color: whitesmoke; + color: rgb(255, 54, 154); } /* Header Styles */ @@ -39,27 +48,42 @@ h1 { section { display: flex; justify-content: center; - + flex-direction: column; width: 80%; margin: auto; } -.center-title { +.center-title { + text-align: center; } /* About Section Styles */ #about-sec { display: flex; + flex-direction: column; + +} +#about-sec h2 { + font-size: 1.96em; + padding: 0 1.5em; } + +#about-sec #about-blurb { + padding: 0 0.25em; +} + #about-sec div { display: inline-flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-evenly; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-evenly; } + figure { display: flex; + width: 30%; + flex-direction: column; } @@ -67,42 +91,87 @@ figure { aside { display: flex; flex-direction: column; + border: 4px double black; + margin: 1em 0; + color: rgba(35, 47, 58, 0.05); + background-color: rgba(35, 47, 58, 0.05); +} + +aside p { + font-weight: 600; + font-size: 1.25em; + background-color: rgb(35, 47, 58); + color: whitesmoke; + padding: 0.5em; + margin: 0; + text-transform: uppercase; + border-bottom: 4px double rgba(0, 0, 0, 0.77); + opacity: 0.6; +} + +aside ul li a { + text-align: justify; + padding: 0; + color: rgb(35, 47, 58); + text-decoration: underline; +} +aside ul li { + color: palevioletred; +} + +aside ul { + font-size: 0.9em; + margin: 1em; + padding: 0 0.75 0 1em; +} + +figcaption { + font-style: italic; + background-color: rgba(35, 47, 58, 0.0); + color: whitesmore; + padding: 0.25em; + opacity: 0.5; + font-size: 0.85em; } /* Table - Concert Schedule Styles */ #concert-schedule-sec { - max-width: 940px; + width: 100vw; margin: 0 auto; + padding: 2em; height: max-content; - } + color: rgb(255, 54, 154); + background-color: black; +} /* Form - Ticket Form Styles */ form { width: 35vw; margin: auto; - } +} -input[type="text"], input[type="number"] { -min-height: 15px; -border-radius: 5px; -border:1px solid #cccccc; +input[type="text"], +input[type="number"] { + min-height: 15px; + border-radius: 5px; + border: 1px solid #cccccc; } input[type="radio"] { -margin-left: 12px; + margin-left: 12px; } th { -border: 2px solid #8c6b48; + border: 2px solid #8c6b48; } table { -text-align: center; -margin: 20px auto; + text-align: center; + margin: 20px auto; } td { -border: 2px solid #8c6b48; -width: 300px; -} + border: 2px solid #8c6b48; + width: 300px; +} \ No newline at end of file diff --git a/index.html b/index.html index 75b7a7b..09e937d 100644 --- a/index.html +++ b/index.html @@ -1,156 +1,163 @@ - - - - - - - - - -
-

- theReal
- Harry Styles
- Fanpage -

-
- - -
+ + + + + + + + + + + + + +
+

+ theReal
+ Harry Styles
+ Fanpage +

+
+ + +
-
- -

About.

-

Harry Edward Styles is an English singer, songwriter and actor. - His musical career began in 2010 as a solo contestant on the - British music competition series The X Factor. -

- -
-
- harrystyles - -
+
+ +

About.

+

Harry Edward Styles is an English singer, songwriter and actor. + His musical career began in 2010 as a solo contestant on the + British music competition series The X Factor. +

+ +
+
+ harrystyles + +
Harry Styles performing free concert fundraiser for US wildfire relief -
-
+
+
- -
-
- - -
-

Touring

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Concert Schedule
DateTimeCity
May 27, 202209:00 pmColumbus
May 28, 202208:00 pmLexington
June 3, 202209:00 pmMiami
June 4, 202207:00 pmDallas
June 10, 202210:00 pmBend
-
- - -
-

Get Tickets

- - -
- - - -
- - - -
- - - -
- - - Ticket delivery preference: -
- - -
- - -
- -

Stay In Touch!

-

Send us a message -- keep us up to date with new things about Harry, or tell us about your user expereince on the site.

- - - -
- -
-
- -
-
-

-

-
- - + + + + + +
+

Touring

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Concert Schedule
DateTimeCity
May 27, 202209:00 pmColumbus
May 28, 202208:00 pmLexington
June 3, 202209:00 pmMiami
June 4, 202207:00 pmDallas
June 10, 202210:00 pmBend
+
+ + +
+

Get Tickets

+ + +
+ + + +
+ + + +
+ + + +
+ + + Ticket delivery preference: +
+ + +
+ + +
+ +

Stay In Touch!

+

Send us a message -- keep us up to date with new things about Harry, or tell us about your user expereince on + the site.

+ + + +
+ +
+
+ +
+ + + + \ No newline at end of file