diff --git a/css/style.css b/css/style.css index 5cb025cef..2aab21de1 100755 --- a/css/style.css +++ b/css/style.css @@ -4,6 +4,10 @@ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + background-image: url("img/first-background.jpg"); + + + } /** @@ -17,3 +21,203 @@ body { */ + +.nav-bar-grid { + display: grid; + grid-template-columns: repeat(2, 50%); + align-items: center; + width: 86%; + margin: 0 auto; + padding-top: 0.75rem; + padding-bottom: 0.30rem; +} + +.nav-bar { + display: flex; + justify-content: end; + gap: 6%; + width: 98%; + font-size: 0.9rem; + padding-top: 3px; +} + +a { + text-decoration: none; + color: black; +} + +a:hover { +color: #F15B2A; +} + + +/* Hero section */ +.background-img { + background-image: url("/HTML-CSS-Module-Project/img/first-background.jpg"); + height: 110vh; + width: 100%; + background-position: center; + background-size: cover; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + color: white; + +} + + +.all-text { + text-align: center; + font-weight: ; + +} +.introduction { + color:rgb(255, 240, 247); + font-size: 4.6vw; + font-weight: 100; + +} + +.introduction-2 { + color: white; + font-size: 2.5vw; + font-weight: 100; + +} + + +.btn { + margin-top: 4%; + padding: 16px 32px; + border-radius: 8px; + background-color: #F15B2A; + border: none; + font-size: 1.6vw; + font-weight: 100; + +} +h1 { + text-align: center; + font-size: 3.8vw ; + font-weight: 300; + padding-top: 80px; +} + +.devices-coffee-refill-section { + display: flex; + justify-content: space-evenly; +} + +.icons-description { + display: flex; + justify-content: space-evenly; + font-size: 150%; + font-weight: +} +.icons-description { + margin-left: 30px; + +} +.boost-your- { + margin-right: 30px; +} +.line { + width: 84%; + margin: 0 auto; + background-color: #b4bcc36a; + height: 0.1vw; + margin-top: 6rem; + +} +.join-us { + text-align: center; +} +.media-logo { + display: flex; + justify-content: center; + gap: 12px; + +} +.logo-s { + display: flex; + align-items: center; + justify-content: center; + border: 0.1vw solid #d0d7dd6a; + padding: 0.6rem 0.7rem; + border-radius: 112%; + transition: border 1.2s + +} +.kar-Mobility { + text-align: center; + padding-top: 1rem; + padding-bottom:5rem ; + color: #868e96; +} + +.container { + display: flex; + align-items:center; + background-color: #F15B2A; + margin-top: 10%; + /* display: grid; + grid-template-columns: 1fr 1fr; + background-color: #FCEFEB; */ + +} +.grid-for-extended { + display: grid; + grid-template-columns: auto 1fr; + background-color: #fcefeb; + justify-items: center; +} + +.text--ext:after, +.text--ext:before { + color: #f15b2a; +} + +.text--ext:before { + content: open-quote; + font-size: 130%; +} + +.text--ext:after { + content: close-quote; + font-size: 130%; +} + +.text--ext { + font-size: 2.4em; + text-align: center; + color: #495057; +} + +.flex-text-btn { + display: flex; + flex-direction: column; + width: 60%; + padding-top: 10%; +} + +.get-karma-today { + margin: 1.6rem auto; + color: white; + padding: 1rem 2rem; + border-radius: 8px; + text-align: center; + font-size: 1.6vw; + font-weight: 100; + transition: background-color 1.2s; +} + +.get-karma-today:hover, +.get-karma-today:active { + background-color: #f56e45; +} + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 3e742ef04..e48739e80 100755 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + @@ -14,6 +15,126 @@ + +
+ + + + +
+ + + +
+
+ Introducing Karma +

Bring WiFi with you, everywhere you go.

+ +
+ + +
+ +

Everyone needs a little Karma.

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

Internet for all devices

+

Boost your productivity

+

Pay as You Go          

+
+ + +
+ picture of a woman smiling while on her laptop +
+
+  Wherever I am, I just don't worry about my connection + anymore!  +
+ Get Karma today +
+
+
+

Join us on

+ + + +
© karma Mobility,inc
+ + diff --git a/level-2/grid.css b/level-2/grid.css new file mode 100644 index 000000000..248b60afb --- /dev/null +++ b/level-2/grid.css @@ -0,0 +1,14 @@ +/* .container { + display: grid; + grid-template-columns: auto 1fr; + background-color: #FCEFEB; + justify-items: center; + +} +.homepage-feature { + padding: 0% 10% 0% 20%; +} + +.title-2 { + color: greenyellow; +} */