From 4fcfe0e824d73cc66a04d1aefd921dc8743099d1 Mon Sep 17 00:00:00 2001
From: FranklinPTorres <105072367+FranklinPTorres@users.noreply.github.com>
Date: Fri, 1 Jul 2022 18:43:43 +0100
Subject: [PATCH 1/3] Karma Website
---
.vscode/settings.json | 3 +
css/style.css | 166 +++++++++++++++++++++++++++++++++++++++++-
index.html | 100 ++++++++++++++++++++++++-
3 files changed, 264 insertions(+), 5 deletions(-)
create mode 100644 .vscode/settings.json
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..955a07379 100755
--- a/css/style.css
+++ b/css/style.css
@@ -10,10 +10,174 @@ body {
* Add your custom styles below
*
* Remember:
- * - Be organised, use comments and separate your styles into meaningful chunks
+ * - Be organized, 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'
*/
+*{
+ margin: 0px;
+ padding: 0px;
+ box-sizing: border-box;
+
+
+}
+
+nav{
+ width: 100%;
+ overflow: auto;
+ background: white;
+ padding: 0px 100px;
+
+}
+
+.logo{
+ width: 35px;
+ height: 35px;
+ margin-left: 80px;
+ margin-top: 30px;
+}
+
+nav ul{
+ float: right;
+ padding-bottom: 20px;
+}
+
+nav ul li{
+ display: inline-block;
+ list-style: none;
+
+}
+
+nav ul li a{
+ color: gray;
+ text-decoration: none;
+ font-size: 22px;
+ padding: 0px 32px;
+
+}
+
+nav ul li a:hover{
+ color: orangered;
+}
+
+.meet-karma{
+ color: black;
+}
+
+.image img{
+ width: 100%;
+ height: 0px auto;
+
+}
+
+.content{
+ position: center;
+}
+
+header{
+background-image: url(../img/first-background.jpg);
+height: 100%;
+width: 100%;
+padding: 300px;
+background-size: cover;
+color: white;
+text-align: center;
+}
+
+header h1{
+ font-size: 80px;
+ margin-top: 0px;
+ font-weight: 100;
+
+}
+
+header h2{
+ font-size: 50px;
+ margin: 60px 20px;
+ font-weight: 100;
+
+}
+
+button{
+ width: 200px;
+ padding: 15px 0;
+ text-align: center;
+ margin: 20px 10px;
+ border-radius: 15px;
+ background-color: orangered;
+ font-size: 28px;
+}
+
+section{
+ background-color: white;
+ margin: 100px 100px;
+}
+
+.section-text{
+ text-align: center;
+ font-size: 70px;
+ font-weight: 100;
+}
+
+.image1{
+ width: 160px;
+ height: 160px;
+}
+
+.image2 {
+ width: 160px;
+ height: 160px;
+}
+
+.image3 {
+ width: 160px;
+ height: 160px;
+}
+
+section{
+ display: flex;
+ justify-content: space-around;
+}
+
+.boxes{
+ margin: 0 70px;
+
+}
+
+
+footer{
+ background-color:whitesmoke;
+ padding: 10% ;
+ text-align: center;
+ font-size: 40px;
+
+}
+
+
+ /* Social media */
+
+.social-media{
+ display:flex;
+ padding: 20px ;
+ border-radius: 100px;
+}
+
+.twitter{
+ background-color: white;
+}
+
+.facebook {
+ background-color: white;
+}
+
+.instagram {
+ background-color: white;
+}
+
+.inc{
+ font-size: 22px;
+ color: gray;
+}
diff --git a/index.html b/index.html
index 3e742ef04..aa13fa162 100755
--- a/index.html
+++ b/index.html
@@ -9,11 +9,103 @@
+
+
+
+
+
+ Introducing Karma
+ Bring WiFi with you, everywhere you go.
+
+
+
+
+
+
+
+ Everyone Need a Little Karma
+
+
+
+
+
Internet for all devices
+
+
+
Boost your productivity
+
+
+
Pay as You Go
+