@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); * { font-family: 'Open Sans', sans-serif; font-weight: 400; } body { width: 100%; height: 100vh; margin: 0; background: linear-gradient(to top right, #1084DA, #06B4FF); overflow: hidden; } .dana_index { box-sizing: border-box; height: 100%; width: 600px; max-height: 1000px; max-width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; top: 50%; left: 50%; /*background: #0000003b;*/ transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } .head { display: flex; justify-content: left; align-items: center; height: 60px; width: 100%; position: absolute; top: 0; background: #1089E1; } h2 { padding-left: 20px; font-size: 17px; font-weight: 600; color: #ffffff; } h1 { font-size: 22px; font-weight: 600; color: #ffffff; } .part { margin-top: -10px; margin-bottom: 70px; font-size: 12px; font-weight: normal; } .amplop { width: 65%; } .footer { position: absolute; bottom: 0; display: flex; height: 60px; width: 100%; background: #0000002b; } .pro { margin: auto; width: 45px; height: 45px; margin-left: 20px; } .bos { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; left: -200px; /*background: #0000002b;*/ } p { margin-top: 10px; color: #ffffff; font-size: 15px; } .des { margin-top: -15px; color: #ffffff; font-size: 12px; margin-left: -25px; } button { border: none; background: none; outline: none; }