From a392fe729da2bbbd06336ab1db3c24919baf844e Mon Sep 17 00:00:00 2001 From: ltteh <67978926+ltteh@users.noreply.github.com> Date: Wed, 18 Nov 2020 20:07:17 +0000 Subject: [PATCH 1/2] Edited HTML and CSS using Flex --- .DS_Store | Bin 0 -> 6148 bytes css/style.css | 364 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 185 ++++++++++++++++++++++++- 3 files changed, 543 insertions(+), 6 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..de6bbe050da324fe42937b012c92f05a0c297ff2 GIT binary patch literal 6148 zcmeH~J!%6%427R!7lt%jx}3%b$PET#pTHLgIFQEJ5R=q%^gR7ES*H$5cmnB-G%I%Z zD|S`@Z2$T80!#olbXV*=%*>dtaK;_?uhYl%a=X5>;#J@&VrHyNnC;iLL0pQvfVyTmjO&;ssLc!1UOG})p;=82 zR;?Ceh}WZ?+UmMqI#RP8R>OzYoz15hnq@nzF`-!xQ4j$Um=RcIKKc27r2jVm&svm< zfC&6E0=7P!4tu^-ovjbA=k?dB`g+i*aXG_}p8zI)6mRKa+;6_1_R^8c3Qa!(fk8n8 H{*=HsUYrq< literal 0 HcmV?d00001 diff --git a/css/style.css b/css/style.css index 5cb025cef..2ec15bf9f 100755 --- a/css/style.css +++ b/css/style.css @@ -4,8 +4,9 @@ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + display: flex; + flex-direction: column; } - /** * Add your custom styles below * @@ -16,4 +17,365 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +/* header, main, .cases, footer { + display: flex; + flex-direction: column; +} */ + +ul { + list-style: none; + display: flex; +} + +.content { + padding: 0 0.938rem; + margin: 0 auto; + min-width: 37.5rem; + display: flex; + flex-direction: column; +} + +/* top nav*/ +header .content { + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.top-nav li { + margin-left: 1rem; + color: #838994; + font-size: 1.04rem; +} + +.top-nav .active{ + color: #4c5058; + font-weight: 500; +} + +.top-nav li:hover { + cursor: pointer; + color: #333333; +} + +/* main */ +main { + background-image: url('../img/first-background.jpg'); + background-position: center bottom; + background-repeat: no-repeat; + background-size: cover; + height: 45.938rem; + overflow: auto; +} + +main h1, +main h3 { + color: white; + text-align: center; + font-weight: 300; +} + +main h1 { + margin-top: 17.5rem; + font-size: 3rem; +} + +button { + width: 9.688rem; + background-color: #f15a29; + border-color: #f15a29; + text-shadow: none; + border-style: none; + border-radius: 4px; + padding: 1rem 1.5rem; + color: white; + font-size: 1.125rem; + text-align: center; +} +button:hover { + background-color: #d9400e; + border-color: #cf3d0e; + cursor: pointer; +} + +.button { + display: flex; + justify-content: center; +} + +/* cases */ +/*.cases .content { + display: flex; + justify-content: center; +}*/ +.cases .content h2 { + font-size: 2.75rem; + margin: 1.625rem 0 3.125rem; + font-weight: 300; + text-align: center; +} + +.devices { + justify-content: space-evenly; + text-align: center; +} + +/* footer */ +footer .content { + background-color: #fff; + text-align: center; + align-items: center; +} + +.bottom-nav li { + border-radius: 1.25rem; + width: 2.5rem; + height: 2.5rem; + border: 1px solid #eaebec; + display: flex; + flex-direction: column; + justify-content: center; +} + +footer .bottom-nav li:hover { + cursor: pointer; +} + +footer .twitter { + color: #55acee; +} + +footer .facebook { + color: #4c66a4; +} + +footer .instagram { + color: #3f729b; +} + + +footer .copy { + font-size: 0.9rem; + font-weight: 300; + color: #838994; +} + +@media (min-width: 48rem) { + .content { + width: 46rem; + } +} +@media (min-width: 62rem) { + .content { + width: 60rem; + } +} +@media (min-width: 75rem) { + .content { + width: 60%; + } +} +/** + * Navigation Section + */ +/* .top-navigation { + background-color: #fff; + position: fixed; + width: 100%; + border-bottom: 1px solid #DDD; + z-index: 9999; +} +.top-navigation > .content { + height: 4.375rem; +} +.top-navigation .logo { + height: 4.375rem; +} +.top-navigation .links { + float: right; + color: #838994; + font-size: 1.04rem; + margin-top: 1.7rem; +} +.top-navigation .links li { + display: inline-block; + margin-left: 1.563rem; +} +.top-navigation .links li.active { + color: #4c5058; + font-weight: 500; +} +.top-navigation .links li:hover { + cursor: pointer; + color: #333333; +} */ + +/** + * Introduction Section + */ +/* .introduction { + background-image: url('../img/first-background.jpg'); + background-position: center bottom; + background-repeat: no-repeat; + background-size: cover; + height: 45.938rem; + overflow: auto; +} +.introduction h1, +.introduction h3 { + color: white; + text-align: center; + font-weight: 300; +} +.introduction h1 { + margin-top: 17.5rem; + font-size: 3.125rem; +} +.introduction h3 { + margin-top: 1.25rem; + font-size: 1.563rem; +} */ +/** + * The buttons + */ +/* .introduction .buttons { + color: white; + text-align: center; + margin-top: 1.563rem; +} +.introduction .half { + width: 49%; + padding: 0 0.938rem; + display: inline-block; + vertical-align: bottom; + font-size: 1.125rem; + line-height: 1.2; +} */ + +/** + * The Three Case Images + */ +/* .cases { + background-color: #fff; + overflow: hidden; + padding-bottom: 5rem; +} +.cases .content { + margin-top: 7.875rem; + padding: none; + color: #1d1e21; + text-align: center; +} +.cases h2 { + font-size: 2.75rem; + margin: 1.625rem 0 3.125rem; + font-weight: 300; +} +.cases .devices > li { + width: 33.3333333%; + float:left; +} +.cases .devices h3 { + font-weight: 400; + font-size: 1.563rem; + margin: 2.5rem 0px 1.875rem; +} +.cases .devices p { + font-weight: 300; + font-size: 1.313rem; +} */ + +/** + * Footer + */ +/* .social { + background-color: #fff; + overflow: auto; + padding-bottom: 9.375rem; + text-align: center; +} +.social hr { + border: 0; + border-top: 1px solid #eaebec; + margin: 1.313rem 0; +} +.social .icons > li { + 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; +} +.social .icons > li:hover { + cursor: pointer; +} +.social .twitter { + color: #55acee; +} +.social .facebook { + color: #4c66a4; +} +.social .instagram { + color: #3f729b; +} +.social .copy { + font-size: 0.9rem; + font-weight: 300; + color: #838994; +} */ + +/** + * Responsive Design + */ +/* @media (min-width: 48rem) { + .content { + width: 46rem; + } +} +@media (min-width: 62rem) { + .content { + width: 60rem; + } +} +@media (min-width: 75rem) { + .content { + width: 60%; + } +} */ + +/* Chrome, Safari, Opera */ +/* @-webkit-keyframes bounce { + 0%, 100% {margin-top: 0px;} + 50% {margin-top: 2rem;} +} */ +/* Standard syntax */ +/* @keyframes bounce { + 0%, 100% {margin-top: 0px;} + 50% {margin-top: 2rem;} +} */ + + +/** + * button + */ +/* button { + width: 9.688rem; + background-color: #f15a29; + border-color: #f15a29; + text-shadow: none; + border-style: none; + border-radius: 4px; + padding: 1rem 1.5rem; + color: white; + font-size: 1.125rem; +} +button:hover { + background-color: #d9400e; + border-color: #cf3d0e; + cursor: pointer; +} + */ diff --git a/index.html b/index.html index 876b59d64..d5328bb2a 100755 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -9,13 +10,187 @@ - + + + + + - - - +
+
+ + +
+ +
+ + +
+
+

+ Introducing Karma +

+

+ Bring WiFi with you, everywhere you go, +

+
+ +
+
+
+ +
+
+

+ Everyone needs a little Karma +

+
    +
  • + Internet for all devices +
    + Internet for all devices +
    +
    • +
  • + Boost your productivity +
    + Boost your productivity +
    +
    • +
  • + Pay as You Go +
    + Pay as You Go +
    +
    • +
+
+
+ + + + - + + + + \ No newline at end of file From 17224ef5e15909e82d3f3e754e4bfab59596cdf0 Mon Sep 17 00:00:00 2001 From: ltteh <67978926+ltteh@users.noreply.github.com> Date: Wed, 18 Nov 2020 20:09:42 +0000 Subject: [PATCH 2/2] Edited background image link --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 2ec15bf9f..523bb4c5d 100755 --- a/css/style.css +++ b/css/style.css @@ -60,7 +60,7 @@ header .content { /* main */ main { - background-image: url('../img/first-background.jpg'); + background-image: url('img/first-background.jpg'); background-position: center bottom; background-repeat: no-repeat; background-size: cover;