xxxxxxxxxx1
<div class="container-fluid py-md-5 py-4">2
3
<div class="d-md-flex justify-content-md-center flex-wrap">4
5
<div class="p-relative mx-md-2 mb-4 mb-xl-0">6
7
<div class="phone mx-auto">8
<div class="main-screen d-flex justify-content-center">9
<div class="content">10
<ul class="list-unstyled d-flex justify-content-between px-1 mt-2 mb-4">11
<li>12
<a class=""><i class="fas fa-bars"></i></a>13
</li>14
<li>15
<a class="small weight-500">New York <i class="fas fa-chevron-down pl-1"></i></a>16
</li>17
<li>18
<a class=""><i class="fas fa-search"></i></a>19
</li>20
</ul>21
<div class="row">22
<div class="col-12 mb-4 pb-2">23
<div class="card grey lighten-3 rounded-1">24
<div class="card-body">25
<div class="media d-flex align-items-center">26
<img class="card-img-64 d-flex mr-3" src="https://mdbootstrap.com/img/Others/documentation/img%20(20)-mini.jpg" alt="Small image">27
<div class="media-body">28
<div class="d-flex justify-content-between mb-1">29
<h5>Martha Steward</h5>30
<a class="link-edit h5"><i class="far fa-edit fa-xs"></i></a>31
</div>32
<div class="d-flex justify-content-between dark-grey-text small">33
<p class="mb-0">Web Developer</p>34
<a><u>37 friends</u></a>35
</div>36
</div>37
</div>38
</div>39
</div>40
</div>41
</div>42
<h4 class="font-weight-normal mb-4 pb-1 px-1">Hello, <span class="text-muted">Martha</span></h4>43
<div class="row">44
<div class="col-6 mb-3 pr-2 d-flex align-items-stretch">45
<div class="card rounded-1 red-alt">46
<div class="card-body white-text p-custom">47
<p class="text-right"><i class="fas fa-briefcase fa-lg mb-2"></i></p>48
<p class="font-weight-bold mb-0">Professional events</p>49
</div>50
</div>51
</div>52
<div class="col-6 mb-3 pl-2 d-flex align-items-stretch">53
<div class="card rounded-1 cyan-alt w-100 h-100">54
<div class="card-body white-text p-custom">55
<p class="text-right"><i class="fas fa-bullhorn fa-lg mb-1"></i></p>56
<p class="font-weight-bold mb-2 pb-1 p-absolute bottom-0">Social events</p>57
</div>58
</div>59
</div>60
<div class="col-6 mb-3 pr-2 d-flex align-items-stretch">61
<div class="card rounded-1 purple-alt">62
<div class="card-body white-text p-custom">63
<p class="text-right"><i class="fas fa-theater-masks fa-lg mb-1"></i></p>64
<p class="font-weight-bold mb-0">Concerts & Theater</p>65
</div>66
</div>67
</div>68
<div class="col-6 mb-3 pl-2 d-flex align-items-stretch">69
<div class="card rounded-1 orange-alt">70
<div class="card-body white-text p-custom">71
<p class="text-right"><i class="fas fa-users fa-lg mb-1"></i></p>72
<p class="font-weight-bold mb-0">Events with friends</p>73
</div>74
</div>75
</div>76
</div>77
<div class="row">78
<div class="col-12">79
<ul class="nav d-flex justify-content-between small my-2 pb-2">80
<li class="nav-item">81
<a class="nav-link active font-weight-bold dark-blue-alt-text px-1 waves-effect rounded" href="#!"><i class="fas fa-caret-right pr-1"></i>Most popular</a>82
</li>83
<li class="nav-item">84
<a class="nav-link text-muted font-weight-normal px-1 waves-effect rounded" href="#!">Friends go</a>85
</li>86
<li class="nav-item">87
<a class="nav-link text-muted font-weight-normal px-1 waves-effect rounded" href="#!">Latest</a>88
</li>89
<li class="nav-item">90
<a class="nav-link text-muted font-weight-normal px-1 waves-effect rounded" href="#!">Recommend</a>91
</li>92
</ul>93
<div class="card rounded-1 purple-alt white-text">94
<div class="card-body">95
<h3 class="font-weight-bold mb-2">AC / DC</h3>96
<p class="text-white-70 mb-5 pb-1">Massive 2020 World Tour</p>97
<p class="font-weight-bold mb-2"><span class="text-white-70 font-weight-normal">Date: </span>25.03.2020 8PM</p>98
<p class="font-weight-bold mb-0"><span class="text-white-70 font-weight-normal">Location: </span>National stadium<span class="float-right">$ 90</span></p>99
</div>100
</div>101
</div>102
</div>103
</div>104
</div>105
</div>106
107
</div>108
109
<div class="p-relative mx-md-2 mb-4 mb-xl-0">110
111
<div class="phone mx-auto">112
<div class="main-screen">113
<div class="content">114
<ul class="list-unstyled d-flex justify-content-between px-1 mt-2 mb-4">115
<li>116
<ul class="list-unstyled d-flex justify-content-left">117
<li>118
<a class="mr-3"><i class="fas fa-bars"></i></a>119
</li>120
<li>121
<img src="https://mdbootstrap.com/img/Others/documentation/img%20(20)-mini.jpg" class="rounded-circle z-depth-0 mt-n1" width="25" alt="avatar image">122
</li>123
</ul>124
</li>125
<li>126
<ul class="list-unstyled d-flex justify-content-right">127
<li>128
<a class="small weight-500">Seattle <i class="fas fa-chevron-down pl-1"></i></a>129
</li>130
<li>131
<a class="pl-4"><i class="fas fa-search"></i></a>132
</li>133
</ul>134
</li>135
</ul>136
<div class="font-weight-normal">137
<p class="mb-4 pb-1"><i class="fas fa-chevron-left pr-2"></i>Back</p>138
<h4 class="font-weight-normal mb-2">Professional events</h4>139
<p class="small text-muted">JavaScript, NodeJS ... <i class="fas fa-pencil-alt"></i></p>140
</div>141
<div class="row">142
<div class="col-12">143
<ul class="nav d-flex justify-content-between small my-2 pt-1 pb-2">144
<li class="nav-item">145
<a class="nav-link active font-weight-bold dark-blue-alt-text px-1 waves-effect rounded" href="#!"><i class="fas fa-caret-right pr-1"></i>Most popular</a>146
</li>147
<li class="nav-item">148
<a class="nav-link text-muted font-weight-normal px-1 waves-effect rounded" href="#!">Friends go</a>149
</li>150
<li class="nav-item">151
<a class="nav-link text-muted font-weight-normal px-1 waves-effect rounded" href="#!">Latest</a>152
</li>153
<li class="nav-item">154
<a class="nav-link text-muted font-weight-normal px-1 waves-effect rounded" href="#!">Recommend</a>155
</li>156
</ul>157
<div class="card rounded-1 orange-alt white-text mb-3">158
<div class="card-body">159
<h3 class="font-weight-bold mb-2">Meet JS</h3>160
<p class="text-white-70 mb-5 pb-5">Meetup for front-end <br>developers and designers</p>161
<p class="font-weight-bold mb-2"><span class="text-white-70 font-weight-normal">Date: </span>27.03.2020 5PM</p>162
<p class="font-weight-bold mb-0"><span class="text-white-70 font-weight-normal">Location: </span>MindySpace, WA<span class="float-right">$ 15</span></p>163
</div>164
</div>165
<div class="card rounded-1 red-alt white-text">166
<div class="card-body">167
<h3 class="font-weight-bold mb-2">DevsConf 2020</h3>168
<p class="text-white-70 mb-5 pb-1">Conference for developers</p>169
<p class="font-weight-bold mb-2"><span class="text-white-70 font-weight-normal">Date: </span>28.03.2020 6PM</p>170
<p class="font-weight-bold mb-0"><span class="text-white-70 font-weight-normal">Location: </span>MindySpace, WA<span class="text-uppercase float-right">Free</span></p>171
</div>172
</div>173
</div>174
</div>175
</div>176
</div>177
</div>178
179
</div>180
181
<div class="p-relative mx-md-2">182
183
<div class="phone p-2 mx-auto">184
<div class="main-screen p-1">185
<div class="content">186
<div class="card rounded-2 dark-blue-alt white-text mb-3">187
<div class="card-body">188
<div class="d-flex justify-content-between mb-5 pb-5">189
<p class="h3 font-weight-bold mb-0"><a><i class="fas fa-chevron-left"></i></a></p>190
<div class="d-inline-flex">191
<p class="h3 font-weight-bold mb-0 mr-4"><a><i class="far fa-heart"></i></a></p>192
<p class="h3 font-weight-bold mb-0"><a><i class="far fa-share-square"></i></a></p>193
</div>194
</div>195
<h3 class="pt-4 pb-1">Dream Developer #5</h3>196
<p class="mb-1">Meetup for aspiring, junior <br>and all other programmers</p>197
</div>198
</div>199
<div class="inner-content">200
<div class="row">201
<div class="col-12">202
<ul class="nav d-flex justify-content-between small my-2 pt-1 pb-2">203
<li class="nav-item">204
<a class="nav-link active font-weight-bold dark-blue-alt-text px-1 waves-effect rounded" href="#!"><i class="fas fa-caret-right pr-1"></i>About</a>205
</li>206
<li class="nav-item">207
<a class="nav-link text-muted font-weight-normal px-1 waves-effect rounded" href="#!">Detail</a>208
</li>209
<li class="nav-item">210
<a class="nav-link text-muted font-weight-normal px-1 waves-effect rounded" href="#!">Map Location</a>211
</li>212
<li class="nav-item">213
<a class="nav-link text-muted font-weight-normal px-1 waves-effect rounded" href="#!">Visitors</a>214
</li>215
</ul>216
<ul class="fa-ul ml-4 pl-1">217
<li class="font-weight-bold mb-3"><span class="fa-li"><i class="far fa-clock"></i></span>FRI, 27 March 2019<br><small class="text-muted">6:00 PM - 8:30 PM</small></li>218
<li class="font-weight-bold mb-3"><span class="fa-li"><i class="fas fa-map-marker-alt"></i></span>MindySpace Coworking Space<br><small class="text-muted">123 Street, Blue Tower<br>Seattle, WA</small></li>219
</ul>220
<div class="text-muted font-weight-normal d-flex justify-content-between align-items-center mt-4 px-1">221
<p><u>3 friends</u> go on this event</p>222
<ul class="list-unstyled d-inline-flex">223
<li>224
<img src="https://mdbootstrap.com/img/Others/documentation/img%20(2)-mini.jpg" class="rounded-circle" width="35" alt="avatar image">225
</li>226
<li>227
<img src="https://mdbootstrap.com/img/Others/documentation/img%20(21)-mini.jpg" class="rounded-circle" width="35" alt="avatar image">228
</li>229
<li>230
<img src="https://mdbootstrap.com/img/Others/documentation/img%20(27)-mini.jpg" class="rounded-circle" width="35" alt="avatar image">231
</li>232
</ul>233
</div>234
<div class="mt-3 px-1 text-muted">235
<p>Lorem ipsum dolor amet consectetur adipisic elit unde mollitia totam facilis dolor am... <u class="deep-purple-text">detail</u></p>236
<hr class="my-4">237
<div class="d-flex justify-content-between">238
<div>239
<h4 class="text-uppercase dark-blue-alt-text font-weight-bold mb-0">Free</h4>240
<small>with registration</small>241
</div>242
<div class="mb-3">243
<button type="button" class="btn btn-lg red-alt text-white btn-rounded font-weight-bold m-0">Register</button>244
</div>245
</div>246
</div>247
</div>248
</div>249
</div>250
</div>251
</div>252
</div>253
254
</div>255
256
</div>257
258
</div>xxxxxxxxxx1
body {2
background-color: #eee;3
}4
@media screen and (max-width: 770px) {5
.phone {6
width: 345px !important;7
}8
}9
.phone {10
width: 355px;11
min-height: 825px;12
padding: 1.6rem;13
border-radius: 35px;14
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), 0 5px 20px rgba(0, 0, 0, 0.2);15
transition: .5s; 16
background-color: #fff; }17
.phone::after {18
content: "";19
position: absolute;20
top: 15px;21
left: 50%;22
width: 150px;23
height: 20px;24
border-bottom-right-radius: 12px;25
border-bottom-left-radius: 12px;26
transform: translateX(-50%); }27
.phone .main-screen {28
height: 100%;29
background: #fff;30
border-radius: 25px; }31
.phone .main-screen .content {32
width: 100%;33
}34
.phone .main-screen .inner-content {35
width: 100%;36
padding-left: .8rem;37
padding-right: .8rem;38
}39
.phone .main-screen .content .btn-form {40
font-size: 13px; }41
.phone .main-screen .content .carousel .carousel-inner .view {42
border-radius: 25px; }43
.phone .main-screen .content .carousel .carousel-inner .view .image {44
height: 350px; }45
.phone .main-screen .content .list > li {46
margin-bottom: 10px; }47
.phone .main-screen .content .list > li .form-check {48
padding-left: 0; }49
.phone .main-screen .content .form-check-input[type=checkbox].filled-in:checked + label:before,50
.phone .main-screen .content label.btn input[type=checkbox].filled-in:checked + label:before {51
top: -1px;52
width: 6px;53
height: 10px; }54
.phone .main-screen .content .form-check-input[type=checkbox].filled-in:checked + label:after,55
.phone .main-screen .content label.btn input[type=checkbox].filled-in:checked + label:after {56
width: 15px;57
height: 15px;58
border-color: #4285f4;59
background-color: #4285f4; }60
.phone .main-screen .content .form-check-input[type=checkbox].filled-in:not(:checked) + label:after,61
.phone .main-screen .content label.btn input[type=checkbox].filled-in:not(:checked) + label:after {62
height: 15px;63
width: 15px;64
border-color: #4285f4; }65
.phone .main-screen .content .form-check-input[type=checkbox] + label,66
.phone .main-screen .content label.btn input[type=checkbox] + label {67
height: 1rem;68
line-height: 1rem; }69
.phone .main-screen .content .map-container-2 {70
position: relative;71
height: 400px;72
overflow: hidden;73
border-radius: 25px; }74
.phone .main-screen .content .map-container-2 iframe {75
position: absolute;76
top: 0;77
left: 0;78
width: 100%;79
height: 400px; }80
.p-relative { 81
position: relative !important;82
}83
.rounded-1 {84
border-radius: 1rem;85
}86
.rounded-2 {87
border-radius: 28px;88
}89
.red-alt {90
background-color: #fa5668;91
}92
.cyan-alt {93
background-color: #41d5e2;94
}95
.purple-alt {96
background-color: #4d53e0;97
}98
.orange-alt {99
background-color: #fb8e37;100
}101
.p-absolute {102
position: absolute;103
}104
.bottom-0 {105
bottom: 0;106
}107
.p-custom {108
padding-top: .8rem;109
padding-bottom: .7rem;110
line-height: 1.2;111
}112
.dark-blue-alt {113
background-color: #1a1a4a;114
}115
.dark-blue-alt-text {116
color: #3b2987;117
}118
.link-edit {119
margin-top: -.13rem;120
}121
.text-white-70 {122
color: rgba(255,255,255,.7);123
}124
.weight-500 {125
font-weight: 500 !important;126
}1
1
Console errors: 0