From ff35882bd80ae2c61566ca49a5c5a828273b07a9 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Thu, 23 Jun 2022 16:26:26 +0300 Subject: [PATCH 01/51] html doc --- index.html | 270 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 270 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 00000000..262938da --- /dev/null +++ b/index.html @@ -0,0 +1,270 @@ + + + + + + + + WikiCap - Home of Crypto + + + +
+ + + +
+
+

The Simplest Way to Track Multiple Currencies

+

WikiCap allows you to expolore the crypto world easily. Trust WikiCap to be your crypto market + partner +

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

Current market

+
+
    +
  • Market
    • +
  • Coin
    • +
  • Last Price
    • +
  • 24 hour change
    • +
  • Market capitalization
    • +
+ +
+
+
+ +
+
+ 1 + 2 + 3 + 4 + 5 +
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+
+
+ +
+
+
+

Services that we
continue to improve

+

The best choice for crypto market information and news, with
the various super friendly services + we offer

+ +
+
+
+ security icon +
+

Security guarantee

+

Security is guaranteed, we always maintain privacy and maintain the quality of our products +

+
+
+
+ +
+

Transparent

+

We provide transparent services, our systems and ecosystems can be monitored always

+
+
+
+ love icon +
+

User Convenience

+

Any service we provide to users is our best experience or services for our beloved customers +

+
+
+
+
+
+
+ +
+
+

Fantastic crypo coin
prices on WikiCap

+

Here are some fanstatic prices on the
hottest coins,what are you waiting for start investing now +

+
+
+
Doge
+
Bitcoin
+
Etherium
+
Binance
+
Tether
+
Dash
+
Polydot
+
+
+
+

Start investing your
crypto coins using WikiCap

+

Take the first step for a future without limits

+
+ +
+
+
+ + + + + \ No newline at end of file From 979deb64bddb527a7af7dbf8d16bf1fd918c74ed Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Thu, 23 Jun 2022 16:37:31 +0300 Subject: [PATCH 02/51] link css file to index.html --- index.html | 1 + src/style.css | 0 2 files changed, 1 insertion(+) create mode 100644 src/style.css diff --git a/index.html b/index.html index 262938da..56cf25b5 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + WikiCap - Home of Crypto diff --git a/src/style.css b/src/style.css new file mode 100644 index 00000000..e69de29b From 76d9a2d7c836638a730050c719628cfd4307c8b1 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Thu, 23 Jun 2022 16:49:39 +0300 Subject: [PATCH 03/51] add linear gradient as background image --- .vscode/settings.json | 3 +++ src/style.css | 8 ++++++++ 2 files changed, 11 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/src/style.css b/src/style.css index e69de29b..e7e30fcc 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,8 @@ +* { + margin: 0; + box-sizing: border-box; +} + +body{ + background-image: linear-gradient(to right,#121117,#181820); +} \ No newline at end of file From b34e52460a751470851667ffb90015393d0afebb Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Thu, 23 Jun 2022 20:53:12 +0300 Subject: [PATCH 04/51] Add new claases to navigation section --- index.html | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 56cf25b5..df389361 100644 --- a/index.html +++ b/index.html @@ -12,14 +12,19 @@
-
diff --git a/src/style.css b/src/style.css index 3da7b4cb..1e571789 100644 --- a/src/style.css +++ b/src/style.css @@ -63,22 +63,48 @@ a:hover { .container .landing-text{ position: relative; - max-width: 650px; + max-width: 30%; + max-height: 60%; } .container .landing-images{ display: flex; - width: 600px; + width: 70%; + height: 100vh; justify-content: flex-end; padding-right: 50px; margin-top: 50px; } -.container .landing-images img{ - max-width: 350px; + +.circle-image{ + border-radius: 50%; + border: 5px solid #181820; + position: absolute; + width: 300px; + height: 300px; + top:100px; + bottom: 100px; + left: 35%; } +.small-circle{ + border: 5px solid #181820; + position: relative; + border-radius: 50%; + width: 100px; + height: 100px; +} +.top{ + left: 10px; + top: 50px; +} + +.bottom{ + top: 250px; + left: 20px; +} From 6eff4c60ec86ab283161cdbc48741edaa6d298da Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 07:54:19 +0300 Subject: [PATCH 17/51] update styling --- src/style.css | 36 ++++++++++++++---------------------- 1 file changed, 14 insertions(+), 22 deletions(-) diff --git a/src/style.css b/src/style.css index 1e571789..b9700701 100644 --- a/src/style.css +++ b/src/style.css @@ -31,7 +31,7 @@ nav { } .nav>.navbar { - float:right; + float: right; display: inline; font-size: 20px; margin-right: 15%; @@ -53,7 +53,7 @@ a:hover { color: #fc6a03; } -.container{ +.container { display: flex; width: 100%; justify-content: space-between; @@ -61,13 +61,13 @@ a:hover { position: relative; } -.container .landing-text{ +.container .landing-text { position: relative; max-width: 30%; max-height: 60%; } -.container .landing-images{ +.container .landing-images { display: flex; width: 70%; height: 100vh; @@ -77,33 +77,28 @@ a:hover { } -.circle-image{ +.circle-image { border-radius: 50%; border: 5px solid #181820; position: absolute; - width: 300px; - height: 300px; - top:100px; + width: 350px; + height: 350px; + top: 100px; bottom: 100px; left: 35%; } -.small-circle{ +.small-circle { border: 5px solid #181820; position: relative; border-radius: 50%; - width: 100px; - height: 100px; -} - -.top{ - left: 10px; - top: 50px; + width: 150px; + height: 150px; } -.bottom{ - top: 250px; - left: 20px; +.bottom { + right: 20px; + top: 300px; } @@ -155,9 +150,6 @@ a:hover { - - - From e787561583b6b89704b1756845fb81de2b46bfb3 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 08:38:31 +0300 Subject: [PATCH 18/51] styling --- index.html | 2 +- src/style.css | 33 +++++++++++++++++++++++++-------- 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index a9c32f51..a390311e 100644 --- a/index.html +++ b/index.html @@ -42,7 +42,7 @@
-

The Simplest Way to Track Multiple Currencies

+

The Simplest Way to track
Multiple Currencies

WikiCap allows you to expolore the crypto world easily. Trust WikiCap to be your crypto market partner

diff --git a/src/style.css b/src/style.css index b9700701..1dae6854 100644 --- a/src/style.css +++ b/src/style.css @@ -56,20 +56,37 @@ a:hover { .container { display: flex; width: 100%; - justify-content: space-between; align-items: center; position: relative; + height: 100vh; } -.container .landing-text { +.container > .landing-text { position: relative; - max-width: 30%; - max-height: 60%; + height: 100vh; + width: 40%; + align-items: center; + margin-top: 30%; +} + +.container .landing-text p{ + font-size: 1.5rem; + line-height: 1.5; +} +.container .landing-text p:first-child{ + font-weight: 700; + color: lightgrey; + font-family: 'Lato',sans-serif; +} + +.container .landing-text p:first-child span{ + color: #fc6a03; + font-size: 2.5rem } .container .landing-images { display: flex; - width: 70%; + width: 60%; height: 100vh; justify-content: flex-end; padding-right: 50px; @@ -85,7 +102,7 @@ a:hover { height: 350px; top: 100px; bottom: 100px; - left: 35%; + left: 45%; } .small-circle { @@ -96,9 +113,9 @@ a:hover { height: 150px; } + .bottom { - right: 20px; - top: 300px; + top: 250px; } From 8778e440953b95eec49aa9bd9a158ba77e782a88 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 09:54:31 +0300 Subject: [PATCH 19/51] style --- index.html | 2 +- src/style.css | 20 ++++++++++++++++---- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index a390311e..bab4eab9 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@

The Simplest Way to track
Multiple Currencies

-

WikiCap allows you to expolore the crypto world easily. Trust WikiCap to be your crypto market +

WikiCap allows you to explore the crypto world easily. Trust WikiCap to be your crypto market partner

diff --git a/src/style.css b/src/style.css index 1dae6854..528090b6 100644 --- a/src/style.css +++ b/src/style.css @@ -66,16 +66,19 @@ a:hover { height: 100vh; width: 40%; align-items: center; - margin-top: 30%; + margin-top: 25%; } .container .landing-text p{ - font-size: 1.5rem; - line-height: 1.5; + font-size: 1.3rem; + line-height: 1.5; + color: lightgrey; + padding: 0px 20px; + margin: 10px; + } .container .landing-text p:first-child{ font-weight: 700; - color: lightgrey; font-family: 'Lato',sans-serif; } @@ -84,6 +87,15 @@ a:hover { font-size: 2.5rem } +.container .landing-text button{ + width: 200px; + height: 50px; + margin: 20px 50px; + border-radius: 20px; + border: 0px; + font-size: 1em; +} + .container .landing-images { display: flex; width: 60%; From 318773170bac47f7843d618d16fef13c0b4ca9b8 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 13:13:32 +0300 Subject: [PATCH 20/51] add table where api data for market prices will be populated --- index.html | 37 ++++++++++++++++++++++++------------- src/style.css | 1 + 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index bab4eab9..a856fb88 100644 --- a/index.html +++ b/index.html @@ -49,9 +49,12 @@
- satoshi_nft - satoshi_nft - satoshi_img + satoshi_nft + satoshi_nft + satoshi_img
@@ -60,17 +63,25 @@
-

Current market

-
-
    -
  • Market
    • -
  • Coin
    • -
  • Last Price
    • -
  • 24 hour change
    • -
  • Market capitalization
    • -
+
+

Current market

+
-
+ + + + + + + + + + + + + + +
MarketCoinLast price24 hour changeChartMarket capitalization
diff --git a/src/style.css b/src/style.css index 528090b6..692672de 100644 --- a/src/style.css +++ b/src/style.css @@ -130,6 +130,7 @@ a:hover { top: 250px; } +/* Markets Section */ From 9ea3bda8e9058732b6da0f404482583faca5ea93 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 13:15:11 +0300 Subject: [PATCH 21/51] change element holding current market header from div to header --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a856fb88..b4c3429a 100644 --- a/index.html +++ b/index.html @@ -63,9 +63,9 @@
-
+

Current market

-
+ From fed50dab74834115c7ed2b4f318534509e60eabd Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 13:32:02 +0300 Subject: [PATCH 22/51] table to host api data --- index.html | 4 ++-- src/style.css | 7 +++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b4c3429a..cfa487be 100644 --- a/index.html +++ b/index.html @@ -62,12 +62,12 @@
-
+

Current market

-
+
diff --git a/src/style.css b/src/style.css index 692672de..ebf958c2 100644 --- a/src/style.css +++ b/src/style.css @@ -131,6 +131,13 @@ a:hover { } /* Markets Section */ +#markets .markets-container h2{ + padding: 30px; + font-size: 2.5rem; + color: #fc6a03; +} + + From 1f5c13d88081becee8554307678b58c7210b95cb Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 15:34:26 +0300 Subject: [PATCH 23/51] update on the crypto pricing table styling --- src/style.css | 43 ++++++++++++++++++++++++------------------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/src/style.css b/src/style.css index ebf958c2..d4ba75e7 100644 --- a/src/style.css +++ b/src/style.css @@ -61,7 +61,7 @@ a:hover { height: 100vh; } -.container > .landing-text { +.container>.landing-text { position: relative; height: 100vh; width: 40%; @@ -69,25 +69,26 @@ a:hover { margin-top: 25%; } -.container .landing-text p{ +.container .landing-text p { font-size: 1.3rem; - line-height: 1.5; + line-height: 1.5; color: lightgrey; padding: 0px 20px; margin: 10px; } -.container .landing-text p:first-child{ + +.container .landing-text p:first-child { font-weight: 700; - font-family: 'Lato',sans-serif; + font-family: 'Lato', sans-serif; } -.container .landing-text p:first-child span{ +.container .landing-text p:first-child span { color: #fc6a03; font-size: 2.5rem } -.container .landing-text button{ +.container .landing-text button { width: 200px; height: 50px; margin: 20px 50px; @@ -131,24 +132,28 @@ a:hover { } /* Markets Section */ -#markets .markets-container h2{ +#markets .markets-container h2 { padding: 30px; font-size: 2.5rem; color: #fc6a03; } +#markets .markets-container #crypto-table th { + padding: 0px 60px; +} - - - - - - - - - - - +#crypto-table { + border-collapse: separate; + border-spacing: 0 1em; + padding: 0 10px; + background: #181820; + border-radius: 5px; + position: relative; + margin: 2%; + align-items: center; + justify-content: center; + box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); +} From cc6391bad4383ea7303264aa859cc9e1a009335a Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 15:36:37 +0300 Subject: [PATCH 24/51] modify crypto table background color --- src/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/style.css b/src/style.css index d4ba75e7..de494e6d 100644 --- a/src/style.css +++ b/src/style.css @@ -146,7 +146,7 @@ a:hover { border-collapse: separate; border-spacing: 0 1em; padding: 0 10px; - background: #181820; + background:#181820; border-radius: 5px; position: relative; margin: 2%; @@ -194,6 +194,7 @@ a:hover { + /* Media Query for Navigation Bar */ From f3ddedfa0a7a3b0d6c22e0fcf45babd1af9adb8c Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 21:12:32 +0300 Subject: [PATCH 25/51] news section --- index.html | 37 +++++++++++++++---------------------- src/style.css | 1 + 2 files changed, 16 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index cfa487be..565404c9 100644 --- a/index.html +++ b/index.html @@ -86,30 +86,23 @@

Current market

-
- 1 - 2 - 3 - 4 - 5 -
-
- 1 -
-
- 2 -
-
- 3 -
-
- 4 -
-
- 5 -
+
+
+
+
+
+
+ +
+ + + + +
+ +
diff --git a/src/style.css b/src/style.css index de494e6d..2e940e8c 100644 --- a/src/style.css +++ b/src/style.css @@ -155,6 +155,7 @@ a:hover { box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); } +/* News Section */ From 0ac492c3c03b11622718f3091d958f977d9b14b6 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 21:26:00 +0300 Subject: [PATCH 26/51] add styling for slider --- index.html | 2 +- src/style.css | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 565404c9..38817a21 100644 --- a/index.html +++ b/index.html @@ -86,7 +86,7 @@

Current market

-
+
diff --git a/src/style.css b/src/style.css index 2e940e8c..1f69050f 100644 --- a/src/style.css +++ b/src/style.css @@ -146,7 +146,7 @@ a:hover { border-collapse: separate; border-spacing: 0 1em; padding: 0 10px; - background:#181820; + background: #181820; border-radius: 5px; position: relative; margin: 2%; @@ -156,6 +156,12 @@ a:hover { } /* News Section */ +#news-slider { + width: 80%; + margin: 0 auto; + overflow: hidden; +} + From cc8f89f65c3214514b829262edc8b2f16565fe95 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 21:39:05 +0300 Subject: [PATCH 27/51] styling for slides --- src/style.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/style.css b/src/style.css index 1f69050f..c43b91ed 100644 --- a/src/style.css +++ b/src/style.css @@ -162,6 +162,13 @@ a:hover { overflow: hidden; } +.slides { + display: none; + animation-name: slider; + animation-duration: 1s; + overflow: hidden; +} + From 17f43e5783bea7c3dd61533337304c7108107106 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 22:09:32 +0300 Subject: [PATCH 28/51] modify slider styling --- src/style.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/style.css b/src/style.css index c43b91ed..281e86ad 100644 --- a/src/style.css +++ b/src/style.css @@ -169,6 +169,22 @@ a:hover { overflow: hidden; } +#dot { + margin: 0 auto; + text-align: center; +} + +.dot { + border-radius: 50%; + padding: 8px; + margin: 8px; + display: inline-block; +} + +.active { + background: black; +} + From 12200f97f5aeedfa5b5575b5b7f4bc39bb959479 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 22:39:06 +0300 Subject: [PATCH 29/51] add styling for services section --- src/style.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/style.css b/src/style.css index 281e86ad..7ae22972 100644 --- a/src/style.css +++ b/src/style.css @@ -185,6 +185,15 @@ a:hover { background: black; } +/* Services Section */ +#services .services-container{ + width: 95%; + height: 100vh; + margin: 0 2%; + background: #181820; + box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); +} + From 4d9a7bb83d1efc58981a07c0b063d90667907523 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Fri, 24 Jun 2022 23:47:18 +0300 Subject: [PATCH 30/51] styling --- index.html | 2 +- src/style.css | 24 +++++++++++++++++++++++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 38817a21..2befac65 100644 --- a/index.html +++ b/index.html @@ -109,7 +109,7 @@

Current market

Services that we
continue to improve

-

The best choice for crypto market information and news, with
the various super friendly services +

The best choice for crypto market information and
news, with the various super friendly services we offer

diff --git a/src/style.css b/src/style.css index 7ae22972..b9defb39 100644 --- a/src/style.css +++ b/src/style.css @@ -186,15 +186,37 @@ a:hover { } /* Services Section */ -#services .services-container{ +#services .services-container { width: 95%; height: 100vh; margin: 0 2%; background: #181820; box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); + display: flex; +} + +#services .services-container h4 { + padding: 20% 2% 1%; + font-size: 2.5rem; +} + +#services .services-container p { + padding: 1% 2%; + font-size: 1.4rem; + color: lightgrey; } +#services .services-container button { + margin: 1% 4%; + width: 200px; + height: 50px; + border-radius: 10px; + border: 0px; + background: #fc6a03; + font-size: 1.3rem; + color: whitesmoke; +} From 51e86c8cd86944169e1ab4ae5a51c5b93b94e786 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Sat, 25 Jun 2022 17:57:23 +0300 Subject: [PATCH 31/51] update on styling services section --- index.html | 28 +++++++++++++++------------- src/style.css | 47 ++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 55 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 2befac65..32481760 100644 --- a/index.html +++ b/index.html @@ -107,33 +107,35 @@

Current market

-
+

Services that we
continue to improve

-

The best choice for crypto market information and
news, with the various super friendly services +

The best choice for crypto market information
and news, with the various super friendly +
services we offer

-
-
- security icon -
+
+
+ security icon +

Security guarantee

Security is guaranteed, we always maintain privacy and maintain the quality of our products

-
- -
+
+ +

Transparent

We provide transparent services, our systems and ecosystems can be monitored always

-
- + love icon -
+

User Convenience

Any service we provide to users is our best experience or services for our beloved customers

diff --git a/src/style.css b/src/style.css index b9defb39..72180772 100644 --- a/src/style.css +++ b/src/style.css @@ -195,19 +195,16 @@ a:hover { display: flex; } -#services .services-container h4 { +#services .services-container .wrapper h4 { padding: 20% 2% 1%; font-size: 2.5rem; } -#services .services-container p { - padding: 1% 2%; - font-size: 1.4rem; - color: lightgrey; +#services .services-container .wrapper p{ + padding: 10px; } - -#services .services-container button { +#services .services-container .wrapper button { margin: 1% 4%; width: 200px; height: 50px; @@ -216,12 +213,48 @@ a:hover { background: #fc6a03; font-size: 1.3rem; color: whitesmoke; + margin: 20px; + } +#services .services-container .wrapper{ + width: 50%; + margin: 7% 2% 0; +} +#services .services-container .nested-container { + width: 50%; + display: table; + padding: 5px; + margin: 5px 0; +} +#services .services-container .nested { + width: 50vw; +} +#services .services-container .nested .nested-image{ + width: 18%; + height: 100px; + display: inline-block; + margin: 10px; +} + +#services .services-container .nested .nested-text{ + display: inline-block; + width: 50%; + margin: 4%; + height: 20vh; + font-size: 1.2rem; +} + +#services .services-container .nested .nested-text h4{ + padding-top: 10px; + font-size: 2rem; + padding: 10px 0; + color:#fc6a03 ; +} From 71a80730d1be7beedf7dcbee116386d37bbc258f Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Sat, 25 Jun 2022 18:16:56 +0300 Subject: [PATCH 32/51] carousel section styling --- src/style.css | 47 ++++++++++++++++++++++++++++++++++++----------- 1 file changed, 36 insertions(+), 11 deletions(-) diff --git a/src/style.css b/src/style.css index 72180772..9988c73a 100644 --- a/src/style.css +++ b/src/style.css @@ -200,7 +200,7 @@ a:hover { font-size: 2.5rem; } -#services .services-container .wrapper p{ +#services .services-container .wrapper p { padding: 10px; } @@ -218,7 +218,7 @@ a:hover { } -#services .services-container .wrapper{ +#services .services-container .wrapper { width: 50%; margin: 7% 2% 0; } @@ -234,26 +234,46 @@ a:hover { width: 50vw; } -#services .services-container .nested .nested-image{ +#services .services-container .nested .nested-image { width: 18%; height: 100px; display: inline-block; margin: 10px; } -#services .services-container .nested .nested-text{ - display: inline-block; - width: 50%; - margin: 4%; - height: 20vh; - font-size: 1.2rem; +#services .services-container .nested .nested-text { + display: inline-block; + width: 50%; + margin: 4%; + height: 20vh; + font-size: 1.2rem; } -#services .services-container .nested .nested-text h4{ +#services .services-container .nested .nested-text h4 { padding-top: 10px; font-size: 2rem; padding: 10px 0; - color:#fc6a03 ; + color: #fc6a03; +} + + + +/* Testimonials Section */ +.testimonials-container { + padding: 40px 0; +} + +.testimonials-container .header-section { + padding: 0 25px; +} + +.header-section h3, +.header-section p { + text-align: center; +} + +.testimonials-container .carousel { + display: flex; } @@ -285,6 +305,11 @@ a:hover { + + + + + From 50f4e95c0546b8a92f0c9a8079d5e9474101bcf4 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Sat, 25 Jun 2022 18:54:19 +0300 Subject: [PATCH 33/51] edit classes of tectimonial images and deleted divs holding images --- index.html | 19 +++++++------------ src/style.css | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 32481760..7cdcf010 100644 --- a/index.html +++ b/index.html @@ -182,10 +182,9 @@

Testimonials

-
- client_image -
+
@@ -202,10 +201,9 @@

Testimonials

-
- client_image -
+
Saitemu Mark
Ngong
@@ -216,8 +214,7 @@

Testimonials

-
- client_image
@@ -232,8 +229,7 @@

Testimonials

-
- client_image
@@ -249,8 +245,7 @@

Testimonials

-
- client_image
diff --git a/src/style.css b/src/style.css index 9988c73a..f87e2937 100644 --- a/src/style.css +++ b/src/style.css @@ -274,8 +274,44 @@ a:hover { .testimonials-container .carousel { display: flex; + justify-content: center; +} + +.testimonials-container .testimonials { + flex-direction: column; + width: 40vw; + height: 30vh; + align-items: center; + justify-content: flex-start; + transition: transform 0.25s; + text-align: center; + background-color: #121117; + box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); + padding: 30px; +} + +.testimonials-container .active{ + z-index: 1; + display: flex; + order: 2; + transform: scale(1.1); } +.testimonials-container .testimonial-image{ + border: 50%; +} + +.testimonials .testimonial-text{ + display: flex; + height: 100%; + flex-direction: column-reverse; + justify-content: space-between; +} + + + + + From 997e940bb69f1d23b277d12c9a6057097c201377 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Sun, 26 Jun 2022 00:30:52 +0300 Subject: [PATCH 34/51] modify testimonials section --- index.html | 172 ++++++++++++++----------------- src/style.css | 279 +++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 343 insertions(+), 108 deletions(-) diff --git a/index.html b/index.html index 7cdcf010..5ed4d064 100644 --- a/index.html +++ b/index.html @@ -125,8 +125,7 @@

Security guarantee

- +

Transparent

We provide transparent services, our systems and ecosystems can be monitored always

@@ -170,121 +169,106 @@

Start investing your
crypto coins using WikiCap

-
-
-
-

Testimonials

-

Check out what our customers are saying about us.

-
-
-
- -
-
-
- client_image -
-
-
- Kimani Ichung'wa -
-
Kikuyu
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi - quod - laboriosam animi odit architecto nemo sed esse fuga, velit cumque fugiat minus atque - minima - nulla? Qui hic itaque recusandae illum!
+ +
+
+ + 1 + 2 + 3 + 4 + 5 + +
+
+ client_image + +
+
+
Kimani Ichung'wa
+
Kikuyu
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi + quod + laboriosam animi odit architecto nemo sed esse fuga, velit cumque fugiat minus atque + minima + nulla? Qui hic itaque recusandae illum!
+
-
- client_image - +
+ client_image + +
Saitemu Mark
Ngong
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti facilis veritatis velit adipisci reiciendis ducimus earum doloremque! Autem, velit sequi. - Quas commodi voluptates saepe modi nesciunt! Autem esse quaerat expedita!
-
- -
- client_image -
-
-
Sobbo Daniel
-
Waiyaki Way
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod odit, pariatur velit quos - temporibus doloremque, tempore vel dolores dolore dignissimos iusto fugit recusandae nulla - ad, aliquid consequuntur praesentium eveniet assumenda. + Quas commodi voluptates saepe modi nesciunt! Autem esse quaerat expedita!
+
-
- client_image -
-
-
Sumaiya Sumaiya
-
Kileleshwa
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corporis unde sunt saepe sit - quia hic, itaque rem ea tenetur ipsa eveniet similique eos. Ipsa iure suscipit facilis earum - aliquid. -
+
+ client_image + +
+
Sobbo Daniel
+
Waiyaki Way
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod odit, pariatur velit quos + temporibus doloremque, tempore vel dolores dolore dignissimos iusto fugit recusandae nulla + ad, aliquid consequuntur praesentium eveniet assumenda.
+
+
+ client_image -
- client_image -
-
-
Arnold Arnold
-
Mirema Drive
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corporis unde sunt saepe sit - quia hic, itaque rem ea tenetur ipsa eveniet similique eos. Ipsa iure suscipit facilis earum - aliquid. -
+
+
Sumaiya Sumaiya
+
Kileleshwa
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corporis unde sunt saepe sit + quia hic, itaque rem ea tenetur ipsa eveniet similique eos. Ipsa iure suscipit facilis earum + aliquid.
-
-
- - - - - - - - -
- - -
+
+
diff --git a/src/style.css b/src/style.css index f87e2937..704fcf5e 100644 --- a/src/style.css +++ b/src/style.css @@ -259,12 +259,206 @@ a:hover { /* Testimonials Section */ -.testimonials-container { - padding: 40px 0; + +.slider { + width: 90vw; + text-align: center; + overflow: hidden; + height: 90vh; + margin: 10px 70px; +} + +.slides { + display: flex; + overflow-x: auto; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; + -webkit-overflow-scrolling: touch; +} + +.slides::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +.slides::-webkit-scrollbar-thumb { + background: black; + border-radius: 10px; +} + +.slides::-webkit-scrollbar-track { + background: transparent; +} + +.slides>div { + scroll-snap-align: start; + flex-shrink: 0; + width: 70vw; + height: 70vh; + margin-right: 50px; + border-radius: 10px; + background: #eee; + transform-origin: center center; + transform: scale(1); + transition: transform 0.5s; + position: relative; + display: flex; + justify-content: center; + align-items: center; + font-size: 100px; +} + +.author-info { + background: rgba(0, 0, 0, 0.75); + color: white; + padding: 0.75rem; + text-align: center; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + margin: 0; +} + +.author-info a { + color: white; +} + +/* img { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } */ + +.slider>a { + display: inline-flex; + width: 1.5rem; + height: 1.5rem; + background: white; + text-decoration: none; + align-items: center; + justify-content: center; + border-radius: 50%; + margin: 0 0 0.5rem 0; + position: relative; +} + +.slider>a:active { + top: 1px; +} + +.slider>a:focus { + background: #000; +} + +/* Don't need button navigation + @supports (scroll-snap-type) { + .slider > a { + display: none; + } + } + + html, body { + height: 100%; + overflow: hidden; + } + body { + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(to bottom, #74ABE2, #5563DE); + font-family: 'Ropa Sans', sans-serif; + } */ +/* .testimonials-container { + width: 80vw; + text-align: center; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +.carousel { + display: flex; + overflow-x: auto; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; + -webkit-overflow-scrolling: touch; + width: 80vw; + height: 80vw; +} + +.carousel::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +.carousel::-webkit-scrollbar-thumb { + background: #121117; + border-radius: 10px; +} + +.carousel::-webkit-scrollbar-track { + background: transparent; +} + +.carousel > div { + display: flex; + scroll-snap-align: start; + transform-origin: center center; + transform: scale(1); + transition: transform 0.5s; + position: relative; + width: 70%; + height: 70vh; + margin-right: 50px; + background: #fc6a03; + border-radius: 10px; + justify-content: center; + align-items: center; +} + +.testimonials-container > a { + display: inline-flex; + width: 1.2rem; + height: 1.2rem; + text-decoration: none; + align-items: center; + justify-content: center; + position: relative; + border: 50%; + margin: 0.5rem; +} + +.testimonials-container > div { + display: inline-flex; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + align-items: center; + justify-content: center; + border-radius: 50%; + background: whitesmoke; +} + +.testimonials-container > a:active{ + top: 1px; +} */ + + + + + + +/* .testimonials-container { + padding: 50px 5px; } .testimonials-container .header-section { - padding: 0 25px; + padding: 0 30px; } .header-section h3, @@ -275,12 +469,18 @@ a:hover { .testimonials-container .carousel { display: flex; justify-content: center; + margin: 70px 0 40px; } .testimonials-container .testimonials { + display: flex; + justify-content: center; +} + +.testimonials-container .testimonial-slider { flex-direction: column; - width: 40vw; - height: 30vh; + min-height: 500px; + max-width: 80%; align-items: center; justify-content: flex-start; transition: transform 0.25s; @@ -288,41 +488,92 @@ a:hover { background-color: #121117; box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); padding: 30px; + display: none; } -.testimonials-container .active{ +.testimonials-container .testimonial-slider .active { z-index: 1; display: flex; order: 2; transform: scale(1.1); } -.testimonials-container .testimonial-image{ - border: 50%; +.testimonials-container .testimonial-image { + align-self: center; + padding: 40px 0; + border-radius: 50%; + width: 200px; + height: 200px; + margin-top: -120px; + box-sizing: border-box; +} + +.testimonials-container .testimonial-information { + margin-top: 17px; } -.testimonials .testimonial-text{ +.testimonials .testimonial-text { display: flex; height: 100%; flex-direction: column-reverse; justify-content: space-between; } +.testimonials-container .client-name { + font-size: 1.5rem; + font-weight: bold; +} +.testimonials-container .client-location { + font-size: 20px; + margin-top: 10px; + font-weight: 400; +} +.testimonials-container .client-words{ + font-size: 1.5rem; + line-height: 22px; + margin:20px 0; + font-weight: 400; +} +.testimonials-container .carousel .back,.testimonials-container .carousel .next{ + display: none; +} +.testimonials-container .nav-testimonial { + display: flex; + justify-content: center; + text-align: center; +} +.testimonials-container .nav-item{ + height: 12px; + width: 12px; + margin: 10px; + transition: all .25s; + border-radius: 5px; + font: inherit; + color: inherit; + cursor: pointer; + padding: 0; + background-color: inherit; +} +.testimonials-container .nav-item:hover,.testimonials-container .nav-item:active{ + background-color: #fc6a03; +} +.testimonials-container .nav-item span{ + position: absolute; + height: 1px; + width: 1px; + clip: rect(1px,1px,1px,1px); +} - - - - - + */ From 176da87a43278de06d20f9e1436a56fdca8accc5 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Sun, 26 Jun 2022 01:33:29 +0300 Subject: [PATCH 35/51] modify html and styling for testimonials --- index.html | 124 +++++++++++++++++++++++++------------------------- src/style.css | 57 ++++++++++++++++------- 2 files changed, 102 insertions(+), 79 deletions(-) diff --git a/index.html b/index.html index 5ed4d064..25a4fe69 100644 --- a/index.html +++ b/index.html @@ -174,94 +174,92 @@

Start investing your
crypto coins using WikiCap

- 1 - 2 - 3 - 4 - 5 + + + + +
- client_image +
+ client_image -
-
-
Kimani Ichung'wa
-
Kikuyu
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi - quod - laboriosam animi odit architecto nemo sed esse fuga, velit cumque fugiat minus atque - minima - nulla? Qui hic itaque recusandae illum! +
+
+
Kimani Ichung'wa
+
Kikuyu
+
+
Being a wikiCap client has been great. Support is always responsive and helpful, and best of all I've been able to help many new Bitcoin users get some of their first Bitcoin. It`s always rewarding to be the first on-ramp to the currency of the future +
- client_image +
+ client_image -
-
-
Saitemu Mark
-
Ngong
-
-
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti - facilis veritatis velit adipisci reiciendis ducimus earum doloremque! Autem, velit sequi. - Quas commodi voluptates saepe modi nesciunt! Autem esse quaerat expedita! +
+
+
Saitemu Mark
+
Ngong
+
+
WikiCap is my first Bitcoin experience. Started as your regular newbie first time BTC buyer - asking legacy traders what is a wallet and why I need to follow verification steps. Sold over 400+ Bitcoin to date and helped over 800 newbies like myself to dive in to this new currency. +
- client_image +
+ client_image -
-
Sobbo Daniel
-
Waiyaki Way
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod odit, pariatur velit quos - temporibus doloremque, tempore vel dolores dolore dignissimos iusto fugit recusandae nulla - ad, aliquid consequuntur praesentium eveniet assumenda. +
+
Sobbo Daniel
+
Waiyaki Way
+
+
+ I absolutely love this app. It is the very best way to keep track of the alt coin markets. +
- client_image +
+ client_image -
-
Sumaiya Sumaiya
-
Kileleshwa
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corporis unde sunt saepe sit - quia hic, itaque rem ea tenetur ipsa eveniet similique eos. Ipsa iure suscipit facilis earum - aliquid. +
+
Sumaiya Sumaiya
+
Kileleshwa
+
+
+ Very useful for everyone.. and trust site... this time they increase earning coins, wonderful and thankyou so much for my every day withdrawal..😊 +
-
+
- client_image +
+ client_image -
-
Arnold Arnold
-
Mirema Drive
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi corporis unde sunt saepe sit - quia hic, itaque rem ea tenetur ipsa eveniet similique eos. Ipsa iure suscipit facilis earum - aliquid. +
+
Arnold Arnold
+
Mirema Drive
+
+
+ This website is useful for earning crypto coins.I like very much. +
diff --git a/src/style.css b/src/style.css index 704fcf5e..33deead3 100644 --- a/src/style.css +++ b/src/style.css @@ -267,13 +267,13 @@ a:hover { height: 90vh; margin: 10px 70px; } - .slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; + margin: 10px; } .slides::-webkit-scrollbar { @@ -282,7 +282,7 @@ a:hover { } .slides::-webkit-scrollbar-thumb { - background: black; + background:whitesmoke; border-radius: 10px; } @@ -294,13 +294,13 @@ a:hover { scroll-snap-align: start; flex-shrink: 0; width: 70vw; - height: 70vh; + height: 80vh; margin-right: 50px; border-radius: 10px; - background: #eee; + background:#121117; transform-origin: center center; transform: scale(1); - transition: transform 0.5s; + transition: transform 0.8s; position: relative; display: flex; justify-content: center; @@ -308,7 +308,41 @@ a:hover { font-size: 100px; } -.author-info { +.wrapper{ + height: 80vh; + width: 80vh; + justify-content: center; + align-items: center; +} + +.wrapper .testimonial-image{ + width: 50%; + height: 40vh; + border-radius: 50%; +} + +.wrapper .testimonial-text .client-name{ + font-size: 1.5rem; + font-weight: 600; + color: #fc6a03; +} + +.wrapper .testimonial-text .client-location{ + font-size: 1.3rem; + font-weight: 600; +} + +.client-words{ + font-size: 1.2rem; + font-weight: 500;; +} + +.wrapper .testimonial-text .client-name,.wrapper .testimonial-text .client-location,.client-words{ + padding: 10px; +} + + + .author-info { background: rgba(0, 0, 0, 0.75); color: white; padding: 0.75rem; @@ -324,20 +358,11 @@ a:hover { color: white; } -/* img { - object-fit: cover; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } */ - .slider>a { display: inline-flex; width: 1.5rem; height: 1.5rem; - background: white; + background:#fc6a03; text-decoration: none; align-items: center; justify-content: center; From e8ac2f4e3c1498ffdca9a7210765abd252b9e6b4 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Sun, 26 Jun 2022 02:31:15 +0300 Subject: [PATCH 36/51] update footer styling --- index.html | 57 ++++++++- src/style.css | 346 +++++++++----------------------------------------- 2 files changed, 112 insertions(+), 291 deletions(-) diff --git a/index.html b/index.html index 25a4fe69..c2cb4a15 100644 --- a/index.html +++ b/index.html @@ -143,8 +143,9 @@

User Convenience

-
- + + + + +

Testimonials

@@ -192,7 +195,10 @@

Start investing your
crypto coins using WikiCap

Kimani Ichung'wa
Kikuyu
-
Being a wikiCap client has been great. Support is always responsive and helpful, and best of all I've been able to help many new Bitcoin users get some of their first Bitcoin. It`s always rewarding to be the first on-ramp to the currency of the future +
Being a wikiCap client has been great. Support is always + responsive and helpful, and best of all I've been able to help many new Bitcoin users + get some of their first Bitcoin. It`s always rewarding to be the first on-ramp to the + currency of the future
@@ -209,7 +215,10 @@

Start investing your
crypto coins using WikiCap

Saitemu Mark
Ngong
-
WikiCap is my first Bitcoin experience. Started as your regular newbie first time BTC buyer - asking legacy traders what is a wallet and why I need to follow verification steps. Sold over 400+ Bitcoin to date and helped over 800 newbies like myself to dive in to this new currency. +
WikiCap is my first Bitcoin experience. Started as your regular + newbie first time BTC buyer - asking legacy traders what is a wallet and why I need to + follow verification steps. Sold over 400+ Bitcoin to date and helped over 800 newbies + like myself to dive in to this new currency.
@@ -242,7 +251,8 @@

Start investing your
crypto coins using WikiCap

Kileleshwa
- Very useful for everyone.. and trust site... this time they increase earning coins, wonderful and thankyou so much for my every day withdrawal..😊 + Very useful for everyone.. and trust site... this time they increase earning coins, + wonderful and thankyou so much for my every day withdrawal..😊
@@ -266,7 +276,40 @@

Start investing your
crypto coins using WikiCap

-
+ + diff --git a/src/style.css b/src/style.css index 33deead3..99f2712e 100644 --- a/src/style.css +++ b/src/style.css @@ -132,7 +132,8 @@ a:hover { } /* Markets Section */ -#markets .markets-container h2 { +#markets .markets-container h2, + { padding: 30px; font-size: 2.5rem; color: #fc6a03; @@ -260,6 +261,12 @@ a:hover { /* Testimonials Section */ +h2 { + padding: 10px 10px 0; + font-size: 2.5rem; + color: whitesmoke; +} + .slider { width: 90vw; text-align: center; @@ -267,6 +274,7 @@ a:hover { height: 90vh; margin: 10px 70px; } + .slides { display: flex; overflow-x: auto; @@ -282,7 +290,7 @@ a:hover { } .slides::-webkit-scrollbar-thumb { - background:whitesmoke; + background: whitesmoke; border-radius: 10px; } @@ -297,7 +305,7 @@ a:hover { height: 80vh; margin-right: 50px; border-radius: 10px; - background:#121117; + background: #121117; transform-origin: center center; transform: scale(1); transition: transform 0.8s; @@ -308,41 +316,44 @@ a:hover { font-size: 100px; } -.wrapper{ +.wrapper { height: 80vh; width: 80vh; justify-content: center; align-items: center; } -.wrapper .testimonial-image{ +.wrapper .testimonial-image { width: 50%; height: 40vh; border-radius: 50%; } -.wrapper .testimonial-text .client-name{ +.wrapper .testimonial-text .client-name { font-size: 1.5rem; font-weight: 600; color: #fc6a03; } -.wrapper .testimonial-text .client-location{ +.wrapper .testimonial-text .client-location { font-size: 1.3rem; font-weight: 600; } -.client-words{ +.client-words { font-size: 1.2rem; - font-weight: 500;; + font-weight: 500; + ; } -.wrapper .testimonial-text .client-name,.wrapper .testimonial-text .client-location,.client-words{ +.wrapper .testimonial-text .client-name, +.wrapper .testimonial-text .client-location, +.client-words { padding: 10px; } - .author-info { +.author-info { background: rgba(0, 0, 0, 0.75); color: white; padding: 0.75rem; @@ -362,7 +373,7 @@ a:hover { display: inline-flex; width: 1.5rem; height: 1.5rem; - background:#fc6a03; + background: #fc6a03; text-decoration: none; align-items: center; justify-content: center; @@ -379,301 +390,68 @@ a:hover { background: #000; } -/* Don't need button navigation - @supports (scroll-snap-type) { - .slider > a { - display: none; - } - } - - html, body { - height: 100%; - overflow: hidden; - } - body { - display: flex; - align-items: center; - justify-content: center; - background: linear-gradient(to bottom, #74ABE2, #5563DE); - font-family: 'Ropa Sans', sans-serif; - } */ -/* .testimonials-container { - width: 80vw; - text-align: center; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; -} - -.carousel { - display: flex; - overflow-x: auto; - scroll-snap-type: x mandatory; - scroll-behavior: smooth; - -webkit-overflow-scrolling: touch; - width: 80vw; - height: 80vw; -} - -.carousel::-webkit-scrollbar { - width: 10px; - height: 10px; -} - -.carousel::-webkit-scrollbar-thumb { +/* Footer Section */ +.footer{ background: #121117; - border-radius: 10px; + padding: 0 20px; } -.carousel::-webkit-scrollbar-track { - background: transparent; +.footer-container{ + width: 95%; + margin: auto; } - -.carousel > div { - display: flex; - scroll-snap-align: start; - transform-origin: center center; - transform: scale(1); - transition: transform 0.5s; - position: relative; - width: 70%; - height: 70vh; - margin-right: 50px; - background: #fc6a03; - border-radius: 10px; - justify-content: center; - align-items: center; +.col{ + width: 25%; + padding: 0 20px; } -.testimonials-container > a { - display: inline-flex; - width: 1.2rem; - height: 1.2rem; - text-decoration: none; - align-items: center; - justify-content: center; +.col h4{ + font-size: 20px; + color: #fc6a03; + font-weight: 500; position: relative; - border: 50%; - margin: 0.5rem; -} - -.testimonials-container > div { - display: inline-flex; - width: 1.5rem; - height: 1.5rem; - text-decoration: none; - align-items: center; - justify-content: center; - border-radius: 50%; - background: whitesmoke; -} - -.testimonials-container > a:active{ - top: 1px; -} */ - - - - - - -/* .testimonials-container { - padding: 50px 5px; -} - -.testimonials-container .header-section { - padding: 0 30px; -} - -.header-section h3, -.header-section p { - text-align: center; -} - -.testimonials-container .carousel { - display: flex; - justify-content: center; - margin: 70px 0 40px; -} - -.testimonials-container .testimonials { - display: flex; - justify-content: center; -} - -.testimonials-container .testimonial-slider { - flex-direction: column; - min-height: 500px; - max-width: 80%; - align-items: center; - justify-content: flex-start; - transition: transform 0.25s; - text-align: center; - background-color: #121117; - box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); - padding: 30px; - display: none; -} - -.testimonials-container .testimonial-slider .active { - z-index: 1; - display: flex; - order: 2; - transform: scale(1.1); + margin-bottom: 35px; } -.testimonials-container .testimonial-image { - align-self: center; - padding: 40px 0; - border-radius: 50%; - width: 200px; - height: 200px; - margin-top: -120px; +.col h4::before{ + position: absolute; + width: 50px; + height: 2px; box-sizing: border-box; } -.testimonials-container .testimonial-information { - margin-top: 17px; -} - -.testimonials .testimonial-text { - display: flex; - height: 100%; - flex-direction: column-reverse; - justify-content: space-between; -} - -.testimonials-container .client-name { - font-size: 1.5rem; - font-weight: bold; -} - -.testimonials-container .client-location { - font-size: 20px; - margin-top: 10px; - font-weight: 400; +.col ul li:not(:last-child){ + margin-bottom: 10px; } -.testimonials-container .client-words{ - font-size: 1.5rem; - line-height: 22px; - margin:20px 0; +.col ul li a{ + font-size: 16px; + text-decoration: none; font-weight: 400; + display: block; + transition: all 0.3s ease; } -.testimonials-container .carousel .back,.testimonials-container .carousel .next{ - display: none; +.col ul li a:hover{ + padding-left: 10px; } -.testimonials-container .nav-testimonial { - display: flex; - justify-content: center; +.col .social-links a{ + display: inline-block; + height: 50px; + width: 50px; + margin: 0 10px 10px 0; text-align: center; + line-height: 50px; + border-radius: 50%; } - -.testimonials-container .nav-item{ - height: 12px; - width: 12px; - margin: 10px; - transition: all .25s; - border-radius: 5px; - font: inherit; - color: inherit; - cursor: pointer; - padding: 0; - background-color: inherit; -} - -.testimonials-container .nav-item:hover,.testimonials-container .nav-item:active{ - background-color: #fc6a03; +.row{ + display: flex; + flex-wrap: wrap; } -.testimonials-container .nav-item span{ - position: absolute; - height: 1px; - width: 1px; - clip: rect(1px,1px,1px,1px); +ul{ + list-style-type: none; } - - */ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -/* Media Query for Navigation Bar */ - -/* @media (max-width:650px) { - .nav>.nav-responsive { - position: absolute; - display: inline-block; - right: 0px; - top: 0px; - } - - .nav>.nav-responsive>label { - width: 60px; - height: 60px; - display: inline-block; - padding: 10px; - } - - .nav>.nav-responsive>label>span { - width: 25px; - height: 10px; - display: block; - border-top: 2px solid #121117; - } - - .nav>.navbar { - display: block; - position: absolute; - width: 100%; - height: 0px; - background-color: #121117; - overflow-y: hidden; - top: 50px; - left: 0px; - transition: all 0.3s ease-in; - } - - .nav > #nav-responsive:not(:checked) ~ .navbar{ - height: 0px; - } - - .nav > #nav-responsive:checked ~ .navbar{ - height: calc(100vh - 50px); - overflow-y: auto; - } - - - - -} */ \ No newline at end of file From 6bb6b406ef857043e1b9a26a4b359104c2af1d3e Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Sun, 26 Jun 2022 12:00:34 +0300 Subject: [PATCH 37/51] update styling for footer section --- index.html | 5 ++--- src/style.css | 48 +++++++++++++++++++++++++++--------------------- 2 files changed, 29 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index c2cb4a15..6224dc1e 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + WikiCap - Home of Crypto @@ -289,7 +290,7 @@

wikiCap

-

DIY Help

+

Support

- diff --git a/src/style.css b/src/style.css index 99f2712e..0e61b625 100644 --- a/src/style.css +++ b/src/style.css @@ -51,6 +51,7 @@ a { a:hover { color: #fc6a03; + transition: all 0.4s ease; } .container { @@ -132,8 +133,7 @@ a:hover { } /* Markets Section */ -#markets .markets-container h2, - { +#markets .markets-container h2 { padding: 30px; font-size: 2.5rem; color: #fc6a03; @@ -391,40 +391,42 @@ h2 { } /* Footer Section */ -.footer{ +.footer { background: #121117; padding: 0 20px; } -.footer-container{ - width: 95%; +.footer-container { + width: 65%; margin: auto; + padding: 70px 0; } -.col{ - width: 25%; + +.col { + width: 30%; padding: 0 20px; } -.col h4{ - font-size: 20px; +.col h4 { + font-size: 1.8rem; color: #fc6a03; - font-weight: 500; + font-weight: 600; position: relative; - margin-bottom: 35px; + margin-bottom: 20px; } -.col h4::before{ +.col h4::before { position: absolute; width: 50px; height: 2px; box-sizing: border-box; } -.col ul li:not(:last-child){ +.col ul li:not(:last-child) { margin-bottom: 10px; } -.col ul li a{ +.col ul li a { font-size: 16px; text-decoration: none; font-weight: 400; @@ -432,11 +434,11 @@ h2 { transition: all 0.3s ease; } -.col ul li a:hover{ +.col ul li a:hover { padding-left: 10px; } -.col .social-links a{ +.col .social-links a { display: inline-block; height: 50px; width: 50px; @@ -445,13 +447,17 @@ h2 { line-height: 50px; border-radius: 50%; } -.row{ + +.social-links { + border: #181820; + width: 5vw; +} + +.row { display: flex; flex-wrap: wrap; } -ul{ +ul { list-style-type: none; -} - - +} \ No newline at end of file From 7f2fe421c8125a8ab4f3c6c6217ee365df5dbdc7 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Sun, 26 Jun 2022 15:45:46 +0300 Subject: [PATCH 38/51] fetch function to get crypto assets from coincap api --- index.html | 3 ++- src/index.js | 5 +++++ src/style.css | 6 ++++++ 3 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 src/index.js diff --git a/index.html b/index.html index 6224dc1e..150e696b 100644 --- a/index.html +++ b/index.html @@ -308,8 +308,9 @@

Follow Us

+

©2022 Daniel Sobit. All rights reserved

- + \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 00000000..05247671 --- /dev/null +++ b/src/index.js @@ -0,0 +1,5 @@ +//api get request for crypto asset data to populate currency market section +fetch('api.coincap.io/v2/assets') +.then(Response => Response.json()) +//the data will then be input into the function populateCryptoTable +.then(data => populateCryptoTable(data)) diff --git a/src/style.css b/src/style.css index 0e61b625..f696c47f 100644 --- a/src/style.css +++ b/src/style.css @@ -460,4 +460,10 @@ h2 { ul { list-style-type: none; +} + +.copyright{ + padding: 20px; + color: whitesmoke; + font-weight: 500; } \ No newline at end of file From 25582734e7684d5ba30dcfb7ebdbe321ce3eaa4e Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Sun, 26 Jun 2022 15:55:27 +0300 Subject: [PATCH 39/51] catch error method --- src/index.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 05247671..4deaf4e5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,10 @@ //api get request for crypto asset data to populate currency market section fetch('api.coincap.io/v2/assets') -.then(Response => Response.json()) -//the data will then be input into the function populateCryptoTable -.then(data => populateCryptoTable(data)) + .then(Response => Response.json()) + //the data will then be input into the function populateCryptoTable + .then(data => populateCryptoTable(data)) + + //catch method to log errors + .catch(error => console.log(error)) + + From a9496436cba03069ab3f2ee564813f31f895fb15 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Sun, 26 Jun 2022 19:05:31 +0300 Subject: [PATCH 40/51] update fetch api get request --- index.html | 2 +- src/index.js | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 52 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 150e696b..a29dff7f 100644 --- a/index.html +++ b/index.html @@ -310,7 +310,7 @@

Follow Us

©2022 Daniel Sobit. All rights reserved

- + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 4deaf4e5..441b64b0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,11 @@ +let requestOptions = { + method: 'GET', + redirect: 'follow' + }; + //api get request for crypto asset data to populate currency market section -fetch('api.coincap.io/v2/assets') - .then(Response => Response.json()) +fetch("http://api.coincap.io/v2/assets",requestOptions) + .then(response => response.json()) //the data will then be input into the function populateCryptoTable .then(data => populateCryptoTable(data)) @@ -8,3 +13,47 @@ fetch('api.coincap.io/v2/assets') .catch(error => console.log(error)) +//function that populates the currency market section with data from the api +function populateCryptoTable(data) { + let market = [] + let coin = [] + let lastPrice = [] + let TwentyFourHourChange = [] + let chart = [] + let marketCap = [] + + data['data'].forEach((coin) => + market.push(coin.symbol), + coin.push(coin.name), + lastPrice.push(coin.priceUsd), + TwentyFourHourChange.push(coin.changePercent24Hr), + chart.push(coin.vwap24Hr), + marketCap.push(coin.marketCapUsd), + ) + + let cryptoTable = document.querySelector('#crypto-table') + let add = ' ' + + for (let i = 0; i < coin.length; i++) { + add += + "
" + market[i] + "" + "" + coin[i] + "" + "" + lastPrice[i] + "" + "" + TwentyFourHourChange[i] + "" + "" + chart[i] + "" + "" + marketCap[i] + "" + + //turn the 24hr price change price change either green or red + if (TwentyFourHourChange[i] > 0) { + add += + "" + } else { + add += + "" + } + add += "" + } + cryptoTable.innerHTML = add + +} + From a5742e00898b1d97d2014177a88024de2e8f5e38 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Mon, 27 Jun 2022 01:19:32 +0300 Subject: [PATCH 41/51] to do list section --- index.html | 33 +++++++++++++--- src/index.js | 104 +++++++++++++++++++++++++++++++++----------------- src/style.css | 88 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 184 insertions(+), 41 deletions(-) diff --git a/index.html b/index.html index a29dff7f..eea5dc21 100644 --- a/index.html +++ b/index.html @@ -88,11 +88,11 @@

Current market

-
-
-
-
-
+
+
+
+
+
@@ -145,6 +145,29 @@

User Convenience

+ +
+
+

Pin Notes Here

+
+ + + +
+ +
+
    + +
+ +
+
+
-
-
-
-
-
-
- -
- - - - - +
+
+

Crypto Headlines

+
+
+
    +
    -
    -
    diff --git a/src/index.js b/src/index.js index 4af2fc67..cde64caf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,91 +1,124 @@ -// let requestOptions = { -// method: 'GET', -// redirect: 'follow' -// }; - -// dd086e9d-4f05-4e3f-b762-dc7d5a0a0fa3 -//api get request for crypto asset data to populate currency market section - -fetch('https://api.coincap.io/v2/assets/?_limit=20') - .then(function (response) { - console.log(response) - return response.json() - }) - //the data will then be input into the function populateCryptoTable - .then(function (data) { - console.log(data) - populateCryptoTable(data) - }) - - //catch method to log errors - .catch(error => console.log(error)) - - -//function that populates the currency market section with data from the api -function populateCryptoTable(data) { - let market = []; - let coinName = []; - let lastPrice = []; - let TwentyFourHourChange = []; - let chart = []; - let marketCap = []; - - data['data'].forEach((coin) => { - market.push(coin.symbol); - coinName.push(coin.name); - lastPrice.push(coin.priceUsd); - TwentyFourHourChange.push(coin.changePercent24Hr); - chart.push(coin.vwap24Hr); - marketCap.push(coin.marketCapUsd); - }) - - let cryptoTable = document.querySelector('#crypto-table-body') - let add = ""; - - for (let i = 0; i < coinName.length; i++) { - add += "    " - add += "" - add += "" - add += "" - add += "" - add += "" - add += "" - - // turn the 24hr price change price change either green or red - if (TwentyFourHourChange[i] > 0) { - add += - "" - } else { - add += - "" +document.addEventListener('DOMContentLoaded', function () { + // let requestOptions = { + // method: 'GET', + // redirect: 'follow' + // }; + + // dd086e9d-4f05-4e3f-b762-dc7d5a0a0fa3 + //api get request for crypto asset data to populate currency market section + + fetch('https://api.coincap.io/v2/assets/?_limit=20') + .then(function (response) { + console.log(response) + return response.json() + }) + //the data will then be input into the function populateCryptoTable + .then(function (data) { + console.log(data) + populateCryptoTable(data) + }) + + //catch method to log errors + .catch(error => console.log(error)) + + + //function that populates the currency market section with data from the api + function populateCryptoTable(data) { + let market = []; + let coinName = []; + let lastPrice = []; + let TwentyFourHourChange = []; + let chart = []; + let marketCap = []; + + data['data'].forEach((coin) => { + market.push(coin.symbol); + coinName.push(coin.name); + lastPrice.push(coin.priceUsd); + TwentyFourHourChange.push(coin.changePercent24Hr); + chart.push(coin.vwap24Hr); + marketCap.push(coin.marketCapUsd); + }) + + let cryptoTable = document.querySelector('#crypto-table-body') + let add = ""; + + for (let i = 0; i < coinName.length; i++) { + add += "" + add += "" + add += "" + add += "" + add += "" + add += "" + add += "" + + // turn the 24hr price change price change either green or red + if (TwentyFourHourChange[i] > 0) { + add += + "" + } else { + add += + "" + } + add += "" } - add += "" + cryptoTable.innerHTML = add + } - cryptoTable.innerHTML = add -} -//News API GET Request -fetch('https://newsdata.io/api/1/news?apikey=pub_85111e53b643cfda4841a1cccecbb8fa3f37&q=crypto&language=en&category=business') - .then(function (response) { - return response.json() - }) - .then(function (data) { - console.log(data) - displayNews(data) - }) - .catch(err => console.log(err)) + //declare variables + let newsItems = [] -function displayNews(data) { - for (let i = 0; i < data.length; i++) { - let newsSlide = document.getElementById('news-slider') - newsSlide.innerHTML += - `

    ${data[i].title}


    - By:${data[i].creator} ${data[i].pubDate}
    - ${data[i].description} - ${data[i].link}

    ` + //News API GET Request + fetch('https://newsapi.org/v2/top-headlines?country=us&apiKey=d80667da1c2d49ae8b0418667666bf42') + .then(function (response) { + return response.json() + }) + .then(function (data) { + console.log(data.articles) + data.articles.forEach(articles=> { + newsItems.push({ + title: articles.title, + link: articles.url + }) + appendNews(newsItems) + }) + + console.log(newsItems) + }) + .catch(err => console.log(err)) + console.log(newsItems) + + console.log(newsItems.articles) + let newsList = document.querySelector("ul#newslist") + function appendNews(newsItems){ + for (let i = 0; i < newsItems.length; i++) { + let li = document.createElement("li") + newsContent = ` ${newsItems[i].title}` + li.innerHTML = newsContent + newsList.appendChild(li) + } } -} \ No newline at end of file + + + + // for (let i = 0; i < newsItems.title; i++) { + // let li = document.createElement("li") + // let link = document.createElement("a") + // link.href = news.link + // link.textContent = news.title + // link.target = "_blank" + // li.appendChild(link) + // newsList.appendChild(li) + // }) + + // { + // title: data.results.title, + // url: data.url + // } + +}) \ No newline at end of file diff --git a/src/style.css b/src/style.css index 1cc09569..6026d145 100644 --- a/src/style.css +++ b/src/style.css @@ -157,34 +157,7 @@ a:hover { } /* News Section */ -#news-slider { - width: 80%; - margin: 0 auto; - overflow: hidden; -} - -.slides { - display: none; - animation-name: slider; - animation-duration: 1s; - overflow: hidden; -} -#dot { - margin: 0 auto; - text-align: center; -} - -.dot { - border-radius: 50%; - padding: 8px; - margin: 8px; - display: inline-block; -} - -.active { - background: black; -} /* Services Section */ #services .services-container { From 892a7bd0d8dbb89454df105e60e3963e2d2ada3d Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Mon, 27 Jun 2022 15:29:14 +0300 Subject: [PATCH 43/51] modify api dom --- index.html | 3 +-- src/index.js | 4 ++-- src/style.css | 17 +++++++++++++++++ 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 064898a7..816dda4b 100644 --- a/index.html +++ b/index.html @@ -89,11 +89,10 @@

    Current market

    -

    Crypto Headlines

    +

    Global Business Headlines

      -
      diff --git a/src/index.js b/src/index.js index cde64caf..121fe907 100644 --- a/src/index.js +++ b/src/index.js @@ -74,7 +74,7 @@ document.addEventListener('DOMContentLoaded', function () { let newsItems = [] //News API GET Request - fetch('https://newsapi.org/v2/top-headlines?country=us&apiKey=d80667da1c2d49ae8b0418667666bf42') + fetch('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=d80667da1c2d49ae8b0418667666bf42&pageSize=5') .then(function (response) { return response.json() }) @@ -98,7 +98,7 @@ document.addEventListener('DOMContentLoaded', function () { function appendNews(newsItems){ for (let i = 0; i < newsItems.length; i++) { let li = document.createElement("li") - newsContent = ` ${newsItems[i].title}` + newsContent = ` ${newsItems[i].title}` li.innerHTML = newsContent newsList.appendChild(li) } diff --git a/src/style.css b/src/style.css index 6026d145..046a6d0b 100644 --- a/src/style.css +++ b/src/style.css @@ -157,7 +157,24 @@ a:hover { } /* News Section */ +#news{ + align-items: center; + justify-content: center; + margin: 5%; + box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); +} + +#news .news-card .news-card-header{ + font-size: 1.8rem; + color: #fc6a03; + padding: 10px 0; +} +#newslist li{ + padding: 8px 0; + font-size: 1rem; + color: whitesmoke; +} /* Services Section */ #services .services-container { From bf817238e00c0ecae2de690febb6b0b4706190d4 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Mon, 27 Jun 2022 23:17:17 +0300 Subject: [PATCH 44/51] updates on nav links --- db.json | 87 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 34 +++++--------------- src/index.js | 75 +++++++++++++++++++++++++++----------------- src/style.css | 77 ++++++++++++++++++++++----------------------- 4 files changed, 178 insertions(+), 95 deletions(-) create mode 100644 db.json diff --git a/db.json b/db.json new file mode 100644 index 00000000..b96cdb3c --- /dev/null +++ b/db.json @@ -0,0 +1,87 @@ +{ + "posts": [ + { + "id": 1, + "title": "json-server", + "author": "typicode" + }, + { + "text": "IOIOIO", + "id": 31 + }, + { + "text": "JUIIOIO", + "id": 32 + }, + { + "text": "KKKK", + "id": 33 + }, + { + "text": "jdkjd", + "id": 34 + }, + { + "text": "ccc", + "id": 35 + }, + { + "text": "ddd", + "id": 36 + }, + { + "text": "sss", + "id": 37 + }, + { + "text": "ddd", + "id": 38 + }, + { + "text": "ddd", + "id": 39 + }, + { + "text": "sobit", + "id": 40 + }, + { + "text": "a", + "id": 41 + }, + { + "text": "s", + "id": 42 + }, + { + "text": "g", + "id": 43 + }, + { + "text": "ddd", + "id": 44 + }, + { + "text": "fffd", + "id": 45 + }, + { + "text": "gggf", + "id": 46 + }, + { + "text": "dmjd", + "id": 47 + } + ], + "comments": [ + { + "id": 1, + "body": "some comment", + "postId": 1 + } + ], + "profile": { + "name": "typicode" + } +} \ No newline at end of file diff --git a/index.html b/index.html index 816dda4b..ff702c66 100644 --- a/index.html +++ b/index.html @@ -20,22 +20,14 @@
      wikiCap
      -
      @@ -140,23 +132,13 @@

      User Convenience

      Pin Notes Here

      -
      +
      - - +
      -
      -
        - -
      - -
      +
      +
      diff --git a/src/index.js b/src/index.js index 121fe907..d7545845 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,10 @@ document.addEventListener('DOMContentLoaded', function () { - // let requestOptions = { - // method: 'GET', - // redirect: 'follow' - // }; + // // let requestOptions = { + // // method: 'GET', + // // redirect: 'follow' + // // }; - // dd086e9d-4f05-4e3f-b762-dc7d5a0a0fa3 + // // dd086e9d-4f05-4e3f-b762-dc7d5a0a0fa3 //api get request for crypto asset data to populate currency market section fetch('https://api.coincap.io/v2/assets/?_limit=20') @@ -71,31 +71,32 @@ document.addEventListener('DOMContentLoaded', function () { //declare variables - let newsItems = [] + let newsItems = [] - //News API GET Request + //News API GET Request fetch('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=d80667da1c2d49ae8b0418667666bf42&pageSize=5') .then(function (response) { return response.json() }) .then(function (data) { console.log(data.articles) - data.articles.forEach(articles=> { + data.articles.forEach(articles => { newsItems.push({ title: articles.title, link: articles.url }) appendNews(newsItems) }) - + console.log(newsItems) }) .catch(err => console.log(err)) - console.log(newsItems) + console.log(newsItems) - console.log(newsItems.articles) + console.log(newsItems.articles) let newsList = document.querySelector("ul#newslist") - function appendNews(newsItems){ + + function appendNews(newsItems) { for (let i = 0; i < newsItems.length; i++) { let li = document.createElement("li") newsContent = ` ${newsItems[i].title}` @@ -103,22 +104,38 @@ document.addEventListener('DOMContentLoaded', function () { newsList.appendChild(li) } } - - - - // for (let i = 0; i < newsItems.title; i++) { - // let li = document.createElement("li") - // let link = document.createElement("a") - // link.href = news.link - // link.textContent = news.title - // link.target = "_blank" - // li.appendChild(link) - // newsList.appendChild(li) - // }) - - // { - // title: data.results.title, - // url: data.url - // } + + //Pin Notes Section + + //Declare Variables + const form = document.querySelector(".pin-notes") + const tasks = document.querySelector('#tasks') + + + form.addEventListener("submit", create) + + const input = document.querySelector("#input") + + function create(event) { + event.preventDefault() + fetch("http://localhost:3000/posts", { + method: 'POST', + body: JSON.stringify({ + text: input.value + }), + headers: { + "Content-type": "application/json; charset=UTF-8" + } + }).then(function (response) { + response.json().then(li) + }) + } + + + function li(input) { + let listItem = document.createElement("li") + listItem.innerHTML = input.text + tasks.appendChild(listItem) + } }) \ No newline at end of file diff --git a/src/style.css b/src/style.css index 046a6d0b..24ea63bb 100644 --- a/src/style.css +++ b/src/style.css @@ -249,11 +249,11 @@ a:hover { /* Pin Notes Section */ .pin-todo{ - width: 80vw; + width: 90vw; border-radius: 2em; background: #121117; - padding: 1.5rem; - margin:8rem auto; + padding: 10px; + margin:5% 5%; box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); } @@ -262,27 +262,40 @@ a:hover { margin-bottom: 1rem; } -.todo{ +.new-task{ display: flex; justify-content: center; + padding: 30px 20px; + position: relative; } -#input{ +.new-task #input{ flex: 1; + width: 75%; + height: 45px; + padding: 10px; + font-weight: 500; font-size: 1rem; border: 1px solid #181820; outline: none; border-radius: 0.5rem 0 0 0.5rem; } +.new-task #input:focus{ + outline: none; + border-color:#fc6a03; +} + .submit-button,.cancel-button{ font-size: 1rem; font-weight: bold; border: 1px solid #181820; - color: whitesmoke; + color: black; padding: 0.5rem 0.8rem; flex: 0 0 0.5rem; cursor: pointer; + outline: none; + border-radius: 5px; } .submit-button:hover, .cancel-button:hover{ @@ -291,52 +304,36 @@ a:hover { transition: all 0.5s; } -.todo-pin{ - margin-top: 2rem; +#tasks{ + border-radius: 10px; + width: 100%; + padding: 30px 20px; + margin-top: 10px; + position: relative; } -.li-wrappper{ - display: flex; - justify-content: space-between; +.task { + display: text; + padding: 10px 10px; align-items: center; - list-style: none; - border-bottom: 1px solid #181820; - padding: 1rem; -} - -.list-item:hover i.fas{ - opacity: 1; -} - -.text{ - width: 80%; -} - -i.fas{ + justify-content: space-between; cursor: pointer; - opacity: 0; + border-radius: 8px; + border: 1px solid #fc6a03; + height: 50px; + margin-bottom: 10px; } -i.fas .fa-edit:hover{color: blue;} -i.fas .fa-trash-alt:hover{color: red;} -i.fas .fa-check:hover{color: green;} - .reset-button{ border: none; - outline: none; cursor: pointer; - background-color: whitesmoke; - color: red; + outline: none; + border-radius: 5px; + width: 10%; + height: 30px; font-size: 1rem; - display: block; - width: 10rem; - border: 1rem; - margin: 1rem auto 0; } - - - /* Testimonials Section */ h2 { From 993f0639d74c7383676c9090d5ad5098bd60fe9c Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Mon, 27 Jun 2022 23:44:23 +0300 Subject: [PATCH 45/51] updates --- db.json | 8 ++++++++ src/index.js | 5 ++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/db.json b/db.json index b96cdb3c..bd071ac9 100644 --- a/db.json +++ b/db.json @@ -72,6 +72,14 @@ { "text": "dmjd", "id": 47 + }, + { + "text": "dhd", + "id": 48 + }, + { + "text": "igjfkld", + "id": 49 } ], "comments": [ diff --git a/src/index.js b/src/index.js index d7545845..805266bd 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,6 @@ document.addEventListener('DOMContentLoaded', function () { // // dd086e9d-4f05-4e3f-b762-dc7d5a0a0fa3 //api get request for crypto asset data to populate currency market section - fetch('https://api.coincap.io/v2/assets/?_limit=20') .then(function (response) { console.log(response) @@ -71,9 +70,9 @@ document.addEventListener('DOMContentLoaded', function () { //declare variables - let newsItems = [] + let newsItems = [] - //News API GET Request + //News API GET Request fetch('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=d80667da1c2d49ae8b0418667666bf42&pageSize=5') .then(function (response) { return response.json() From a4b9ccb5501f2d5e30f249539e1ba7b8b2635308 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Tue, 28 Jun 2022 00:31:26 +0300 Subject: [PATCH 46/51] modify due to javascript failing to work during deployment on github --- db.json | 4 ++++ index.html | 2 +- src/index.js => index.js | 0 3 files changed, 5 insertions(+), 1 deletion(-) rename src/index.js => index.js (100%) diff --git a/db.json b/db.json index bd071ac9..b61838dc 100644 --- a/db.json +++ b/db.json @@ -80,6 +80,10 @@ { "text": "igjfkld", "id": 49 + }, + { + "text": "jjkj", + "id": 50 } ], "comments": [ diff --git a/index.html b/index.html index ff702c66..a874349b 100644 --- a/index.html +++ b/index.html @@ -306,7 +306,7 @@

      Follow Us

      ©2022 Daniel Sobit. All rights reserved

      - + \ No newline at end of file diff --git a/src/index.js b/index.js similarity index 100% rename from src/index.js rename to index.js From d4528e60366f97b696e021c2e03432f34d525863 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Tue, 28 Jun 2022 09:39:40 +0300 Subject: [PATCH 47/51] updates --- index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index 805266bd..6798e963 100644 --- a/index.js +++ b/index.js @@ -44,12 +44,12 @@ document.addEventListener('DOMContentLoaded', function () { for (let i = 0; i < coinName.length; i++) { add += "      " - add += "" - add += "" - add += "" - add += "" - add += "" - add += "" + add += "" + add += "" + add += "" + add += "" + add += "" + add += "" // turn the 24hr price change price change either green or red if (TwentyFourHourChange[i] > 0) { From 79dd1c4d4f0018a5d302096a809dd477ca78f69d Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Tue, 28 Jun 2022 09:47:30 +0300 Subject: [PATCH 48/51] update --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 6798e963..0ba1c90c 100644 --- a/index.js +++ b/index.js @@ -44,8 +44,8 @@ document.addEventListener('DOMContentLoaded', function () { for (let i = 0; i < coinName.length; i++) { add += "" - add += "" - add += "" + add += "" + add += "" add += "" add += "" add += "" From 666020952373ff504a62ff683dbd3531893f3cd1 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Tue, 28 Jun 2022 11:13:40 +0300 Subject: [PATCH 49/51] updates on api --- index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index 0ba1c90c..9461e04b 100644 --- a/index.js +++ b/index.js @@ -73,16 +73,16 @@ document.addEventListener('DOMContentLoaded', function () { let newsItems = [] //News API GET Request - fetch('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=d80667da1c2d49ae8b0418667666bf42&pageSize=5') + fetch('https://newsdata.io/api/1/news?apikey=pub_85111e53b643cfda4841a1cccecbb8fa3f37&q=crypto&language=en&category=business ') .then(function (response) { return response.json() }) .then(function (data) { - console.log(data.articles) - data.articles.forEach(articles => { + console.log(data.results) + data.results.forEach(results => { newsItems.push({ - title: articles.title, - link: articles.url + title: results.title, + link: results.link }) appendNews(newsItems) }) @@ -92,7 +92,7 @@ document.addEventListener('DOMContentLoaded', function () { .catch(err => console.log(err)) console.log(newsItems) - console.log(newsItems.articles) + console.log(newsItems) let newsList = document.querySelector("ul#newslist") function appendNews(newsItems) { From 45f0c6751c43b6107e40f6061d8d8d0469b9281c Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Tue, 28 Jun 2022 23:35:11 +0300 Subject: [PATCH 50/51] Update README.md --- README.md | 205 ++++++++++++++---------------------------------------- 1 file changed, 53 insertions(+), 152 deletions(-) diff --git a/README.md b/README.md index b5fb34b6..3373b7de 100644 --- a/README.md +++ b/README.md @@ -1,172 +1,73 @@ -# Phase 1 Project Guidelines +wikiCap + ## By Daniel Sobit + ## Table of Content + - [Description](#description) + - [Features](#features) + - [Technology Used](#technology-Used) + - [Licence](#licence) + - [Authors Info](#Authors-Info) + ## Description -## Learning Goals +

      This repository contains the wikiCap web application.

      -- Design and architect features across a frontend -- Communicate and collaborate in a technical environment -- Integrate JavaScript and an external API -- Debug issues in small- to medium-sized projects -- Build and iterate on a project MVP +[Go Back to the top](#wikiCap) -## Introduction +## Features -Welcome to JavaScript Project Mode! +A cryptocurrency realtime market information using a public APIs to display market prices and news. +A User can see the cryptocurrency prices. +A User can see realtime cryptocurrency news +A User can store notes -You’ve worked so hard to get here and have learned a ton. Now it's time to bring -it all together! +[Go Back to the top](#wikiCap) + ### Requirements -For this project, you're going build a Single Page Application (**SPA**). -Building this application will be challenging because it will integrate -everything you've learned up to this point. Your frontend will be built with -HTML, CSS, and JavaScript and will communicate with a public API. + * Access to a computer or any other garget + * Access to internet + * visit the website on your browser + **** + [Go Back to the top](#wikiCap) -### Project Requirements +### Live Link -1. Your app must be a HTML/CSS/JS frontend that accesses data from a public API. - All interactions between the client and the API should be handled - asynchronously and use JSON as the communication format. +- Click this link to view the live application [https://sobitd.github.io/wikiCap/] -2. Your entire app must run on a single page. There should be NO redirects. In - other words, your project will contain a single HTML file. -3. Your app needs to incorporate at least 3 separate event listeners - (DOMContentLoaded, click, change, submit, etc). +### Technology Used -4. Some interactivity is required. This could be as simple as adding a "like" - button or adding comments. These interactions do not need to persist after - reloading the page. +* HTML - which was used to develope the structure off the pages. +* CSS - which was used to style the User Interface. +* JS - was used to add interactivity and functionality. +* JSON - a json file that has the product data. +* +[Go Back to the top](#wikiCap) -5. Follow good coding practices. Keep your code DRY (Do not repeat yourself) by - utilizing functions to abstract repetitive code. +## Known Bugs -### Stretch Goals +* display notes on the Pin Notes Here section -1. Use [json-server][] in your project to persist your app's interactivity. +## MIT License -## Strategy, Timeline, and Tips +Copyright (c) [2022] [wikiCap] -### Planning +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: -- Plan out your features -- Develop user stories - - “As [ a user ], I want [ to perform this action ] so that - [ I can accomplish this goal ].” - - Features should not need you there to explain them to users -- Plan out the structure of your JSON requests +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. -### Project Pitches +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. -Before you start working on your project, you'll pitch your project idea to your -instructors for approval and feedback. +## Authors Info -For your project pitch, you should include: - -- The basic story of your application -- The core features of your MVP -- The API data you'll be using and how you'll use it -- Challenges you expect to face -- How you are meeting the requirements of the project - -Feel free to send this pitch to your instructor via slack asynchronously. - -### MVP ASAP - -- Build a Minimum Viable Product (MVP) as quickly as possible. - - Pick an API and explore it early on to ensure it will work for your need - -### Instructor Guidance - -You should strive to solve problems independently, but you also shouldn't waste -your time stuck on a problem. A good guideline for a small bug is the rule of -10s: - -- 10 minutes debugging the code -- 10 minutes using Google and StackOverflow to try to find an answer -- 10 minutes asking your fellow students for help -- Asking an instructor - -If you seek out instructor guidance on your design from the start, they might -help steer you into design and architectural decisions that will help you down -the road. That will also give the instructors context for what your app is -supposed to do, so you won't need to explain everything to them when asking for -help debugging. - -### Guidelines for Staying Organized - -**Write down** the decisions you make about your project. This will not only -help you think more clearly, it will also help you communicate your project to -instructors when asking for help. In addition to writing everything down, we -also recommend the following to help stay organized and on track: - -- Describe/sketch your ideas (use diagrams!). -- Start by creating a frontend directory with the basic files you'll need -- Next, build enough code to get some API data to work with. Don't worry about - building all of your async code yet, just get to the point where you can - access one endpoint on an API, then start working on getting that data - displayed. -- Then, continue to build additional async code and frontend features. -- Continue building features one by one. - -Check in with your instructors to make sure your scope and timeline are -manageable. - -### JSON Server Instructions - -> **Note**: Using `json-server` is a stretch goal, so make sure you have a -> working MVP before trying to set up `json-server`! - -You can use this [json-server template][] to generate your backend code. Using -this template will make it easier to deploy your backend later on. - -[json-server template]: https://github.com/learn-co-curriculum/json-server-template - -If you prefer, instead of using the template, you can create a `db.json` file -with a structure in the root of your project that looks like this: - -```json -{ - "toys": [ - { - "id": 1, - "name": "Woody", - "image": "http://www.pngmart.com/files/3/Toy-Story-Woody-PNG-Photos.png", - "likes": 8 - }, - { - "id": 2, - "name": "Buzz Lightyear", - "image": "http://www.pngmart.com/files/6/Buzz-Lightyear-PNG-Transparent-Picture.png", - "likes": 14 - } - ] -} -``` - -Then, assuming you have `json-server` installed globally, you can run this -command to run the server: - -```console -$ json-server --watch db.json -``` - -Whatever top-level keys exist in your `db.json` file will determine the routes -available. In the example above, since we have a key of `toys` pointing to an -array of toy objects, `json-server` will generate the following routes: - -- `GET /toys` -- `POST /toys` -- `GET /toys/:id` -- `PATCH /toys/:id` -- `DELETE /toys/:id` - -You can consult the [json-server docs][] for more information. - -[json-server docs]: https://www.npmjs.com/package/json-server - -## Resources - -- [Public APIs](https://github.com/public-apis/public-apis) -- [Fun APIs](https://apilist.fun/) -- [json-server][] - -[json-server]: https://www.npmjs.com/package/json-server +Gmail - [Daniel Sobit](daniel.sobit@student.moringaschool.com) From 7535847e181646e74280019ce468b396a057c200 Mon Sep 17 00:00:00 2001 From: Daniel Sobit Date: Tue, 28 Jun 2022 23:35:40 +0300 Subject: [PATCH 51/51] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3373b7de..6f143c66 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -wikiCap +## wikiCap ## By Daniel Sobit ## Table of Content - [Description](#description)
      Market
      " + TwentyFourHourChange[i] + "" + TwentyFourHourChange[i] + "
      " + market[i] + "" + coinName[i] + "$" + lastPrice[i] + "" + TwentyFourHourChange[i] + "" + chart[i] + "$" + marketCap[i] + "" + TwentyFourHourChange[i] + "" + TwentyFourHourChange[i] + "
      " + market[i] + "" + coinName[i] + "$" + lastPrice[i] + "" + TwentyFourHourChange[i] + "" + chart[i] + "$" + marketCap[i] + "" + TwentyFourHourChange[i] + "" + TwentyFourHourChange[i] + "
      " + market[i] + "" + coinName[i] + "$" + lastPrice[i] + "" + TwentyFourHourChange[i] + "" + chart[i] + "$" + marketCap[i] + "" + Math.round(market[i]).toFixed(3) + "" + Math.round(coinName[i]).toFixed(3) + "$" + Math.round(lastPrice[i]).toFixed(3) + "" + Math.round(TwentyFourHourChange[i]).toFixed(3) + "" + Math.round(chart[i]).toFixed(3) + "$" + Math.round(marketCap[i]) + "
      " + Math.round(market[i]).toFixed(3) + "" + Math.round(coinName[i]).toFixed(3) + "" + market[i] + "" + coinName[i] + "$" + Math.round(lastPrice[i]).toFixed(3) + "" + Math.round(TwentyFourHourChange[i]).toFixed(3) + "" + Math.round(chart[i]).toFixed(3) + "