HTML
xxxxxxxxxx1
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />2
3
<div class="container-fluid pt-1 pb-1" style="background: #eeeeee">4
<div class="row">5
<div class="col">6
<h2 class="text-center h2-special-gray text-center" style="color: #444!important; font-family: 'Source Sans Pro',sans-serif; padding-top:15px;">Meetings unlike any other</h2>7
</div>8
</div>9
<div class="container-fluid pt-4 pb-5">10
<div class="row mx-lg-2 mx-sm-0">11
<div class="col-md-8 col-sm-12">12
<div class="card">13
<a href="my link here">14
<img class="card-img-top" src="https://place-hold.it/300x100/666/fff/000.gif" alt="Card image cap">15
</a>16
<ul class="nav nav-pills nav-fill navtop">17
<li class="nav-item px-sm-0">18
<a class="nav-link active" href="my link/">WELCOME</a>19
</li>20
</ul>21
<div class="card-body">22
<p class="card-text">23
<span class="lead">Here I am begin example</span> text text text text text text text text text text text text text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext24
text texttext text texttext text texttext text text25
</p>26
</div>27
</div>28
</div>29
<div class="col-md-4 col-sm-12">30
<div class="card">31
<div class="card-body" style="padding-left: 0!important; padding-right: 0!important; padding-top: 0!important;">32
<ul class="nav nav-pills nav-fill navtop">33
<li class="nav-item px-sm-0">34
<a class="nav-link active text-left" href="https://meetings.cshl.edu/">UPCOMING EVENTS</a>35
</li>36
</ul>37
38
<div class="">39
<ul class="list-group list-group-hover">40
41
<li class="list-group-item w-100">42
<a id="event1" class="lead" href="link">Specific Event Name</a>43
<br>44
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 201945
<span id="" class="text-muted"></span>46
<br>47
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 201948
</li>49
<li class="list-group-item w-100">50
<a id="event1" class="lead" href="link">Specific Event Name</a>51
<br>52
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 201953
<span id="" class="text-muted"></span>54
<br>55
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 201956
</li>57
<li class="list-group-item w-100">58
<a id="event1" class="lead" href="link">Specific Event Name</a>59
<br>60
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 201961
<span id="" class="text-muted"></span>62
<br>63
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 201964
</li>65
<li class="list-group-item w-100">66
<a id="event1" class="lead" href="link">Specific Event Name</a>67
<br>68
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 201969
<span id="" class="text-muted"></span>70
<br>71
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 201972
</li>73
<li class="list-group-item w-100">74
<a id="event1" class="lead" href="link">Specific Event Name</a>75
<br>76
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 201977
<span id="" class="text-muted"></span>78
<br>79
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 201980
</li>81
<li class="list-group-item w-100">82
<a id="event1" class="lead" href="link">Specific Event Name</a>83
<br>84
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 201985
<span id="" class="text-muted"></span>86
<br>87
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 201988
</li>89
<li class="list-group-item w-100">90
<a id="event1" class="lead" href="link">Specific Event Name</a>91
<br>92
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 201993
<span id="" class="text-muted"></span>94
<br>95
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 201996
</li>97
<li class="list-group-item w-100">98
<a id="event1" class="lead" href="link">Specific Event Name</a>99
<br>100
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019101
<span id="" class="text-muted"></span>102
<br>103
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019104
</li>105
<li class="list-group-item w-100">106
<a id="event1" class="lead" href="link">Specific Event Name</a>107
<br>108
<i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019109
<span id="" class="text-muted"></span>110
<br>111
<i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019112
</li>113
</ul>114
</div>115
116
<div class="sidebar_item">117
</div>118
</div>119
</div>120
</div>121
</div>122
</div>123
</div>124
CSS
xxxxxxxxxx1
.my-custom-scrollbar {2
position: relative;3
overflow: auto;4
height: 200px;5
}JS
1
1
Console errors: 0