diff --git a/ama.css b/ama.css new file mode 100644 index 0000000..31385ad --- /dev/null +++ b/ama.css @@ -0,0 +1,225 @@ +* +{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body +{ + height: 100vh; + font-family: Arial; +} + +/* Header */ +nav +{ + height: 60px; + display: flex; + align-items: center; + background-color: #0f1111; + color: white; +} + +.nav-left +{ + display: flex; + align-items: center; + justify-content: center; + margin-left: .5rem; +} + +.nav-logo img { + width: 100px; + padding: .5rem; +} + + +.location { + height: 100%; + font-size: .7rem; + padding: .5rem 1rem; +} + + +.location-icon { + display: flex; + align-items: center; +} + + +.nav-center { + height: 40px; + display: flex; + flex-grow: 1; + border-radius: 5px; + margin-left: 1rem; +} + + +.search-dropdown { + width: 5rem; + font-size: 1rem; + background-color: rgb(210, 208, 208); + padding: .5rem; + border-radius: 5px 0 0 5px; + outline: none; +} + +.search-dropdown:focus { + outline: none; +} + +.search-box { + font-size: 1rem; + flex-grow: 1; + padding: .5rem; +} + +.search-box:focus { + outline: none; +} + +.search-icon i { + height: 100%; + background-color: rgba(255, 203, 105, 0.849); + border-radius: 0 5px 5px 0; + padding: .7rem .5rem; + outline: none; +} + +.nav-right { + display: flex; + align-items: center; + margin: 0 1rem; +} + +.language-option { + display: flex; + padding: .5rem .5rem; +} + +.language-option:hover { + outline: 1px solid white; +} + +.flag { + width: 20px; +} + +.select-language { + font-size: .7rem; + font-weight: bold; + color: white; + background: transparent; + border: none; +} + +.select-language option { + color: black; +} + +.account-option { + padding: .5rem .5rem; +} + +.account-option:hover { + outline: 1px solid white; +} + +.account-option .top-text { + font-size: .5rem; + margin-left: 5px; +} + +.select-account { + font-size: .7rem; + font-weight: bold; + background: transparent; + color: white; + border: none; +} + +.order-option { + padding: .5rem .5rem; +} + +.order-option:hover { + outline: 1px solid white; +} + +.order-option .top-text { + font-size: .3rem; +} + +.order-option .bottom-text { + font-size: .6rem; + font-weight: bold; +} + +.cart-option { + display: flex; + align-items: center; + font-size: 0.8rem; + font-weight: 700; + padding: .5rem .5rem; +} + +.cart-option:hover { + outline: 1px solid white; +} + +.cart-logo i { + width: 20px; +} + +.nav-options { + height: 42px; + display: flex; + align-items: center; + background-color: #222f3d; + color: white; + justify-content: start; + +} + +.nav-options * { + cursor: pointer; +} + +.all-logo { + display: flex; + align-items: center; + gap: .3rem; + padding: .5rem; + margin-left: 2rem; +} + +.all-logo:hover { + outline: 1px solid white; +} + +.nav-options .options { + display: flex; +} + +.nav-options .options p { + padding: 0.5rem; +} + +.nav-options .options p:hover { + outline: 1px solid white; +} + +.flex-container +{ + display: flex; +} + +body +{ + + +} + + diff --git a/ama.html b/ama.html new file mode 100644 index 0000000..c5470e7 --- /dev/null +++ b/ama.html @@ -0,0 +1,115 @@ + + + + + + + + + + + + Amazon Clone + + + +
+ + + +
+ +