diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..87eaa0bf7 Binary files /dev/null and b/.DS_Store differ 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..0310d4ea8 100755 --- a/css/style.css +++ b/css/style.css @@ -4,6 +4,9 @@ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + display: block; + margin: auto; + width: 10s0%; } /** @@ -16,4 +19,382 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +*{ + box-sizing: border-box; +} + + +header{ + width: 100%; + height: 5em; + border-bottom: 0.01rem solid rgb(121, 139, 145); + display:flex; + justify-content: space-around; + padding-top: 1rem; +} + +.img{ + height: 5rem; + padding-bottom: 2rem; +} +nav{ + width: 45%; +} + +nav ul{ + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content:space-around; + list-style: none; + gap: 1rem; +} + + +.navbold{ +font-weight: 900; +} + +nav ul li a{ + width: auto; + text-decoration: none; + color:rgb(121, 139, 145); +} + +a:hover{ + color: rgb(243, 112, 56); +} +/* End of Header & navs */ + +/* Section- first-div -background image*/ +section { + width:100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.container1 { + width: 100%; + height: 30rem; + display: flex; + align-items: center; + justify-content:center; + text-align: center; + background: url(/img/first-background.jpg); + background-size:cover; + background-position:center; + background-repeat: no-repeat; + margin-bottom: 2rem; +} + +main img{ + height: 100%; +} + +.container1 div{ + color:white; + display:block; + align-items: auto; + justify-content: center; +} + +.container1 h1{ + font-size: 4rem; + font-weight: 350; +} + +.container1 p{ +font-size: 2.5rem; +font-weight: 200; +} + +button{ + background-color: rgb(243, 112, 56); + padding: 1.2rem 2.5rem; + border: 0; + border-radius: .3rem; + font-size: 16.5; + font-weight: 200rem; + margin-bottom: 5rem; +} + +/* 3rd section - 2nd div -with Icons */ +.subtittle{ + font-size: 2.5rem; + font-weight: 200; + color: rgb(69, 57, 57); +} +.container2{ + width: 80%; + /* height: 40rem; */ + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + margin-bottom: 3rem; +} +.container2 div{ + width: 70%; + /* height: 100%; */ + text-align: center; + font-size: 1.4rem; + font-weight: 200; +} + +.container2 div img{ + width: 40%; + margin: auto; +} + +div p{ + /* width: 100% */ + font-size: 75%; +} + +.newBlock{ + background-color: rgb(224, 99, 58, 0.1); + width: 100%; + height: auto; + display: flex; + flex-direction: row; +} + +.text{ + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + width: 25%; + height: auto; + text-align: center; + font-family: 'Roboto'; + font-style: italic; + font-size: 40px; + line-height: 36px; + margin: auto; + font-weight: 400; + color: #434242; + +} + + + +.text .quotes{ + color: #E0633A; + font-size: 37px; +} + +.buttonK { + background-color: #E0633A; + font-size: 20px; + width: 13rem; + padding: 0.5rem; + border-radius: 0.5rem; + margin: 0 0 0 6rem; +} + +.buttonK:hover { +background-color: rgb(97, 40, 19); +} + +.buttonK a{ + text-decoration: none; + color: #FFFFFF; +} + + + +.newBlock img{ + width: 45%; + height: auto; +} + +/* ***************************** */ +/* Store Form Section + img */ +.main{ + width: 100%; + height: 45rem; + display: flex; +} + +.section{ + width: 50%; + height: 45rem; +} + +.orderKarma{ + width: 85%; + font-size: 35px; + font-weight: 500; + line-height: 59px; + letter-spacing: 0em; + text-align: left; + color: #DE6E49; + margin: 1rem 0 0 0; +} + +.form{ + width: 85%; + height: 35rem; + margin: auto; + display: flex; + flex-direction: column; + row-gap: 1rem; + font-size: 1.3rem; +} + +.form input{ + border: 0.1rem solid black; + border-radius: 0.25rem; +} +.form label{ + color: rgb(80, 78, 78); +} + +.one{ + display: flex; + flex-direction: row; + column-gap: 2rem; +} +#name{ + display: flex; + flex-direction: column; + width: 17rem; + height: 2.2rem; +} +#surname{ + display: flex; + flex-direction: column; + width: 17rem; + height: 2.2rem; +} + +#address{ + display: flex; + flex-direction: column; + width: 36rem; + height: 2.2rem; +} + +#address2{ + display: flex; + flex-direction: column; + width: 36rem; + height: 2.2rem; +} + +.four{ + display: flex; + flex-direction: row; + column-gap: 3rem; +} +#city{ + display: flex; + flex-direction: column; + width: 17rem; + height: 2.2rem; + +} +#pc{ + display: flex; + flex-direction: column; + width: 16rem; + height: 2.2rem; +} + + +.five{ + margin: 1rem 0 0 0; + font-size: 1.2rem; + color: rgb(80, 78, 78); + /* padding: 1rem 0; */ +} + +fieldset{ + margin: 0; + padding: 1rem 0; + border: 0; +} + + +.six{ + display: flex; + flex-direction: row; + column-gap: 1rem; + font-size: 1.2rem; + color: rgb(80, 78, 78); + +} +.six :first-child{ + color: #DE6E49; +} +.checkbox{ + background-color: #DE6E49; + width: 1.1rem; + height: 1.1rem; + margin: 0; +} + + +.seven input{ + background-color: #DE6E49; + margin: 2rem 0 0 0; + width: 15rem; + height: 3.5rem; + border: 0; + border-radius: 0.25rem; + font-size: 1.2rem; + color: #FFFFFF; +} + +.photo{ + width: 50%; + height: 45rem; + /* margin: auto; */ + background: url("/level-2/store-image_by-andrew-neel-unsplash.jpg"); + background-size: cover; + background-position: center; +} + +hr{ + color:rgb(59, 50, 50); + width: 100%; + margin: 0; +} + +/* Footer */ +footer{ + text-align: center; + margin-top: 4rem; +} + +footer ul{ + list-style: none; + display: flex; + justify-content: center; + gap: 1.2rem; + padding: 1rem 0; +} + + footer ul li{ + padding: 1rem; + border: 0.1rem solid rgb(201, 193, 193); + border-radius: 50%; + + } + footer img{ + width: 1.3rem; + height: 1.3rem; + display: block; +} + + footer .Join{ + color:black; + font-weight: 400; + } +footer p{ + color:rgb(181, 179, 179) +} \ No newline at end of file diff --git a/img/facebook-icon.svg b/img/facebook-icon.svg index b3e551475..bbd1c8376 100644 --- a/img/facebook-icon.svg +++ b/img/facebook-icon.svg @@ -1,4 +1,4 @@ - + diff --git a/img/instagram-icon.svg b/img/instagram-icon.svg index 56e207086..562ac33f4 100644 --- a/img/instagram-icon.svg +++ b/img/instagram-icon.svg @@ -1,4 +1,4 @@ - + diff --git a/img/twitter-icon.svg b/img/twitter-icon.svg index a480cdbec..89fa66027 100644 --- a/img/twitter-icon.svg +++ b/img/twitter-icon.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/index.html b/index.html old mode 100755 new mode 100644 index 3e742ef04..0aaf058c0 --- a/index.html +++ b/index.html @@ -7,13 +7,62 @@ - - + + - - - - - +
+ logo of karma + +
+
+
+
+

Introducing Karma

+

Bring WIFI with you, everywhereyou go.

+ +
+
+

Everyone needs a little Karma

+
+
+ deviceIcon +

Internet for all devices

+
+
+ coffeeIcon +

Boost your productivity

+
+
+ refillIcon +

Pay as you go

+
+
+
+
+ homepage-feature +
+

“wherever I am, I just don't worry about my connection anymore!”

+

Get Karma Today

+
+
+
+ - + diff --git a/store.html b/store.html new file mode 100644 index 000000000..d00b1267d --- /dev/null +++ b/store.html @@ -0,0 +1,110 @@ + + + + + + + Store + + + + +
+ logo of karma + +
+
+
+

Order your Karma wifi device today!

+
+
+
+ + +
+ +
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ select a color + + + + + + +
+
+ +
+ + +
+
+ +
+
+
+ +
+ +
+ +
+ + +
+ + + \ No newline at end of file