diff --git a/image-instructions/location-icon.png b/image-instructions/location-icon.png new file mode 100644 index 0000000..2beb8ec Binary files /dev/null and b/image-instructions/location-icon.png differ diff --git a/image-instructions/starbucks.jpeg b/image-instructions/starbucks.jpeg new file mode 100644 index 0000000..1c09f39 Binary files /dev/null and b/image-instructions/starbucks.jpeg differ diff --git a/images b/images new file mode 100644 index 0000000..e69de29 diff --git a/page.html b/page.html index d64c7a4..b40091d 100644 --- a/page.html +++ b/page.html @@ -1,10 +1,67 @@ - - - + + + Document - - - - \ No newline at end of file + + + + +
+ + +
+ +
+
+
+ +
+ +
+
+
+
+
+
+ +
+
+

Find a store

+
+
+
+
+ +
+
+ +
+
+
+
+ + +
+ +

STARBUCKS' REWARDS

+
+ + +
+ + +
+ + + + diff --git a/styles.css b/styles.css index e69de29..22155a0 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,119 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --White: #fff; + --Dark-Green: hsl(166, 34%, 17%); + --Green: hsl(157, 90%, 24%); + --Black: #333; +} + +/*------------HEADER------------------ */ + +header { + display: grid; + flex-direction: column; + margin-top: 30px; + margin-left: 6px; + margin-right: 6px; + width: 99.5%; +} + +.logo img { + width: 50px; + border-radius: 50%; + position: relative; + bottom: 10px; +} + +.logo-and-nav-links { + display: flex; + flex-direction: row; + column-gap: 20px; + margin-left: 35px; +} + +ul { + display: flex; + flex-direction: row; + column-gap: 25px; + list-style: none; +} + +li { + font-size: 17px; + font-weight: 600; +} + +li:hover { + border: none; + outline: none; + padding-bottom: 26.5px; + border-bottom: 7px solid var(--Green); +} + +.location-icon img { + width: 20px; +} + +.location-and-text { + display: flex; + flex-direction: row; + column-gap: 3px; + align-self: center; +} + +.nav-buttons { + display: flex; + flex-direction: row; + column-gap: 10px; + margin-right: 40px; +} + +.nav-buttons button { + width: 85px; + height: 30px; + border-radius: 15px; +} + +.section1-prt-2 { + display: flex; + flex-direction: row; + column-gap: 30px; + margin-bottom: 25px; +} + +.header-section-2 { + background-color: var(--Dark-Green); + height: 50px; +} + +.header-section-2 h1 { + color: #fff; + font-size: 15px; + font-weight: bolder; + position: relative; + left: 100px; + top: 15px; + width: 75%; +} + +.Join { + background-color: var(--Black); + color: var(--White); + font-weight: 900; +} + +.sign-in { + background-color: var(--White); +} + +.header-container { + display: flex; + flex-direction: row; + justify-content: space-between; + column-gap: 50px; +}