├── design ├── desktop-design.jpg ├── mobile-design.jpg └── desktop-preview.jpg ├── images ├── favicon-32x32.png ├── image-header-mobile.jpg └── image-header-desktop.jpg ├── screenshots ├── mobile-version.png └── desktop-version.png ├── style-guide.md ├── LICENSE ├── README.md ├── index.html └── style.css /design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santu369/frontendmentor-stats-preview-card-component/HEAD/design/desktop-design.jpg -------------------------------------------------------------------------------- /design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santu369/frontendmentor-stats-preview-card-component/HEAD/design/mobile-design.jpg -------------------------------------------------------------------------------- /images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santu369/frontendmentor-stats-preview-card-component/HEAD/images/favicon-32x32.png -------------------------------------------------------------------------------- /design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santu369/frontendmentor-stats-preview-card-component/HEAD/design/desktop-preview.jpg -------------------------------------------------------------------------------- /images/image-header-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santu369/frontendmentor-stats-preview-card-component/HEAD/images/image-header-mobile.jpg -------------------------------------------------------------------------------- /screenshots/mobile-version.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santu369/frontendmentor-stats-preview-card-component/HEAD/screenshots/mobile-version.png -------------------------------------------------------------------------------- /images/image-header-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santu369/frontendmentor-stats-preview-card-component/HEAD/images/image-header-desktop.jpg -------------------------------------------------------------------------------- /screenshots/desktop-version.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santu369/frontendmentor-stats-preview-card-component/HEAD/screenshots/desktop-version.png -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Very dark blue (main background): hsl(233, 47%, 7%) 15 | - Dark desaturated blue (card background): hsl(244, 38%, 16%) 16 | - Soft violet (accent): hsl(277, 64%, 61%) 17 | 18 | ### Neutral 19 | 20 | - White (main heading, stats): hsl(0, 0%, 100%) 21 | - Slightly transparent white (main paragraph): hsla(0, 0%, 100%, 0.75) 22 | - Slightly transparent white (stat headings): hsla(0, 0%, 100%, 0.6) 23 | 24 | ## Typography 25 | 26 | ### Body Copy 27 | 28 | - Font size: 15px 29 | 30 | ### Font 31 | 32 | - Family: [Inter](https://fonts.google.com/specimen/Inter) 33 | - Weights: 400, 700 34 | 35 | - Family: [Lexend Deca](https://fonts.google.com/specimen/Lexend+Deca) 36 | - Weights: 400 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 shiva santosh jana 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Stats preview card component solution 2 | 3 | This is a solution to the [Stats preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 4 | 5 | ## Table of contents 6 | 7 | - [Overview](#overview) 8 | - [The challenge](#the-challenge) 9 | - [Screenshots](#screenshots) 10 | - [Links](#links) 11 | - [My process](#my-process) 12 | - [Built with](#built-with) 13 | - [Continued development](#continued-development) 14 | - [Author](#author) 15 | 16 | ## Overview 17 | 18 | ### The challenge 19 | 20 | Users should be able to: 21 | 22 | - View the optimal layout depending on their device's screen size 23 | 24 | ### Screenshot 25 | 26 | Desktop version 27 | 28 | ![desktop version](/screenshots/desktop-version.png) 29 | 30 | Mobile version 31 | 32 | ![mobile version](/screenshots/mobile-version.png) 33 | 34 | ### Links 35 | 36 | - Solution URL: [Code on GitHub](https://github.com/santu369/frontendmentor-stats-preview-card-component) 37 | - Live Site URL: [GitHub Pages Live URL](https://santu369.github.io/frontendmentor-stats-preview-card-component) 38 | 39 | ## My process 40 | 41 | ### Built with 42 | 43 | - Semantic HTML5 markup 44 | - CSS custom properties 45 | - Flexbox 46 | - Desktop-first workflow 47 | 48 | ### Continued development 49 | 50 | Will do more of these challenges to improve my skills. 51 | 52 | ## Author 53 | 54 | - Website - [Shiva Santosh Jana](https://santu369.github.io/FreeCodeCamp-PersonalPortfolioWebpage) 55 | - Frontend Mentor - [@santu369](https://www.frontendmentor.io/profile/santu369) 56 | - Twitter - [@santu69](https://www.twitter.com/santu69) 57 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 | Frontend Mentor | Stats preview card component 15 | 16 | 17 |
18 |
19 |

Get insights that help your business grow.

20 |
21 |

22 | Discover the benefits of data analytics and make better decisions 23 | regarding revenue, customer experience, and overall efficiency. 24 |

25 |
    26 |
  • 27 |

    10k+

    28 |

    companies

    29 |
    • 30 |
  • 31 |

    314

    32 |

    templates

    33 |
    • 34 |
  • 35 |

    12M+

    36 |

    queries

    37 |
    • 38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap"); 2 | 3 | /* variables */ 4 | 5 | :root { 6 | font-size: 15px; 7 | --prim-dark-blue: hsl(233, 47%, 7%); 8 | --prim-sat-blue: hsl(244, 38%, 16%); 9 | --prim-violet: hsl(277, 64%, 61%); 10 | 11 | --neu-white: hsl(0, 0%, 100%); 12 | --neu-trans-white: hsla(0, 0%, 100%, 0.75); 13 | --neu-more-trans-white: hsla(0, 0%, 100%, 0.6); 14 | 15 | --bg-violet: hsl(277deg, 100%, 50%, 0.42); 16 | --bg-light-violet: hsl(293deg, 42%, 35%, 0.24); 17 | } 18 | 19 | /* defaults */ 20 | 21 | *, 22 | *::after, 23 | *::before { 24 | margin: 0; 25 | padding: 0; 26 | box-sizing: border-box; 27 | } 28 | 29 | body { 30 | font-family: "Inter", sans-serif; 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | min-height: 100vh; 35 | background-color: var(--prim-dark-blue); 36 | color: var(--neu-white); 37 | font-weight: 400; 38 | } 39 | 40 | /* stats card */ 41 | 42 | main { 43 | min-width: 600px; 44 | z-index: 1; 45 | display: flex; 46 | margin: 1em; 47 | } 48 | 49 | section { 50 | display: flex; 51 | flex-direction: column; 52 | padding: 5.85em 7em 5.85em 5.85em; 53 | width: 570px; 54 | min-width: 300px; 55 | background: var(--prim-sat-blue); 56 | border-radius: 10px 0 0 10px; 57 | } 58 | 59 | section h1 { 60 | color: var(--neu-white); 61 | font-size: 2.25rem; 62 | margin-bottom: 0.75em; 63 | font-weight: 700; 64 | } 65 | 66 | section h1 span { 67 | color: var(--prim-violet); 68 | } 69 | 70 | section .content { 71 | margin-right: 2em; 72 | } 73 | 74 | section .lead { 75 | color: var(--neu-trans-white); 76 | line-height: 1.5em; 77 | margin-bottom: 5em; 78 | } 79 | 80 | section ul { 81 | display: flex; 82 | list-style: none; 83 | justify-content: space-between; 84 | letter-spacing: 1px; 85 | } 86 | 87 | section ul h2 { 88 | color: var(--neu-white); 89 | margin-bottom: 0.3em; 90 | } 91 | 92 | section ul p { 93 | font-family: "Lexend Deca", sans-serif; 94 | color: var(--neu-more-trans-white); 95 | text-transform: uppercase; 96 | font-size: 0.75rem; 97 | } 98 | 99 | .bg-img { 100 | min-height: 10em; 101 | width: 540px; 102 | min-width: 200px; 103 | background: url(images/image-header-desktop.jpg); 104 | background-repeat: no-repeat; 105 | background-size: cover; 106 | border-radius: 0 10px 10px 0; 107 | overflow: hidden; 108 | } 109 | 110 | .overlay { 111 | background: var(--bg-violet); 112 | height: 100%; 113 | } 114 | 115 | .overlay-2 { 116 | background: var(--bg-light-violet); 117 | height: 100%; 118 | mix-blend-mode: color-burn; 119 | } 120 | 121 | /* footer */ 122 | 123 | .attribution { 124 | position: absolute; 125 | bottom: 0; 126 | font-size: 0.75rem; 127 | line-height: 20px; 128 | text-align: center; 129 | color: var(--neu-more-trans-white); 130 | margin-bottom: 10px; 131 | } 132 | 133 | .attribution a { 134 | text-decoration: none; 135 | color: var(--neu-trans-white); 136 | font-weight: bold; 137 | } 138 | 139 | .attribution a:hover { 140 | color: var(--prim-violet); 141 | } 142 | 143 | /* media queries */ 144 | 145 | @media only screen and (max-width: 1024px) { 146 | :root { 147 | font-size: 12px; 148 | } 149 | section { 150 | padding: 3em 4.5em 3em 3em; 151 | } 152 | } 153 | 154 | @media only screen and (max-width: 625px) { 155 | body { 156 | flex-direction: column; 157 | } 158 | main { 159 | flex-direction: column-reverse; 160 | margin: 10px; 161 | min-width: 200px; 162 | margin-top: 5em; 163 | } 164 | section { 165 | padding: 0; 166 | padding: 3em; 167 | width: 300px; 168 | border-radius: 0 0 10px 10px; 169 | } 170 | section h1, 171 | section .lead { 172 | text-align: center; 173 | } 174 | section .lead { 175 | font-size: 1.1rem; 176 | margin-bottom: 2em; 177 | line-height: 1.75em; 178 | } 179 | section .content { 180 | margin-right: 0; 181 | } 182 | section ul { 183 | flex-direction: column; 184 | align-items: center; 185 | } 186 | section ul li { 187 | margin-bottom: 2em; 188 | } 189 | section ul h2 { 190 | font-size: 2rem; 191 | text-align: center; 192 | margin-bottom: 0.25em; 193 | } 194 | section ul p { 195 | font-size: 1.05rem; 196 | } 197 | .bg-img { 198 | height: 220px; 199 | width: 300px; 200 | border-radius: 10px 10px 0 0; 201 | background: url(images/image-header-mobile.jpg) no-repeat; 202 | background-size: contain; 203 | } 204 | .attribution { 205 | position: relative; 206 | margin-top: 20px; 207 | } 208 | } 209 | --------------------------------------------------------------------------------