├── README.md ├── images ├── avatar.png ├── born.svg ├── comments.svg ├── followers.svg ├── home.svg ├── images.svg ├── joined.svg ├── like.svg ├── logo.svg ├── message.svg ├── more.svg ├── notification.svg ├── place.svg ├── retweet.svg ├── search.svg └── url.svg ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 |

2 | Rocketseat Education 3 |

4 | 5 |

6 | Rocketseat Project 7 | License 8 |

9 | 10 | 11 | ## 💻 Projeto 12 | 13 | course-css-flexbox 14 | 15 | ## 📝 Licença 16 | 17 | Esse projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes. 18 | 19 | --- 20 | 21 |

22 | Feito com 💜 by Rocketseat 23 |

24 | 25 | 26 | 27 | 28 |
29 |
30 | 31 |

32 | 33 | banner 34 | 35 |

36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rocketseat-education/course-css-flexbox/bc5cdea810f09c7178225f1fe97097d2a41603ea/images/avatar.png -------------------------------------------------------------------------------- /images/born.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | child 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /images/comments.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | chat-round 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/followers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | single-02 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /images/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /images/images.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image-02 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/joined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /images/like.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logo Twitter 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /images/message.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /images/more.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon/more 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/notification.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/place.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /images/retweet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | refresh-69 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /images/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | zoom-2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /images/url.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Twitter 8 | 9 | 10 | 11 | 12 |
13 |
14 | 21 | Logo Twitter 22 |
23 | 24 | 25 | 26 |
27 |
28 |
29 | 30 | 33 | 34 |
35 |
36 | 54 | 55 |
56 | 57 | More 58 |
59 |
60 |
61 | 62 |
63 | 106 | 107 |
108 | 113 | 114 | 272 |
273 | 274 | 316 |
317 | 318 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #e6ecf0; 9 | font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; 10 | text-rendering: optimizeLegibility !important; 11 | -webkit-font-smoothing: antialiased !important; 12 | } 13 | 14 | input, 15 | button { 16 | outline: 0; 17 | } 18 | 19 | .content { 20 | max-width: 1170px; 21 | margin: 0 auto; 22 | padding: 0 30px; 23 | } 24 | 25 | header#main-header { 26 | height: 46px; 27 | background: #fff; 28 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); 29 | position: relative; 30 | z-index: 1; 31 | } 32 | 33 | header#main-header .content { 34 | display: flex; 35 | align-items: center; 36 | justify-content: space-between; 37 | height: 100%; 38 | } 39 | 40 | header#main-header nav ul { 41 | display: flex; 42 | list-style: none; 43 | } 44 | 45 | header#main-header nav ul li { 46 | display: flex; 47 | align-items: center; 48 | 49 | font-size: 13px; 50 | color: #667580; 51 | font-weight: bold; 52 | 53 | margin-left: 30px; 54 | } 55 | 56 | header#main-header nav ul li:first-child { 57 | margin: 0; 58 | } 59 | 60 | header#main-header nav ul li img { 61 | margin-right: 7px; 62 | } 63 | 64 | header#main-header div.side { 65 | display: flex; 66 | } 67 | 68 | header#main-header div.side input { 69 | width: 220px; 70 | border: 1px solid #e6ecf0; 71 | height: 34px; 72 | padding: 0 30px 0 12px; 73 | border-radius: 16px; 74 | color: #667581; 75 | font-size: 12px; 76 | background: #f5f8fa url("/images/search.svg") no-repeat 190px center; 77 | } 78 | 79 | header#main-header div.side img { 80 | height: 34px; 81 | width: 34px; 82 | border-radius: 50%; 83 | margin: 0 15px; 84 | } 85 | 86 | header#main-header div.side button { 87 | height: 34px; 88 | background: #3bb9e3; 89 | 90 | display: flex; 91 | align-items: center; 92 | justify-content: center; 93 | 94 | width: 90px; 95 | font-weight: bold; 96 | font-size: 14px; 97 | color: #fff; 98 | border: 0; 99 | border-radius: 16px; 100 | } 101 | 102 | div.banner { 103 | height: 380px; 104 | width: 100%; 105 | background: #3bb9e3; 106 | 107 | display: flex; 108 | align-items: center; 109 | justify-content: center; 110 | 111 | color: #fff; 112 | } 113 | 114 | div.bar { 115 | height: 59px; 116 | background: #fff; 117 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); 118 | } 119 | 120 | div.bar .content { 121 | display: flex; 122 | justify-content: space-between; 123 | align-items: center; 124 | padding-left: 285px; 125 | height: 100%; 126 | } 127 | 128 | div.bar .content ul { 129 | display: flex; 130 | list-style: none; 131 | height: 100%; 132 | } 133 | 134 | div.bar .content ul li { 135 | display: flex; 136 | flex-direction: column; 137 | justify-content: center; 138 | align-items: center; 139 | padding: 0 15px; 140 | position: relative; 141 | } 142 | 143 | div.bar .content ul li.active::after { 144 | content: ""; 145 | width: 100%; 146 | height: 2px; 147 | position: absolute; 148 | bottom: 0; 149 | left: 0; 150 | background: #3bb9e3; 151 | } 152 | 153 | div.bar .content ul li span { 154 | color: #667580; 155 | font-size: 12px; 156 | font-weight: bold; 157 | } 158 | 159 | div.bar .content ul li strong { 160 | color: #667580; 161 | font-size: 18px; 162 | font-weight: bold; 163 | margin-top: 2px; 164 | } 165 | 166 | div.bar .content ul li.active strong { 167 | color: #3bb9e3; 168 | } 169 | 170 | div.bar .content .actions { 171 | display: flex; 172 | } 173 | 174 | div.bar .content .actions button { 175 | height: 34px; 176 | 177 | display: flex; 178 | align-items: center; 179 | justify-content: center; 180 | 181 | width: 90px; 182 | font-weight: bold; 183 | font-size: 14px; 184 | color: #3bb9e3; 185 | border: 1px solid #3bb9e3; 186 | border-radius: 16px; 187 | 188 | margin-right: 20px; 189 | } 190 | 191 | div.wrapper-content { 192 | display: flex; 193 | } 194 | 195 | div.wrapper-content aside.profile { 196 | width: 260px; 197 | } 198 | 199 | div.wrapper-content aside.profile img.avatar { 200 | width: 200px; 201 | height: 200px; 202 | border-radius: 50%; 203 | border: 5px solid #fff; 204 | margin-top: -130px; 205 | } 206 | 207 | div.wrapper-content aside.profile h1 { 208 | font-size: 21px; 209 | color: #1f2226; 210 | margin-top: 10px; 211 | } 212 | 213 | div.wrapper-content aside.profile span { 214 | font-size: 14px; 215 | color: #53626c; 216 | } 217 | 218 | div.wrapper-content aside.profile p { 219 | font-size: 14px; 220 | color: #1f2226; 221 | margin-top: 15px; 222 | } 223 | 224 | div.wrapper-content aside.profile ul { 225 | margin-top: 20px; 226 | list-style: none; 227 | } 228 | 229 | div.wrapper-content aside.profile ul.list li { 230 | font-size: 14px; 231 | color: #657786; 232 | 233 | display: flex; 234 | align-items: center; 235 | margin-top: 5px; 236 | } 237 | 238 | div.wrapper-content aside.profile ul.list li:first-child { 239 | margin: 0; 240 | } 241 | 242 | div.wrapper-content aside.profile ul.list li img { 243 | margin-right: 10px; 244 | } 245 | 246 | div.wrapper-content aside.profile .widget { 247 | margin-top: 20px; 248 | } 249 | 250 | div.wrapper-content aside.profile .widget strong { 251 | font-weight: normal; 252 | color: #3bb9e3; 253 | font-size: 14px; 254 | display: flex; 255 | align-items: center; 256 | } 257 | 258 | div.wrapper-content aside.profile .widget strong img { 259 | margin-right: 5px; 260 | } 261 | 262 | div.wrapper-content aside.profile .followers ul { 263 | list-style: none; 264 | display: flex; 265 | flex-wrap: wrap; 266 | } 267 | 268 | div.wrapper-content aside.profile .followers ul li { 269 | width: 45px; 270 | height: 45px; 271 | background: #d0d5d9; 272 | border-radius: 50%; 273 | flex: 1 0 auto; 274 | margin: 0 5px 5px 0; 275 | } 276 | 277 | div.wrapper-content aside.profile .images ul { 278 | list-style: none; 279 | display: flex; 280 | flex-wrap: wrap; 281 | } 282 | 283 | div.wrapper-content aside.profile .images ul li { 284 | width: 80px; 285 | height: 80px; 286 | background: #d0d5d9; 287 | border-radius: 8px; 288 | flex: 1 0 auto; 289 | margin: 0 5px 5px 0; 290 | } 291 | 292 | div.wrapper-content .timeline { 293 | flex: 1; 294 | background: #fff; 295 | margin: 10px 20px 0; 296 | } 297 | 298 | div.wrapper-content .timeline nav { 299 | border-bottom: 1px solid #e6ecf0; 300 | padding: 10px 15px; 301 | } 302 | 303 | div.wrapper-content .timeline nav a { 304 | text-decoration: none; 305 | color: #3bb9e3; 306 | font-size: 18px; 307 | font-weight: bold; 308 | margin-left: 20px; 309 | } 310 | 311 | div.wrapper-content .timeline nav a:first-child { 312 | margin: 0; 313 | } 314 | 315 | div.wrapper-content .timeline nav a.active { 316 | color: #1f2226; 317 | } 318 | 319 | div.wrapper-content .timeline ul.tweets { 320 | list-style: none; 321 | } 322 | 323 | div.wrapper-content .timeline ul.tweets li { 324 | border-bottom: 1px solid #e6ecf0; 325 | padding: 10px 15px; 326 | display: flex; 327 | } 328 | 329 | div.wrapper-content .timeline ul.tweets li > img { 330 | width: 48px; 331 | height: 48px; 332 | border-radius: 50%; 333 | } 334 | 335 | div.wrapper-content .timeline ul.tweets li .info { 336 | margin-left: 10px; 337 | display: flex; 338 | flex-direction: column; 339 | } 340 | 341 | div.wrapper-content .timeline ul.tweets li .info strong { 342 | font-size: 14px; 343 | color: #1f2326; 344 | } 345 | 346 | div.wrapper-content .timeline ul.tweets li .info strong span { 347 | font-weight: normal; 348 | font-size: 13px; 349 | color: #7b8b9a; 350 | } 351 | 352 | div.wrapper-content .timeline ul.tweets li .info p { 353 | font-size: 14px; 354 | color: #1f2326; 355 | margin-top: 5px; 356 | } 357 | 358 | div.wrapper-content .timeline ul.tweets li .actions { 359 | display: flex; 360 | margin-top: 20px; 361 | } 362 | 363 | div.wrapper-content .timeline ul.tweets li .actions a { 364 | display: flex; 365 | align-items: center; 366 | text-decoration: none; 367 | color: #667580; 368 | font-weight: bold; 369 | font-size: 12px; 370 | margin-left: 30px; 371 | } 372 | 373 | div.wrapper-content .timeline ul.tweets li .actions a:first-child { 374 | margin-left: 0; 375 | } 376 | 377 | div.wrapper-content .timeline ul.tweets li .actions a img { 378 | margin-right: 5px; 379 | } 380 | 381 | div.wrapper-content aside.widgets { 382 | width: 290px; 383 | margin-top: 10px; 384 | } 385 | 386 | div.wrapper-content aside.widgets .widget { 387 | background: #fff; 388 | padding: 15px; 389 | } 390 | 391 | div.wrapper-content aside.widgets .widget .title { 392 | display: flex; 393 | align-items: baseline; 394 | } 395 | 396 | div.wrapper-content aside.widgets .widget .title strong { 397 | font-size: 18px; 398 | color: #1f2226; 399 | } 400 | 401 | div.wrapper-content aside.widgets .widget .title a { 402 | color: #3bb9e3; 403 | font-size: 12px; 404 | text-decoration: none; 405 | position: relative; 406 | padding-left: 10px; 407 | } 408 | 409 | div.wrapper-content aside.widgets .widget .title a::before { 410 | content: ""; 411 | width: 2px; 412 | height: 2px; 413 | border-radius: 50%; 414 | background: #222; 415 | position: absolute; 416 | left: 4px; 417 | top: 6px; 418 | } 419 | 420 | div.wrapper-content aside.widgets .follow ul { 421 | list-style: none; 422 | margin-top: 10px; 423 | } 424 | 425 | div.wrapper-content aside.widgets .follow ul li { 426 | display: flex; 427 | justify-content: space-between; 428 | border-bottom: 1px solid #ccd6dd; 429 | padding-bottom: 10px; 430 | margin-bottom: 10px; 431 | } 432 | 433 | div.wrapper-content aside.widgets .follow ul li:last-child { 434 | margin-bottom: 0; 435 | padding-bottom: 0; 436 | border: 0; 437 | } 438 | 439 | div.wrapper-content aside.widgets .follow ul li .profile { 440 | display: flex; 441 | align-items: center; 442 | } 443 | 444 | div.wrapper-content aside.widgets .follow ul li .profile img { 445 | width: 48px; 446 | height: 48px; 447 | border-radius: 50%; 448 | } 449 | 450 | div.wrapper-content aside.widgets .follow ul li .profile .info { 451 | margin-left: 10px; 452 | display: flex; 453 | flex-direction: column; 454 | } 455 | 456 | div.wrapper-content aside.widgets .follow ul li .profile .info strong { 457 | font-size: 14px; 458 | color: #1f2326; 459 | } 460 | 461 | div.wrapper-content aside.widgets .follow ul li .profile .info strong span { 462 | font-weight: normal; 463 | color: #9a9a9a; 464 | } 465 | 466 | div.wrapper-content aside.widgets .follow ul li .profile .info button { 467 | height: 27px; 468 | margin-top: 4px; 469 | 470 | display: flex; 471 | align-items: center; 472 | justify-content: center; 473 | 474 | width: 90px; 475 | font-weight: bold; 476 | font-size: 14px; 477 | color: #3bb9e3; 478 | border: 1px solid #3bb9e3; 479 | border-radius: 16px; 480 | } 481 | 482 | div.wrapper-content aside.widgets .follow ul li > a { 483 | color: #ccd6dd; 484 | text-decoration: none; 485 | font-size: 14px; 486 | } 487 | --------------------------------------------------------------------------------