xxxxxxxxxx1
<!--Main Navigation-->2
<header class="mb-10">3
4
<!-- Navbar -->5
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary fixed-top">6
<!-- Container wrapper -->7
<div class="container-fluid">8
<!-- Toggle button -->9
<button data-mdb-collapse-init class="navbar-toggler" type="button" data-mdb-toggle="collapse"10
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"11
aria-label="Toggle navigation">12
<i class="fas fa-bars"></i>13
</button>14
15
<!-- Collapsible wrapper -->16
<div class="collapse navbar-collapse" id="navbarSupportedContent">17
<ul class="navbar-nav me-auto mb-2 mb-lg-0">18
<li class="nav-item">19
<a class="nav-link text-dark" href="#!">Projects</a>20
</li>21
<li class="nav-item">22
<a class="nav-link text-dark" href="#!">About me</a>23
</li>24
<li class="nav-item">25
<a class="nav-link text-dark" href="#!">Testimonials</a>26
</li>27
<li class="nav-item">28
<a class="nav-link text-dark" href="#!">Contact</a>29
</li>30
</ul>31
32
<ul class="navbar-nav flex-row">33
<!-- Icons -->34
<li class="nav-item">35
<a class="nav-link pe-2" href="#!">36
<i class="fab fa-youtube"></i>37
</a>38
</li>39
<li class="nav-item">40
<a class="nav-link px-2" href="#!">41
<i class="fab fa-facebook-f"></i>42
</a>43
</li>44
<li class="nav-item">45
<a class="nav-link px-2" href="#!">46
<i class="fab fa-twitter"></i>47
</a>48
</li>49
<li class="nav-item">50
<a class="nav-link ps-2" href="#!">51
<i class="fab fa-instagram"></i>52
</a>53
</li>54
</ul>55
</div>56
<!-- Collapsible wrapper -->57
58
</div>59
<!-- Container wrapper -->60
</nav>61
<!-- Navbar -->62
63
<!-- Section: Split screen -->64
<section class="">65
66
<div class="container-fluid px-0">67
<div class="row g-0">68
69
<!-- First column -->70
<div class="col-lg-6 vh-100 d-flex flex-column justify-content-center align-items-center">71
72
<!-- Headings -->73
<div class="h-100 d-flex justify-content-center align-items-center px-5">74
75
<div class="">76
<h2 class="display-4">John Doe</h2>77
<h1 class="display-2 fw-bold text-uppercase">Web developer</h1>78
</div>79
80
</div>81
82
<!-- CTA elements -->83
<div class="d-flex align-items-center w-100 justify-content-between px-5 mb-5">84
<a href="https://github.com/mdbootstrap/mdb-ui-kit" target="_blank" class="text-dark"><i85
class="fab fa-github fa-xl"></i></a>86
<hr class="hr d-none d-xl-flex" style="height: 2px; width: 200px;">87
<a class="btn btn-primary btn-lg btn-rounded" href="#" role="button" data-mdb-ripple-init>See my88
projects<i class="fas fa-angle-down ms-2"></i></a>89
</div>90
91
</div>92
<!-- First column -->93
94
<!-- Second column -->95
<div class="col-lg-6 d-none d-lg-inline-block vh-100">96
97
<!-- Carousel wrapper -->98
<div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel"99
data-mdb-carousel-init>100
<!-- Indicators -->101
<div class="carousel-indicators">102
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0"103
class="rounded-circle active" style="width: 7px; height: 7px" aria-current="true"104
aria-label="Slide 1"></button>105
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1" aria-label="Slide 2"106
class="rounded-circle" style="width: 7px; height: 7px"></button>107
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2" aria-label="Slide 3"108
class="rounded-circle" style="width: 7px; height: 7px"></button>109
</div>110
111
<!-- Inner -->112
<div class="carousel-inner shadow-5-strong" style="border-bottom-left-radius: 4rem">113
<!-- Single item -->114
<div class="carousel-item active">115
<img src="https://mdbootstrap.com/img/new/textures/full/243.jpg"116
class="d-block vh-100 vw-100 object-cover" alt="15 years of experience in the IT industry" />117
<div class="carousel-caption d-none d-md-block">118
<h5>15 years of experience in the IT industry</h5>119
<p>I am in love with technology and have spent half my life developing it</p>120
</div>121
</div>122
123
<!-- Single item -->124
<div class="carousel-item">125
<img src="https://mdbootstrap.com/img/new/textures/full/102.jpg"126
class="d-block vh-100 vw-100 object-cover" alt="243 completed projects" />127
<div class="carousel-caption d-none d-md-block">128
<h5>243 completed projects</h5>129
<p>I love challenges and treat each project as my own</p>130
</div>131
</div>132
133
<!-- Single item -->134
<div class="carousel-item">135
<img src="https://mdbootstrap.com/img/new/textures/full/107.jpg"136
class="d-block vh-100 vw-100 object-cover" alt="53 satisfied customers" />137
<div class="carousel-caption d-none d-md-block">138
<h5>53 satisfied customers</h5>139
<p>There is no better reward for me than a happy customer</p>140
</div>141
</div>142
</div>143
<!-- Inner -->144
145
<!-- Controls -->146
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample"147
data-mdb-slide="prev">148
<span class="carousel-control-prev-icon" aria-hidden="true"></span>149
<span class="visually-hidden">Previous</span>150
</button>151
<button class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample"152
data-mdb-slide="next">153
<span class="carousel-control-next-icon" aria-hidden="true"></span>154
<span class="visually-hidden">Next</span>155
</button>156
</div>157
<!-- Carousel wrapper -->158
159
</div>160
<!-- Second column -->161
162
</div>163
</div>164
165
</section>166
<!-- Section: Split screen -->167
168
</header>169
<!--Main Navigation-->170
171
<!--Main layout-->172
<main>173
<div class="container">174
175
</div>176
</main>177
<!--Main layout-->178
179
<!--Footer-->180
<footer>181
182
</footer>183
<!--Footer-->1
1
1
1
Console errors: 0