├── wallet.json ├── assets ├── album.jpg ├── avatar.jpg ├── play.svg ├── pause.svg ├── add.svg ├── next.svg ├── previous.svg ├── chevronLeft.svg ├── chevronRight.svg ├── playlist.svg ├── playRounded.svg ├── home.svg ├── heart.svg ├── time.svg ├── download.svg ├── more.svg ├── repeat.svg ├── search.svg ├── shuffle.svg ├── speaker.svg ├── disc.svg └── friend.svg ├── public ├── favicon.ico ├── assets │ ├── album.jpg │ ├── avatar.jpg │ ├── play.svg │ ├── add.svg │ ├── next.svg │ ├── previous.svg │ ├── chevronLeft.svg │ ├── chevronRight.svg │ ├── playlist.svg │ ├── playRounded.svg │ ├── home.svg │ ├── heart.svg │ ├── time.svg │ ├── download.svg │ ├── more.svg │ ├── repeat.svg │ ├── search.svg │ ├── shuffle.svg │ ├── speaker.svg │ ├── disc.svg │ └── friend.svg └── vercel.svg ├── postcss.config.js ├── pages ├── _app.js ├── homepage.js └── index.js ├── tailwind.config.js ├── components ├── navLink.js ├── activityCard.js ├── activity.js └── nav.js ├── next.config.js ├── .gitignore ├── data ├── activities.js └── songs.js ├── styles ├── globals.css ├── UploadModal.module.css └── Home.module.css ├── package.json └── readme.md /wallet.json: -------------------------------------------------------------------------------- 1 | { 2 | "wallet": "insert your wallet config file here" 3 | } 4 | -------------------------------------------------------------------------------- /assets/album.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victorykop/spotify-clone-blockchain/HEAD/assets/album.jpg -------------------------------------------------------------------------------- /assets/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victorykop/spotify-clone-blockchain/HEAD/assets/avatar.jpg -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victorykop/spotify-clone-blockchain/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/assets/album.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victorykop/spotify-clone-blockchain/HEAD/public/assets/album.jpg -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/assets/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/victorykop/spotify-clone-blockchain/HEAD/public/assets/avatar.jpg -------------------------------------------------------------------------------- /assets/play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/pause.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/previous.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /public/assets/add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/previous.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/chevronLeft.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/chevronRight.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/chevronLeft.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/chevronRight.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/playlist.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | "./pages/**/*.{js,ts,jsx,tsx}", 4 | "./components/**/*.{js,ts,jsx,tsx}", 5 | ], 6 | theme: { 7 | extend: {}, 8 | }, 9 | plugins: [], 10 | } 11 | -------------------------------------------------------------------------------- /assets/playRounded.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/playlist.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/playRounded.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/heart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/heart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/time.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/time.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/more.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/more.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/homepage.js: -------------------------------------------------------------------------------- 1 | import Nav from '../components/nav' 2 | import Activity from '../components/activity' 3 | 4 | const HomePage = () => { 5 | return ( 6 |
7 |
11 | ) 12 | } 13 | 14 | export default HomePage 15 | -------------------------------------------------------------------------------- /assets/repeat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/repeat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/navLink.js: -------------------------------------------------------------------------------- 1 | const styles = { 2 | navLink: `flex item-center mb-5 cursor-pointer hover:text-[#fff] text-[#b3b3b3]`, 3 | navLinkText: `ml-5`, 4 | } 5 | 6 | const NavLink = ({ title, icon }) => { 7 | return ( 8 |
9 | 10 |

{title}

11 |
12 | ) 13 | } 14 | 15 | export default NavLink 16 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | env: { 5 | REACT_APP_CLUSTER: process.env.REACT_APP_CLUSTER, 6 | }, 7 | images: { 8 | domains: [ 9 | 'kajabi-storefronts-production.kajabi-cdn.com', 10 | 'upload.wikimedia.org', 11 | 'i.ytimg.com', 12 | 'angartwork.akamaized.net' 13 | ], 14 | }, 15 | } 16 | 17 | module.exports = nextConfig 18 | -------------------------------------------------------------------------------- /assets/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import HomePage from './homepage' 2 | 3 | export default function Home() { 4 | return ( 5 |
6 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /public/assets/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/shuffle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/shuffle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/speaker.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/speaker.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/disc.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/disc.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/friend.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/friend.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # testing 9 | coverage 10 | 11 | # next.js 12 | out/ 13 | ./next 14 | .next/ 15 | .next 16 | 17 | # production 18 | build 19 | 20 | # misc 21 | .DS_Store 22 | *.pem 23 | 24 | # debug 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | .pnpm-debug.log* 29 | 30 | # local env files 31 | .env.local 32 | .env.development.local 33 | .env.test.local 34 | .env.production.local 35 | 36 | # vercel 37 | .vercel 38 | 39 | # snyk code quality 40 | .dccache 41 | 42 | 43 | target 44 | 45 | *.wav -------------------------------------------------------------------------------- /data/activities.js: -------------------------------------------------------------------------------- 1 | export const activities = [ 2 | { 3 | index: 1, 4 | title: 'Enter Sandman', 5 | subTitle: 'Metallica', 6 | avatar: 'https://i.scdn.co/image/ab6761610000e5eb8101d13bdd630b0889acd2fd', 7 | }, 8 | { 9 | index: 2, 10 | title: "Drop it Like it's Hot", 11 | subTitle: 'Snoop Dogg', 12 | avatar: 13 | 'https://resources.tidal.com/images/3e29689c/351e/4832/9c33/45619c5e46dc/750x750.jpg', 14 | }, 15 | { 16 | index: 3, 17 | title: 'goosebumps', 18 | subTitle: 'Travis Scott', 19 | avatar: 20 | 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRhR6m3xIp4gsabf58BUMxlt9KKOe2IDsBFJZIZ5BjkXpOjS_YY', 21 | }, 22 | ] 23 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | html, 6 | body { 7 | padding: 0; 8 | margin: 0; 9 | min-height: 100vh; 10 | color: #fff; 11 | background: linear-gradient(to bottom, #BCA0A0, #242424b0, #242424); 12 | } 13 | 14 | a { 15 | color: inherit; 16 | text-decoration: none; 17 | } 18 | 19 | * { 20 | box-sizing: border-box; 21 | } 22 | 23 | input[type=range] { 24 | margin: 0 10px; 25 | height: 6px; 26 | border-radius: 100px; 27 | background: #fff; 28 | appearance: none; 29 | width: 560px; 30 | outline: none; 31 | } 32 | 33 | #volume-range { 34 | width: 200px; 35 | } 36 | 37 | input[type=range]::-moz-range-thumb { 38 | background: #22C55E; 39 | border: none; 40 | } -------------------------------------------------------------------------------- /components/activityCard.js: -------------------------------------------------------------------------------- 1 | import Image from 'next/image' 2 | 3 | const ActivityCard = ({ title, subTitle, avatar }) => { 4 | return ( 5 |
6 |
7 | 14 |
15 |
16 |
{title}
17 |
{subTitle}
18 |
19 |
20 | ) 21 | } 22 | 23 | export default ActivityCard 24 | 25 | const styles = { 26 | profileAvatarContainer: `w-14 h-14 rounded-full -ml-2 mr-3`, 27 | activityCard: `flex mb-6 cursor-pointer hover:opacity-50`, 28 | avatar: `rounded-full object-cover`, 29 | } 30 | -------------------------------------------------------------------------------- /data/songs.js: -------------------------------------------------------------------------------- 1 | export const songs = [ 2 | { 3 | index: 1, 4 | title: 'Path Less Traveled', 5 | artiste: 'Lo-Fi', 6 | plays: '20,382', 7 | songLength: '2:43', 8 | album: 'Songs & Beats', 9 | cover: 10 | 'https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/284832/settings_images/rLlCifhXRJiT0RoN2FjK_Logo_roundbackground_black.png', 11 | link: 'https://res.cloudinary.com/dgjl7f1o0/video/upload/v1653077699/spotify-clone/Copy_of_1._Harris_Heller_-_Path_Less_Traveled_hlxpnf.mp3', 12 | }, 13 | { 14 | index: 2, 15 | title: 'Radiant Vibes', 16 | artiste: 'SteamBeats originals', 17 | plays: '1,324', 18 | songLength: '4:50', 19 | album: 'The Random House', 20 | cover: 21 | 'https://upload.wikimedia.org/wikipedia/commons/3/3b/Javascript_Logo.png', 22 | link: 'https://res.cloudinary.com/dgjl7f1o0/video/upload/v1653077728/spotify-clone/Copy_of_2._Harris_Heller_-_Radiant_Vibes_b62ofa.mp3', 23 | }, 24 | ] 25 | -------------------------------------------------------------------------------- /components/activity.js: -------------------------------------------------------------------------------- 1 | import { activities } from '../data/activities' 2 | import ActivityCard from './activityCard' 3 | 4 | const styles = { 5 | activity: `bg-black w-96 h-screen p-5 py-10 text-white`, 6 | title: `flex items-center justify-between mb-10`, 7 | profileAvatarContainer: `w-14 h-14 rounded-full -ml-2 mr-3`, 8 | activityCard: `flex mb-6`, 9 | } 10 | 11 | const Activity = () => { 12 | return ( 13 |
14 |
15 | Friend Activity 16 | 17 |
18 | 19 |
20 | {activities.map((activity, index) => { 21 | return ( 22 | 28 | ) 29 | })} 30 |
31 |
32 | ) 33 | } 34 | 35 | export default Activity 36 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bts-spotify-clone-blockchain", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@project-serum/anchor": "^0.22.1", 13 | "@project-serum/common": "^0.0.1-beta.3", 14 | "@project-serum/serum": "^0.13.61", 15 | "@solana/spl-token": "^0.2.0", 16 | "@solana/wallet-adapter-base": "^0.9.5", 17 | "@solana/wallet-adapter-react": "^0.15.4", 18 | "@solana/wallet-adapter-react-ui": "^0.9.6", 19 | "@solana/wallet-adapter-wallets": "^0.15.5", 20 | "@solana/web3.js": "^1.37.0", 21 | "ardrive-core-js": "^1.13.0", 22 | "autoprefixer": "^10.4.4", 23 | "axios": "^0.27.2", 24 | "dotenv": "^16.0.0", 25 | "multiparty": "^4.2.3", 26 | "next": "12.1.0", 27 | "next-connect": "^0.12.2", 28 | "parse-multipart-data": "^1.3.0", 29 | "postcss": "^8.4.12", 30 | "react": "17.0.2", 31 | "react-dom": "17.0.2", 32 | "swr": "^1.3.0", 33 | "tailwindcss": "^3.0.24" 34 | }, 35 | "devDependencies": { 36 | "autoprefixer": "^10.4.4", 37 | "eslint": "8.13.0", 38 | "eslint-config-next": "12.1.5", 39 | "postcss": "^8.4.12", 40 | "tailwindcss": "^3.0.24" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /styles/UploadModal.module.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | position: absolute; 3 | left: 50%; 4 | top: 50%; 5 | transform: translate(-50%, -50%); 6 | z-index: 10; 7 | background-color: black; 8 | min-width: 20rem; 9 | min-height: 20rem; 10 | border-radius: 10px; 11 | padding: 1.2rem; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | .modalButtons { 19 | display: flex; 20 | justify-content: space-evenly; 21 | margin-top: 20px; 22 | padding: 10px; 23 | } 24 | 25 | .title { 26 | font-weight: bolder; 27 | font-size: 1.5rem; 28 | margin: 1.5rem 0 3rem 0; 29 | } 30 | 31 | .inputField { 32 | width: 100%; 33 | margin-bottom: 1rem; 34 | } 35 | 36 | .inputTitle { 37 | font-weight: 600; 38 | font-size: 1rem; 39 | margin-bottom: 0.5rem; 40 | } 41 | 42 | .inputContainer { 43 | display: flex; 44 | border: 1px #ecf1f4 solid; 45 | border-radius: 1rem; 46 | padding: 0.6rem 0.4rem; 47 | background-color: #fafcfc; 48 | color: #000; 49 | } 50 | 51 | .input { 52 | flex: 1; 53 | border: none; 54 | outline: none; 55 | background: none; 56 | } 57 | 58 | .button { 59 | color: white; 60 | padding: 5px; 61 | border-radius: 10px; 62 | border: none; 63 | padding: 0.4rem 1rem; 64 | border-radius: 9px; 65 | color: #fff; 66 | cursor: pointer; 67 | transition: 0.2s linear; 68 | width: 8rem; 69 | align-items: center; 70 | justify-content: center; 71 | display: flex; 72 | font-weight: 600; 73 | font-size: 0.9rem; 74 | margin: 0.5rem; 75 | } 76 | 77 | .createButton { 78 | background-color: #4e44ce; 79 | } 80 | 81 | .cancelButton { 82 | border: 2px #fe2d55 solid; 83 | color: #fe2d55; 84 | } 85 | -------------------------------------------------------------------------------- /components/nav.js: -------------------------------------------------------------------------------- 1 | import NavLink from './navLink' 2 | 3 | const styles = { 4 | nav: `bg-black h-screen w-96 p-5 py-10 `, 5 | link: `hover:text-[#fff]`, 6 | playlistName: `text-[#b3b3b3] cursor-default text-sm hover:text-[#fff]` 7 | } 8 | 9 | const Nav = () => { 10 | return ( 11 |
12 |
13 | 14 | 19 | 24 |
25 | 26 |
27 | 32 | 37 |
38 | 39 |
40 |

GHOST SONGS

41 |

42 | CarPlay Vol.2 43 |

44 |

45 | Country Dump 46 |

47 |

48 | Energy Booster: Country 49 |

50 |

51 | Funky 52 |

53 |

54 | Coaching 🔥 55 |

56 |

57 | Country 58 |

59 |

60 | Your Top Songs 2019 61 |

62 |
63 |
64 | ) 65 | } 66 | 67 | export default Nav 68 | -------------------------------------------------------------------------------- /styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | padding: 0 2rem; 3 | } 4 | 5 | .main { 6 | min-height: 100vh; 7 | padding: 4rem 0; 8 | flex: 1; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .footer { 16 | display: flex; 17 | flex: 1; 18 | padding: 2rem 0; 19 | border-top: 1px solid #eaeaea; 20 | justify-content: center; 21 | align-items: center; 22 | } 23 | 24 | .footer a { 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | flex-grow: 1; 29 | } 30 | 31 | .title a { 32 | color: #0070f3; 33 | text-decoration: none; 34 | } 35 | 36 | .title a:hover, 37 | .title a:focus, 38 | .title a:active { 39 | text-decoration: underline; 40 | } 41 | 42 | .title { 43 | margin: 0; 44 | line-height: 1.15; 45 | font-size: 4rem; 46 | } 47 | 48 | .title, 49 | .description { 50 | text-align: center; 51 | } 52 | 53 | .description { 54 | margin: 4rem 0; 55 | line-height: 1.5; 56 | font-size: 1.5rem; 57 | } 58 | 59 | .code { 60 | background: #fafafa; 61 | border-radius: 5px; 62 | padding: 0.75rem; 63 | font-size: 1.1rem; 64 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 65 | Bitstream Vera Sans Mono, Courier New, monospace; 66 | } 67 | 68 | .grid { 69 | display: flex; 70 | align-items: center; 71 | justify-content: center; 72 | flex-wrap: wrap; 73 | max-width: 800px; 74 | } 75 | 76 | .card { 77 | margin: 1rem; 78 | padding: 1.5rem; 79 | text-align: left; 80 | color: inherit; 81 | text-decoration: none; 82 | border: 1px solid #eaeaea; 83 | border-radius: 10px; 84 | transition: color 0.15s ease, border-color 0.15s ease; 85 | max-width: 300px; 86 | } 87 | 88 | .card:hover, 89 | .card:focus, 90 | .card:active { 91 | color: #0070f3; 92 | border-color: #0070f3; 93 | } 94 | 95 | .card h2 { 96 | margin: 0 0 1rem 0; 97 | font-size: 1.5rem; 98 | } 99 | 100 | .card p { 101 | margin: 0; 102 | font-size: 1.25rem; 103 | line-height: 1.5; 104 | } 105 | 106 | .logo { 107 | height: 1em; 108 | margin-left: 0.5rem; 109 | } 110 | 111 | @media (max-width: 600px) { 112 | .grid { 113 | width: 100%; 114 | flex-direction: column; 115 | } 116 | } 117 | --------------------------------------------------------------------------------