<body> <link rel="stylesheet" href="style.css"> <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> <header> <h1>Lost <span></span>city </h1> <img src="mountain-range-front.png"> </header> <main> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, vitae! Voluptas laudantium ducimus facere ipsam ratione minus optio natus, molestiae dolorum accusamus sint voluptates laboriosam animi blanditiis, accusantium fugiat esse? Distinctio nobis eius consequatur repellat mollitia, eaque impedit nulla voluptatem dolorem ducimus placeat. Voluptatem quae saepe eaque, voluptatibus amet architecto nihil inventore, sed atque iure aspernatur exercitationem molestiae eveniet quibusdam? Distinctio nobis eius consequatur repellat mollitia, eaque impedit nulla voluptatem dolorem ducimus placeat. Voluptatem quae saepe eaque, voluptatibus amet architecto nihil inventore, sed atque iure aspernatur exercitationem molestiae eveniet quibusdam? Distinctio nobis eius consequatur repellat mollitia, eaque impedit nulla voluptatem dolorem ducimus placeat. Voluptatem quae saepe eaque, voluptatibus amet architecto nihil inventore, sed atque iure aspernatur exercitationem molestiae eveniet quibusdam? Distinctio nobis eius consequatur repellat mollitia, eaque impedit nulla voluptatem dolorem ducimus placeat. Voluptatem quae saepe eaque, voluptatibus amet architecto nihil inventore, sed atque iure aspernatur exercitationem molestiae eveniet quibusdam? </p> </main> <script src="script.js"></script> </body> @font-face { font-family: "Sucrose Bold Two"; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sucrose.woff2") format("woff2"); } @font-face { font-family: "IM Fell French Canon Pro"; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/im-fell-french-canon-pro.woff2") format("woff2"); } * { box-sizing: border-box; } body { margin: 0; } header { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mountain-range.jpg) no-repeat; padding-top: 61.93333333%; background-size: cover; font-family: "Sucrose Bold Two"; } header img { position: absolute; top: 0; right: 0; width: 45.8%; } header h1 { position: fixed; top: 2rem; right: 2rem; font-size: 12vw; line-height: 0.8; margin-top: 0; text-align: center; } header h1 span { display: block; font-size: 8.75vw; } main { background: #fff; position: relative; border: 1px solid #fff; font-family: "IM Fell French Canon Pro"; font-size: 1.4rem; padding: 2rem 25%; line-height: 1.6; } @media all and (max-width: 400px) { main { padding: 2rem; } } //Автор: Dudley Storey Навигация по записям Parallax effect – starry sky Parallax mountain
English 
Russian