diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 5cb025cef..46546bd71 100755 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,4 @@ - - /* 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; @@ -15,5 +14,87 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +nav { + width: 100%; + background-color: white; +} + +#navbar { + display: flex; + justify-content: space-between; + width: 100%; +} + +.nav-links { + display: flex; + list-style: none; + justify-content: flex-end; + +} + +.nav-item a { + margin-right: 2rem; + color: grey; + justify-content: center; + text-align: center; +} + +.nav-item:first-child { + margin-right: auto; + margin-left: 30px; +} + +.info { + background-image: url("/img/first-background.jpg"); + background-size: cover; + height: 480px; + padding-top: 80px; + color: white; + text-align: center; +} + +p { + padding: 40px; + margin: 20px; +} + +.learn-more { + background-color: orange; + padding: 10px; + border-radius: 5px; +} + +header { + font-size: 30px; +} + +.karma2 { + text-align: center; + padding: 40px; +} + +.icons { + display: flex; + justify-content: center; + list-style: none; +} + +.icon-item { + padding: 10px; + margin: 10px; + text-align: center; + +} + +footer { + flex-direction: row; + flex-wrap: wrap; + flex-direction: column; + text-align: center; +} +#footlogo { + padding: 20px; + margin: 20px; +} \ No newline at end of file diff --git a/index.html b/index.html index 3e742ef04..9e22d3acb 100755 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,13 +8,63 @@ - + + + +
+
+ +
Introducing Karma
+

Bring WiFi with you, everywhere you go

+ +
+ +
+ +
Everyone need a little Karma
+ +
+
+ + - + + \ No newline at end of file