├── index.html └── styles.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | horizontal scroll sections 8 | 9 | 10 | 11 | 12 |
13 |
14 |
Home
15 |
01
16 |
17 |
18 |
Collection
19 |
02
20 |
21 |
22 |
Material
23 |
03
24 |
25 |
26 |
Production
27 |
04
28 |
29 |
30 |
Journal
31 |
05
32 |
33 |
34 |
35 |
36 |
37 | Home Lorem Ipsum is
38 | simply dummy text of the
39 | printing and typesetting
industry. 40 |
41 |
46 | Collection Lorem Ipsum is
47 | simply dummy text of the
48 | printing and typesetting
industry. 49 |
50 |
51 | Material Lorem Ipsum is
52 | simply dummy text of the
53 | printing and typesetting
industry. 54 |
55 |
60 | Production Lorem Ipsum is
61 | simply dummy text of the
62 | printing and typesetting
industry. 63 |
64 |
65 | Journal Lorem Ipsum is
66 | simply dummy text of the
67 | printing and typesetting
industry. 68 |
69 |
70 |
71 | 72 | 112 | 113 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Grifinito L"; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | background: #a19a8f; 13 | overflow: hidden; 14 | } 15 | 16 | main { 17 | height: 100%; 18 | width: 100vw; 19 | display: flex; 20 | overflow: hidden; 21 | } 22 | 23 | section { 24 | width: 120vw; 25 | font-size: 6em; 26 | line-height: 1em; 27 | background: #a19a8f; 28 | } 29 | 30 | .wrap { 31 | display: flex; 32 | height: 100%; 33 | } 34 | 35 | .section { 36 | height: 100%; 37 | position: relative; 38 | display: flex; 39 | align-items: center; 40 | justify-content: center; 41 | left: -200px; 42 | } 43 | 44 | .blocks { 45 | position: fixed; 46 | top: 0; 47 | left: 0; 48 | width: 100%; 49 | height: 100%; 50 | z-index: 100; 51 | pointer-events: none; 52 | } 53 | 54 | .block { 55 | position: absolute; 56 | top: 0; 57 | left: 0; 58 | width: 4rem; 59 | height: 100%; 60 | background: #a19a8f; 61 | z-index: 100; 62 | padding: 2rem 1.25rem; 63 | 64 | display: flex; 65 | align-items: center; 66 | flex-direction: column; 67 | justify-content: space-between; 68 | 69 | pointer-events: auto; 70 | cursor: pointer; 71 | border-left: 0.2rem solid #000; 72 | font-weight: 500; 73 | } 74 | 75 | .block[data-block-section="2"].init { 76 | left: calc(100vw - 16rem); 77 | } 78 | 79 | .block[data-block-section="2"].fixed { 80 | left: 4rem; 81 | border-left: 0.2rem solid #000; 82 | } 83 | 84 | .block[data-block-section="3"].init { 85 | left: calc(100vw - 12rem); 86 | } 87 | 88 | .block[data-block-section="3"].fixed { 89 | left: 8rem; 90 | } 91 | 92 | .block[data-block-section="4"].init { 93 | left: calc(100vw - 8rem); 94 | } 95 | 96 | .block[data-block-section="4"].fixed { 97 | left: 12rem; 98 | } 99 | 100 | .block[data-block-section="5"].init { 101 | left: calc(100vw - 4rem); 102 | } 103 | 104 | .block[data-block-section="5"].fixed { 105 | left: 16rem; 106 | } 107 | 108 | .block__title { 109 | position: relative; 110 | white-space: nowrap; 111 | transform: rotate(-90deg) translate(-50%); 112 | text-align: right; 113 | } 114 | 115 | .block__number, 116 | .block__title { 117 | text-transform: uppercase; 118 | font-size: 2rem; 119 | line-height: 1.06rem; 120 | color: #000; 121 | } 122 | --------------------------------------------------------------------------------