Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="welcome" id="welcome" >
- <div class="welcome" id="welcome" >
- <div class="bg2" ></div>
- <div class="welcome__inner">
- <div class="welcome__left">
- <h1>text</h1>
- <p style="font-size:20px">text</p>
- <a href="#" class="btn" style="position:absolute; margin-left:980px;margin-top:410px">Whitepapper</a>
- </div>
- <div class="welcome__right">
- <div class="welcome__countdown">
- <div class="welcome__countdown-item">
- <div class="welcome__countdown-item-value" id="endDays">00</div>
- <div class="welcome__countdown-item-title">Days</div>
- </div>
- <div class="welcome__countdown-item">
- <div class="welcome__countdown-item-value" id="endHours">00</div>
- <div class="welcome__countdown-item-title">Hours</div>
- </div>
- <div class="welcome__countdown-item">
- <div class="welcome__countdown-item-value" id="endMinutes">00</div>
- <div class="welcome__countdown-item-title">Minutes</div>
- </div>
- <div class="welcome__countdown-item">
- <div class="welcome__countdown-item-value" id="endSeconds">00</div>
- <div class="welcome__countdown-item-title">Seconds</div>
- </div>
- </div>
- <div class="welcome__info">
- <div class="welcome__info-item">
- <div class="welcome__info-item-title">text</div>
- <div class="welcome__info-item-block">text</div>
- </div>
- <div class="welcome__info-item">
- <div class="welcome__info-item-title">text</div>
- <div class="welcome__info-item-block">text</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="welcome__progress">
- <div class="progress">
- <div class="progress__caps">
- <div class="progress__cap">
- <div class="progress__cap-value">0</div>
- <div class="progress__cap-plank"></div>
- <div class="progress__cap-title"></div>
- </div>
- <div class="progress__cap">
- <div class="progress__cap-value">2 <span>000</span></div>
- <div class="progress__cap-plank"></div>
- <div class="progress__cap-title progress__cap-title--green">Soft<span>Cap</span></div>
- </div>
- <div class="progress__cap">
- <div class="progress__cap-value">4 <span>000</span></div>
- <div class="progress__cap-plank"></div>
- <div class="progress__cap-title"></div>
- </div>
- <div class="progress__cap">
- <div class="progress__cap-value">6 <span>000</span></div>
- <div class="progress__cap-plank"></div>
- <div class="progress__cap-title"></div>
- </div>
- <div class="progress__cap">
- <div class="progress__cap-value">8 <span>000</span> </div>
- <div class="progress__cap-plank"></div>
- <div class="progress__cap-title"></div>
- </div>
- <div class="progress__cap">
- <div class="progress__cap-value">10000 <span>text</span> </div>
- <div class="progress__cap-plank"></div>
- <div class="progress__cap-title">Hard<span>text</span></div>
- </div>
- </div>
- <div class="progress__bar">
- <div
- class="progress__bar-indicator"
- style="width: 55.8%"
- ></div>
- </div>
- </div>
- </div>
- .welcome, .welcome__progress {
- background-image: url('https://picsum.photos/458/354?gravity=east');
- background-repeat: no-repeat;
- background-size: 100%;
- background-position: center;
- background-attachment: fixed;
- }
- .bg2 {
- width: 100%;
- height: 100%;
- background-image: url('https://www.gstatic.com/webp/gallery3/1.sm.png');
- opacity:0.5;
- }
- .welcome {
- display: flex;
- justify-content: center;
- background-color: #0E1125;
- }
- .welcome__inner {
- padding-top: 250px;
- box-sizing: border-box;
- height: 815px;
- max-width: 1248px;
- width: 100%;
- display: flex;
- padding-left: 20px;
- padding-right: 20px;
- justify-content: space-between;
- }
- .welcome__left {
- display: flex;
- flex-direction: column;
- }
- .welcome__left > h1 {
- font-family: Roboto;
- font-weight: bold;
- font-size: 60px;
- font-weight: 700;
- color: #FFF;
- }
- .welcome__left > p {
- margin-top: 20px;
- font-weight: 500;
- line-height: 42px;
- font-size: 30px;
- color: #C1CBE0;
- }
- .welcome__left > .btn {
- margin-top: 40px;
- align-self: flex-start;
- color: #fff;
- }
- .welcome__right {
- display: flex;
- flex-direction: column;
- padding-right: 20px;
- }
- .welcome__countdown {
- align-self: center;
- display: flex;
- }
- .welcome__countdown-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .welcome__countdown > .welcome__countdown-item:not(:last-child) {
- margin-right: 20px;
- }
- .welcome__countdown-item-value {
- font-weight: 300;
- font-size: 40px;
- color: #3579FF;
- }
- .welcome__countdown-item-title {
- font-weight: 300;
- font-size: 16px;
- color: #fff;
- }
- .welcome__info {
- margin-top: 60px;
- align-self: center;
- display: flex;
- flex-direction: column;
- }
- .welcome__info-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .welcome__info > .welcome__info-item:not(:nth-child(even)) {
- margin-bottom: 40px;
- }
- .welcome__info-item-title {
- font-size: 30px;
- font-weight: 300;
- color: #fff;
- }
- .welcome__info-item-block {
- margin-top: 10px;
- font-size: 30px;
- font-weight: 300;
- padding: 20px;
- /* border: 1px solid #fff; */
- /* box-shadow: 0 0 10px rgba(48, 43, 99, 0.5); */
- width: 240px;
- display: flex;
- justify-content: center;
- color: #fff;
- }
- .welcome__progress {
- padding-top: 60px;
- padding-bottom: 100px;
- display: flex;
- flex-direction: column;
- background-color: #0E1125;
- overflow: hidden;
- box-sizing: border-box;
- }
- /* PROGRESS START */
- .progress {
- display: flex;
- flex-direction: column;
- max-width: 1208px;
- width: 100%;
- align-self: center;
- padding-right: 20px;
- box-sizing: border-box;
- }
- .progress__bar {
- display: flex;
- max-width: 1239px;
- border: 1px solid #222;
- height: 10px;
- box-sizing: border-box;
- box-shadow: 0 0 6px rgba(48, 43, 99, 0.3);
- }
- .progress__bar-indicator {
- background: linear-gradient(to right, #fff 40%, #3579FF 50%);
- }
- .progress__caps {
- display: flex;
- justify-content: space-between;
- }
- .progress__cap {
- display: flex;
- flex-direction: column;
- position: relative;
- align-items: center;
- color: #fff;
- }
- .progress__cap-value {
- position: absolute;
- transform: translateY(-40px);
- font-weight: 300;
- font-size: 30px;
- display: flex;
- user-select: none;
- }
- .progress__cap-value > span {
- margin-left: 5px;
- display: block;
- }
- .progress__cap-plank {
- height: 20px;
- width: 2px;
- background-color: #222;
- }
- .progress__cap-title {
- display: flex;
- position: absolute;
- transform: translateY(40px);
- font-size: 18px;
- text-align: center;
- user-select: none;
- }
- .progress__cap-title > span {
- margin-left: 5px;
- display: block;
- }
- .progress__cap-title--green {
- color: #3579FF;
- }
- @media (max-width: 1599px) {
- .progress {
- max-width: 900px;
- }
- }
Add Comment
Please, Sign In to add comment