digital-theory/css/4-content.css

228 lines
3.7 KiB
CSS
Raw Normal View History

2023-04-25 12:05:23 +02:00
2023-04-27 15:57:38 +02:00
#content {
2023-04-27 17:04:28 +02:00
height: 60vh;
2023-04-27 15:57:38 +02:00
min-height: 200px;
}
2023-04-27 17:04:28 +02:00
2023-04-27 15:57:38 +02:00
#content h2 {
margin-top: 33vh;
}
2023-04-25 12:13:46 +02:00
#content_all {
2023-04-27 17:04:28 +02:00
color: #fffdfc;
2023-04-25 12:13:46 +02:00
padding-top: 100px;
2023-04-27 17:04:28 +02:00
position: relative;
top: 0;
2023-04-27 16:30:13 +02:00
width: 120%;
2023-04-25 14:59:51 +02:00
}
2023-04-27 17:04:28 +02:00
#content_all_img {
background: url("/img/bg_content.png");
2023-04-25 12:13:46 +02:00
background-size: cover;
2023-04-27 16:30:13 +02:00
/*width: 100vw;*/
2023-04-27 15:57:38 +02:00
height: 150vh;
2023-04-27 17:04:28 +02:00
left: 0;
2023-04-27 15:57:38 +02:00
margin-top: -50vh;
position: relative;
2023-04-25 12:13:46 +02:00
}
2023-04-25 14:59:51 +02:00
#content_all .columns {
2023-04-27 17:04:28 +02:00
font-size: 100px;
2023-04-25 12:13:46 +02:00
margin: 0 auto;
max-width: 80vw;
2023-04-26 16:56:57 +02:00
position: relative;
2023-04-27 17:04:28 +02:00
top: -133vh;
2023-04-25 12:13:46 +02:00
}
2023-04-25 14:59:51 +02:00
#content_all .text {
2023-04-27 15:57:38 +02:00
font-size: 18px;
2023-04-27 17:04:28 +02:00
font-weight: 400;
2023-04-27 15:57:38 +02:00
line-height: 26px;
2023-04-27 17:04:28 +02:00
padding-right: 80px;
padding-top: 1vh;
text-align: left;
2023-04-27 15:57:38 +02:00
}
2023-04-27 17:04:28 +02:00
2023-04-27 16:30:13 +02:00
#content_all h2 {
2023-04-27 15:57:38 +02:00
font-size: 100px !important;
letter-spacing: -0.04em;
2023-04-27 17:04:28 +02:00
line-height: 90px;
2023-05-11 14:23:32 +02:00
text-shadow: 0 0 1rem #333;
}
#content_all .text,
.text-title {
text-shadow: 0 0 1rem #333;
2023-04-27 15:57:38 +02:00
}
2023-04-27 17:04:28 +02:00
2023-04-27 15:57:38 +02:00
#content_all .columns > .column:nth-of-type(1) {
font-size: 1em;
letter-spacing: -0.04em;
2023-04-27 17:04:28 +02:00
line-height: 90px;
2023-04-25 12:13:46 +02:00
}
2023-04-27 17:04:28 +02:00
2023-04-26 16:56:57 +02:00
#content_all .color-emphasis {
2023-04-27 17:04:28 +02:00
color: #1e33da;
2023-04-26 16:56:57 +02:00
}
2023-04-25 14:59:51 +02:00
#content_first {
2023-04-27 17:04:28 +02:00
backdrop-filter: blur(5px);
color: #e77064;
flex: none;
flex-grow: 0;
font-size: 40px;
2023-04-25 12:05:23 +02:00
font-style: normal;
font-weight: 600;
2023-04-27 17:04:28 +02:00
height: 35px;
letter-spacing: 0.2em;
2023-04-25 12:05:23 +02:00
line-height: 95%;
2023-04-27 17:04:28 +02:00
margin-bottom: 40px;
margin-top: 20vh;
2023-05-11 15:16:43 +02:00
opacity: 0.4;
2023-04-27 17:04:28 +02:00
order: 0;
2023-04-25 12:05:23 +02:00
text-align: center;
text-transform: uppercase;
2023-05-11 15:16:43 +02:00
width: 50%;
left: 5vw;
font-size: 3rem;
max-width: 100vw;
width: 100%;
2023-04-25 12:05:23 +02:00
}
2023-04-25 14:59:51 +02:00
#content_second {
2023-05-11 15:16:43 +02:00
width: 50%;
right: -20vw;
2023-04-27 17:04:28 +02:00
backdrop-filter: blur(5px);
color: rgba(255, 255, 255, 0.35);
flex: none;
flex-grow: 0;
font-family: "GT Walsheim Pro";
font-size: 230px;
2023-04-25 12:05:23 +02:00
font-style: normal;
font-weight: 700;
2023-04-27 17:04:28 +02:00
height: 170px;
2023-04-25 12:05:23 +02:00
line-height: 65px;
2023-04-27 17:04:28 +02:00
margin-bottom: 100px;
2023-05-11 15:16:43 +02:00
opacity: 0.25;
2023-04-25 12:05:23 +02:00
order: 1;
2023-04-27 17:04:28 +02:00
text-align: center;
2023-05-11 15:16:43 +02:00
max-width: 100vw;
width: 100%;
2023-04-25 12:05:23 +02:00
}
2023-04-25 15:54:47 +02:00
2023-04-27 17:04:28 +02:00
.flip-handle {
2023-04-25 17:22:09 +02:00
background: transparent;
height: 10vh;
position: relative;
2023-04-27 17:04:28 +02:00
top: -25vh;
width: 2vw;
2023-04-25 17:22:09 +02:00
}
2023-04-25 15:54:47 +02:00
2023-04-27 17:04:28 +02:00
.flip-container {
color: #fffdfc;
2023-04-25 15:54:47 +02:00
padding-top: 15vh;
2023-04-25 17:22:09 +02:00
transform-origin: right;
2023-04-25 15:54:47 +02:00
}
2023-04-27 17:04:28 +02:00
.flip-container.flip-from-left {
2023-04-25 17:22:09 +02:00
transform-origin: left;
}
2023-04-27 17:04:28 +02:00
.flip-container + .flip-container {
height: 90vh;
2023-04-25 15:54:47 +02:00
margin-top: -15vh;
min-height: 91vh;
2023-04-27 17:04:28 +02:00
padding-top: 0;
2023-04-25 15:54:47 +02:00
}
2023-04-27 17:04:28 +02:00
.flip-container .container-text {
2023-04-25 15:54:47 +02:00
left: 30vw;
2023-04-27 17:04:28 +02:00
position: relative;
2023-04-25 15:54:47 +02:00
text-align: left;
2023-04-27 17:04:28 +02:00
width: 50%;
2023-04-25 15:54:47 +02:00
}
2023-04-27 17:04:28 +02:00
.flip-container.flip-from-left .container-text {
2023-04-25 17:22:09 +02:00
left: 613px;
2023-04-27 17:04:28 +02:00
width: 320px;
2023-04-25 15:54:47 +02:00
}
.flip-container .color-emphasis {
2023-04-27 17:04:28 +02:00
color: #1e33da;
2023-04-25 15:54:47 +02:00
margin: 0 auto;
2023-04-27 17:04:28 +02:00
max-width: 760px;
2023-04-25 15:54:47 +02:00
}
2023-04-27 17:04:28 +02:00
.flip-container .text-title {
2023-04-25 15:54:47 +02:00
font-size: 60px;
2023-04-27 17:04:28 +02:00
font-weight: 600;
2023-04-25 15:54:47 +02:00
letter-spacing: -0.04em;
2023-04-27 17:04:28 +02:00
line-height: 110%;
2023-04-25 15:54:47 +02:00
margin-bottom: 20px;
2023-04-27 17:04:28 +02:00
margin-top: 158px;
2023-04-25 15:54:47 +02:00
}
2023-04-27 17:04:28 +02:00
.flip-container .text-description {
2023-04-25 15:54:47 +02:00
font-size: 18px;
2023-04-27 17:04:28 +02:00
font-weight: 400;
2023-04-25 15:54:47 +02:00
line-height: 26px;
margin-bottom: 20px;
width: 380px;
}
2023-04-27 17:04:28 +02:00
.flip-container .phone-container {
background: rgba(225, 196, 183, 0.2);
border-color: rgba(255, 255, 255, 0.4);
border-radius: 70px;
border-width: 2px;
2023-04-25 15:54:47 +02:00
box-sizing: border-box;
2023-04-27 17:04:28 +02:00
height: 700px;
2023-04-25 17:22:09 +02:00
left: 66vw;
2023-04-27 17:04:28 +02:00
position: relative;
2023-04-25 15:54:47 +02:00
top: -540px;
width: 342px;
}
2023-04-27 17:04:28 +02:00
.flip-container.flip-from-left .phone-container {
2023-04-25 17:22:09 +02:00
left: 183px;
2023-04-25 15:54:47 +02:00
top: -540px;
}
2023-04-27 17:04:28 +02:00
.flip-container .phone-container img {
height: auto;
2023-04-25 15:54:47 +02:00
margin-top: 70px;
width: 318px;
}
2023-04-27 17:04:28 +02:00
.flip-container .call-to-action {
align-items: center;
background: transparent;
border: 2px solid #743ad5;
border-radius: 70px;
2023-04-25 15:54:47 +02:00
box-sizing: border-box;
2023-04-27 17:04:28 +02:00
color: #fff;
cursor: pointer;
2023-04-25 15:54:47 +02:00
display: flex;
2023-04-27 17:04:28 +02:00
flex: none;
2023-04-25 15:54:47 +02:00
flex-direction: row;
2023-04-27 17:04:28 +02:00
flex-grow: 0;
2023-04-25 15:54:47 +02:00
gap: 10px;
height: 56px;
2023-04-27 17:04:28 +02:00
justify-content: center;
2023-04-25 15:54:47 +02:00
order: 2;
2023-04-27 17:04:28 +02:00
padding: 12px 36px;
width: 198px;
2023-04-27 16:30:13 +02:00
/*border-image-slice: 1;*/
/*border-width: 5px;*/
/*border-image-source: linear-gradient(to left, #743ad5, #d53a9d);*/
2023-04-25 15:54:47 +02:00
}
2023-04-27 15:57:38 +02:00
2023-04-27 17:04:28 +02:00
#content-2 {
margin-top: 50vh;
2023-04-27 15:57:38 +02:00
}
2023-04-27 17:04:28 +02:00
#flipping_zone {
margin-top: -180vh;
2023-04-27 15:57:38 +02:00
position: relative;
}