HTML
xxxxxxxxxx1
<div class="d-flex justify-content-center mx-4 my-5">2
3
<div class="p-relative mx-2 mb-4">4
5
<div class="phone">6
<div class="main-screen d-flex align-items-center justify-content-center">7
<div class="content w-80">8
<div class="signup">9
10
<div class="text-center">11
<a class="btn-primary btn-floating btn-lg"><i class="fas fa-basketball-ball fa-2x"></i></a>12
<h2 class="title font-weight-bold mt-2">Sign Up</h2>13
</div>14
15
<form class="mt-5" action="">16
17
<div class="md-form md-outline">18
<i class="fas fa-envelope prefix"></i>19
<input type="email" id="inputIconEx1" class="form-control">20
<label for="inputIconEx1">E-mail address</label>21
</div>22
23
<div class="md-form md-outline">24
<i class="fas fa-user prefix"></i>25
<input type="password" id="inputIconEx2" class="form-control">26
<label for="inputIconEx2">Password</label>27
</div>28
29
</form>30
31
<div class="text-center">32
<button type="button" class="btn btn-primary btn-block btn-md btn-form">Create Account</button>33
</div>34
35
</div>36
</div>37
</div>38
</div>39
40
</div>41
42
<div class="p-relative mx-2 mb-4">43
44
<div class="phone">45
<div class="main-screen">46
<div class="content py-3 px-4">47
48
<h5 class="font-weight-bold text-center my-4 pt-1">Browse</h5>49
50
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">51
<ol class="carousel-indicators">52
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>53
<li data-target="#carousel-example-2" data-slide-to="1"></li>54
<li data-target="#carousel-example-2" data-slide-to="2"></li>55
</ol>56
<div class="carousel-inner" role="listbox">57
<div class="carousel-item active">58
<div class="view">59
<img class="d-block w-100 image" src="https://images.pexels.com/photos/2648337/pexels-photo-2648337.jpeg"60
alt="First slide">61
<div class="mask rgba-blue-strong"></div>62
</div>63
<div class="carousel-caption">64
<h4 class="font-weight-bold mb-1">Gloucester Island National Park.</h4>65
<p class="mb-1">Start Exploring</p>66
</div>67
</div>68
<div class="carousel-item">69
<div class="view">70
<img class="d-block w-100 image" src="https://images.pexels.com/photos/2446439/pexels-photo-2446439.jpeg"71
alt="Second slide">72
<div class="mask rgba-indigo-strong"></div>73
</div>74
<div class="carousel-caption">75
<h4 class="font-weight-bold mb-1">Great Barrier Reef</h4>76
<p class="mb-1">Start Exploring</p>77
</div>78
</div>79
<div class="carousel-item">80
<div class="view">81
<img class="d-block w-100 image" src="https://images.pexels.com/photos/1680246/pexels-photo-1680246.jpeg"82
alt="Third slide">83
<div class="mask rgba-mdb-color-strong"></div>84
</div>85
<div class="carousel-caption">86
<h4 class="font-weight-bold mb-1">Sydney Opera House</h4>87
<p class="mb-1">Start Exploring</p>88
</div>89
</div>90
</div>91
<a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">92
<span class="carousel-control-prev-icon" aria-hidden="true"></span>93
<span class="sr-only">Previous</span>94
</a>95
<a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">96
<span class="carousel-control-next-icon" aria-hidden="true"></span>97
<span class="sr-only">Next</span>98
</a>99
</div>100
101
<h5 class="font-weight-bold text-center my-4 pt-1">Packing List</h5>102
103
<ul class="list-unstyled list">104
<li>105
<div class="form-check">106
<input type="checkbox" class="form-check-input filled-in" id="Ex" checked>107
<label class="form-check-label" for="Ex">Documents: passport, ID card</label>108
</div>109
</li>110
<li>111
<div class="form-check">112
<input type="checkbox" class="form-check-input filled-in" id="Ex1" checked>113
<label class="form-check-label" for="Ex1">Boarding pass</label>114
</div>115
</li>116
<li>117
<div class="form-check">118
<input type="checkbox" class="form-check-input filled-in" id="Ex2" checked>119
<label class="form-check-label" for="Ex2">Monthly financial presentation</label>120
</div>121
</li>122
<li>123
<div class="form-check">124
<input type="checkbox" class="form-check-input filled-in" id="Ex3">125
<label class="form-check-label" for="Ex3">Phone charger</label>126
</div>127
</li><li>128
<div class="form-check">129
<input type="checkbox" class="form-check-input filled-in" id="Ex4" checked>130
<label class="form-check-label" for="Ex4">Money, credit card</label>131
</div>132
</li>133
<li>134
<div class="form-check">135
<input type="checkbox" class="form-check-input filled-in" id="Ex5" checked>136
<label class="form-check-label" for="Ex5">Clothes, underwear</label>137
</div>138
</li>139
<li>140
<div class="form-check">141
<input type="checkbox" class="form-check-input filled-in" id="Ex6">142
<label class="form-check-label" for="Ex6">Diapers, cosmetics</label>143
</div>144
</li>145
</ul>146
</div>147
</div>148
</div>149
150
</div>151
152
<div class="p-relative mx-2 mb-4">153
154
<div class="phone">155
<div class="main-screen">156
<div class="content py-3 px-4">157
158
<h5 class="font-weight-bold text-center my-4 pt-1">Information about Melbourne</h5>159
160
<table class="table table-sm table-borderless">161
<tbody>162
<tr>163
<th scope="row" class="font-weight-bold text-primary w-50">Weather</th>164
<td>Mostly sunny</td>165
</tr>166
<tr>167
<th scope="row" class="font-weight-bold text-primary w-50">Temperature</th>168
<td>17.7 °C </td>169
</tr>170
<tr>171
<th scope="row" class="font-weight-bold text-primary w-50">Currency</th>172
<td>Australian English</td>173
</tr>174
<tr>175
<th scope="row" class="font-weight-bold text-primary w-50">Location</th>176
<td>Victoria, Australia</td>177
</tr>178
</tbody>179
</table>180
181
<h5 class="font-weight-bold text-center my-4 pt-1">Your Destination: <br>Melbourne, Australia</h5>182
183
<div id="map-container-2" class="z-depth-1 map-container-2">184
<iframe src="https://api.mapbox.com/styles/v1/martussky/ck06e1s2p25571dk6n7xmho6o.html?fresh=true&title=true&access_token=pk.eyJ1IjoibWFydHVzc2t5IiwiYSI6ImNrMDZqNGlkaTAyMGUzY21jejhpankxamMifQ.NUzikISLH5o4OT-zVcdc2Q#9.14/-37.900/145.015/0" frameborder="0"185
style="border:0" allowfullscreen></iframe>186
</div>187
188
</div>189
</div>190
</div>191
192
</div>193
194
</div>CSS
xxxxxxxxxx1
.phone {2
width: 345px;3
height: 812px;4
padding: 15px;5
background: #E7E7E7;6
border-radius: 35px;7
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), 0 5px 20px rgba(0, 0, 0, 0.2);8
transition: .5s; }9
.phone::after {10
content: "";11
position: absolute;12
top: 15px;13
left: 50%;14
width: 150px;15
height: 20px;16
background: #E7E7E7;17
border-bottom-right-radius: 12px;18
border-bottom-left-radius: 12px;19
transform: translateX(-50%); }20
.phone .main-screen {21
height: 100%;22
background: #fff;23
border-radius: 25px; }24
.phone .main-screen .content.w-80 {25
width: 80%; }26
.phone .main-screen .content .btn-form {27
font-size: 13px; }28
.phone .main-screen .content .carousel .carousel-inner .view {29
border-radius: 25px; }30
.phone .main-screen .content .carousel .carousel-inner .view .image {31
height: 350px; }32
.phone .main-screen .content .list > li {33
margin-bottom: 10px; }34
.phone .main-screen .content .list > li .form-check {35
padding-left: 0; }36
.phone .main-screen .content .form-check-input[type=checkbox].filled-in:checked + label:before,37
.phone .main-screen .content label.btn input[type=checkbox].filled-in:checked + label:before {38
top: -1px;39
width: 6px;40
height: 10px; }41
.phone .main-screen .content .form-check-input[type=checkbox].filled-in:checked + label:after,42
.phone .main-screen .content label.btn input[type=checkbox].filled-in:checked + label:after {43
width: 15px;44
height: 15px;45
border-color: #4285f4;46
background-color: #4285f4; }47
.phone .main-screen .content .form-check-input[type=checkbox].filled-in:not(:checked) + label:after,48
.phone .main-screen .content label.btn input[type=checkbox].filled-in:not(:checked) + label:after {49
height: 15px;50
width: 15px;51
border-color: #4285f4; }52
.phone .main-screen .content .form-check-input[type=checkbox] + label,53
.phone .main-screen .content label.btn input[type=checkbox] + label {54
height: 1rem;55
line-height: 1rem; }56
.phone .main-screen .content .map-container-2 {57
position: relative;58
height: 400px;59
overflow: hidden;60
border-radius: 25px; }61
.phone .main-screen .content .map-container-2 iframe {62
position: absolute;63
top: 0;64
left: 0;65
width: 100%;66
height: 400px; }67
.p-relative { 68
position: relative !important;69
}JS
1
1
Console errors: 0