├── assets ├── images │ ├── logo.png │ ├── hero-banner.png │ ├── about-banner.png │ ├── connect-line.png │ ├── coin-2.svg │ ├── coin-6.svg │ ├── coin-4.svg │ ├── logo.svg │ ├── coin-3.svg │ ├── coin-1.svg │ ├── coin-8.svg │ ├── coin-5.svg │ ├── chart-2.svg │ ├── chart-1.svg │ └── coin-7.svg ├── js │ ├── Wallet.js │ ├── script.js │ ├── company.js │ └── coinMarket.js └── css │ └── style.css ├── README.md ├── favicon.svg ├── style-guide.md ├── wallet.html └── index.html /assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taisprestes01/Coinfolio/HEAD/assets/images/logo.png -------------------------------------------------------------------------------- /assets/images/hero-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taisprestes01/Coinfolio/HEAD/assets/images/hero-banner.png -------------------------------------------------------------------------------- /assets/images/about-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taisprestes01/Coinfolio/HEAD/assets/images/about-banner.png -------------------------------------------------------------------------------- /assets/images/connect-line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taisprestes01/Coinfolio/HEAD/assets/images/connect-line.png -------------------------------------------------------------------------------- /assets/images/coin-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/images/coin-6.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/js/Wallet.js: -------------------------------------------------------------------------------- 1 | const carousel = document.querySelector('#carousel'); 2 | const carouselItems = carousel.querySelectorAll('.carousel-item'); 3 | const prevBtn = carousel.querySelector('.carousel-btn-prev'); 4 | const nextBtn = carousel.querySelector('.carousel-btn-next'); 5 | 6 | let currentIndex = 0; 7 | 8 | function updateCarousel() { 9 | carouselItems.forEach((item, index) => { 10 | item.style.display = 'none'; 11 | item.classList.remove('active'); 12 | }); 13 | 14 | carouselItems[currentIndex].style.display = 'block'; 15 | carouselItems[currentIndex].classList.add('active'); 16 | } 17 | 18 | prevBtn.addEventListener('click', () => { 19 | currentIndex = currentIndex > 0 ? currentIndex - 1 : carouselItems.length - 1; 20 | updateCarousel(); 21 | }); 22 | 23 | nextBtn.addEventListener('click', () => { 24 | currentIndex = currentIndex < carouselItems.length - 1 ? currentIndex + 1 : 0; 25 | updateCarousel(); 26 | }); 27 | 28 | updateCarousel(); -------------------------------------------------------------------------------- /assets/images/coin-4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/coin-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/images/coin-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |
3 | Versão em Português 🇧🇷 4 | 5 |
6 |

7 |
8 | Markdownify 9 |
10 | Coinfolior 11 |
12 |

13 | 14 |

15 | Get valuable information about your currencies and improve your traderss

16 | 17 |

18 | 19 | 20 | 21 |

22 | 23 |

24 | Key Features • 25 | Wallet created • 26 | Support • 27 | You may also like 28 |

29 | 30 | ## Key Features 31 | 32 | * Track your portfolio, buy and sell 33 | * Get hourly updated data on best and worst currencies 34 | * Discover new currencies on the market daily 35 | * Discover the companies with the largest amounts of cryptocurrencies 36 | 37 | ## How To Use 38 | 39 | # Run the app 40 | 41 | ## Support 42 | 43 | Buy Me A Coffee 44 | 45 | 46 | ## You may also like... 47 | 48 | - https://github.com/taisprestes01/iq-option-data-analysis - IQ Option api 49 | 50 | -------------------------------------------------------------------------------- /assets/images/coin-8.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/coin-5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const navbar = document.querySelector("[data-navbar]"); 4 | const navbarLinks = document.querySelectorAll("[data-nav-link]"); 5 | const navToggler = document.querySelector("[data-nav-toggler]"); 6 | 7 | const toggleNavbar = function () { 8 | navbar.classList.toggle("active"); 9 | navToggler.classList.toggle("active"); 10 | document.body.classList.toggle("active"); 11 | } 12 | 13 | navToggler.addEventListener("click", toggleNavbar); 14 | 15 | const closeNavbar = function () { 16 | navbar.classList.remove("active"); 17 | navToggler.classList.remove("active"); 18 | document.body.classList.remove("active"); 19 | } 20 | 21 | navbarLinks.forEach(link => { 22 | link.addEventListener("click", closeNavbar); 23 | }); 24 | 25 | const header = document.querySelector("[data-header]"); 26 | 27 | const activeHeader = function () { 28 | if (window.scrollY > 300) { 29 | header.classList.add("active"); 30 | } else { 31 | header.classList.remove("active"); 32 | } 33 | } 34 | 35 | window.addEventListener("scroll", activeHeader); 36 | 37 | const addToFavBtns = document.querySelectorAll("[data-add-to-fav]"); 38 | 39 | const toggleActive = function () { 40 | this.classList.toggle("active"); 41 | } 42 | 43 | addToFavBtns.forEach(btn => { 44 | btn.addEventListener("click", toggleActive); 45 | }); 46 | 47 | document.addEventListener('DOMContentLoaded', function() { 48 | const link = document.querySelector('[data-nav-link]'); 49 | 50 | const section = document.querySelector('.market'); 51 | 52 | link.addEventListener('click', function(event) { 53 | event.preventDefault(); 54 | 55 | const sectionPosition = section.offsetTop; 56 | 57 | window.scrollTo({ 58 | top: sectionPosition, 59 | behavior: 'smooth' 60 | }); 61 | }); 62 | }); 63 | 64 | const sections = document.querySelectorAll("[data-section]"); 65 | 66 | const scrollReveal = function () { 67 | for (let i = 0; i < sections.length; i++) { 68 | if (sections[i].getBoundingClientRect().top < window.innerHeight / 1.5) { 69 | sections[i].classList.add("active"); 70 | } else { 71 | sections[i].classList.remove("active"); 72 | } 73 | } 74 | } 75 | 76 | scrollReveal(); 77 | 78 | window.addEventListener("scroll", scrollReveal); 79 | -------------------------------------------------------------------------------- /assets/js/company.js: -------------------------------------------------------------------------------- 1 | const company = fetchData(); 2 | 3 | async function fetchData() { 4 | try { 5 | const response = await fetch('https://api.coingecko.com/api/v3/companies/public_treasury/bitcoin'); 6 | const data = await response.json(); 7 | return data; 8 | } catch (error) { 9 | console.error('Erro ao buscar dados da API:', error); 10 | return null; 11 | } 12 | } 13 | 14 | company.then(data => { 15 | data.companies.slice(0, 4).forEach(company => addCompanyToTab(company)); 16 | }); 17 | function addCompanyToTab(company) { 18 | var tabContent = document.querySelector('.tab-content'); 19 | 20 | var li = document.createElement("li"); 21 | 22 | var trendCard = document.createElement("div"); 23 | trendCard.classList.add("trend-card"); 24 | 25 | var cardTitleWrapper = document.createElement("div"); 26 | cardTitleWrapper.classList.add("card-title-wrapper"); 27 | 28 | var a = document.createElement("a"); 29 | a.href = "#"; 30 | a.classList.add("card-title"); 31 | a.innerHTML = company.name + '' + company.symbol.toUpperCase() + ''; 32 | 33 | cardTitleWrapper.appendChild(a); 34 | 35 | var cardValue = document.createElement("data"); 36 | cardValue.classList.add("card-value"); 37 | cardValue.value = company.total_current_value_usd; 38 | cardValue.innerHTML = "$" + company.total_current_value_usd; 39 | 40 | var cardAnalytics = document.createElement("div"); 41 | cardAnalytics.classList.add("card-analytics"); 42 | 43 | var currentPrice = document.createElement("data"); 44 | currentPrice.classList.add("current-price"); 45 | currentPrice.value = company.total_holdings; 46 | currentPrice.innerHTML = company.total_holdings; 47 | 48 | var badge = document.createElement("div"); 49 | badge.classList.add("badge"); 50 | badge.classList.add(company.total_holdings > 0 ? "green" : "red"); 51 | badge.innerHTML = company.total_holdings > 0 ? "+" + company.total_holdings : company.total_holdings; 52 | 53 | cardAnalytics.appendChild(currentPrice); 54 | cardAnalytics.appendChild(badge); 55 | 56 | trendCard.appendChild(cardTitleWrapper); 57 | trendCard.appendChild(cardValue); 58 | trendCard.appendChild(cardAnalytics); 59 | 60 | li.appendChild(trendCard); 61 | 62 | tabContent.appendChild(li); 63 | } -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 11 | ``` 12 | 13 | Ionicon 14 | 15 | ``` html 16 | 17 | 18 | ``` 19 | 20 | --- 21 | 22 | ## Colors 23 | 24 | ``` css 25 | --cadet-blue-crayola: hsl(227, 13%, 73%); 26 | --maximum-yellow-red: hsl(41, 95%, 61%); 27 | --medium-sea-green: hsl(142, 43%, 54%); 28 | --blue-crayola_10: hsla(222, 100%, 61%, 0.05); 29 | --smocky-black_30: hsla(0, 0%, 6%, 0.3); 30 | --eerie-black-1: hsl(240, 5%, 8%); 31 | --eerie-black-2: hsl(228, 9%, 10%); 32 | --raisin-black: hsl(225, 15%, 16%); 33 | --blue-crayola: hsl(222, 100%, 61%); 34 | --roman-silver: hsl(223, 10%, 52%); 35 | --presian-red: hsl(0, 64%, 52%); 36 | --gunmetal_50: hsla(230, 16%, 22%, 0.5); 37 | --gainsboro: hsl(0, 0%, 85%); 38 | --cultured: hsl(0, 0%, 93%); 39 | --white_50: hsla(0, 0%, 100%, 0.5); 40 | --white_30: hsla(0, 0%, 100%, 0.3); 41 | --white_10: hsla(0, 0%, 100%, 0.1); 42 | --black_10: hsla(0, 0%, 0%, 0.1); 43 | --white: hsl(0, 0%, 100%); 44 | ``` 45 | 46 | ## Gradient color 47 | 48 | ``` css 49 | --gradient: linear-gradient(90deg, var(--white_10) 0px 77%, var(--white_50) 92%, transparent); 50 | ``` 51 | 52 | ## Typography 53 | 54 | ``` css 55 | --ff-dm-sans: 'DM Sans', sans-serif; 56 | 57 | --fs-1: 3.2rem; 58 | --fs-2: 3rem; 59 | --fs-3: 2.4rem; 60 | --fs-4: 2rem; 61 | --fs-5: 1.8rem; 62 | --fs-6: 1.5rem; 63 | --fs-7: 1.4rem; 64 | --fs-8: 1.2rem; 65 | 66 | --fw-500: 500; 67 | --fw-700: 700; 68 | ``` 69 | 70 | ## Spacing 71 | 72 | ``` css 73 | --section-padding: 100px; 74 | ``` 75 | 76 | ## Shadow 77 | 78 | ``` css 79 | --shadow-1: 0px 4px 8px var(--black_10); 80 | --shadow-2: 0px 30px 10px -20px var(--smocky-black_30); 81 | --shadow-3: 0px 15px 10px -20px var(--smocky-black_30); 82 | ``` 83 | 84 | ## Border Radius 85 | 86 | ``` css 87 | --radius-12: 12px; 88 | --radius-24: 24px; 89 | ``` 90 | 91 | ## Transition 92 | 93 | ``` css 94 | --transition-1: 0.25s ease; 95 | --transition-2: 0.5s ease; 96 | --transition-3: 1s ease; 97 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 98 | ``` 99 | -------------------------------------------------------------------------------- /assets/js/coinMarket.js: -------------------------------------------------------------------------------- 1 | 2 | const data = fetchData(); 3 | async function fetchData() { 4 | try { 5 | const response = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd'); 6 | const data = await response.json(); 7 | return data; 8 | } catch (error) { 9 | console.error('Erro ao buscar dados da API:', error); 10 | return null; 11 | } 12 | } 13 | 14 | data.then(data => data.forEach(data => addCryptoToList(data))) 15 | 16 | function addCryptoToList(crypto) { 17 | var tbody = document.getElementById("crypto-table-body"); 18 | var row = document.createElement("tr"); 19 | row?.classList.add("table-row"); 20 | 21 | var favoriteCell = document.createElement("td"); 22 | favoriteCell.classList.add("table-data"); 23 | favoriteCell.innerHTML = ` 24 | `; 28 | row?.appendChild(favoriteCell); 29 | 30 | var rankCell = document.createElement("th"); 31 | rankCell.classList.add("table-data", "rank"); 32 | rankCell.setAttribute("scope", "row"); 33 | rankCell.textContent = tbody?.childElementCount + 1; 34 | row?.appendChild(rankCell); 35 | 36 | var nameCell = document.createElement("td"); 37 | nameCell.classList.add("table-data"); 38 | nameCell.innerHTML = ` 39 |
40 | ${crypto.name} logo 41 |

42 | ${crypto.name} ${crypto.symbol.toUpperCase()} 43 |

44 |
`; 45 | row?.appendChild(nameCell); 46 | 47 | var lastPriceCell = document.createElement("td"); 48 | lastPriceCell.classList.add("table-data", "last-price"); 49 | lastPriceCell.textContent = `$${crypto.current_price}`; 50 | row?.appendChild(lastPriceCell); 51 | 52 | var priceChangeCell = document.createElement("td"); 53 | priceChangeCell.classList.add("table-data", "last-update", crypto.price_change_24h >= 0 ? "green" : "red"); 54 | priceChangeCell.textContent = `${crypto.price_change_percentage_24h}%`; 55 | row?.appendChild(priceChangeCell); 56 | 57 | var marketCapCell = document.createElement("td"); 58 | marketCapCell.classList.add("table-data", "market-cap"); 59 | marketCapCell.textContent = `$${crypto.market_cap}`; 60 | row?.appendChild(marketCapCell); 61 | 62 | var chartCell = document.createElement("td"); 63 | var value = crypto.price_change_percentage_24h > 0 ? 1 : 2 64 | chartCell.classList.add("table-data"); 65 | chartCell.innerHTML = `chart`; 66 | row?.appendChild(chartCell); 67 | 68 | var tradeCell = document.createElement("td"); 69 | tradeCell.classList.add("table-data"); 70 | tradeCell.innerHTML = ``; 71 | row?.appendChild(tradeCell); 72 | 73 | tbody.appendChild(row); 74 | } -------------------------------------------------------------------------------- /assets/images/chart-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/chart-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/coin-7.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /wallet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Coinfolio - Confira os preços das principais criptomoedas ao vivo, gráficos, capitalização de mercado e volume de negócios 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 21 | 25 | 26 | 47 | 48 | 53 | 54 | Wallet 55 | 56 |
57 |
58 | 59 |
60 |
61 |
62 |
63 | 64 |
65 | 66 |
    67 | 68 |
  • 69 | 70 |
    • 71 | 72 |
  • 73 | 74 |
    • 75 | 76 |
  • 77 | 78 |
    • 79 | 80 |
  • 81 | 82 |
    • 83 | 84 |
  • 85 | 86 |
    • 87 | 88 |
  • 89 | 90 |
    • 91 | 92 |
  • 93 | 94 |
    • 95 | 96 |
  • 97 | 98 |
    • 99 | 100 |
  • 101 | 102 |
    • 103 | 104 |
105 | 106 |
    107 | 108 |
  • 109 |
    110 | 111 |
    112 | bitcoin logo 113 | 114 | 115 | Bitcoin BTC/USD 116 | 117 |
    118 | 119 | USD 46,168.95 120 | 121 |
    122 | 36,641.20 123 | 124 |
    -0.79%
    125 |
    126 | 127 |
    128 |
    • 129 | 130 |
  • 131 |
    132 | 133 |
    134 | ethereum logo 135 | 136 | 137 | Ethereum ETH/USD 138 | 139 |
    140 | 141 | USD 3,480.04 142 | 143 |
    144 | 36,641.20 145 | 146 |
    +10.55%
    147 |
    148 | 149 |
    150 |
    • 151 | 152 |
  • 153 |
    154 | 155 |
    156 | tether logo 157 | 158 | 159 | Tether USDT/USD 160 | 161 |
    162 | 163 | USD 1.00 164 | 165 |
    166 | 36,641.20 167 | 168 |
    -0.01%
    169 |
    170 | 171 |
    172 |
    • 173 | 174 |
  • 175 |
    176 | 177 |
    178 | bnb logo 179 | 180 | 181 | BNB BNB/USD 182 | 183 |
    184 | 185 | USD 443.56 186 | 187 |
    188 | 36,641.20 189 | 190 |
    -1.24%
    191 |
    192 | 193 |
    194 |
    • 195 | 196 |
197 | 198 |
199 | 200 |
201 |
202 | 203 |
204 |
205 | 206 | 388 | 389 | 390 | 391 | 392 | 393 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Coinfolio - Confira os preços das principais criptomoedas ao vivo, gráficos, capitalização de mercado e volume de negócios 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 20 | 21 | 42 | 43 | 48 | 49 | Wallet 50 | 51 | 52 |
53 |
54 | 55 |
56 |
57 | 58 |
59 |
60 | 61 |
62 | 63 |

Acompanhe seu portfólio e as tendências de mercado

64 | 65 |

66 | Coinfolio é a maneira mais fácil, segura e rápida de acompanhar sua carteira 67 |

68 | 69 | Comece agora mesmo 70 | 71 |
72 | 73 |
74 | hero banner 75 |
76 | 77 |
78 |
79 | 80 |
81 |
82 |
83 |
    84 |
85 |
86 |
87 |
88 | 89 |
90 |
91 | 92 |
93 |

Mercado de criptomoedas

94 | 95 | Ver todas moedas 96 |
97 | 98 |
99 | 100 |
    101 | 102 |
  • 103 | 104 |
    • 105 | 106 |
  • 107 | 108 |
    • 109 | 110 |
  • 111 | 112 |
    • 113 | 114 |
  • 115 | 116 |
    • 117 | 118 |
  • 119 | 120 |
    • 121 | 122 |
  • 123 | 124 |
    • 125 | 126 |
  • 127 | 128 |
    • 129 | 130 |
131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 |
#MoedaÚltimo preçoVariação nas 24hCapitalização de mercadoGráfico
161 |
162 | 163 |
164 |
165 |
166 |
167 | 168 |
169 | about banner 171 |
172 | 173 |
174 | 175 |

176 | O que é Coinfolio

177 | 178 |

179 | Coinfoilio é uma plataforma digital inovadora que oferece uma maneira conveniente e abrangente de gerenciar seus ativos financeiros criptográficos. Projetado para atender tanto a investidores iniciantes quanto a traders experientes, o Coinfoilio oferece uma variedade de recursos e ferramentas poderosas para acompanhar, analisar e otimizar seus investimentos em criptomoedas. 180 |

181 | 182 |
    183 | 184 |
  • 185 |
    186 | 187 | 188 |

    189 | Veja os preços das criptomoedas em tempo real

    190 |
    191 |
    • 192 | 193 |
  • 194 |
    195 | 196 | 197 |

    Acompanhe as melhores tendências de mercado

    198 |
    199 |
    • 200 | 201 |
202 | 203 | Explore More 204 | 205 |
206 | 207 |
208 |
209 |
210 |
211 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | :root{--cadet-blue-crayola:hsl(227,13%,73%);--maximum-yellow-red:hsl(41,95%,61%);--medium-sea-green:hsl(142,43%,54%);--blue-crayola_10:hsla(222,100%,61%,.05);--smocky-black_30:hsla(0,0%,6%,.3);--eerie-black-1:hsl(240,5%,8%);--eerie-black-2:hsl(228,9%,10%);--raisin-black:hsl(225,15%,16%);--blue-crayola:hsl(26,92%,46%);--roman-silver:hsl(223,10%,52%);--presian-red:hsl(0,64%,52%);--gunmetal_50:hsla(230,16%,22%,.5);--gainsboro:hsl(0,0%,85%);--cultured:hsl(0,0%,93%);--white_50:hsla(0,0%,100%,.5);--white_30:hsla(0,0%,100%,.3);--white_10:hsla(0,0%,100%,.1);--black_10:hsla(0,0%,0%,.1);--white:hsl(0,0%,100%);--gradient:linear-gradient(90deg,var(--white_10) 0px 77%,var(--white_50) 92%,transparent);--ff-dm-sans:'DM Sans',sans-serif;--fs-1:3.2rem;--fs-2:3rem;--fs-3:2.4rem;--fs-4:2rem;--fs-5:1.8rem;--fs-6:1.5rem;--fs-7:1.4rem;--fs-8:1.2rem;--fw-500:500;--fw-700:700;--section-padding:100px;--shadow-1:0px 4px 8px var(--black_10);--shadow-2:0px 30px 10px -20px var(--smocky-black_30);--shadow-3:0px 15px 10px -20px var(--smocky-black_30);--radius-12:12px;--radius-24:24px;--transition-1:0.25s ease;--transition-2:0.5s ease;--transition-3:1s ease;--cubic-out:cubic-bezier(.33,.85,.4,.96)} 2 | *, 3 | *::before, 4 | *::after { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | li { list-style: none; } 10 | a { 11 | text-decoration: none; 12 | color: inherit; 13 | } 14 | a, 15 | img, 16 | svg, 17 | data, 18 | span, 19 | button, 20 | ion-icon { display: block; } 21 | img { height: auto; } 22 | button{background:none;border:none;font:inherit;cursor:pointer} 23 | ion-icon{pointer-events:none} 24 | address{font-style:normal} 25 | table{border-collapse:collapse} 26 | html{font-family:var(--ff-dm-sans);font-size:10px;scroll-behavior:smooth} 27 | body{background-color:var(--eerie-black-2);color:var(--cadet-blue-crayola);font-size:1.6rem;line-height:1.4} 28 | 29 | body.active { overflow: hidden; } 30 | ::-webkit-scrollbar { width: 10px; } 31 | ::-webkit-scrollbar-track { background-color: hsl(220, 4%, 5%); } 32 | ::-webkit-scrollbar-thumb { background-color: hsl(220, 5%, 20%); } 33 | ::-webkit-scrollbar-thumb:hover { background-color: hsl(220, 5%, 30%); } 34 | :focus-visible { outline-offset: 4px; } 35 | .container { padding-inline: 15px; } 36 | .btn{color:var(--white);border-radius:50px} 37 | .btn-outline{font-size:var(--fs-6);font-weight:var(--fw-500);border:1px solid var(--white);padding:5px 15px;transition:var(--transition-1)} 38 | .btn-outline:is(:hover,:focus){background-color:var(--blue-crayola);border-color:var(--blue-crayola)} 39 | .btn-primary{position:relative;background-color:var(--blue-crayola);max-width:max-content;font-weight:var(--fw-700);padding:13px 30px;overflow:hidden;z-index:1} 40 | .btn-primary::after{content:"";position:absolute;top:0;left:0;bottom:0;right:-50px;background-image:var(--gradient);transform:translateX(-100%);opacity:0;z-index:-1;transition:var(--transition-2)} 41 | .btn-primary:is(:hover,:focus)::after{transform:translateX(0);opacity:1} 42 | .section{padding-block:var(--section-padding)} 43 | [data-section]>*{transform:translateY(50px);opacity:0;transition:var(--transition-3)} 44 | [data-section].active>*{opacity:1;transform:translateY(0)} 45 | .h1,.h2,.h3{color:var(--white);line-height:1.1} 46 | .h1{font-size:var(--fs-1)} 47 | .h2{font-size:var(--fs-2)} 48 | .h3{font-size:var(--fs-3)} 49 | .w-100{width:100%} 50 | .badge{color:var(--white);font-size:var(--fs-8);font-weight:var(--fw-700);padding:4px 8px;border-radius:50px} 51 | .badge.red{background-color:var(--presian-red)} 52 | .badge.green{background-color:var(--medium-sea-green)} 53 | .last-update.red{color:var(--presian-red)} 54 | .last-update.green{color:var(--medium-sea-green)} 55 | .section-text{font-size:var(--fs-5);margin-block:15px 35px} 56 | .section-list{margin-block-end:35px} 57 | .section-item:not(:last-child){margin-block-end:25px} 58 | @media (min-width: 575px) { 59 | :root { 60 | --fs-1: 4rem; 61 | --fs-2: 3.4rem; 62 | } 63 | .container { 64 | max-width: 540px; 65 | width: 100%; 66 | margin-inline: auto; 67 | } 68 | } 69 | 70 | @media (min-width: 768px) { 71 | :root { 72 | --fs-1: 5rem; 73 | --fs-2: 4rem; 74 | } 75 | .container { max-width: 750px; } 76 | .trend-tab .tab-content { grid-template-columns: 1fr 1fr; } 77 | .footer-top .container { grid-template-columns: repeat(3, 1fr); } 78 | .footer-brand { grid-column: 1 / 3; } 79 | .footer-bottom .container { 80 | display: flex; 81 | justify-content: space-between; 82 | align-items: center; 83 | } 84 | .copyright { margin-block-end: 0; } 85 | } 86 | 87 | @media (min-width: 992px) { 88 | .container { max-width: 960px; } 89 | .about .container { 90 | display: grid; 91 | grid-template-columns: 1fr 0.8fr; 92 | align-items: center; 93 | gap: 30px; 94 | } 95 | .about-banner { margin-block-end: 0; } 96 | } 97 | 98 | @media (min-width: 1200px) { 99 | :root { 100 | --fs-1: 5rem; 101 | --fs-2: 4rem; 102 | } 103 | .container { max-width: 1280px; } 104 | :is(.about, .app) .container { gap: 60px; } 105 | .footer-top { padding-block: 100px 90px; } 106 | .footer-top .container { grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr 0.5fr; } 107 | .footer-brand { grid-column: auto; } 108 | } 109 | 110 | 111 | .header{position:absolute;top:0;left:0;width:100%;background-color:var(--eerie-black-1);padding-block:15px;z-index:4;} 112 | .header.active{position:fixed;top:-66px;background-color:var(--white);border-block-start:1px solid var(--cultured);box-shadow:var(--shadow-1);animation:slideIn 0.25s var(--cubic-out) forwards;} 113 | @keyframes slideIn{0%{transform:translateY(0);background-color:var(--white);}100%{transform:translateY(100%);background-color:var(--eerie-black-2);}} 114 | .header>.container{display:flex;justify-content:space-between;align-items:center;gap:10px;} 115 | .logo{color:var(--white);font-size:2.5rem;font-weight:var(--fw-700);display:flex;align-items:center;gap:5px;} 116 | .nav-toggle-btn .line{width:26px;height:3px;background-color:var(--white);transition:var(--transition-1);} 117 | .nav-toggle-btn .line:not(:last-child){margin-block-end:4px;} 118 | .nav-toggle-btn{padding:8px 5px;margin-inline-start:auto;} 119 | .nav-toggle-btn.active .line-1{transform:rotate(45deg) translate(5px,6px);} 120 | .nav-toggle-btn.active .line-2{opacity:0;} 121 | .nav-toggle-btn.active .line-3{transform:rotate(-45deg) translate(4px,-5px);} 122 | .navbar{position:absolute;top:100%;left:0;width:100%;height:100vh;background-color:var(--eerie-black-1);max-height:0;overflow:hidden;visibility:hidden;transition:0.25s var(--cubic-out);} 123 | .navbar.active{max-height:calc(100vh - 63px);visibility:visible;transition-duration:0.5s;} 124 | .navbar-item:not(:last-child){border-block-end:1px solid var(--white_30);} 125 | .navbar-link{color:var(--white);font-weight:var(--fw-700);padding:12px 30px;transition:var(--transition-1);} 126 | .navbar-link:is(:hover,:focus,.active){color:var(--blue-crayola);} 127 | .header{padding-block:5px;} 128 | .header.active{top:-60px;} 129 | .header>.container{gap:50px;} 130 | .nav-toggle-btn{display:none;} 131 | .navbar,.navbar.active{all:unset;margin-inline-end:auto;} 132 | .navbar-list{display:flex;align-items:center;} 133 | .navbar-item:not(:last-child){border-block-end:none;} 134 | .navbar-link{font-size:var(--fs-7);padding:15px 12px;} 135 | .navbar-link:is(:hover,:focus,.active){background-color:var(--blue-crayola);color:var(--white);} 136 | .header.active{top:-64px;} 137 | .navbar-link{font-size:unset;} 138 | 139 | .hero { padding-block: 150px 140px; } 140 | .hero-content { margin-block-end: 80px; } 141 | .hero-text{font-size:var(--fs-5);margin-block:25px 40px;} 142 | .about { background-color: var(--eerie-black-1); } 143 | .about-banner { margin-block-end: 40px; } 144 | .hero-text { --fs-5: 2rem; } 145 | .hero-banner{max-width:max-content;margin-inline:auto;} 146 | .hero .container{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;} 147 | .hero-content { margin-block-end: 0; } 148 | .hero .container { gap: 100px; } 149 | 150 | .trend-margin-block {margin-block-start: -160px; } 151 | .trend-tab .tab-content { grid-template-columns: repeat(4, 1fr); } 152 | .trend { background-color: var(--eerie-black-1); padding-block-end: 0; } 153 | .trend-tab { background-color: var(--eerie-black-2); border: 1px solid var(--raisin-black); border-radius: var(--radius-24); padding: 20px; box-shadow: var(--shadow-2);} 154 | .trend-tab .tab-nav { display: flex; flex-wrap: wrap; padding-block-end: 20px; margin-block-end: 20px; border-block-end: 1px solid var(--raisin-black); } 155 | .trend-tab .tab-btn { color: var(--white); font-size: var(--fs-7); font-weight: var(--fw-700); padding: 7px 15px; border-radius: 50px; transition: var(--transition-1); } 156 | .trend-tab .tab-btn.active { background-color: var(--blue-crayola); } 157 | .trend-tab .tab-content { display: grid; gap: 20px; } 158 | .trend-card { padding: 20px; border-radius: var(--radius-12); transition: var(--transition-1); } 159 | .trend-card:is(:hover, .active) { background-color: var(--gunmetal_50); box-shadow: var(--shadow-3); } 160 | .trend-card .card-title-wrapper { display: flex; align-items: center; gap: 8px; } 161 | .trend-card .card-title { color: var(--white); font-size: var(--fs-7); font-weight: var(--fw-700); transition: var(--transition-1); } 162 | .trend-card .card-title:is(:hover, :focus) { color: var(--blue-crayola); } 163 | .trend-card .card-title .span { color: var(--cadet-blue-crayola); display: inline-block; margin-inline-start: 5px; } 164 | .trend-card .card-value { color: var(--white); font-size: var(--fs-3); font-weight: var(--fw-700); margin-block: 10px; } 165 | .trend-card .card-analytics { display: flex; align-items: center; gap: 8px; } 166 | .trend-card .current-price { font-size: var(--fs-7); } 167 | 168 | .market{background-color:var(--eerie-black-1);color:var(--white)} 169 | .market .title-wrapper{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-block-end:25px} 170 | .market .btn-link{position:relative;min-width:max-content;font-weight:var(--fw-700);transition:var(--transition-1)} 171 | .market .btn-link:is(:hover, :focus) { color: var(--blue-crayola); } 172 | .market .btn-link::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:var(--raisin-black);transition:var(--transition-1)} 173 | .market .btn-link:is(:hover, :focus)::after { background-color: var(--blue-crayola); } 174 | .market-tab{overflow-x:auto;padding-block-end:30px} 175 | .market-tab::-webkit-scrollbar { height: 14px; } 176 | .market-tab::-webkit-scrollbar-thumb{border:2px solid hsl(220,4%,5%);border-width:2px 10px} 177 | .market-tab .tab-nav{display:flex;align-items:center;gap:10px;padding-block-end:40px} 178 | .market-tab .tab-btn{min-width:max-content;color:var(--white);font-size:var(--fs-7);font-weight:var(--fw-700);padding:7px 24px;border-radius:50px} 179 | .market-tab .tab-btn.active { background-color: var(--blue-crayola); } 180 | .market-table { width: 100%; } 181 | .table-heading, 182 | .table-data { padding: 8px; } 183 | .table-heading{font-size:var(--fs-5);text-align:left;white-space:nowrap} 184 | .market-table .table-head { border-block-end: 2px solid var(--white); } 185 | .table-row:not(.table-title) { height: 90px; } 186 | .market-table .table-row{font-size:var(--fs-5);border-block-end:1px solid var(--raisin-black);transition:var(--transition-1)} 187 | .market-table .table-row:is(:hover, :focus-within) { background-color: var(--blue-crayola_10); } 188 | .market-table .add-to-fav{color:var(--cadet-blue-crayola);font-size:18px} 189 | .market-table .add-to-fav.active .icon-outline,.market-table .add-to-fav .icon-fill{display:none} 190 | .market-table .add-to-fav.active .icon-outline, 191 | .market-table .add-to-fav .icon-fill { display: none; } 192 | .market-table .add-to-fav .icon-outline, 193 | .market-table .add-to-fav.active .icon-fill { display: block; } 194 | .market-table .add-to-fav.active ion-icon { color: var(--maximum-yellow-red); } 195 | .market-table .wrapper{display:flex;align-items:center;gap:8px;min-width:max-content} 196 | .market-table .coin-name{font-size:var(--fs-5);display:flex;align-items:center;gap:10px;transition:var(--transition-1)} 197 | .market-table .coin-name .span{color:var(--roman-silver);font-size:var(--fs-7)} 198 | .market-table .coin-name:is(:hover, :focus) { color: var(--blue-crayola); } 199 | .market-table :is(.rank, .last-price, .market-cap) { font-weight: var(--fw-700); } 200 | .market-table .btn-outline{border-width:2px;padding-inline:10px;} 201 | .market-table .btn-outline:is(:hover, :focus) { background-color: var(--blue-crayola); border-color: var(--blue-crayola); } 202 | .market-tab { padding-block-end: 0; } 203 | 204 | 205 | .footer-top { background-color: var(--eerie-black-1); padding-block: 80px 50px; } 206 | .footer-top .container { display: grid; gap: 50px; } 207 | .footer .logo { font-size: 3rem; } 208 | .footer-title { color: var(--white); font-size: var(--fs-3); margin-block: 25px 20px; } 209 | .footer-contact-link:not(:last-child) { margin-block-end: 12px; } 210 | address.footer-contact-link { max-width: 30ch; } 211 | .footer-list-title { color: var(--white); font-size: var(--fs-7); font-weight: var(--fw-700); text-transform: uppercase; letter-spacing: 1px; } 212 | .footer-list > li:not(:last-child) { margin-block-end: 10px; } 213 | .footer-list > li:first-child { margin-block-end: 20px; } 214 | .footer-link { color: var(--gainsboro); transition: var(--transition-1); } 215 | .footer-link:is(:hover, :focus) { color: var(--blue-crayola); } 216 | .footer-bottom { background-color: var(--eerie-black-2); padding-block: 20px; } 217 | .copyright { text-align: center; margin-block-end: 20px; } 218 | .copyright-link { display: inline-block; color: var(--blue-crayola); } 219 | .social-list { display: flex; justify-content: center; gap: 20px; } 220 | .social-link { font-size: 18px; transition: var(--transition-1); } 221 | .social-link:is(:hover, :focus) { color: var(--blue-crayola); } 222 | .footer-top { padding-block: 100px 90px; } 223 | .footer-top .container { grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr 0.5fr; } 224 | .footer-brand { grid-column: auto; } 225 | --------------------------------------------------------------------------------