xxxxxxxxxx1
<div class="bg-image h-100"2
style="background-image: url('https://mdbootstrap.com/img/Photos/new-templates/valentines-app/img1.jpg');">3
<div class="mask" style="background-color: rgba(163, 69, 67, .4);">4
5
<div class="container-xl container-fluid mt-xl-0 mt-lg-5">6
7
<div class="row align-items-center vh-100">8
9
<div class="col-md-6 col-lg-4 pt-5 pt-lg-0">10
<div class="phone mask-custom d-flex align-items-stretch">11
<div class="inner px-4 text-center">12
<h2 class="mt-5 mb-3" style="letter-spacing: 3px;" data-mdb-toggle="animation"13
data-mdb-animation-start="onLoad" data-mdb-animation="fade-in" data-mdb-animation-duration="1000"14
data-mdb-animation-delay="200">Hello, My Dear</h2>15
<p class="lead mb-0" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"16
data-mdb-animation="fade-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="300">How do17
you feel today?</p>18
<div class="py-5">19
<img src="https://mdbootstrap.com/img/Photos/new-templates/valentines-app/draw1.png"20
alt="Valentines Day" class="w-100" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"21
data-mdb-animation="zoom-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="400">22
</div>23
<h4 class="mb-5" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"24
data-mdb-animation="fade-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="500">25
Valentine's Day Ideas</h4>26
<button type="button" class="btn btn-outline-light btn-block btn-rounded btn-lg"27
data-mdb-ripple-color="light" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"28
data-mdb-animation="zoom-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="600">29
Spend time with loved ones30
</button>31
<button type="button" class="btn btn-outline-light btn-block btn-rounded btn-lg"32
data-mdb-ripple-color="light" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"33
data-mdb-animation="zoom-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="700">34
Take care of yourself35
</button>36
<button type="button" class="btn btn-outline-light btn-block btn-rounded btn-lg"37
data-mdb-ripple-color="light" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"38
data-mdb-animation="zoom-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="800">39
Support a charity40
</button>41
<div class="dots d-flex justify-content-center align-items-center mt-5" data-mdb-toggle="animation"42
data-mdb-animation-start="onLoad" data-mdb-animation="zoom-in" data-mdb-animation-duration="1000"43
data-mdb-animation-delay="900">44
<div class="dot dot-lg mx-1"></div>45
<div class="dot mx-1"></div>46
<div class="dot mx-1"></div>47
</div>48
</div>49
</div>50
</div>51
52
<div class="col-md-6 col-lg-4 pt-5 pt-lg-0">53
<div class="phone mask-custom d-flex align-items-stretch">54
<div class="inner px-4 w-100">55
<div class="py-5 mt-1 d-flex justify-content-between" data-mdb-toggle="animation"56
data-mdb-animation-start="onLoad" data-mdb-animation="zoom-in" data-mdb-animation-duration="1000"57
data-mdb-animation-delay="100">58
<a href="#!"><i class="fas fa-arrow-left fa-lg"></i></a>59
<a href="#!"><i class="fas fa-ellipsis-v fa-lg"></i></a>60
</div>61
<h4 class="text-center mb-5" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"62
data-mdb-animation="fade-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="200">63
Self-Care Ideas at Home</h4>64
<div class="row">65
<div class="col-12">66
<div class="card mb-3" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"67
data-mdb-animation="zoom-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="300">68
<div class="card-body">69
<a href="#!" class="stretched-link">70
<h5 class="my-2"><i class="fas fa-brain me-2 fa-fw" style="color: #fca984;"></i>Meditation71
Practice</h5>72
</a>73
</div>74
</div>75
<div class="card mb-3" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"76
data-mdb-animation="zoom-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="400">77
<div class="card-body">78
<a href="#!" class="stretched-link">79
<h5 class="my-2"><i class="fas fa-spa me-2 fa-fw" style="color: #fca984;"></i>Yoga Practice80
</h5>81
</a>82
</div>83
</div>84
<div class="card mb-3" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"85
data-mdb-animation="zoom-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="500">86
<div class="card-body">87
<a href="#!" class="stretched-link">88
<h5 class="my-2"><i class="fas fa-grin-beam me-2 fa-fw" style="color: #fca984;"></i>Happy89
Dance Choreography</h5>90
</a>91
</div>92
</div>93
<div class="card mb-3" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"94
data-mdb-animation="zoom-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="600">95
<div class="card-body">96
<a href="#!" class="stretched-link">97
<h5 class="my-2"><i class="fas fa-book me-2 fa-fw" style="color: #fca984;"></i>Books for your98
development</h5>99
</a>100
</div>101
</div>102
<div class="card mb-3" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"103
data-mdb-animation="zoom-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="700">104
<div class="card-body">105
<a href="#!" class="stretched-link">106
<h5 class="my-2"><i class="fas fa-carrot me-2 fa-fw" style="color: #fca984;"></i>Recipes for107
healthy meals</h5>108
</a>109
</div>110
</div>111
</div>112
</div>113
<div class="text-center pb-lg-5 pb-xl-0" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"114
data-mdb-animation="fade-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="800">115
<i class="fas fa-heart fa-lg mt-4 pt-2 mb-2"></i>116
<h5 class="mb-0"><a href="#!">Explore more</a></h5>117
</div>118
</div>119
</div>120
</div>121
122
<div class="col-md-6 col-lg-4 pt-5 pt-lg-0">123
<div class="phone mask-custom d-flex align-items-stretch">124
<div class="inner px-4 w-100 text-center">125
<div class="py-5 mt-1 d-flex justify-content-between" data-mdb-toggle="animation"126
data-mdb-animation-start="onLoad" data-mdb-animation="zoom-in" data-mdb-animation-duration="1000"127
data-mdb-animation-delay="100">128
<a href="#!"><i class="fas fa-arrow-left fa-lg"></i></a>129
<a href="#!"><i class="fas fa-ellipsis-v fa-lg"></i></a>130
</div>131
<i class="fas fa-brain fa-2x mb-3" style="color: #fca984;" data-mdb-toggle="animation"132
data-mdb-animation-start="onLoad" data-mdb-animation="fade-in" data-mdb-animation-duration="1000"133
data-mdb-animation-delay="200"></i>134
<h4 class="mb-3" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"135
data-mdb-animation="fade-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="300">136
Meditation137
Practice</h4>138
<h6 class="mb-4 pb-2" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"139
data-mdb-animation="fade-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="400">Guided140
Meditation by Ajahn Brahm</h6>141
<div class="ratio ratio-16x9" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"142
data-mdb-animation="zoom-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="500">143
<iframe width="560" height="315" src="https://www.youtube.com/embed/41YBH7jus_w" frameborder="0"144
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"145
allowfullscreen></iframe>146
</div>147
<p class="mt-4 pt-1 text-start" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"148
data-mdb-animation="fade-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="600">Ajahn149
Brahm gives us the means to practise the art which we call150
meditation. During these four ‘Introduction to Meditation’ sessions Ajahn expands on the different151
types of meditation, their purpose and the way to practise them.</p>152
<h5 class="mt-5 mb-4" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"153
data-mdb-animation="fade-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="700"><a154
href="#!">More guided meditations</a></h5>155
156
<div class="d-flex justify-content-end" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"157
data-mdb-animation="zoom-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="800">158
<a href=""><i class="fas fa-cog fa-2x"></i></a>159
</div>160
</div>161
</div>162
</div>163
164
</div>165
166
</div>167
168
</div>169
</div>xxxxxxxxxx1
html,2
body {3
height: 100%;4
}5
6
@media (max-width: 767px) {7
8
html,9
body {10
height: 2600px;11
}12
}13
14
@media (min-width: 768px) and (max-width: 820px) {15
16
html,17
body {18
height: 1750px;19
}20
}21
22
@media (min-width: 821px) and (max-width: 1025px) {23
24
html,25
body {26
height: 954px;27
}28
}29
30
.phone {31
border-radius: 40px;32
min-height: 795px;33
color: #f8e4e3;34
}35
36
.fas {37
color: #e6cdce;38
}39
40
a {41
color: #f8e4e3;42
}43
44
a,45
a:hover {46
-webkit-transition: all .3s ease-in-out;47
transition: all .3s ease-in-out48
}49
50
a:hover {51
color: rgba(248, 228, 227, .65)52
}53
54
.dots {55
cursor: pointer56
}57
58
.dot {59
height: 6px;60
width: 6px;61
background-color: #e6cdce;62
border-radius: 50%63
}64
65
.dot-lg {66
height: 8px;67
width: 8px68
}69
70
.card {71
background-color: hsla(1, 42%, 45%, .5);72
border-radius: 10px73
}74
75
.card,76
.card:hover {77
-webkit-transition: all .3s ease-in-out;78
transition: all .3s ease-in-out79
}80
81
.card:hover {82
-webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .09);83
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .09);84
background-color: hsla(1, 42%, 45%, .4)85
}86
87
.mask-custom {88
backdrop-filter: blur(15px);89
background-color: rgba(255, 255, 255, .2);90
border: 2px solid rgba(255, 255, 255, .1);91
background-clip: padding-box;92
box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);93
}1
1
Console errors: 0