Skip to content

Instantly share code, notes, and snippets.

@santex

santex/epg-style.markdown

Created January 11, 2023 00:15
Show Gist options
  • Save santex/964f8efd82a32c5dcbb0547d7eae7749 to your computer and use it in GitHub Desktop.
Save santex/964f8efd82a32c5dcbb0547d7eae7749 to your computer and use it in GitHub Desktop.
Download ZIP
epg-style
Raw
index.html
<div class="epg-container">
<div class="col-md-12 filter-search-bar">
<div class="col-md-6 time-zone">TIME ZONE:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MT <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
</div>
<div class="col-md-6 genre-search">
<input />
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Genre <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<ul class="listings-grid">
<li class="listings-timebar">
<div class="listings-timebar-time">2/15/2016</div>
<div class="listings-timebar-time">10:00 AM</div>
<div class="listings-timebar-time">10:30 AM</div>
<div class="listings-timebar-time">11:00 AM</div>
<div class="listings-timebar-time">11:30 AM</div>
</li>
<li class="col-md-12 listings-channel-row">
<div class="listings-channel">
<img src="http://www.userlogos.org/files/logos/articed/espn_ba.png" />
</div>
<div class="listings-program" style="width: 40%;">
<div class="listings-program-title">ESPN News</div>
<div class="listings-details">
<span class="listings-details-first">S2, Ep7</span> | TV-MA | 60 min
</div>
</div>
<div class="listings-program" style="width: 40%;"><div class="listings-program-title">Chargers vs 49ers</div>
<div class="listings-details"><span class="listings-details-first">TV-MA</span> | 2 hrs</div>
</div>
</li>
<li class="col-md-12 listings-channel-row">
<div class="listings-channel">ESPN 2</div>
<div class="listings-program" style="width: 20%;">
<div class="listings-program-title">SportsCenter</div>
<div class="listings-details">
<span class="listings-details-first">S2, Ep7</span> | TV-MA | 30 min
</div>
</div>
<div class="listings-program" style="width: 60%;"><div class="listings-program-title">Chargers vs 49ers</div>
<div class="listings-details"><span class="listings-details-first">TV-MA</span> | 2 hrs</div>
</div>
</li>
<li class="col-md-12 listings-channel-row">
<div class="listings-channel">ESPN</div>
<div class="listings-program" style="width: 40%;">
<div class="listings-program-title">ESPN News</div>
<div class="listings-details">
<span class="listings-details-first">S2, Ep7</span> | TV-MA | 60 min
</div>
</div>
<div class="listings-program" style="width: 40%;"><div class="listings-program-title">Chargers vs 49ers</div>
<div class="listings-details"><span class="listings-details-first">TV-MA</span> | 2 hrs</div>
</div>
</li>
<li class="col-md-12 listings-channel-row">
<div class="listings-channel">ESPN</div>
<div class="listings-program" style="width: 40%;">
<div class="listings-program-title">ESPN News</div>
<div class="listings-details">
<span class="listings-details-first">S2, Ep7</span> | TV-MA | 60 min
</div>
</div>
<div class="listings-program" style="width: 40%;"><div class="listings-program-title">Chargers vs 49ers</div>
<div class="listings-details"><span class="listings-details-first">TV-MA</span> | 2 hrs</div>
</div>
</li>
<li class="col-md-12 listings-channel-row">
<div class="listings-channel">ESPN</div>
<div class="listings-program" style="width: 40%;">
<div class="listings-program-title">ESPN News</div>
<div class="listings-details">
<span class="listings-details-first">S2, Ep7</span> | TV-MA | 60 min
</div>
</div>
<div class="listings-program" style="width: 40%;"><div class="listings-program-title">Red Sox vs Yankees</div>
<div class="listings-details"><span class="listings-details-first">TV-MA</span> | 3 hrs</div>
</div>
</li>
<li class="col-md-12 listings-channel-row">
<div class="listings-channel">ESPN</div>
<div class="listings-program" style="width: 40%;">
<div class="listings-program-title">ESPN News</div>
<div class="listings-details">
<span class="listings-details-first">S2, Ep7</span> | TV-MA | 60 min
</div>
</div>
<div class="listings-program" style="width: 40%;"><div class="listings-program-title">Chargers vs 49ers</div>
<div class="listings-details"><span class="listings-details-first">TV-MA</span> | 2 hrs</div>
</div>
</li>
<li class="col-md-12 listings-channel-row">
<div class="listings-channel">ESPN</div>
<div class="listings-program" style="width: 40%;">
<div class="listings-program-title">ESPN News</div>
<div class="listings-details">
<span class="listings-details-first">S2, Ep7</span> | TV-MA | 60 min
</div>
</div>
<div class="listings-program" style="width: 40%;"><div class="listings-program-title">Chargers vs 49ers</div>
<div class="listings-details"><span class="listings-details-first">TV-MA</span> | 2 hrs</div>
</div>
</li>
</ul>
<button class="glyphicon glyphicon-chevron-right right-arrow"> </button>
</div>
Raw
style.scss
.epg-container {
position: relative;
width: 1500px;
overflow: hidden;
display: block;
margin: 0 auto;
background-color: black;
.right-arrow {
position: absolute;
right: 10px;
top: 50%;
}
.glyphicon-chevron-right {
height: 100px;
}
.filter-search-bar {
height: 60px;
color: white;
background-color: rgb(24, 24, 24);
font-size: 20px;
.dropdown-menu {
background-color: black;
border: 2px solid white;
left: 50%;
right: auto;
text-align: center;
transform: translate(-50%, 0);
li a {
font-size: 20px;
color: white;
&:hover {
color: rgb(250, 150, 9);
background-color: black;
}
}
}
.dropdown-toggle {
background-color: black;
border: 2px solid white;
border-radius: 20px;
color: rgb(250, 150, 9);
&:hover {
background-color: black;
}
}
.btn-default .caret {
border-top: 4px solid;
}
.btn-group.open .dropdown-toggle {
background-color: black;
}
.time-zone {
padding-left: 20%;
}
.genre-search {
position: relative;
input {
background-color: black;
color: white;
width: 90%;
border: 2px solid white;
border-radius: 20px;
position: relative;
padding: 0 0 0 12%;
height: 36px;
&:focus {
outline: none;
border-color: rgb(250, 150, 9);
}
}
.dropdown-toggle {
color: white;
background-color: rgb(0, 174, 237);
}
.btn-group {
position: absolute;
display: block;
top: 0;
}
}
}
ul.listings-grid {
list-style-type: none;
padding: 0;
margin: 0;
white-space:nowrap;
background-color: rgb(38, 38, 38);
li {
font-size: 25px;
}
.listings-timebar {
height: 50px;
color: white;
}
.listings-channel-row {
height: auto;
padding: 0;
border-bottom: solid;
border-bottom-width: 6px;
border-color: rgb(38, 38, 38);
overflow: hidden;
}
.listings-timebar-time {
width: 20%;
vertical-align: middle;
float: left;
}
.listings-channel {
/* color not necesary */
color: white;
width: 20%;
height: 83px;
float: left;
text-align: center;
img {
max-width:100%;
max-height:100%;
}
}
.listings-program {
color: rgb(152, 152, 152);
border-right: solid;
border-right-width: 3px;
border-left: solid;
border-left-width: 3px;
border-color: rgb(38, 38, 38);
float: left;
padding: 10px 10px;
background-color: black;
}
.listings-details {
font-size: 20px;
float: left;
}
.listings-details-first {
color: rgb(250, 150, 9);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment