diff --git a/css/store.css b/css/store.css new file mode 100644 index 000000000..6ac1ac80c --- /dev/null +++ b/css/store.css @@ -0,0 +1,187 @@ +h1{ + font-size: 6ch; + color: #f96b37; + margin-top: 80px; + margin-bottom: 50px; + margin-left: 0; +} + +.logo{ + width:30px; + height: auto; +} + +.header{ + display:flex; + justify-content: space-between; + align-items: center; + margin-right: 3%; + margin-left: 3%; + margin-bottom: 10px; +} + +.list { + display: grid; + grid-template-columns: repeat(6, 1fr); + /* 1 row and 6 columns */ + list-style: none; + justify-content: flex-end; + align-items: center; + /* Adjust the gap as needed */ + gap: 2%; + width: 50vw; + height: 2vh; +} + +.list li { + padding: 0; + text-align: center; + box-sizing: border-box; + font-size: clamp(1.5vh, 1vw, 3vh); +} + +.flex{ + display: flex; +} +.container{ +display: flex; +flex-direction: row; +gap: 2rem; +} + +.card{ + display: flex; + flex-direction: column; + justify-content: center; + } + +.form{ + width: 50vw; + margin-left: 50px; +} +.store_img{ + width: 50vw; +} +.address-info{ + display: flex; + flex-direction: column; + width: 30%; + margin-bottom: 70px; +} + + +.select { + width: 220px; + height: 40px; + border: 1px solid rgb(138, 132, 132); + border-radius: 2px; + color: rgb(138, 132, 132); +} + +.name-input{ + width: 75%; + padding: 8px; + border: 1px solid black; + border-radius: 4px; + margin-bottom: 10%; +} +.address-input { + width: 270%; + padding: 8px; + border: 1px solid black; + border-radius: 4px; + margin-bottom:10%; +} + +.add-container { + display: flex; + flex-wrap: wrap; + gap: 150px; +} + +select#city { + flex: 2; + padding: 8px; + border: 1px solid black; + border-radius: 4px; + width: 150%; +} + +input#postcode { + flex: 1; + padding: 8px; + border: 1px solid black; + border-radius: 4px; + width: 70%; +} + +label{ + cursor: pointer; + padding:8px; + margin-bottom: 20px; +} + + .button{ + padding:10px 30px; + background-color:rgb(218, 90, 20); + border: none; + border-radius: .3rem; + font-size: 22px; + font-weight: 500; + margin-top: 40px; + color:#fff; + width:270px; + height: 70px; + flex-shrink: 0; + } + .button:hover{ + background-color: #fff; + color:rgb(218, 90, 20);; + border:2px solid rgb(218, 90, 20); + + } + +footer{ + margin-top:5rem; + text-align: center; + margin-top: 0; + border-top: 1px solid rgb(214, 212, 212); + +} +.footer-items{ + margin-top: 2rem; +} +.content{ + font-weight:normal; + font-size: 1rem; +} + +.footer-icons{ +display: flex; +justify-content: center; + +} + +.footer_icon{ +height: 1.2rem; +display: flex; +justify-content: space-evenly; +border: 1px solid rgb(220, 217, 217); +border-radius: 50%; +margin-top: 2rem; +padding: 0.5rem; + +} + +#facebook-icon { + margin-right:15px; + margin-left:15px; +} +.karma_mobality{ + margin-top:10px; + font-size: smaller; + font-weight:lighter ; + color: rgb(196, 193, 193); +} + + diff --git a/css/style.css b/css/style.css index 5cb025cef..afd971054 100755 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,188 @@ +/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - +* { + margin: 0; + padding: 0; + font-family: Roboto; +} body { font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; + -webkit-font-smoothing: antialiased; +} + +a { + background-color: transparent; +} + +h2{ + font-size:50px; + text-align: center; + margin-top: 100px; + font-weight: 300; +} + +.logo{ + width:30px; + height: auto; +} + +.header{ + display:flex; + justify-content: space-between; + align-items: center; + margin-right: 3%; + margin-left: 3%; + margin-bottom: 10px; +} + +.list { + display: grid; + grid-template-columns: repeat(6, 1fr); + /* 1 row and 6 columns */ + list-style: none; + justify-content: flex-end; + align-items: center; + /* Adjust the gap as needed */ + gap: 2%; + width: 50vw; + height: 2vh; +} + +.list li { + padding: 0; + text-align: center; + /* Center the content within each grid item */ + box-sizing: border-box; + /* Include padding and border in total width/height */ + font-size: clamp(1.5vh, 1vw, 3vh); +} +.item a{ +text-decoration: none; +color:gray; +} +.item :hover{ + color:rgb(228, 108, 23); +} + + +.main-image{ + height: 600px; + display: flex; + flex-direction: column; + gap: 0; + justify-content: center; + align-items: center; + background-image: url(/img/first-background.jpg); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + color: white; + +} + +.main-intro{ +font-weight: 300; +font-size: 3rem; +margin-bottom: 18px; + +} + + +.main-button{ + background-color:rgb(250, 101, 21); + border:1px solid rgb(250, 101, 21); + border-radius: 5px ; + margin-top:40px; + padding:10px 20px; + font-size: smaller; + color: white; +} + +.icon{ + display: flex; + flex-direction: column; + align-items: center; +} + +.icons{ +display: flex; +justify-content: space-evenly; +align-items: center; +} + +.icon-img{ + width:10rem; + margin:5rem 0; + +} +.text{ + font-size:2rem; +} + +.input_card { + display:flex; +} + +.feature-container{ + display:flex; + margin-top: 10rem; +} + +.text-info{ + margin-top: 10rem; +} + +.feature{ + background-color: rgb(250, 233, 233); + width:70vw; + text-align: center; + font-size: larger; +} + +footer{ + margin-top:5rem; + text-align: center; + margin-top: 6rem; + border-top: 1px solid rgb(214, 212, 212); + +} +.footer-items{ + margin-top: 2rem; +} +.content{ + font-weight:normal; + font-size: 1rem; +} + +.footer-icons{ +display: flex; +justify-content: center; + +} + +.footer_icon{ +height: 1.2rem; +display: flex; +justify-content: space-evenly; +border: 1px solid rgb(220, 217, 217); +border-radius: 50%; +margin-top: 2rem; +padding: 0.5rem; + +} + +#facebook-icon { + margin-right:15px; + margin-left:15px; +} +.karma_mobality{ + margin-top:10px; + font-size: smaller; + font-weight:lighter ; + color: rgb(196, 193, 193); } + /** * Add your custom styles below * @@ -14,6 +191,4 @@ body { * for example: General styles, Navigation styles, Hero styles, Footer etc. * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' - */ - - + */ \ No newline at end of file diff --git a/level-2/homepage-feature.png b/img/homepage-feature.png similarity index 100% rename from level-2/homepage-feature.png rename to img/homepage-feature.png diff --git a/level-2/store-image_by-andrew-neel-unsplash.jpg b/img/store-image_by-andrew-neel-unsplash.jpg similarity index 100% rename from level-2/store-image_by-andrew-neel-unsplash.jpg rename to img/store-image_by-andrew-neel-unsplash.jpg diff --git a/index.html b/index.html index 3e742ef04..c992fdbb4 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,66 @@ +
+
+ + + +
+
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ + +
+

Everyone needs a little Karma.

+
+
+ icon-devices +

Internet for all devices

+
+
+ icon-coffee +

Boost your productivity

+
+
+ icon-refill +

Pay as you go

+
+
+
+
+ +
+
+
+

"Wherever I am, I just don't worry about my connection anymore!"

+ +
+ +
+
+
- - - - - - + \ No newline at end of file diff --git a/store.html b/store.html new file mode 100644 index 000000000..a199cf3d9 --- /dev/null +++ b/store.html @@ -0,0 +1,110 @@ + + + + + + + Karma + + + + + + + + +
+
+ + + +
+
+
+
+
+ +

Order your Karma Wifi
device today!

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



+ +

Select a color


+ + + + +



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