diff --git a/css/style.css b/css/style.css index 5cb025cef..5157061bf 100755 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,167 @@ - - /* 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 */ body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; +} +/*Header*/ + +.logo { + display: flex; + align-items: center; /* Center the logo vertically within the header */ +} + +.karam-logo { + width: 30px; + height: 30px; /* Set height to maintain aspect ratio */ + margin-right: 620px; /* Add spacing between logo and nav items */ +} + +.nav { + display: flex; + justify-content: flex-end; /* Align items to the left */ + margin-left: 2em; /* Add left margin for spacing */ +} + +.nav-item { + list-style-type: none; + margin-right: 1em; +} + +.nav-link { + text-decoration: none; + color: black; + margin-right: 1em; +} + +.nav-link:hover { + color: orangered; +} + +.nav li { + text-decoration: none; + gap: 1px; + float: left; +} +.nav ul { + list-style-type: none; + margin-left: 1em; +} + +/*hero*/ +.hero { + padding: 200px; + background-size: cover; + background-image: url("/img/first-background.jpg"); +} +.hero h1 { + margin-left: 340px; + color: white; +} +.hero p { + margin-left: 280px; + font-size: 20px; + margin-top: 0px; + color: white; +} + +.hero-button { + padding: 0.4em 1em; + border-style: none; + border-radius: 2px; + background-color: orangered; + color: white; + margin-left: 400px; } +/*icon*/ +.section { + margin-top: 80px; +} +.section-p { + font-size: 38px; + text-align: center; +} +.icon-imag { + margin-left: 3em; + width: 100px; +} +.icon-discribtion { + font-size: 20px; +} +.section-icon { + display: flex; + padding-left: 7em; +} +.section-icon div { + padding-left: 7em; + padding-bottom: 3em; +} +.homepage-img { + max-width: 100%; + max-height: 100%; +} +.article { + display: flex; + align-items: center; + background-color: rgb(245, 220, 224); +} +.article-p { +} + +.article-quote { + font-size: 30px; + font-style: italic; + padding-left: 2.5em; + color: rgb(31, 31, 31); + text-align: center; +} +.article-button { + margin-left: 12em; + background-color: orangered; + color: white; + padding: 15px; + border: none; +} +.article-button:hover { + background-color: white; + color: orangered; +} +/*footer*/ +.social-media-icon { + border: 1px solid rgb(118, 118, 118); + padding: 5px; + width: 30px; + border-radius: 25px; + margin-left: 7px; + cursor: pointer; +} +/*footer*/ +.social-media-icon { + border: 1px solid rgb(118, 118, 118); + padding: 5px; + width: 30px; + border-radius: 25px; + margin-left: 7px; + cursor: pointer; +} +/*footer*/ +.social-media-icon { + border: 1px solid rgb(185, 179, 179); + padding: 5px; + width: 30px; + border-radius: 25px; + margin-left: 7px; + cursor: pointer; +} + +footer h3 { + text-align: center; +} +footer p { + color: rgb(178, 177, 177); + text-align: center; +} /** * Add your custom styles below * @@ -15,5 +171,3 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ - - diff --git a/index.html b/index.html index 3e742ef04..ce93e6798 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,127 @@ + - + Karma - + +
+ + +
+ + + + +
+
+
+

Introducing Karma

+

Take WiFi with you, wherever you go.

+ +
+ +
+ +
+

Everybody needs a bit of Karma.

+
+
+ Device icon +

Internet for all your devices

+
+
+ Coffee icon +

Boost your productivity

+
+
+ Refill icon +

Pay as you go

+
+
+
+
+ +
+ +
+

“ Whenever i am, i just don't
worry about my connection
+ anymore! ”

+ + + + + +
+ +
+
- - - + - +
+ +
+ diff --git a/level-2/store.css b/level-2/store.css new file mode 100644 index 000000000..3425d0087 --- /dev/null +++ b/level-2/store.css @@ -0,0 +1,191 @@ +h1 { + font-size: 6ch; + color: #f96b37; + margin-top: 80px; + margin-bottom: 50px; + margin-left: 0; +} +#color{ + accent-color: orange +} +.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); +} +.link { + text-decoration: none; + color: black; + margin-right: 1em; +} + +.link:hover { + color: orangered; +} + +.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: 0.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/level-2/store.html b/level-2/store.html new file mode 100644 index 000000000..2a396c1cc --- /dev/null +++ b/level-2/store.html @@ -0,0 +1,125 @@ + + + + + + Karma + + + + + + + +
+
+ + + +
+
+
+
+
+

Order your Karma Wifi
device today!

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


+ +

Select a color

+
+ + + + +
+


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