.banner-wrapper { position: relative; width: 100%; overflow: hidden; background: url("https://gw.alipayobjects.com/zos/rmsportal/UuWvfiYyEArxEECAKvRt.png") no-repeat center / cover; } .banner-text-wrapper { position: absolute; right: 9%; top: 55%; color: @heading-color; } .banner-text-wrapper h2 { font-size: 56px; line-height: 64px; font-weight: 500; color: @heading-color; font-family: "Helvetica Neue", sans-serif; margin: 0; } .banner-text-wrapper h2 p { color: #f9323f; display: inline-block; margin: 0; } .banner-text-wrapper .line { width: 2px; height: 96px; position: absolute; background: #d7dce0; top: 16px; left: -25px; } .banner-text-wrapper > p { margin: 20px auto 32px; font-size: 20px; color: @text-color; } .banner-text-wrapper .start-button { margin-bottom: 24px; .ant-btn { height: 40px; border-radius: 100px; margin-right: 16px; font-size: 16px; width: 114px; text-align: center; a { text-decoration: none; } } } .banner-text-wrapper .github-btn { line-height: 14px; a:hover { color: #333; } } .down { text-align: center; position: absolute; bottom: 30px; left: 50%; margin-left: -7px; color: @text-color-secondary; animation: upDownMove 1.2s ease-in-out infinite alternate; } .page { min-height: 700px; height: 100vh; } .content-wrapper { width: 100%; max-width: 1500px; margin: auto; overflow: hidden; background: #fff; .image-wrapper { width: 60%; float: left; position: relative; } .text-wrapper { width: 40%; float: left; position: relative; top: 50%; transform: translateY(-50%); left: 110px; font-family: Lato, @font-family; z-index: 1; } .text-wrapper h2, .text-wrapper-bottom h2 { font-size: 38px; color: @heading-color; line-height: 46px; font-weight: 500; white-space: nowrap; } .text-wrapper p { margin: 20px 0 40px; font-size: 16px; line-height: 24px; color: @text-color; } .left-text { padding-left: 10%; left: 0; } } #page3 .text-wrapper { left: -30px; } .image1 { background: url("https://t.alipayobjects.com/images/T1Ch8kXfpdXXXXXXXX.png") no-repeat right / 841px; height: 511px; top: 50%; margin-top: -256px; } .image2 { background: url("https://t.alipayobjects.com/images/T1r5RkXotXXXXXXXXX.png") no-repeat left / 800px; height: 474px; top: 50%; margin-top: -266px; } .image3 { padding-right: 10%; background: url("https://t.alipayobjects.com/images/T1nx0kXdFfXXXXXXXX.png") no-repeat right / 639px; background-origin: content-box; height: 500px; top: 50%; margin-top: -250px; } .image4 { background: url("https://t.alipayobjects.com/images/T1lyJkXg4aXXXXXXXX.png") no-repeat center / 615px; height: 364px; margin: auto; } .text-wrapper-bottom { text-align: center; margin: 10% auto 40px; } .text-wrapper-bottom p { margin: 20px auto; font-size: 16px; line-height: 24px; color: @text-color; } @keyframes upDownMove { to { transform: translateY(10px); } }