xxxxxxxxxx1
<header>2
3
<section>4
<div class="bg-image h-100" style="background-color: #fcecce;">5
<div class="mask d-flex align-items-center h-100">6
<div class="container">7
<div class="row justify-content-center text-center">8
<div class="col">9
<div class="fancy-border-radius mx-auto d-flex align-items-center justify-content-center text-center" data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="tada"10
data-mdb-animation-duration="1000" data-mdb-animation-duration="300">11
<p class="display-1 text-uppercase text-black" style="letter-spacing: 10px;">Olivia<br>Johanson</p>12
</div>13
</div>14
</div>15
</div>16
</div>17
</div>18
</section>19
20
</header>xxxxxxxxxx1
html,2
body,3
header,4
header section {5
height: 100%;6
}7
8
/* These are the KEY styles - you can add them directly to any object you want in your project */9
.fancy-border-radius {10
border-radius: 36% 64% 22% 78% / 49% 67% 33% 51%;11
12
/* These are ADDITIONAL styles - add them if you want an object exactly like in the demo above */13
width: 390px;14
height: 500px;15
background: #f69d73;16
background: -webkit-linear-gradient(to right,17
#f9c9aa,18
#f69d73);19
background: linear-gradient(to right,20
#f9c9aa,21
#f69d73);22
}23
24
@media (min-width: 767px) {25
.display-1 {26
font-size: 7.7rem;27
}28
}1
1
Console errors: 0