├── .gitignore ├── scss ├── globals │ ├── _index.scss │ ├── abstracts │ │ ├── _index.scss │ │ ├── _space.scss │ │ ├── _colors.scss │ │ └── _typography.scss │ └── _boilerplate.scss └── style.scss ├── hero_image.jpg ├── design ├── figma.png ├── design_brief.png └── full_webpage.png ├── README.MD ├── dist ├── style.css.map └── style.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode -------------------------------------------------------------------------------- /scss/globals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "abstracts"; 2 | @forward "boilerplate"; 3 | -------------------------------------------------------------------------------- /hero_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piotrnajda3000/landing-page/HEAD/hero_image.jpg -------------------------------------------------------------------------------- /design/figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piotrnajda3000/landing-page/HEAD/design/figma.png -------------------------------------------------------------------------------- /scss/globals/abstracts/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "colors"; 2 | @forward "typography"; 3 | @forward "space"; 4 | -------------------------------------------------------------------------------- /design/design_brief.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piotrnajda3000/landing-page/HEAD/design/design_brief.png -------------------------------------------------------------------------------- /design/full_webpage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piotrnajda3000/landing-page/HEAD/design/full_webpage.png -------------------------------------------------------------------------------- /scss/globals/abstracts/_space.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --space-1: 16px; 3 | --space-2: 36px; 4 | --space-3: 45px; 5 | --space-4: 60px; 6 | --space-5: 181px; 7 | --space-6: 200px; 8 | } 9 | -------------------------------------------------------------------------------- /scss/globals/abstracts/_colors.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-dark: hsla(330, 48.5%, 32%, 1); 3 | --txt-dark: hsla(330, 40.2%, 45.9%, 1); 4 | --txt-dark-2: hsla(330, 40.2%, 45.9%, 1); 5 | --cta: hsla(330, 91.2%, 60%, 1); 6 | --txt-light: hsla(330, 93.3%, 94.1%, 1); 7 | --txt-grey: hsla(0, 0%, 94.1%, 1); 8 | } 9 | -------------------------------------------------------------------------------- /scss/globals/_boilerplate.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-size: 100%; 4 | } 5 | 6 | *, 7 | *::before, 8 | *::after { 9 | box-sizing: inherit; 10 | margin: 0; 11 | padding: 0; 12 | } 13 | 14 | ul { 15 | list-style: none; 16 | } 17 | 18 | button { 19 | font-family: inherit; 20 | color: inherit; 21 | border: 0; 22 | } 23 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | # Landing Page 2 | 3 | Plain styled site. Practicing my CSS skills. Yet to implement media query responsiveness. 4 | 5 | ## _[View the site](https://piotrnajda3000.github.io/landing-page/)_ 6 | 7 | **Project brief:** implement a website from a given design 8 | 9 | 10 | 11 | I've reimplemented part of the design in Figma first, as a starting point: 12 | 13 | ![](design/figma.png) 14 | 15 | The final outcome: 16 | 17 | ![](design/full_webpage.png) 18 | 19 | --- 20 | 21 | **Acknowledgements:** Hero image by [Paweł Czerwiński](https://unsplash.com/@pawel_czerwinski) 22 | -------------------------------------------------------------------------------- /scss/globals/abstracts/_typography.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --fontSize-1: 1rem; // 16 px @ 100% font-size 3 | --fontSize-2: 1.125rem; // 18 px 4 | --fontSize-3: 1.75rem; // 28 px 5 | --fontSize-4: 2rem; // 32 px 6 | --fontSize-5: 2.25rem; // 36 px 7 | --fontWeight-0: 200; 8 | --fontWeight-1: 400; 9 | --fontWeight-2: 600; 10 | } 11 | 12 | body { 13 | font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 14 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 15 | color: var(--txt-grey); 16 | } 17 | 18 | h1, 19 | h2, 20 | h3 { 21 | font-weight: 600; 22 | line-height: 1.1; 23 | margin-top: 0; 24 | } 25 | 26 | p { 27 | margin-top: 0; 28 | } 29 | 30 | a, 31 | a:visited, 32 | a:active { 33 | color: inherit; 34 | text-decoration: none; 35 | } 36 | -------------------------------------------------------------------------------- /dist/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../scss/globals/abstracts/_colors.scss","style.css","../scss/globals/abstracts/_typography.scss","../scss/globals/abstracts/_space.scss","../scss/globals/_boilerplate.scss","../scss/style.scss"],"names":[],"mappings":"AAAA;EACE,mCAAA;EACA,sCAAA;EACA,wCAAA;EACA,+BAAA;EACA,uCAAA;EACA,iCAAA;ACCF;;ACPA;EACE,kBAAA;EACA,sBAAA;EACA,qBAAA;EACA,kBAAA;EACA,qBAAA;EACA,mBAAA;EACA,mBAAA;EACA,mBAAA;ADUF;;ACPA;EACE,iJAAA;EAEA,sBAAA;ADSF;;ACNA;;;EAGE,gBAAA;EACA,gBAAA;EACA,aAAA;ADSF;;ACNA;EACE,aAAA;ADSF;;ACNA;;;EAGE,cAAA;EACA,qBAAA;ADSF;;AE1CA;EACE,eAAA;EACA,eAAA;EACA,eAAA;EACA,eAAA;EACA,gBAAA;EACA,gBAAA;AF6CF;;AGnDA;EACE,sBAAA;EACA,eAAA;AHsDF;;AGnDA;;;EAGE,mBAAA;EACA,SAAA;EACA,UAAA;AHsDF;;AGnDA;EACE,gBAAA;AHsDF;;AGnDA;EACE,oBAAA;EACA,cAAA;EACA,SAAA;AHsDF;;AIxEA;EACE,iBAAA;EACA,YAAA;AJ2EF;;AIxEA;EACE,aAAA;EACA,sBAAA;AJ2EF;AIzEE;EAKE,gCAAA;EACA,4CAAA;EACA,iDAAA;AJuEJ;AI7EI;EACE,mBAAA;AJ+EN;AIxEI;EACE,WAAA;EACA,aAAA;EACA,8BAAA;EACA,qBAAA;EACA,mBAAA;AJ0EN;AIxEM;EACE,4BAAA;EACA,gCAAA;EACA,uBAAA;AJ0ER;AIvEM;EACE,aAAA;EACA,mBAAA;AJyER;AIxEQ;EACE,4BAAA;EACA,sBAAA;AJ0EV;AIrEI;EACE,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,mBAAA;AJuEN;AIrEM;EACE,OAAA;EACA,aAAA;EACA,mBAAA;EACA,sBAAA;AJuER;AIrEQ;EACE,uBAAA;EACA,4BAAA;AJuEV;AInEM;EACE,mBAAA;EACA,UAAA;EACA,kBAAA;EACA,oCAAA;EACA,sBAAA;AJqER;AIhEE;EAKE,kCAAA;EACA,4CAAA;EACA,kDAAA;AJ8DJ;AIpEI;EACE,mBAAA;AJsEN;AI/DI;EACE,aAAA;EACA,uBAAA;EACA,wBAAA;AJiEN;AI9DI;EACE,aAAA;EACA,mBAAA;AJgEN;AI9DM;EACE,OAAA;EAyBA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;EACA,gCAAA;AJwCR;AIrEQ;EACE,kBAAA;EACA,YAAA;EACA,aAAA;AJuEV;AIrEU;EACE,uCAAA;AJuEZ;AIpEU;EACE,iCAAA;AJsEZ;AInEU;EACE,6BAAA;AJqEZ;AIlEU;EACE,2BAAA;AJoEZ;AIjEQ;EACE,kBAAA;AJmEV;AIvDE;EAKE,iCAAA;EACA,4CAAA;AJqDJ;AI1DI;EACE,eAAA;AJ4DN;AIrDM;EACE,4BAAA;EACA,qBAAA;EACA,gCAAA;AJuDR;AIrDM;EACE,oBAAA;EACA,qBAAA;EACA,gCAAA;AJuDR;AIlDE;EAKE,kCAAA;EACA,4CAAA;EACA,8BAAA;AJgDJ;AItDI;EACE,eAAA;AJwDN;AIjDI;EACE,QAAA;EACA,kBAAA;EACA,4BAAA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,6BAAA;EACA,8BAAA;AJmDN;AIjDM;EACE,aAAA;EACA,sBAAA;EACA,QAAA;AJmDR;AIjDQ;EACE,gCAAA;EACA,4BAAA;AJmDV;;AI5CA;EACE,YAAA;EACA,YAAA;EAEA,kBAAA;AJ8CF;AI5CE;EACE,4BAAA;EACA,gCAAA;EACA,4BAAA;AJ8CJ;AI5CI;EACE,6BAAA;EACA,iCAAA;AJ8CN","file":"style.css"} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Landing Page 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 |
19 |
20 |
21 | 22 | 27 |
28 |
29 |
30 |

This website is awesome

31 |

32 | This website has some subtext that goes here under the main title. 33 | It’s a smaller font and the color is lower contrast. 34 |

35 | 36 |
37 |
38 |
39 |
40 |
41 | 42 |
43 |
44 |

45 | Some random information 46 |

47 |
48 |
49 |
50 |

this is some other subtext 51 | under an illustration 52 | or image 53 |

54 |
55 |
56 |
57 |

this is even some more other 58 | under an illustration 59 | or image 60 |

61 |
62 |
63 |
64 |

this is definitely a subtext 65 | under a box 66 |

67 |
68 |
69 |
70 |

this is is text speaking 71 |

72 |
73 |
74 |
75 |
76 |
77 |
78 |

This is an inspiring quote, or a testimonial from a customer. Maybe it's just filling up space, or maybe people will actually read it. Who knows? All I know is that it looks just fine.

79 |

— Someone You Trust

80 |
81 |
82 |
83 |
84 |
85 |
86 |

Call to action! It's time!

87 |

Sign up for our product by clicking that button right over there!

88 |
89 | 90 |
91 |
92 |
93 | 94 | 95 | -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | @forward "globals"; 2 | 3 | .wrapper { 4 | max-width: 1110px; 5 | margin: auto; 6 | } 7 | 8 | .section { 9 | display: flex; 10 | flex-direction: column; 11 | 12 | &--1 { 13 | .wrapper { 14 | gap: var(--space-4); 15 | } 16 | 17 | background-color: var(--bg-dark); 18 | padding-block: var(--space-2) var(--space-4); 19 | padding-inline: clamp(var(--space-1), 5vw, 181px); 20 | 21 | .header { 22 | width: 100%; 23 | display: flex; 24 | justify-content: space-between; 25 | align-items: flex-end; 26 | gap: var(--space-3); 27 | 28 | &__logo { 29 | font-size: var(--fontSize-3); 30 | font-weight: var(--fontWeight-2); 31 | color: var(--txt-light); 32 | } 33 | 34 | &__menu { 35 | display: flex; 36 | gap: var(--space-3); 37 | &-item { 38 | font-size: var(--fontSize-2); 39 | color: var(--txt-grey); 40 | } 41 | } 42 | } 43 | 44 | .hero { 45 | min-height: 250px; 46 | display: flex; 47 | align-items: center; 48 | justify-content: space-between; 49 | gap: var(--space-3); 50 | 51 | &__left { 52 | flex: 1; 53 | display: flex; 54 | gap: var(--space-1); 55 | flex-direction: column; 56 | 57 | &-heading { 58 | color: var(--txt-light); 59 | font-size: var(--fontSize-5); 60 | } 61 | } 62 | 63 | &__right { 64 | align-self: stretch; 65 | flex: 1.24; 66 | border-radius: 8px; 67 | background: url("../hero_image.jpg"); 68 | background-size: cover; 69 | } 70 | } 71 | } 72 | 73 | &--2 { 74 | .wrapper { 75 | gap: var(--space-2); 76 | } 77 | 78 | background-color: var(--txt-light); 79 | padding-block: var(--space-3) var(--space-4); 80 | padding-inline: clamp(var(--space-1), 12vw, 181px); 81 | 82 | &__header { 83 | display: flex; 84 | justify-content: center; 85 | color: var(--txt-dark-2); 86 | } 87 | 88 | &__cards { 89 | display: flex; 90 | gap: var(--space-2); 91 | 92 | .card { 93 | flex: 1; 94 | .img { 95 | border-radius: 8px; 96 | width: 140px; 97 | height: 140px; 98 | 99 | &--1 { 100 | background-color: hsl(330, 82%, 67%); 101 | } 102 | 103 | &--2 { 104 | background: hsl(330, 52%, 56%); 105 | } 106 | 107 | &--3 { 108 | background: var(--txt-dark-2); 109 | } 110 | 111 | &--4 { 112 | background: var(--txt-dark); 113 | } 114 | } 115 | p { 116 | text-align: center; 117 | } 118 | display: flex; 119 | flex-direction: column; 120 | align-items: center; 121 | gap: var(--space-1); 122 | color: var(--txt-dark-2); 123 | font-weight: var(--fontWeight-0); 124 | } 125 | } 126 | } 127 | 128 | &--3 { 129 | .wrapper { 130 | max-width: 70ch; 131 | } 132 | 133 | background-color: var(--txt-grey); 134 | padding-block: var(--space-4) var(--space-4); 135 | 136 | p { 137 | &.big { 138 | font-size: var(--fontSize-4); 139 | color: var(--bg-dark); 140 | font-weight: var(--fontWeight-0); 141 | } 142 | &.author { 143 | align-self: flex-end; 144 | color: var(--bg-dark); 145 | font-weight: var(--fontWeight-2); 146 | } 147 | } 148 | } 149 | 150 | &--4 { 151 | .wrapper { 152 | max-width: 70ch; 153 | } 154 | 155 | background-color: var(--txt-light); 156 | padding-block: var(--space-3) var(--space-4); 157 | padding-inline: var(--space-6); 158 | 159 | .cta { 160 | gap: 8px; 161 | border-radius: 8px; 162 | background-color: var(--cta); 163 | display: flex; 164 | justify-content: space-between; 165 | align-items: center; 166 | padding-block: var(--space-2); 167 | padding-inline: var(--space-4); 168 | 169 | &__textBox { 170 | display: flex; 171 | flex-direction: column; 172 | gap: 8px; 173 | 174 | &-big { 175 | font-weight: var(--fontWeight-2); 176 | font-size: var(--fontSize-3); 177 | } 178 | } 179 | } 180 | } 181 | } 182 | 183 | .button { 184 | width: 170px; 185 | height: 40px; 186 | 187 | border-radius: 8px; 188 | 189 | &--cta { 190 | font-size: var(--fontSize-1); 191 | font-weight: var(--fontWeight-2); 192 | background-color: var(--cta); 193 | 194 | &--transparent { 195 | background-color: transparent; 196 | border: 2px solid var(--txt-grey); 197 | } 198 | } 199 | } 200 | -------------------------------------------------------------------------------- /dist/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-dark: hsla(330, 48.5%, 32%, 1); 3 | --txt-dark: hsla(330, 40.2%, 45.9%, 1); 4 | --txt-dark-2: hsla(330, 40.2%, 45.9%, 1); 5 | --cta: hsla(330, 91.2%, 60%, 1); 6 | --txt-light: hsla(330, 93.3%, 94.1%, 1); 7 | --txt-grey: hsla(0, 0%, 94.1%, 1); 8 | } 9 | 10 | :root { 11 | --fontSize-1: 1rem; 12 | --fontSize-2: 1.125rem; 13 | --fontSize-3: 1.75rem; 14 | --fontSize-4: 2rem; 15 | --fontSize-5: 2.25rem; 16 | --fontWeight-0: 200; 17 | --fontWeight-1: 400; 18 | --fontWeight-2: 600; 19 | } 20 | 21 | body { 22 | font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 23 | color: var(--txt-grey); 24 | } 25 | 26 | h1, 27 | h2, 28 | h3 { 29 | font-weight: 600; 30 | line-height: 1.1; 31 | margin-top: 0; 32 | } 33 | 34 | p { 35 | margin-top: 0; 36 | } 37 | 38 | a, 39 | a:visited, 40 | a:active { 41 | color: inherit; 42 | text-decoration: none; 43 | } 44 | 45 | :root { 46 | --space-1: 16px; 47 | --space-2: 36px; 48 | --space-3: 45px; 49 | --space-4: 60px; 50 | --space-5: 181px; 51 | --space-6: 200px; 52 | } 53 | 54 | html { 55 | box-sizing: border-box; 56 | font-size: 100%; 57 | } 58 | 59 | *, 60 | *::before, 61 | *::after { 62 | box-sizing: inherit; 63 | margin: 0; 64 | padding: 0; 65 | } 66 | 67 | ul { 68 | list-style: none; 69 | } 70 | 71 | button { 72 | font-family: inherit; 73 | color: inherit; 74 | border: 0; 75 | } 76 | 77 | .wrapper { 78 | max-width: 1110px; 79 | margin: auto; 80 | } 81 | 82 | .section { 83 | display: flex; 84 | flex-direction: column; 85 | } 86 | .section--1 { 87 | background-color: var(--bg-dark); 88 | padding-block: var(--space-2) var(--space-4); 89 | padding-inline: clamp(var(--space-1), 5vw, 181px); 90 | } 91 | .section--1 .wrapper { 92 | gap: var(--space-4); 93 | } 94 | .section--1 .header { 95 | width: 100%; 96 | display: flex; 97 | justify-content: space-between; 98 | align-items: flex-end; 99 | gap: var(--space-3); 100 | } 101 | .section--1 .header__logo { 102 | font-size: var(--fontSize-3); 103 | font-weight: var(--fontWeight-2); 104 | color: var(--txt-light); 105 | } 106 | .section--1 .header__menu { 107 | display: flex; 108 | gap: var(--space-3); 109 | } 110 | .section--1 .header__menu-item { 111 | font-size: var(--fontSize-2); 112 | color: var(--txt-grey); 113 | } 114 | .section--1 .hero { 115 | min-height: 250px; 116 | display: flex; 117 | align-items: center; 118 | justify-content: space-between; 119 | gap: var(--space-3); 120 | } 121 | .section--1 .hero__left { 122 | flex: 1; 123 | display: flex; 124 | gap: var(--space-1); 125 | flex-direction: column; 126 | } 127 | .section--1 .hero__left-heading { 128 | color: var(--txt-light); 129 | font-size: var(--fontSize-5); 130 | } 131 | .section--1 .hero__right { 132 | align-self: stretch; 133 | flex: 1.24; 134 | border-radius: 8px; 135 | background: url("../hero_image.jpg"); 136 | background-size: cover; 137 | } 138 | .section--2 { 139 | background-color: var(--txt-light); 140 | padding-block: var(--space-3) var(--space-4); 141 | padding-inline: clamp(var(--space-1), 12vw, 181px); 142 | } 143 | .section--2 .wrapper { 144 | gap: var(--space-2); 145 | } 146 | .section--2__header { 147 | display: flex; 148 | justify-content: center; 149 | color: var(--txt-dark-2); 150 | } 151 | .section--2__cards { 152 | display: flex; 153 | gap: var(--space-2); 154 | } 155 | .section--2__cards .card { 156 | flex: 1; 157 | display: flex; 158 | flex-direction: column; 159 | align-items: center; 160 | gap: var(--space-1); 161 | color: var(--txt-dark-2); 162 | font-weight: var(--fontWeight-0); 163 | } 164 | .section--2__cards .card .img { 165 | border-radius: 8px; 166 | width: 140px; 167 | height: 140px; 168 | } 169 | .section--2__cards .card .img--1 { 170 | background-color: hsl(330deg, 82%, 67%); 171 | } 172 | .section--2__cards .card .img--2 { 173 | background: hsl(330deg, 52%, 56%); 174 | } 175 | .section--2__cards .card .img--3 { 176 | background: var(--txt-dark-2); 177 | } 178 | .section--2__cards .card .img--4 { 179 | background: var(--txt-dark); 180 | } 181 | .section--2__cards .card p { 182 | text-align: center; 183 | } 184 | .section--3 { 185 | background-color: var(--txt-grey); 186 | padding-block: var(--space-4) var(--space-4); 187 | } 188 | .section--3 .wrapper { 189 | max-width: 70ch; 190 | } 191 | .section--3 p.big { 192 | font-size: var(--fontSize-4); 193 | color: var(--bg-dark); 194 | font-weight: var(--fontWeight-0); 195 | } 196 | .section--3 p.author { 197 | align-self: flex-end; 198 | color: var(--bg-dark); 199 | font-weight: var(--fontWeight-2); 200 | } 201 | .section--4 { 202 | background-color: var(--txt-light); 203 | padding-block: var(--space-3) var(--space-4); 204 | padding-inline: var(--space-6); 205 | } 206 | .section--4 .wrapper { 207 | max-width: 70ch; 208 | } 209 | .section--4 .cta { 210 | gap: 8px; 211 | border-radius: 8px; 212 | background-color: var(--cta); 213 | display: flex; 214 | justify-content: space-between; 215 | align-items: center; 216 | padding-block: var(--space-2); 217 | padding-inline: var(--space-4); 218 | } 219 | .section--4 .cta__textBox { 220 | display: flex; 221 | flex-direction: column; 222 | gap: 8px; 223 | } 224 | .section--4 .cta__textBox-big { 225 | font-weight: var(--fontWeight-2); 226 | font-size: var(--fontSize-3); 227 | } 228 | 229 | .button { 230 | width: 170px; 231 | height: 40px; 232 | border-radius: 8px; 233 | } 234 | .button--cta { 235 | font-size: var(--fontSize-1); 236 | font-weight: var(--fontWeight-2); 237 | background-color: var(--cta); 238 | } 239 | .button--cta--transparent { 240 | background-color: transparent; 241 | border: 2px solid var(--txt-grey); 242 | }/*# sourceMappingURL=style.css.map */ --------------------------------------------------------------------------------