#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
Я создал bootstrap nav-pill, который будет переключать сообщения о заданиях за клик, используя коды ff:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- Tabs nav -->
<div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link p-2 active" id="v-pills-job1-tab" data-toggle="pill" href="#v-pills-job1" role="tab" aria-controls="v-pills-job1" aria-selected="true">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job2-tab" data-toggle="pill" href="#v-pills-job2" role="tab" aria-controls="v-pills-job2" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job3-tab" data-toggle="pill" href="#v-pills-job3" role="tab" aria-controls="v-pills-job3" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job4-tab" data-toggle="pill" href="#v-pills-job4" role="tab" aria-controls="v-pills-job4" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job5-tab" data-toggle="pill" href="#v-pills-job5" role="tab" aria-controls="v-pills-job5" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job6-tab" data-toggle="pill" href="#v-pills-job6" role="tab" aria-controls="v-pills-job6" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job7-tab" data-toggle="pill" href="#v-pills-job7" role="tab" aria-controls="v-pills-job7" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job8-tab" data-toggle="pill" href="#v-pills-job8" role="tab" aria-controls="v-pills-job8" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
</div>
</div>
<div class="col-md-8">
<!-- Tabs content -->
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade shadow rounded bg-white show active p-5" id="v-pills-job1" role="tabpanel" aria-labelledby="v-pills-job1">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job2" role="tabpanel" aria-labelledby="v-pills-job2">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job3" role="tabpanel" aria-labelledby="v-pills-job3">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job4" role="tabpanel" aria-labelledby="v-pills-job4">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job5" role="tabpanel" aria-labelledby="v-pills-job5">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job6" role="tabpanel" aria-labelledby="v-pills-job6">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job7" role="tabpanel" aria-labelledby="v-pills-job7">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job8" role="tabpanel" aria-labelledby="v-pills-job8">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
</div>
</div>
</div>
</div> Прямо сейчас он добавляет только цвет фона, что вполне нормально, однако я хочу включить эту кнопку эффекта стирания, как показано здесь, всякий раз, когда пользователь наводит курсор или нажимает на элемент: https://codepen.io/souporserious/pen/pvbdWe
Но я понятия не имею, как с этим бороться, поскольку он создал его с помощью атрибута data.
JSFIDDLE можно найти здесь: https://jsfiddle.net/40xhy7mp /
Кто-нибудь, кто может помочь?
Ответ №1:
Вы можете увидеть более простой пример здесь, на моем ручке: https://codepen.io/IceWong/pen/ExyxJJd
Ваш код, вероятно, может быть чем-то вроде этого
a.nav-link {
position: relative;
display: inline-block;
}
a.nav-link:after {
position: absolute;
z-index: 9;
content: '';
transition: all 0.20s;
top: 0;
width: 0;
left: 0;
height: 100%;
background-color: rgba(77, 77, 77,0.2);
}
a.nav-link:hover:after {
width: 100%;
height: 100%;
}
a.nav-link span {
position:relative;
/*z-index: 10;*/
transform: translate(-50%, -50%);
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- Tabs nav -->
<div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link p-2 active" id="v-pills-job1-tab" data-toggle="pill" href="#v-pills-job1" role="tab" aria-controls="v-pills-job1" aria-selected="true">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job2-tab" data-toggle="pill" href="#v-pills-job2" role="tab" aria-controls="v-pills-job2" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job3-tab" data-toggle="pill" href="#v-pills-job3" role="tab" aria-controls="v-pills-job3" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job4-tab" data-toggle="pill" href="#v-pills-job4" role="tab" aria-controls="v-pills-job4" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job5-tab" data-toggle="pill" href="#v-pills-job5" role="tab" aria-controls="v-pills-job5" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job6-tab" data-toggle="pill" href="#v-pills-job6" role="tab" aria-controls="v-pills-job6" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job7-tab" data-toggle="pill" href="#v-pills-job7" role="tab" aria-controls="v-pills-job7" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job8-tab" data-toggle="pill" href="#v-pills-job8" role="tab" aria-controls="v-pills-job8" aria-selected="false">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
</div>
</div>
<div class="col-md-8">
<!-- Tabs content -->
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade shadow rounded bg-white show active p-5" id="v-pills-job1" role="tabpanel" aria-labelledby="v-pills-job1">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job2" role="tabpanel" aria-labelledby="v-pills-job2">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job3" role="tabpanel" aria-labelledby="v-pills-job3">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job4" role="tabpanel" aria-labelledby="v-pills-job4">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job5" role="tabpanel" aria-labelledby="v-pills-job5">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job6" role="tabpanel" aria-labelledby="v-pills-job6">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job7" role="tabpanel" aria-labelledby="v-pills-job7">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job8" role="tabpanel" aria-labelledby="v-pills-job8">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
</div>
</div>
</div>
</div> Ответ №2:
Смотрите Здесь решение:
.nav-link {
display: inline-block;
padding: 12px 18px;
text-decoration: none;
position: relative;
border: 2px solid #445561;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: left;
color: #445561;
overflow: hidden;
}
.nav-link:before, .nav-link:after {
content: attr(data-wipe);
padding-top: inherit;
padding-bottom: inherit;
white-space: nowrap;
position: absolute;
top: 0;
overflow: hidden;
color: #f1f1f2;
background: #445561;
}
.nav-link:before {
left: 0;
text-indent: 18px;
width: 0;
}
.nav-link:after {
padding-left: inherit;
padding-right: inherit;
left: 100%;
text-indent: calc(-100% - 36px);
transition: 0.2s ease-in-out;
}
.nav-link:hover:before {
width: 100%;
transition: width 0.2s ease-in-out;
}
.nav-link:hover:after {
left: 0;
text-indent: 0;
transition: 0s 1s ease-in-out;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- Tabs nav -->
<div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link p-2" id="v-pills-job1-tab" data-toggle="pill" href="#v-pills-job1" role="tab" aria-controls="v-pills-job1" aria-selected="true" data-wipe="Creative Design Mind">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job2-tab" data-toggle="pill" href="#v-pills-job2" role="tab" aria-controls="v-pills-job2" aria-selected="false" data-wipe="Creative Design Mind">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job3-tab" data-toggle="pill" href="#v-pills-job3" role="tab" aria-controls="v-pills-job3" aria-selected="false" data-wipe="Creative Design Mind">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job4-tab" data-toggle="pill" href="#v-pills-job4" role="tab" aria-controls="v-pills-job4" aria-selected="false" data-wipe="Creative Design Mind">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job5-tab" data-toggle="pill" href="#v-pills-job5" role="tab" aria-controls="v-pills-job5" aria-selected="false" data-wipe="Creative Design Mind">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job6-tab" data-toggle="pill" href="#v-pills-job6" role="tab" aria-controls="v-pills-job6" aria-selected="false" data-wipe="Creative Design Mind">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job7-tab" data-toggle="pill" href="#v-pills-job7" role="tab" aria-controls="v-pills-job7" aria-selected="false" data-wipe="Creative Design Mind">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
<a class="nav-link p-2" id="v-pills-job8-tab" data-toggle="pill" href="#v-pills-job8" role="tab" aria-controls="v-pills-job8" aria-selected="false" data-wipe="Creative Design Mind">
<span class="font-weight-bold small tab-text">Creative Design Mind</span></a>
</div>
</div>
<div class="col-md-8">
<!-- Tabs content -->
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade shadow rounded bg-white show active p-5" id="v-pills-job1" role="tabpanel" aria-labelledby="v-pills-job1">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job2" role="tabpanel" aria-labelledby="v-pills-job2">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job3" role="tabpanel" aria-labelledby="v-pills-job3">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job4" role="tabpanel" aria-labelledby="v-pills-job4">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job5" role="tabpanel" aria-labelledby="v-pills-job5">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job6" role="tabpanel" aria-labelledby="v-pills-job6">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job7" role="tabpanel" aria-labelledby="v-pills-job7">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
<div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job8" role="tabpanel" aria-labelledby="v-pills-job8">
<h4 class="title-job">Creative Design Mind</h4>
<h5 class="title-date">May 2018 - Present</h5>
<ul class="title-desc">
<li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
<li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
<li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
</ul>
</div>
</div>
</div>
</div>
</div>