first

src/styles/styles.css

@@ -0,0 +1,221 @@
+.main-button {
+    z-index: 99;
+    border: 1px solid #D375FF;
+    border-radius: 38.4px;
+
+    cursor: pointer;
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    background: rgba(29, 29, 29, 0.6);
+    backdrop-filter: blur(12px);
+    padding: 16px 22px;
+    box-sizing: border-box;
+    width: fit-content;
+    height: 60px;
+    position: fixed;
+    bottom: 5%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.main-button::before {
+    content: "";
+    border-radius: 38.4px;
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    left: -2px;
+    right: -2px;
+    border-image: linear-gradient(#D375FF, #798FFF);
+    z-index: -1;
+}
+
+
+.button-caption {
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 125%;
+    /* identical to box height, or 25px */
+
+    letter-spacing: 0.01em;
+    /* White */
+    color: #EBEBEB;
+}
+
+.button-icon {
+    width: 28px;
+    height: 28px;
+
+}
+
+.block-type-grey {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 96px;
+
+    box-sizing: border-box;
+    padding: 144px 96px 96px 96px;
+    background: #1E1E1E;
+    border-radius: 8px;
+}
+
+.block-type-grey-row {
+    gap: 64px;
+}
+
+.block-type-trnsprnt {
+    width: 100%;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 96px;
+    box-sizing: border-box;
+    padding: 144px 96px 96px 96px;
+    background: transparent;
+    border-radius: 8px;
+}
+
+.block-type-trnsprnt-padding {
+    padding: 0 96px;
+}
+
+.block-type-trnsprnt-padding-off {
+    padding: 0;
+}
+
+.block-type-trnsprnt-padding-top-button {
+    padding: 144px 0 96px;
+
+}
+
+.block-type-trnsprnt-picture {
+    padding-bottom: 96px;
+}
+
+.container {
+    margin: 0 auto;
+}
+
+
+.text-container {
+    color: #EBEBEB;
+    display: flex;
+    flex-direction: column;
+    gap: 48px;
+    text-align: left;
+    margin-right: 114px;
+}
+
+.subtext-container {
+    margin: 0 auto;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 145%;
+    /* or 26px */
+
+
+    /* White */
+
+    color: #EBEBEB;
+}
+
+.subtext {
+    width: 494px;
+    text-align: left;
+    margin-right: 120px;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.subtext-col {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+}
+
+
+.title {
+    font-family: 'GilroyWebRegular';
+
+    width: 494px;
+    font-weight: 400;
+    font-size: 48px;
+    line-height: 110%;
+    /* or 53px */
+    text-align: left;
+    margin: 0;
+
+    background: linear-gradient(56.75deg, #D375FF 34.13%, #798FFF 73.56%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.title-small {
+    width: 351px;
+}
+
+
+.text-container-small {
+    margin-right: 161px;
+    gap: 40px;
+}
+
+.text-main {
+    width: 494px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 19px;
+    line-height: 145%;
+    /* or 26px */
+
+
+    text-align: left;
+    margin: 0;
+    color: #EBEBEB;
+}
+
+.play-button {
+    margin-top: 48px;
+    border: 1px solid #D375FF;
+    border-radius: 38.4px;
+    position: relative;
+    cursor: pointer;
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    background: rgba(29, 29, 29, 0.6);
+    backdrop-filter: blur(12px);
+    padding: 16px 22px;
+    box-sizing: border-box;
+    width: fit-content;
+    height: 60px;
+}
+
+.play-button::before {
+    content: "";
+    border-radius: 38.4px;
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    left: -2px;
+    right: -2px;
+    border-image: linear-gradient(#D375FF 30%, #798FFF 70%);
+    z-index: -1;
+}
+
+
+.img-container {
+    background-image: url(./background.png);
+    width: 100%;
+    height: 526px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+}