diff --git a/page.html b/page.html index af38e8c..a75640e 100644 --- a/page.html +++ b/page.html @@ -4,7 +4,7 @@ Group1 - +
@@ -12,6 +12,39 @@
- + diff --git a/styles.css b/styles.css index 20e3eaf..412a08f 100644 --- a/styles.css +++ b/styles.css @@ -6,7 +6,82 @@ :root { --light-green: #d4e9e2; + --border-light-green: #cadbd5; + --pastel-green: #f3fffd; --dark-green: #1e3932; --normal-green: #00754a; --gold-color: #cba258; } + +.prices-option-container { + font-family: Helvetica, Helvetica, Arial, sans-serif; + display: flex; + flex-direction: column; + align-items: center; + background-color: var(--pastel-green); + border-bottom: var(--border-light-green) solid 3px; + box-shadow: 0px 5px 15px red; +} + +h3 { + margin-top: 30px; + margin-bottom: 50px; + font-size: 1.7rem; +} + +.prices-container { + display: flex; +} + +.prices { + padding-left: 30px; + padding-right: 30px; + padding-bottom: 20px; + border-bottom: var(--pastel-green) solid 5px; +} + +.prices:hover { + border-bottom: var(--normal-green) solid 3px; +} + +.prices-container p { + font-size: 1.5rem; + font-weight: 500; +} + +.prices-container span { + color: var(--gold-color); + font-size: 0.7rem; +} + +.custom-drink-container { + background-color: var(--light-green); + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding-top: 30px; + padding-bottom: 30px; +} + +.coffee-photo-container { + width: 400px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +.coffee-photo-container img { + height: 200px; +} + +.coffee-text-container { + width: 300px; +} + +.coffee-text-container h4 { + font-size: 1.5rem; + font-weight: 500; + margin-bottom: 20px; +}