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..1d2ae8247 100755 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,106 @@ - - /* 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: 0px; + padding: 0px; + text-align: center; + color: black; +} +.header { + position: relative; +} body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; -} - -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * 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' - */ + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; +} +h1 { + font-size: 3rem; + color:orange; + text-align: center; +} +.ul link { + display: flex; + align-items: center; + justify-content: space-around; +} +nav ul li { + display: inline-block; + list-style: none; + margin: 10px; +} +nav ul li a { + text-decoration: none; + color: gray; + font-size: 10px; +} +nav ul li a:hover { + color: red; +} +.top3 { + float: right; + font-size: 30px; + width: 30px; +} + +.image1 { + background-image: url(/img/first-background.jpg); + padding: 10em; +} +.button { + background-color: orange; +} +.h1{color: black;} +.h2{ + background-image: url(/homepage-desktop.png); +} + +*/ Icons/ + +.icon{ + height: 100px; + border-radius: 1px solid ; + border: 2px; +} + +.container{ + display: flex; + flex-direction: row; + justify-content: space-around; +} + +#p1{ + color: black; +} +.ptest{ + justify-content: center; +} + +.test{ + color:black; + padding: 0px; + width: 10px; + border-radius: 50px; +} +.icon2{ + height: 30px;px; + width: 30px; + border-radius: 50px; +} +.topimag{ + float: left; +} +.lady-image{ + display: flex; +} +.p3{ +align-items: center; +font-size: 20px; +} +.lady-image,button{ + border-radius: 1px solid; + color: orange; + font-size: 20px; + +} diff --git a/index.html b/index.html index 3e742ef04..b0133895e 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,84 @@ - - - + + + Karma - - - - - - + + + + + + +
+ ≡ + +
+
+

Inroducing karma

+

Bring wifi with you everywhere, you go

+ +
- - - +
+

Everything needs a little Karma.

+
+
+
+ +

internet all icon-devices

+
+
+ +

Boot your productive

+
+
+ +

Pay US You go +

+
+ +
+
+ +
+
+ " Whenever i just , don't worry about my
connection anymore"

- + +
+
+ + + diff --git a/level-3/index.html b/level-3/index.html new file mode 100644 index 000000000..74f04d1c7 --- /dev/null +++ b/level-3/index.html @@ -0,0 +1,79 @@ + + + + + + + + Store + + + +
+ + + +
+ +
+
+ +
+
+

Order your karma Wifi
device today!

+ +
+
+ + +

+ +
+ + +

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

+ +
+

selector color

+
+ + + + +
+
+ + + +
+
+
+
+ + \ No newline at end of file diff --git a/level-3/style.css b/level-3/style.css new file mode 100644 index 000000000..96e82eaa0 --- /dev/null +++ b/level-3/style.css @@ -0,0 +1,105 @@ +*{ + padding: 0; + margin: 0; +} +body{ + max-width: 800px; + margin-left: auto; + margin-right: auto; +} +.h1{ + color: orange; + max-width: 300px; + font-family: sans-serif; +} +.main{ + display: flex; + flex-direction: row-reverse; +} +div{ + display: inline:block; + +} + + +*/ nav-bar/ +.ul link { + display: flex; + align-items: center; + justify-content: space-around; + position: relative; + +} +nav ul li { + display: inline-block; + list-style: none; + margin: 10px; +} + +.nav ul li a { + text-decoration: none; + color: gray; + font-size: 10px; +} + .nav a:hover{ + color: red;} + + #menu-icon{ + width: 50px; + border-radius: 50%; + position: fixed; + top: 3px; right: 60px; + cursor: pointer; + z-index: 100; + } + + */container/ + + + .main-container{ + height: 100%; + display: flex; + justify-content: center; + align-items:center; + } + .container form .input-box{ + display: flex; + flex-wrap: wrap; + justify-items: left; + } + form input{ + width: 50px; + } + .radio-button { + margin: 20px; +} +input{ + width: 50%; + padding: 8px; + margin-bottom: 16px; + box-sizing: border-box; + + +} + + +label, input { + padding: 5px; + margin:10px; + flex-grow: 1; +} + +#address { + width: 380px; +} + +.place { + background-color: orange; + color: white; + margin-top: 30px; + padding: 10px; + border-radius: 5%; +} + + + \ No newline at end of file diff --git a/menu.png b/menu.png new file mode 100644 index 000000000..e25d035a8 Binary files /dev/null and b/menu.png differ