diff --git a/css/style.css b/css/style.css index 5cb025cef..c37c09650 100755 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,123 @@ - - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - -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' - */ - - + /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ + + body { + font-family: 'Roboto', sans-serif; + -webkit-font-smoothing: antialiased; + } + + .Flex-content { + margin-top: 20px; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + text-align: center; + padding: 0 50px; + justify-content: center; + justify-content: space-between; + } + + .Flex-content>ul { + width: 35vw; + display: flex; + flex-direction: row; + justify-content: space-between; + list-style-type: none; + margin-right: 200px; + } + + .Flex-content>img { + display: flex; + max-width: 100%; + margin-left: 300px; + width: 26; + max-width: 100%; + height: auto; + } + + .content>active { + font-style: italic; + font-weight: bold; + } + + .content { + display: flex; + position: relative; + justify-content: center; + align-items: center; + } + + .text-block { + display: flex; + position: absolute; + flex-direction: column; + color: white; + justify-content: center; + } + + .buttons { + background-color: #F15A29; + border-color: #F15A29; + text-shadow: none; + border-style: none; + border-radius: 4px; + padding: 1rem 1.5rem; + font-size: 1.2rem; + display: flex; + justify-content: center; + align-items: center; + } + + .cases-content h2 { + display: flex; + justify-content: center; + align-items: center; + margin-top: 100px; + } + + .devices { + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; + justify-content: space-around; + list-style-type: none; + margin-top: 50px; + text-align: center; + } + + .social-content { + font-style: normal; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-size: 15px; + } + + .icons { + list-style-type: none; + justify-content: space-around; + align-items: center; + color: lightskyblue; + border-radius: 1.25rem; + width: 2.5rem; + height: 2.5rem; + display: inline-block; + margin: 1.25rem 5px; + border: 1px solid #eaebec; + padding: 0.625rem 0; + text-align: center; + flex-direction: row; + } + + .back-image { + width: 100%; + height: auto; + } + /* 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' */ \ No newline at end of file diff --git a/index.html b/index.html index 876b59d64..c39cc2bc4 100755 --- a/index.html +++ b/index.html @@ -1,7 +1,9 @@ + + Karma @@ -9,13 +11,87 @@ - + + + +
+ Back Image +
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+
+ +
+
+
+ +
+
+

Everyone needs a little Karma.

+ +
+
+ + - + + \ No newline at end of file