├── .vscode └── settings.json ├── style.css └── index.html /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0; 3 | padding:0; 4 | color: #242424; 5 | font-family: sans-serif; 6 | word-wrap: break-word; 7 | overflow-wrap: break-word; 8 | } 9 | 10 | h1,h2,h3,h4,h5,h6{ 11 | font-weight: 900; 12 | color: #000; 13 | } 14 | 15 | .wrapper{ 16 | width: 100%; 17 | margin: 0 auto; 18 | } 19 | 20 | main{ 21 | display: block; 22 | background-color: #FFF; 23 | } 24 | 25 | .container{ 26 | width: 100%; 27 | max-width: 760px; 28 | margin: 0 auto; 29 | padding: 0 20px; 30 | } 31 | 32 | section.module p{ 33 | margin-bottom: 40px; 34 | } 35 | 36 | section.module:last-child{ 37 | margin-bottom: 0; 38 | } 39 | 40 | section.module h2{ 41 | margin-bottom: 40px; 42 | font-size: 30px; 43 | } 44 | 45 | section.module.content{ 46 | padding: 40px 0; 47 | background: #ece7d5; 48 | } 49 | 50 | section.module.parallax{ 51 | display: flex; 52 | flex-direction: column; 53 | justify-content: center; 54 | height: 100vh !important; 55 | width: 100%; 56 | position: relative; 57 | overflow: hidden; 58 | background-position: 50% 50%; 59 | background-repeat: no-repeat; 60 | background-attachment: fixed; 61 | background-size: cover; 62 | -webkit-background-size: cover; 63 | -moz-background-size: cover; 64 | -o-background-size: cover; 65 | } 66 | 67 | section.module.parallax:after{ 68 | content: ""; 69 | height: 100%; 70 | width: 100%; 71 | position: absolute; 72 | z-index: 8; 73 | background: -moz-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 40%, #000 100% ); 74 | background: -webkit-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 40%, #000 100% ); 75 | background: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 40%, #000 100% ); 76 | } 77 | 78 | 79 | section.module.parallax-1{ 80 | background-image: url("https://images.unsplash.com/photo-1464823063530-08f10ed1a2dd?dpr=1&auto=format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="); 81 | } 82 | 83 | section.module.parallax-2{ 84 | background-image: url("https://images.unsplash.com/photo-1473181488821-2d23949a045a?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="); 85 | } 86 | 87 | section.module.parallax-3{ 88 | background-image: url("https://images.unsplash.com/photo-1472162314594-eca3c3d90df1?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop="); 89 | } 90 | 91 | section.module.parallax h1{ 92 | color: #FFF; 93 | text-align: center; 94 | font-size: 78px; 95 | z-index: 50; 96 | text-transform: uppercase; 97 | } 98 | 99 | @media all and (max-width: 820px) { 100 | section.module h2 { 101 | font-size: 32px; 102 | } 103 | .module h2, p{ 104 | padding: 0 8px; 105 | } 106 | 107 | .container{ 108 | margin:0; 109 | padding:0; 110 | } 111 | 112 | section.module.parallax h1 { 113 | font-size: 36px; 114 | } 115 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Video Youtube - Parallax 9 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |

Sujeito Programador

21 |
22 | 23 |
24 |
25 |

Qualquer texto aqui..

26 |

27 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quisquam reiciendis unde voluptatem dignissimos! Adipisci alias rerum commodi ad excepturi. Quod aut maxime non architecto numquam vel et, magnam eius! 28 |

29 |

30 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quisquam reiciendis unde voluptatem dignissimos! Adipisci alias rerum commodi ad excepturi. Quod aut maxime non architecto numquam vel et, magnam eius! 31 |

32 |
33 |
34 | 35 |
36 |

Algum texto aqui

37 |
38 | 39 |
40 |
41 |

Qualquer texto aqui..

42 |

43 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quisquam reiciendis unde voluptatem dignissimos! Adipisci alias rerum commodi ad excepturi. Quod aut maxime non architecto numquam vel et, magnam eius! 44 |

45 |

46 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quisquam reiciendis unde voluptatem dignissimos! Adipisci alias rerum commodi ad excepturi. Quod aut maxime non architecto numquam vel et, magnam eius! 47 |

48 |
49 |
50 | 51 |
52 |

Terceiro titulo aqui

53 |
54 | 55 |
56 |
57 |

Qualquer texto aqui..

58 |

59 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quisquam reiciendis unde voluptatem dignissimos! Adipisci alias rerum commodi ad excepturi. Quod aut maxime non architecto numquam vel et, magnam eius! 60 |

61 |

62 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quisquam reiciendis unde voluptatem dignissimos! Adipisci alias rerum commodi ad excepturi. Quod aut maxime non architecto numquam vel et, magnam eius! 63 |

64 |
65 |
66 | 67 |
68 |
69 | 70 | 71 | --------------------------------------------------------------------------------