From 2fe96585d2d50d7099796c6e575d7393eebbc3f4 Mon Sep 17 00:00:00 2001 From: bigbaby01 <64244437+bigbaby01@users.noreply.github.com> Date: Fri, 15 Jan 2021 11:24:36 +0200 Subject: [PATCH 1/2] Update index.html --- index.html | 95 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 83 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 876b59d64..d5d69b71e 100755 --- a/index.html +++ b/index.html @@ -1,21 +1,92 @@ + - - - Karma - - - - - - + + + Karma + + + + + + + + - - - + +
+ + +
+
+

introducing kama

+

Bring wi-fi with you, everywhere you go

+ +
+
+ +
+
+

Everyone need a little karma

+
+
+
+ + icon-devices + +

Internet for all devices

+
+
+ + icon-coffee + +

Boost your productivity

+
+
+ + icon-refill + +

Pay as you go

+
+
+
+
+
+ + + + + + + From bdbd554bacb04494a5fa384a72ba40377e645775 Mon Sep 17 00:00:00 2001 From: bigbaby01 <64244437+bigbaby01@users.noreply.github.com> Date: Fri, 15 Jan 2021 11:26:09 +0200 Subject: [PATCH 2/2] Update style.css --- css/style.css | 267 +++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 251 insertions(+), 16 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..220ed5a5e 100755 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,254 @@ - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - -body { - font-family: 'Roboto', sans-serif; + 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' - */ - + margin: 0; + padding: 0; + font-size: 1.4vw; + } + + /** + * 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' + */ + + * { + padding: 0; + margin: 0; + box-sizing: border-box; + } + /* nav bars section */ + .menu_list { + width: 100%; + height: 80px; + } + img[alt="karma-logo"] { + width: 26px; + margin: 1em 2em; + } + .menu_list ul { + float: right; + margin-right: 3em; + } + .menu_list > ul li { + display: inline-block; + line-height: 80px; + text-decoration-line: none; + list-style: none; + margin: 0 5px; + } + .menu_list ul li a { + padding-right: 0.7em; + text-transform: capitalize; + color: gray; + text-decoration-line: none; + } + .menu_list li:first-child { + font-weight: bold; + } + .menu_list a:hover { + color: orangered; + transition: 0.5s; + } + /* bar icon font awesome */ + .ba_icon { + margin-top: 23px; + margin-right: 19px; + font-size: 4em; + color: orangered; + float: right; + cursor: pointer; + display: none; + } + #responsive_bar { + display: none; + } + /* introduction section karma */ + .hero_style { + background-image: url(../img/first-background.jpg); + background-repeat: no-repeat; + background-size: 100%; + height: 35em; + line-height: 4em; + } + .introducing_Kama { + color: white; + width: auto; + padding-top: 14%; + display: flex; + flex-direction: column; + align-items: center; + } + .introducing_Kama p { + font-size: 3.5em; + text-transform: capitalize; + width: 40%; + text-align: center; + font-family: inherit; + } + .introducing_Kama .second { + font-size: 1.2em; + text-transform: none; + } + + .introducing_Kama button { + padding: 0.8rem; + background-color: orangered; + border: none; + border-radius: 5px; + font-size: 20px; + cursor: pointer; + margin-top: 1.3em; + line-height: normal; + } + .introducing_Kama button:hover { + background-color: orange; + font-weight: bold; + transition: 0.5s; + } + /* features section */ + .features { + width: 100%; + } + .description { + min-width: 100%; + display: flex; + justify-content: center; + flex-wrap: wrap; + text-align: center; + } + .description div { + padding: 2.4em; + } + .images img { + width: 52%; + } + .imagesrefill img { + width: 80%; + } + header h1 { + text-align: center; + font-size: 2em; + font-weight: 100; + } + .images p, + .imagesrefill p { + font-size: 1.2em; + } + + hr { + width: 70%; + margin: auto; + } + + /* footer of the page */ + footer { + text-align: center; + margin-bottom: 4em; + } + .social_icon img { + max-width: 3%; + border: 1px solid lightgray; + border-radius: 50%; + padding: 0.4em; + margin-right: 0.5em; + } + footer p { + padding: 1em; + } + footer div + p { + color: lightgray; + text-transform: capitalize; + } + /* bars icon */ + .bars_icon { + float: right; + margin: 1em; + } + .bars_icon .fas { + font-size: 28px; + color: orangered; + cursor: pointer; + line-height: 70px; + display: none; + } + + /* responsiveness */ + @media (max-width: 952px) { + .logo { + font-size: 30px; + padding-left: 50px; + } + .menu_list ul li a { + font-size: 16px; + } + } + @media (max-width: 858px) { + .ba_icon { + display: block; + } + ul { + position: fixed; + width: 100%; + height: 100vh; + background: orange; + top: 80px; + left: -100%; + text-align: center; + transition: all 0.5s; + } + .menu_list ul li { + display: block; + margin: 50px 0; + line-height: 30px; + } + .menu_list ul li a { + font-size: 20px; + } + #responsive_bar:checked ~ ul { + left: 0; + } + .introducing_Kama { + padding-top: 0em; + } + .introducing_Kama p { + font-size: 4em; + line-height: 1.1em; + margin-top: 1em; + } + .introducing_Kama button { + padding: 0.8em; + font-size: 0.7rem; + } + .introducing_Kama .second { + font-size: 2.6em; + line-height: 1.2em; + } + /* features section */ + header h1 { + font-size: 4em; + width: 54%; + margin: auto; + } + .imagesrefill img { + width: 54%; + } + .images p, + .imagesrefill p { + font-size: 2.6em; + } + /* footer */ + footer p { + font-size: 2.6em; + } + .social_icon img { + max-width: 7%; + } + } +