diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6b665aaa0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/css/style.css b/css/style.css index 5cb025cef..66b5dd5c6 100755 --- a/css/style.css +++ b/css/style.css @@ -1,10 +1,4 @@ - - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - -body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; -} +/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ /** * Add your custom styles below @@ -15,5 +9,340 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +/* Body */ +body { + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; + margin: 40px; +} +/* Header */ +.header { + display: flex; + justify-content: space-around; + align-items: center; + height: 4rem; +} + +/* Navbar */ + +.nav_list { + display: flex; + list-style: none; +} + +.nav_link { + text-decoration: none; + color: grey; +} + +.nav_link:hover { + color: #f05a29; +} + +.nav_item { + padding: 14px; +} + + +/* Hero */ +h1 { + margin-bottom: -2px; + font-weight: lighter; + font-size: xx-large; + padding-bottom: 4px; +} + + + +h2 { + font-weight: lighter; + font-size: x-large; + font-style: normal; + margin-right: 40px; +} + + + + +.btn_learn_more { + background-color: #f05a29; + border-radius: 4px; + border: 0; + padding: 10px 20px; + margin-top: 30px; + font-size: medium; +} + + + +.hero { + display: block; + color: white; + font-weight: lighter; + background-color: rgb(36, 6, 106); + background-image: url(file:///Users/farnooshmoayeri/Documents/GitHub/HTML-CSS-Module-Project/img/first-background.jpg); + background-size: cover; + background-repeat: no-repeat; + width: 100%; + height: 500px; + /* padding-left: 50px; + margin-left: 90px; */ +} + + + +.hero_wrapper { + display:flex; + flex-direction:column; + justify-content:center; + align-items:center; + padding-top: 8rem; + +} + + + + +/* article */ +h3 { + text-align: center; + font-weight: lighter; + font-size: xx-large; + padding-top: 40px; +} + + + + +/* main */ +p { + margin-left: -25px; + text-align: center; +} + + + +.main { + display: flex; + justify-content: space-around; + align-items: center; + margin: 10px; +} + + + + +/* footer */ + +hr { + margin-top: 40px; + margin-bottom: 40px; + color: rgb(242, 242, 242); +} + + +.footer { + /* border-radius: 50%; + border: 1px solid rgb(204, 203, 203); */ + display: flex; + flex-direction: column; + justify-content: center; + align-items:center; +} + + + +.social_media { + display: flex; + align-items: center; + margin: auto; +} + + + +.join_us_on{ + text-align:center; +} + + + +.end { + font-size: small; + text-align: center; + margin: 5px; + color: rgb(166, 162, 162); +} + + + +#twitter, +#facebook, +#instagram { + border-radius: 50%; + border: 1px solid rgb(211, 205, 205); + margin: 8px; + padding: auto; +} + + +/* slogan */ + +.karma_slogan { + display: flex; + grid-column: 1 / -1; + grid-gap: 50px; + background-color: #f5d0c4; +} + + +.quotes{ + color: #f05a29; +} + +.slogan { + margin: 30px 60px; + padding: 40px 70px; + text-align: center; +} +/* .image_karma_slogan{ + /* background-image:url(img/homepage-feature.png); */ + /* background-size:cover; + width:50%; +} */ + +.btn_get_karma_today { + background-color: #f05a29; + color: white; + border-radius: 3px; + border: none; +} + +/* store */ +/* form */ +/* right */ + + + + +.main_store { + display: flex; + width:100%; + height:400px; + gap:30px; + padding:40px 0; +} + +/* right section */ + + +.right{ + width:50%; + background-image:url(/Users/farnooshmoayeri/Documents/GitHub/HTML-CSS-Module-Project/img/store-image_by-andrew-neel-unsplash.jpg); + background-color:red; + background-size:cover; + background-position:center; + object-fit:cover; + height:400px; +} + + +.text{ + color:#f05a29; + margin-bottom:10px; + text-align:center; +} + + +/* firstname/lastname */ + + +.name_wrapper{ +display:flex; +width:100%; +gap:2%; +margin-top:5px; +margin-bottom:5px; +} + + +.fname { + width:50%; +} +.lname { + width:50%; +} + +/* address/address2 */ + +.address_input{ + margin-top:5px; + margin-bottom:5px; +} + + +/* city/postcode */ + +.city_wrapper{ + display:flex; + width:100%; +gap:100px; +margin-top:5px; +margin-bottom:5px; + +} + +.input_size { + width:80%; + +} + + +.city{ + width:150%; + +} +.postcode{ + width:50%; +} + +/* color form */ + +fieldset { + border: none; + padding: 0; + margin: 0; +} + +.radio{ +padding-top:6px; +padding-bottom:30px; +} + +.radio_color{ +margin-bottom:9px; +} + +/* right/bottom */ + +.tac{ + color: #f05a29; +} +.btn_place_my_order{ + background-color:#f05a29; + color:white; + border:none; + margin:10px; + padding:4px 3px; + border-radius:3px; + +} + + +/* right/image */ +.left{ + width:50%; + padding:40px + height:400px; +} \ No newline at end of file diff --git a/img/homepage-feature.png b/img/homepage-feature.png new file mode 100644 index 000000000..3500b2e4c Binary files /dev/null and b/img/homepage-feature.png differ diff --git a/img/store-image_by-andrew-neel-unsplash.jpg b/img/store-image_by-andrew-neel-unsplash.jpg new file mode 100644 index 000000000..a8ad89099 Binary files /dev/null and b/img/store-image_by-andrew-neel-unsplash.jpg differ diff --git a/index.html b/index.html index 3e742ef04..730207fea 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,130 @@ - - - + + + Karma - - - - - - + + + + + + +
+ + + +
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+ +
+

Everyone needs a little Karma.

+
+ +
+
+ Internet for all devices +

Internet for all devices

+
+ +
+ Boost your productivity +

Boost your productivity

+
+ +
+ Pay as You Go +

Pay as You Go

+
+
+
+
I just don't worry about my connection anymore
+
+

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

+ +
+
+
+

Join us on

+ + +

@Karma mobility.Inc

- - + diff --git a/storepage.html b/storepage.html new file mode 100644 index 000000000..028206291 --- /dev/null +++ b/storepage.html @@ -0,0 +1,191 @@ + + + + + + Store + + + + + + + + + +
+ + + +
+ + + + +
+ +
+

Order your Karma wifi device today!

+ +
+ +
+ +
+ + +
+ +
+ + +
+
+ + + + +
+ + + +
+ + +
+ + + +
+ + + + +
+ +
+ + +
+ + + + +
+ + +
+
+ + + + + +
+ Select a color: + +
+ + + + + + + +
+
+ + + + +
+ + + +
+ + + + +
+ + + + + + + +
+ + + +
+
+ + + +