Many webmasters love using beautiful codes for their sites and make them different. But if you are a beginner and just learn to work with HTML and CSS coding, you do not know what to do to make your site and posts look beautiful. For this case, I made some simple codes, which you may use on your site absolutely for free. You need only to copy any code you want and change it by adding some content. I will be using mainfully HTML codes (foundation) + CSS codes (styling). Maybe, some of the codes will consist PHP coding. If you are non-experiened in coding, you can change nothing and just copy/paste tags you need. But if you have some knownledge, you can customize my codes in any way you want.
Tour Date #1
HTML + CSS Code Preview:
Jan 01 2020 | Tour Place Tour City | Buy Tickets |
Jan 01 2020 | Tour Place Tour City | Finished Show |
Jan 01 2020 | Tour Place Tour City | Soldout Show |
HTML Code:
<div class="tour_dates_all">
<div class="tour_dates_block">
<table class="tour_dates_table">
<tr>
<td class="tour_dates_cell" id="date" width="15%">
<span>Jan</span>
<span>01</span>
<span>2020</span>
</td>
<td class="tour_dates_cell" id="place_city" width="auto">
<span class="tour_dates_place">Tour Place</span>
<span class="tour_dates_city">Tour City</span>
</td>
<td class="tour_dates_cell" id="tickets" width="80">
<span><a href="#" title="">Buy Tickets</a></span>
</td>
</tr>
</table>
</div>
<div class="tour_dates_block completed">
<table class="tour_dates_table">
<tr>
<td class="tour_dates_cell" id="date" width="15%">
<span>Jan</span>
<span>01</span>
<span>2020</span>
</td>
<td class="tour_dates_cell" id="place_city" width="auto">
<span class="tour_dates_place">Tour Place</span>
<span class="tour_dates_city">Tour City</span>
</td>
<td class="tour_dates_cell" id="tickets" width="80">
<span class="tour_dates_completed">Finished Show</span>
</td>
</tr>
</table>
</div>
<div class="tour_dates_block soldout">
<table class="tour_dates_table">
<tr>
<td class="tour_dates_cell" id="date" width="15%">
<span>Jan</span>
<span>01</span>
<span>2020</span>
</td>
<td class="tour_dates_cell" id="place_city" width="auto">
<span class="tour_dates_place">Tour Place</span>
<span class="tour_dates_city">Tour City</span>
</td>
<td class="tour_dates_cell" id="tickets" width="80">
<span class="tour_dates_soldout">Soldout Show</span>
</td>
</tr>
</table>
</div>
</div>
<div class="tour_dates_block">
<table class="tour_dates_table">
<tr>
<td class="tour_dates_cell" id="date" width="15%">
<span>Jan</span>
<span>01</span>
<span>2020</span>
</td>
<td class="tour_dates_cell" id="place_city" width="auto">
<span class="tour_dates_place">Tour Place</span>
<span class="tour_dates_city">Tour City</span>
</td>
<td class="tour_dates_cell" id="tickets" width="80">
<span><a href="#" title="">Buy Tickets</a></span>
</td>
</tr>
</table>
</div>
<div class="tour_dates_block completed">
<table class="tour_dates_table">
<tr>
<td class="tour_dates_cell" id="date" width="15%">
<span>Jan</span>
<span>01</span>
<span>2020</span>
</td>
<td class="tour_dates_cell" id="place_city" width="auto">
<span class="tour_dates_place">Tour Place</span>
<span class="tour_dates_city">Tour City</span>
</td>
<td class="tour_dates_cell" id="tickets" width="80">
<span class="tour_dates_completed">Finished Show</span>
</td>
</tr>
</table>
</div>
<div class="tour_dates_block soldout">
<table class="tour_dates_table">
<tr>
<td class="tour_dates_cell" id="date" width="15%">
<span>Jan</span>
<span>01</span>
<span>2020</span>
</td>
<td class="tour_dates_cell" id="place_city" width="auto">
<span class="tour_dates_place">Tour Place</span>
<span class="tour_dates_city">Tour City</span>
</td>
<td class="tour_dates_cell" id="tickets" width="80">
<span class="tour_dates_soldout">Soldout Show</span>
</td>
</tr>
</table>
</div>
</div>
CSS Code:
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .tour_dates_all {color: white;padding: 10px 0 10px 0;}
.tour_dates_table {width:100%;border:none;border-spacing:0px;}
.tour_dates_block {position:relative;display:block;line-height: normal;padding: 10px 0px;margin: 20px 10px 0px 10px;text-transform: uppercase;letter-spacing: 1px;border-top: 2px solid white;border-bottom: 2px solid white;}
.tour_dates_block:nth-child(1) {margin-top:0px;}
.tour_dates_block * {text-decoration:none;-webkit-box-sizing: content-box !important;-moz-box-sizing: content-box !important;box-sizing: content-box !important;}
.tour_dates_block a {text-decoration:none !important;}
#date.tour_dates_cell {font-size: 11px;text-align: center;vertical-align: middle;padding: 0px 0px;font-weight: bold;}
#place_city.tour_dates_cell {padding-left:10px;padding-right:10px;}
#place_city.tour_dates_cell span {display:block;word-break: break-word;}
.tour_dates_place {font-size: 16px;margin-bottom: 3px;font-weight: bold;}
.tour_dates_city {font-size:11px;}
#tickets.tour_dates_cell {font-size: 11px;text-align: center;}
.tour_dates_soldout {color: white;text-transform: uppercase;display: inline-block;padding: 5px 8px;border: 2px solid white;}
.tour_dates_completed {color: white;text-transform: uppercase;display: inline-block;padding: 5px 8px;border: 2px solid white;}
#tickets.tour_dates_cell span a {text-transform: uppercase;color: white;display: inline-block;padding: 5px 8px;border: 2px solid white;font-weight:bold !important;text-decoration:none !important;}
#tickets.tour_dates_cell span a:hover {background:black;color:white;text-decoration:none !important;}
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .tour_dates_all {color: white;padding: 10px 0 10px 0;}
.tour_dates_table {width:100%;border:none;border-spacing:0px;}
.tour_dates_block {position:relative;display:block;line-height: normal;padding: 10px 0px;margin: 20px 10px 0px 10px;text-transform: uppercase;letter-spacing: 1px;border-top: 2px solid white;border-bottom: 2px solid white;}
.tour_dates_block:nth-child(1) {margin-top:0px;}
.tour_dates_block * {text-decoration:none;-webkit-box-sizing: content-box !important;-moz-box-sizing: content-box !important;box-sizing: content-box !important;}
.tour_dates_block a {text-decoration:none !important;}
#date.tour_dates_cell {font-size: 11px;text-align: center;vertical-align: middle;padding: 0px 0px;font-weight: bold;}
#place_city.tour_dates_cell {padding-left:10px;padding-right:10px;}
#place_city.tour_dates_cell span {display:block;word-break: break-word;}
.tour_dates_place {font-size: 16px;margin-bottom: 3px;font-weight: bold;}
.tour_dates_city {font-size:11px;}
#tickets.tour_dates_cell {font-size: 11px;text-align: center;}
.tour_dates_soldout {color: white;text-transform: uppercase;display: inline-block;padding: 5px 8px;border: 2px solid white;}
.tour_dates_completed {color: white;text-transform: uppercase;display: inline-block;padding: 5px 8px;border: 2px solid white;}
#tickets.tour_dates_cell span a {text-transform: uppercase;color: white;display: inline-block;padding: 5px 8px;border: 2px solid white;font-weight:bold !important;text-decoration:none !important;}
#tickets.tour_dates_cell span a:hover {background:black;color:white;text-decoration:none !important;}
PHP Code:
JS Code:
Upcoming Event #3
HTML + CSS Code Preview:

My First Upcoming Event
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
HTML Code:
<div class="upcoming_events_block">
<div class="upcoming_events_table">
<div class="upcoming_events_inside">
<div class="upcoming_events_thumbnail">
<img width="380" height="185" src="https://estrelladesign.tk/plugins/wp-content/uploads/2019/10/WV_06-380x185.jpg">
</div>
</div>
<div class="upcoming_events_inside">
<div class="upcoming_events_inside_table">
<div class="upcoming_events_inside_tab_row">
<div class="upcoming_events_date">
<div id="zero">
<span id="one">Dec</span>
<span id="two">07</span>
<span id="three">2019</span>
</div>
<div class="upcoming_events_links">
<a href="https://example.com/" target="_black">Info</a>
<a href="https://example.com/" target="_black">Source</a>
<a href="https://example.com/" target="_black">Tickets</a>
</div>
</div>
<div class="upcoming_events_title">
<span>My First Upcoming Event</span>
<div class="upcoming_events_desc">
<span class="upcoming_events_desc_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="upcoming_events_table">
<div class="upcoming_events_inside">
<div class="upcoming_events_thumbnail">
<img width="380" height="185" src="https://estrelladesign.tk/plugins/wp-content/uploads/2019/10/WV_06-380x185.jpg">
</div>
</div>
<div class="upcoming_events_inside">
<div class="upcoming_events_inside_table">
<div class="upcoming_events_inside_tab_row">
<div class="upcoming_events_date">
<div id="zero">
<span id="one">Dec</span>
<span id="two">07</span>
<span id="three">2019</span>
</div>
<div class="upcoming_events_links">
<a href="https://example.com/" target="_black">Info</a>
<a href="https://example.com/" target="_black">Source</a>
<a href="https://example.com/" target="_black">Tickets</a>
</div>
</div>
<div class="upcoming_events_title">
<span>My First Upcoming Event</span>
<div class="upcoming_events_desc">
<span class="upcoming_events_desc_span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS Code:
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .upcoming_events_block {display:block;font-size: 11px;font-family: Open Sans, Lato;line-height: normal;margin: 20px 0px;}
.upcoming_events_block * {text-decoration:none;-webkit-box-sizing: content-box !important;-moz-box-sizing: content-box !important;box-sizing: content-box !important;}
.upcoming_events_table {display: block;width:100%;overflow: hidden;}
.upcoming_events_inside {display: block;}
.upcoming_events_thumbnail {display:block;height: auto;overflow:hidden;position: relative;background:black;}
.upcoming_events_thumbnail:after {content:'';position:absolute;width:100%;height:100%;top:0;left:0;background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));background: -webkit-linear-gradient(rgba(0, 0, 0, .0), rgb(0, 0, 0, 1));background: -o-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));background: -moz-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));background: -ms-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));}
.upcoming_events_thumbnail img {display: block;width:100%;height: auto;max-width: 100%;outline: none !important;border: none !important;margin: 0 !important;padding: 0 !important;}
.upcoming_events_inside_table {display:table;width: 100%;padding-top: 10px;background: black;color: white;}
.upcoming_events_inside_tab_row {display:table-row;}
.upcoming_events_date {display:table-cell;vertical-align: top;width: 13%;padding: 0 5px;}
.upcoming_events_date #zero {display: block;width: auto;color: white;text-transform: uppercase;letter-spacing: 1px;font-family: Lato, Open Sans;font-size: 10px;margin-bottom: 10px;margin-left: 5px;margin-right: 5px;border-radius: 5px;overflow: hidden;}
.upcoming_events_date #one {display: block;text-align: center;font-size: 11px;font-weight:bold;padding: 5px 5px;background: whitesmoke;color: black;border-bottom: 3px solid lightgray;}
.upcoming_events_date #two {display:block;text-align:center;font-size: 30px;padding: 3px 7px;background: white;color: black;font-weight: bold;}
.upcoming_events_date #three {display:block;color: black;text-align: center;padding: 0px 5px 5px 5px;background: white;}
.upcoming_events_title {display:table-cell;font-family: Lato, Open Sans;vertical-align: top;width: auto;font-size: 16px;text-transform: uppercase;letter-spacing: 1px;padding: 0px 15px 0px 5px;font-weight: bold;}
.upcoming_events_title span {display:block;}
.upcoming_events_desc {display: block;padding: 15px 0px;font-size: 9px;text-transform: none;letter-spacing: 0px;font-weight: normal;font-family: Open Sans, Lato;}
.upcoming_events_desc_span {display:block;border: 1px solid white;padding: 10px;}
.upcoming_events_links {display: block;vertical-align: top;width: auto;text-align:center;color:black;padding: 0px 5px 0px 5px;}
.upcoming_events_links a {text-transform:uppercase;font-family: Lato, Open Sans;letter-spacing:1px;margin: 5px 0px;display: block;padding: 5px 10px;background: white;color: black;font-size: 9px;font-weight:bold;text-decoration:none !important;}
.upcoming_events_links a:hover {background:black;color:white !important;outline:1px solid white;text-decoration:none !important;}
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .upcoming_events_block {display:block;font-size: 11px;font-family: Open Sans, Lato;line-height: normal;margin: 20px 0px;}
.upcoming_events_block * {text-decoration:none;-webkit-box-sizing: content-box !important;-moz-box-sizing: content-box !important;box-sizing: content-box !important;}
.upcoming_events_table {display: block;width:100%;overflow: hidden;}
.upcoming_events_inside {display: block;}
.upcoming_events_thumbnail {display:block;height: auto;overflow:hidden;position: relative;background:black;}
.upcoming_events_thumbnail:after {content:'';position:absolute;width:100%;height:100%;top:0;left:0;background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));background: -webkit-linear-gradient(rgba(0, 0, 0, .0), rgb(0, 0, 0, 1));background: -o-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));background: -moz-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));background: -ms-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));}
.upcoming_events_thumbnail img {display: block;width:100%;height: auto;max-width: 100%;outline: none !important;border: none !important;margin: 0 !important;padding: 0 !important;}
.upcoming_events_inside_table {display:table;width: 100%;padding-top: 10px;background: black;color: white;}
.upcoming_events_inside_tab_row {display:table-row;}
.upcoming_events_date {display:table-cell;vertical-align: top;width: 13%;padding: 0 5px;}
.upcoming_events_date #zero {display: block;width: auto;color: white;text-transform: uppercase;letter-spacing: 1px;font-family: Lato, Open Sans;font-size: 10px;margin-bottom: 10px;margin-left: 5px;margin-right: 5px;border-radius: 5px;overflow: hidden;}
.upcoming_events_date #one {display: block;text-align: center;font-size: 11px;font-weight:bold;padding: 5px 5px;background: whitesmoke;color: black;border-bottom: 3px solid lightgray;}
.upcoming_events_date #two {display:block;text-align:center;font-size: 30px;padding: 3px 7px;background: white;color: black;font-weight: bold;}
.upcoming_events_date #three {display:block;color: black;text-align: center;padding: 0px 5px 5px 5px;background: white;}
.upcoming_events_title {display:table-cell;font-family: Lato, Open Sans;vertical-align: top;width: auto;font-size: 16px;text-transform: uppercase;letter-spacing: 1px;padding: 0px 15px 0px 5px;font-weight: bold;}
.upcoming_events_title span {display:block;}
.upcoming_events_desc {display: block;padding: 15px 0px;font-size: 9px;text-transform: none;letter-spacing: 0px;font-weight: normal;font-family: Open Sans, Lato;}
.upcoming_events_desc_span {display:block;border: 1px solid white;padding: 10px;}
.upcoming_events_links {display: block;vertical-align: top;width: auto;text-align:center;color:black;padding: 0px 5px 0px 5px;}
.upcoming_events_links a {text-transform:uppercase;font-family: Lato, Open Sans;letter-spacing:1px;margin: 5px 0px;display: block;padding: 5px 10px;background: white;color: black;font-size: 9px;font-weight:bold;text-decoration:none !important;}
.upcoming_events_links a:hover {background:black;color:white !important;outline:1px solid white;text-decoration:none !important;}
PHP Code:
JS Code:
Current Project #2
HTML + CSS Code Preview:

My First Project
Genre:
Movie
Status:
Announced
Role:
Unknown
When:
December, 07 2019
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
HTML Code:
<div class="current_projects_block">
<div class="current_projects_block_table">
<div class="current_projects_block_row">
<div class="current_projects_image">
<div class="current_projects_image_inside">
<img width="380" height="185" src="https://estrelladesign.tk/plugins/wp-content/uploads/2019/10/WV_14-380x185.jpg">
</div>
</div>
<div class="current_projects_content">
<div class="current_projects_title">My First Project</div>
<div class="current_projects_info">
<div class="current_projects_info_block">
<span class="current_projects_info_one">Genre:</span>
<span class="current_projects_info_two">Movie</span>
</div>
<div class="current_projects_info_block">
<span class="current_projects_info_one">Status:</span>
<span class="current_projects_info_two">Announced</span>
</div>
<div class="current_projects_info_block">
<span class="current_projects_info_one">Role:</span>
<span class="current_projects_info_two">Unknown</span>
</div>
<div class="current_projects_info_block">
<span class="current_projects_info_one">When:</span>
<span class="current_projects_info_two">December, 07 2019</span>
</div></div><div class="current_projects_desc">
<div class="current_projects_desc_inside"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
<div class="current_projects_block_links">
<a class="current_projects_block_link" href="https://example.com" target="_blank" alt="Official Site" title="Official Site">Official Site</a>
<a class="current_projects_block_link" href="https://example.com" target="_blank" alt="Trailer" title="Trailer">Trailer</a>
<a class="current_projects_block_link" href="https://example.com" target="_blank" alt="IMDb" title="IMDb">IMDb</a>
<a class="current_projects_block_link" href="https://example.com" target="_blank" alt="Photos" title="Photos">Photos</a>
<a class="current_projects_block_link" href="https://example.com" target="_blank" alt="Watch" title="Watch">Watch</a>
<a class="current_projects_block_link" href="https://example.com" target="_blank" alt="Purchase" title="Purchase">Purchase</a>
</div>
</div>
</div>
</div>
</div>
<div class="current_projects_block_table">
<div class="current_projects_block_row">
<div class="current_projects_image">
<div class="current_projects_image_inside">
<img width="380" height="185" src="https://estrelladesign.tk/plugins/wp-content/uploads/2019/10/WV_14-380x185.jpg">
</div>
</div>
<div class="current_projects_content">
<div class="current_projects_title">My First Project</div>
<div class="current_projects_info">
<div class="current_projects_info_block">
<span class="current_projects_info_one">Genre:</span>
<span class="current_projects_info_two">Movie</span>
</div>
<div class="current_projects_info_block">
<span class="current_projects_info_one">Status:</span>
<span class="current_projects_info_two">Announced</span>
</div>
<div class="current_projects_info_block">
<span class="current_projects_info_one">Role:</span>
<span class="current_projects_info_two">Unknown</span>
</div>
<div class="current_projects_info_block">
<span class="current_projects_info_one">When:</span>
<span class="current_projects_info_two">December, 07 2019</span>
</div></div><div class="current_projects_desc">
<div class="current_projects_desc_inside"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
<div class="current_projects_block_links">
<a class="current_projects_block_link" href="https://example.com" target="_blank" alt="Official Site" title="Official Site">Official Site</a>
<a class="current_projects_block_link" href="https://example.com" target="_blank" alt="Trailer" title="Trailer">Trailer</a>
<a class="current_projects_block_link" href="https://example.com" target="_blank" alt="IMDb" title="IMDb">IMDb</a>
<a class="current_projects_block_link" href="https://example.com" target="_blank" alt="Photos" title="Photos">Photos</a>
<a class="current_projects_block_link" href="https://example.com" target="_blank" alt="Watch" title="Watch">Watch</a>
<a class="current_projects_block_link" href="https://example.com" target="_blank" alt="Purchase" title="Purchase">Purchase</a>
</div>
</div>
</div>
</div>
</div>
CSS Code:
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .current_projects_block {display:block;position:relative;margin: 20px 0px;padding: 0;font-size: 11px;font-family: Open Sans, Lato;line-height: normal;}
.current_projects_block:nth-child(1) {margin-top:0px;}
.current_projects_block * {-webkit-box-sizing: content-box !important;-moz-box-sizing: content-box !important;box-sizing: content-box !important;}
.current_projects_block_links {display: block;margin-top: 15px;font-size: 7px;text-align: center;overflow: hidden;width: 100%;z-index: 9;}
.current_projects_block_link {display: inline-block;text-transform: uppercase;letter-spacing: 1px;text-align:center;background: black !important;color: white !important;border-top: 1px solid white;border-bottom: 1px solid white;padding: 3px 0;margin: 5px 3px;transition: all .5s;-webkit-transition: all .5s;-o-transition: all .9s;-moz-transition: all .5s;text-decoration:none;}
.current_projects_block_link:hover {padding:0 0;text-decoration:none !important;}
.current_projects_block_link a {color:inherit;text-decoration:none !important;}
.current_projects_block_table {display: block;width:100%;}
.current_projects_block_row {display: block;width: 100%;}
.current_projects_image {display: block;padding: 0px;margin: 0px 0 0px 0;}
.current_projects_image_inside {display: block;height: auto;vertical-align: middle;background: black;padding: 0px;transition: all .5s;-webkit-transition: all .5s;-o-transition: all .9s;-moz-transition: all .5s;position: relative;overflow: hidden;}
.current_projects_image_inside:after {content:'';position:absolute;width:100%;height:100%;top:0;left:0;background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));background: -webkit-linear-gradient(rgba(0, 0, 0, .0), rgb(0, 0, 0, 1));background: -o-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));background: -moz-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));background: -ms-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));}
.current_projects_image_inside:hover {}
.current_projects_image img {display: block;width: 100%;height: auto;max-width: 100%;outline: none !important;border: none !important;margin: 0 !important;padding: 0 !important;}
.current_projects_content {display: block;vertical-align: top;padding: 15px;border-left: 1px solid black;border-right: 1px solid black;border-bottom: 1px solid black;background: black;color: white;}
.current_projects_title {font-size: 18px;text-align: left;text-transform:uppercase;letter-spacing:1px;margin-bottom: 10px;font-weight: bold;font-family: Lato;}
.current_projects_info {display:block;}
.current_projects_info_block {font-family: Lato, Open Sans;margin: 3px 0;font-size: 12px;}
.current_projects_info_one {isplay:inline-block;font-weight:bold;}
.current_projects_info_two {display:inline-block;}
.current_projects_desc {display:block;font-size: 10px;margin-top: 20px;}
.current_projects_desc_inside {display: block;width: 100%;}
.current_projects_desc_inside span {display:block;font-family: Open Sans, Lato;padding:10px 10px;background: black;border: 1px solid white;}
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .current_projects_block {display:block;position:relative;margin: 20px 0px;padding: 0;font-size: 11px;font-family: Open Sans, Lato;line-height: normal;}
.current_projects_block:nth-child(1) {margin-top:0px;}
.current_projects_block * {-webkit-box-sizing: content-box !important;-moz-box-sizing: content-box !important;box-sizing: content-box !important;}
.current_projects_block_links {display: block;margin-top: 15px;font-size: 7px;text-align: center;overflow: hidden;width: 100%;z-index: 9;}
.current_projects_block_link {display: inline-block;text-transform: uppercase;letter-spacing: 1px;text-align:center;background: black !important;color: white !important;border-top: 1px solid white;border-bottom: 1px solid white;padding: 3px 0;margin: 5px 3px;transition: all .5s;-webkit-transition: all .5s;-o-transition: all .9s;-moz-transition: all .5s;text-decoration:none;}
.current_projects_block_link:hover {padding:0 0;text-decoration:none !important;}
.current_projects_block_link a {color:inherit;text-decoration:none !important;}
.current_projects_block_table {display: block;width:100%;}
.current_projects_block_row {display: block;width: 100%;}
.current_projects_image {display: block;padding: 0px;margin: 0px 0 0px 0;}
.current_projects_image_inside {display: block;height: auto;vertical-align: middle;background: black;padding: 0px;transition: all .5s;-webkit-transition: all .5s;-o-transition: all .9s;-moz-transition: all .5s;position: relative;overflow: hidden;}
.current_projects_image_inside:after {content:'';position:absolute;width:100%;height:100%;top:0;left:0;background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));background: -webkit-linear-gradient(rgba(0, 0, 0, .0), rgb(0, 0, 0, 1));background: -o-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));background: -moz-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));background: -ms-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1));}
.current_projects_image_inside:hover {}
.current_projects_image img {display: block;width: 100%;height: auto;max-width: 100%;outline: none !important;border: none !important;margin: 0 !important;padding: 0 !important;}
.current_projects_content {display: block;vertical-align: top;padding: 15px;border-left: 1px solid black;border-right: 1px solid black;border-bottom: 1px solid black;background: black;color: white;}
.current_projects_title {font-size: 18px;text-align: left;text-transform:uppercase;letter-spacing:1px;margin-bottom: 10px;font-weight: bold;font-family: Lato;}
.current_projects_info {display:block;}
.current_projects_info_block {font-family: Lato, Open Sans;margin: 3px 0;font-size: 12px;}
.current_projects_info_one {isplay:inline-block;font-weight:bold;}
.current_projects_info_two {display:inline-block;}
.current_projects_desc {display:block;font-size: 10px;margin-top: 20px;}
.current_projects_desc_inside {display: block;width: 100%;}
.current_projects_desc_inside span {display:block;font-family: Open Sans, Lato;padding:10px 10px;background: black;border: 1px solid white;}
PHP Code:
JS Code:
Upcoming Event #2
HTML + CSS Code Preview:
Upcoming Project Title #1
31
Dec
HTML Code:
<div class="upcoming_event_block_2">
<div class="upcoming_event_line_2">
<div class="upcoming_event_info_2">
<div class="upcoming_event_title_2">Upcoming Project Title #1</div>
<div class="upcoming_event_links_2">
<a href="URL">More</a>
<a href="URL">Buy Tickets</a>
<a href="URL">Source</a>
</div>
</div>
<div class="upcoming_event_date_2">
<span class="upcoming_event_day_2">31</span>
<span class="upcoming_event_month_2">Dec</span>
</div>
</div>
</div>
<div class="upcoming_event_line_2">
<div class="upcoming_event_info_2">
<div class="upcoming_event_title_2">Upcoming Project Title #1</div>
<div class="upcoming_event_links_2">
<a href="URL">More</a>
<a href="URL">Buy Tickets</a>
<a href="URL">Source</a>
</div>
</div>
<div class="upcoming_event_date_2">
<span class="upcoming_event_day_2">31</span>
<span class="upcoming_event_month_2">Dec</span>
</div>
</div>
</div>
CSS Code:
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .upcoming_event_block_2 {display:block;margin: 10px 0px;}
.upcoming_event_block_2:first-child {margin-top:0px;}
.upcoming_event_block_2:last-child {margin-bottom:0px;}
.upcoming_event_line_2 {display: table;width: 100%;border-bottom: 5px solid hotpink;}
.upcoming_event_date_2 {display: table-cell;vertical-align: middle;text-align: center;width: 15%;background: hotpink;color: white;padding: 6px;}
.upcoming_event_day_2 {display:block;font-size: 20px;font-weight: bold;}
.upcoming_event_month_2 {display:block;font-size: 15px;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;}
.upcoming_event_year_2 {display:block;font-size: 15px;font-weight: bold;}
.upcoming_event_info_2 {display: table-cell;vertical-align: middle;width: auto;padding: 10px 10px;}
.upcoming_event_title_2 {display: inline-block;font-size: 20px;font-weight: bold;color: hotpink;}
.upcoming_event_links_2 {display:block;font-size: 11px;margin-top: 10px;}
.upcoming_event_links_2 a {display:inline-block;text-decoration:none;padding: 5px;background: hotpink;color: white;text-transform: uppercase;letter-spacing: 1px;font-size: 8px;margin: 0 2px;}
.upcoming_event_links_2 a:first-child {margin-left:0px;}
.upcoming_event_links_2 a:last-child {margin-right:0px;}
.upcoming_event_links_2 a:hover {text-decoration:none;background:black;color:white;}
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .upcoming_event_block_2 {display:block;margin: 10px 0px;}
.upcoming_event_block_2:first-child {margin-top:0px;}
.upcoming_event_block_2:last-child {margin-bottom:0px;}
.upcoming_event_line_2 {display: table;width: 100%;border-bottom: 5px solid hotpink;}
.upcoming_event_date_2 {display: table-cell;vertical-align: middle;text-align: center;width: 15%;background: hotpink;color: white;padding: 6px;}
.upcoming_event_day_2 {display:block;font-size: 20px;font-weight: bold;}
.upcoming_event_month_2 {display:block;font-size: 15px;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;}
.upcoming_event_year_2 {display:block;font-size: 15px;font-weight: bold;}
.upcoming_event_info_2 {display: table-cell;vertical-align: middle;width: auto;padding: 10px 10px;}
.upcoming_event_title_2 {display: inline-block;font-size: 20px;font-weight: bold;color: hotpink;}
.upcoming_event_links_2 {display:block;font-size: 11px;margin-top: 10px;}
.upcoming_event_links_2 a {display:inline-block;text-decoration:none;padding: 5px;background: hotpink;color: white;text-transform: uppercase;letter-spacing: 1px;font-size: 8px;margin: 0 2px;}
.upcoming_event_links_2 a:first-child {margin-left:0px;}
.upcoming_event_links_2 a:last-child {margin-right:0px;}
.upcoming_event_links_2 a:hover {text-decoration:none;background:black;color:white;}
PHP Code:
JS Code:
Blockquote #2
HTML + CSS Code Preview:
Estrella Design is a web design site that makes a graphic for fansites and social networks. All content and images belong to their owner. Any material seen on this website and is used, to the best of our knowledge, under the "Fair Use" copyright laws. If anything here belongs to you, and you want something to be removed, please contact us before taking any legal actions. All copyright goes to their respective ownersunless it is stated. Thank you very much for visiting.
Quote Author Source of the quote or occupation of the author
HTML Code:
<blockquote><strong>Estrella Design</strong> is a web design site that makes a graphic for fansites and social networks. All content and images belong to their owner. Any material seen on this <em>website</em> and is used, to the best of our knowledge, under the "<a href="#" target="_blank">Fair Use</a>" copyright laws. If anything here belongs to you, and you want something to be removed, please contact us before taking any legal actions. All copyright goes to their respective ownersunless it is stated. Thank you very much for visiting.
<br><br>
<div class="quote_someone_author_block_1">
<table width="100%">
<tbody><tr>
<td width="auto">
<span class="quote_someone_author1_1">Quote Author</span>
<span class="quote_someone_author2_1">Source of the quote or occupation of the author</span>
</td>
<td width="60">
<span class="quote_someone_image_1"></span>
</td>
</tr>
</tbody></table>
</div></blockquote>
<br><br>
<div class="quote_someone_author_block_1">
<table width="100%">
<tbody><tr>
<td width="auto">
<span class="quote_someone_author1_1">Quote Author</span>
<span class="quote_someone_author2_1">Source of the quote or occupation of the author</span>
</td>
<td width="60">
<span class="quote_someone_image_1"></span>
</td>
</tr>
</tbody></table>
</div></blockquote>
CSS Code:
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> blockquote {display:block;font-size: 13px;position: relative;border-left: 10px solid hotpink !important;border-top: 1px solid hotpink !important;border-right: 1px solid hotpink !important;border-bottom: 1px solid hotpink !important;padding: 20px 20px 20px 55px !important;margin:1em 5em !important;line-height: 1.5;color: white !important;}
blockquote strong, blockquote b {color: white !important;font-weight:bold !important;}
blockquote u, blockquote i, blockquote em {color: hotpink !important;}
blockquote a {color:hotpink !important;font-weight:bold !important;}
blockquote:before {content:"\201C";color:hotpink !important;position: absolute;top: 3%;left: 1%;display:block;text-align:left;font-family: Arial;font-size: 9em;line-height: 1;}
.quote_someone_author_block_1 {display:block;text-align: right;}
.quote_someone_author1_1 {display:block;text-align: right;font-size: 10px;font-weight: bold;}
.quote_someone_author2_1 {display:block;text-align: right;font-size: 9px;}
.quote_someone_image_1 {display:inline-block;background: hotpink !important;width: 50px;height: 50px;border-radius: 50%;}
.quote_someone_image_1 img {width:inherit;height:inherit;margin: 0;padding: 0;border: none;border-radius: 50%;}
@media screen and (max-width:1024px) {blockquote {margin:1em 0em;}}
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> blockquote {display:block;font-size: 13px;position: relative;border-left: 10px solid hotpink !important;border-top: 1px solid hotpink !important;border-right: 1px solid hotpink !important;border-bottom: 1px solid hotpink !important;padding: 20px 20px 20px 55px !important;margin:1em 5em !important;line-height: 1.5;color: white !important;}
blockquote strong, blockquote b {color: white !important;font-weight:bold !important;}
blockquote u, blockquote i, blockquote em {color: hotpink !important;}
blockquote a {color:hotpink !important;font-weight:bold !important;}
blockquote:before {content:"\201C";color:hotpink !important;position: absolute;top: 3%;left: 1%;display:block;text-align:left;font-family: Arial;font-size: 9em;line-height: 1;}
.quote_someone_author_block_1 {display:block;text-align: right;}
.quote_someone_author1_1 {display:block;text-align: right;font-size: 10px;font-weight: bold;}
.quote_someone_author2_1 {display:block;text-align: right;font-size: 9px;}
.quote_someone_image_1 {display:inline-block;background: hotpink !important;width: 50px;height: 50px;border-radius: 50%;}
.quote_someone_image_1 img {width:inherit;height:inherit;margin: 0;padding: 0;border: none;border-radius: 50%;}
@media screen and (max-width:1024px) {blockquote {margin:1em 0em;}}
PHP Code:
JS Code:
Gallery Images + Gallery Link #2
HTML Code:
<a href="URLTOALBUM">
<div class="gallery_links_2">
<table width="100%" border="0" cellpadding="10" cellspacing="10">
<tr>
<td width="25%">
<img src="https://estrelladesign.tk/cpg/albums/other_images/thumb_slide-5-image.jpg">
</td>
<td width="25%">
<img src="https://estrelladesign.tk/cpg/albums/other_images/thumb_010.jpg">
</td>
<td width="25%">
<img src="https://estrelladesign.tk/cpg/albums/other_images/thumb_ZiNvk7l.jpg">
</td>
<td width="25%">
<img src="https://estrelladesign.tk/cpg/albums/other_images/thumb_maxresdefault_28129.jpg">
</td>
</tr>
</table>
<div class="gallery_links_2_links">
<div class="gallery_links_2_link">
<span id="left">Home > Your Category #1 > <a href="URLTOALBUM">Your Album Title Goes Here</a></span>
</div>
</div>
</div>
</a>
<div class="gallery_links_2">
<table width="100%" border="0" cellpadding="10" cellspacing="10">
<tr>
<td width="25%">
<img src="https://estrelladesign.tk/cpg/albums/other_images/thumb_slide-5-image.jpg">
</td>
<td width="25%">
<img src="https://estrelladesign.tk/cpg/albums/other_images/thumb_010.jpg">
</td>
<td width="25%">
<img src="https://estrelladesign.tk/cpg/albums/other_images/thumb_ZiNvk7l.jpg">
</td>
<td width="25%">
<img src="https://estrelladesign.tk/cpg/albums/other_images/thumb_maxresdefault_28129.jpg">
</td>
</tr>
</table>
<div class="gallery_links_2_links">
<div class="gallery_links_2_link">
<span id="left">Home > Your Category #1 > <a href="URLTOALBUM">Your Album Title Goes Here</a></span>
</div>
</div>
</div>
</a>
CSS Code:
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .gallery_links_2 {display:block;}
.gallery_links_2 img {margin:0px;padding:5px;width:auto;border: 1px solid hotpink;border-radius: 0px;}
.gallery_links_2 img:hover {border: 1px solid hotpink;opacity:1;background:hotpink;}
.gallery_links_2_links {display:block;margin:10px 10px;}
.gallery_links_2_link {display:block;margin: 10px 0px;font-size: 13px;}
.gallery_links_2_link #left {display:inline-block;color:#ce2e7e;}
.gallery_links_2_link #left a {color:hotpink;text-decoration: none;font-weight:bold !important;}
.gallery_links_2_link #left a:hover {color:black;border-bottom:none;}
.gallery_links_2_link:last-child {margin-bottom:0px;}
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .gallery_links_2 {display:block;}
.gallery_links_2 img {margin:0px;padding:5px;width:auto;border: 1px solid hotpink;border-radius: 0px;}
.gallery_links_2 img:hover {border: 1px solid hotpink;opacity:1;background:hotpink;}
.gallery_links_2_links {display:block;margin:10px 10px;}
.gallery_links_2_link {display:block;margin: 10px 0px;font-size: 13px;}
.gallery_links_2_link #left {display:inline-block;color:#ce2e7e;}
.gallery_links_2_link #left a {color:hotpink;text-decoration: none;font-weight:bold !important;}
.gallery_links_2_link #left a:hover {color:black;border-bottom:none;}
.gallery_links_2_link:last-child {margin-bottom:0px;}
PHP Code:
JS Code:
Blockquote #1
HTML + CSS Code Preview:
Estrella Design is a web design site that makes a graphic for fansites and social networks. All content and images belong to their owner. Any material seen on this website and is used, to the best of our knowledge, under the "Fair Use" copyright laws. If anything here belongs to you, and you want something to be removed, please contact us before taking any legal actions. All copyright goes to their respective ownersunless it is stated. Thank you very much for visiting.
HTML Code:
<div class="blockquote_block">
<span><strong>Estrella Design</strong> is a web design site that makes a graphic for <em>fansites</em> and social networks. All <a href="#" target="_blank">content</a> and images <del>belong</del> to their owner. Any material seen on this website and is used, to the best of our knowledge, under the "Fair Use" copyright laws. If anything here belongs to you, and you want something to be removed, please contact us before taking any legal actions. All copyright goes to their respective ownersunless it is stated. Thank you very much for visiting.</span>
</div>
<span><strong>Estrella Design</strong> is a web design site that makes a graphic for <em>fansites</em> and social networks. All <a href="#" target="_blank">content</a> and images <del>belong</del> to their owner. Any material seen on this website and is used, to the best of our knowledge, under the "Fair Use" copyright laws. If anything here belongs to you, and you want something to be removed, please contact us before taking any legal actions. All copyright goes to their respective ownersunless it is stated. Thank you very much for visiting.</span>
</div>
CSS Code:
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .blockquote_block {display:block;position:relative;padding: 25px;margin: 3em 5em;border-top:1px solid lightgray;border-bottom:1px solid lightgray;font-size: 14px;line-height: normal;font-weight:lighter;}
.blockquote_block:before {content:"\201C";position: absolute;top: 0%;left: 50%;transform: translate(-50%, -70%);font-size: 100px;font-family: Arial;width: 70px;text-align: center;height: 50px;}
@media screen and (max-width:1024px) {.blockquote_block{margin:3em 0em;}}
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .blockquote_block {display:block;position:relative;padding: 25px;margin: 3em 5em;border-top:1px solid lightgray;border-bottom:1px solid lightgray;font-size: 14px;line-height: normal;font-weight:lighter;}
.blockquote_block:before {content:"\201C";position: absolute;top: 0%;left: 50%;transform: translate(-50%, -70%);font-size: 100px;font-family: Arial;width: 70px;text-align: center;height: 50px;}
@media screen and (max-width:1024px) {.blockquote_block{margin:3em 0em;}}
PHP Code:
JS Code:
Affiliate Sites #1
HTML + CSS Code Preview:
HTML Code:
<div class="affiliates_block">
<table width="100%" border="0" cellpadding="5" cellspacing="5">
<tr id="affiliates">
<td width="20%" id="affiliates"><a href="URLTOSITE"><img src="https://estrelladesign.tk/wp-content/uploads/2021/01/ed_twitter.jpg"></a></td>
<td width="20%" id="affiliates"><a href="URLTOSITE"><img src="https://estrelladesign.tk/wp-content/uploads/2021/01/ed_twitter.jpg"></a></td>
<td width="20%" id="affiliates"><a href="URLTOSITE"><img src="https://estrelladesign.tk/wp-content/uploads/2021/01/ed_twitter.jpg"></a></td>
<td width="20%" id="affiliates"><a href="URLTOSITE"><img src="https://estrelladesign.tk/wp-content/uploads/2021/01/ed_twitter.jpg"></a></td>
<td width="20%" id="affiliates"><a href="URLTOSITE"><img src="https://estrelladesign.tk/wp-content/uploads/2021/01/ed_twitter.jpg"></a></td>
</tr>
<tr>
<td colspan="5">
<div class="affiliates_links">
<a href="URLTOSITE">Your First Site Title</a>
<a href="URLTOSITE">Your Second Site Title</a>
<a href="URLTOSITE">Your Third Site Title</a>
<a href="URLTOSITE">Your Fourth Site Title</a>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<div class="affiliates_apply">
<a href="URLTOSITE">Apply For Affiliates</a>
</div>
</td>
</tr>
</table>
</div>
<table width="100%" border="0" cellpadding="5" cellspacing="5">
<tr id="affiliates">
<td width="20%" id="affiliates"><a href="URLTOSITE"><img src="https://estrelladesign.tk/wp-content/uploads/2021/01/ed_twitter.jpg"></a></td>
<td width="20%" id="affiliates"><a href="URLTOSITE"><img src="https://estrelladesign.tk/wp-content/uploads/2021/01/ed_twitter.jpg"></a></td>
<td width="20%" id="affiliates"><a href="URLTOSITE"><img src="https://estrelladesign.tk/wp-content/uploads/2021/01/ed_twitter.jpg"></a></td>
<td width="20%" id="affiliates"><a href="URLTOSITE"><img src="https://estrelladesign.tk/wp-content/uploads/2021/01/ed_twitter.jpg"></a></td>
<td width="20%" id="affiliates"><a href="URLTOSITE"><img src="https://estrelladesign.tk/wp-content/uploads/2021/01/ed_twitter.jpg"></a></td>
</tr>
<tr>
<td colspan="5">
<div class="affiliates_links">
<a href="URLTOSITE">Your First Site Title</a>
<a href="URLTOSITE">Your Second Site Title</a>
<a href="URLTOSITE">Your Third Site Title</a>
<a href="URLTOSITE">Your Fourth Site Title</a>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<div class="affiliates_apply">
<a href="URLTOSITE">Apply For Affiliates</a>
</div>
</td>
</tr>
</table>
</div>
CSS Code:
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .affiliates_block img {width:100%;margin:0px;border:3px solid lightgray;border-radius:0px;}
.affiliates_block img:hover {border: 3px solid black;}
.affiliates_links {display:block;}
.affiliates_apply {display:block;}
.affiliates_links a {display:block;text-decoration:none;margin: 5px 0;font-size: 11px;}
.affiliates_links a:before {content:"• ";}
.affiliates_links a:hover {text-decoration:none;color:black;}
.affiliates_apply a {display:block;text-decoration:none;padding: 10px;text-align: center;font-size: 14px;background: whitesmoke;text-transform: uppercase;letter-spacing: 1px;}
.affiliates_apply a:hover {text-decoration:none;background:black;color:white;}
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .affiliates_block img {width:100%;margin:0px;border:3px solid lightgray;border-radius:0px;}
.affiliates_block img:hover {border: 3px solid black;}
.affiliates_links {display:block;}
.affiliates_apply {display:block;}
.affiliates_links a {display:block;text-decoration:none;margin: 5px 0;font-size: 11px;}
.affiliates_links a:before {content:"• ";}
.affiliates_links a:hover {text-decoration:none;color:black;}
.affiliates_apply a {display:block;text-decoration:none;padding: 10px;text-align: center;font-size: 14px;background: whitesmoke;text-transform: uppercase;letter-spacing: 1px;}
.affiliates_apply a:hover {text-decoration:none;background:black;color:white;}
PHP Code:
JS Code:
Upcoming Event #1
HTML + CSS Code Preview:
31
Dec
2021
Upcoming Project Title #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
HTML Code:
<div class="upcoming_event_block_1">
<div class="upcoming_event_line_1">
<div class="upcoming_event_date_1">
<div class="upcoming_event_day_1">31</div>
<div class="upcoming_event_month_1">Dec</div>
<div class="upcoming_event_year_1">2021</div>
</div>
<div class="upcoming_event_info_1">
<div class="upcoming_event_title_1">Upcoming Project Title #1</div>
<div class="upcoming_event_desc_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div>
</div>
</div>
</div>
<div class="upcoming_event_line_1">
<div class="upcoming_event_date_1">
<div class="upcoming_event_day_1">31</div>
<div class="upcoming_event_month_1">Dec</div>
<div class="upcoming_event_year_1">2021</div>
</div>
<div class="upcoming_event_info_1">
<div class="upcoming_event_title_1">Upcoming Project Title #1</div>
<div class="upcoming_event_desc_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div>
</div>
</div>
</div>
CSS Code:
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .upcoming_event_block_1 {display:block;border:1px solid lightgray;padding:10px;margin: 10px 0px;}
.upcoming_event_block_1:first-child {margin-top:0px;}
.upcoming_event_block_1:last-child {margin-bottom:0px;}
.upcoming_event_line_1 {display: table;width: 100%;}
.upcoming_event_date_1 {display: table-cell;vertical-align: top;text-align: center;width: 15%;}
.upcoming_event_day_1 {display:block;font-size: 25px;background: black;color: white;padding: 5px;font-weight: bold;}
.upcoming_event_month_1 {display:block;font-size: 15px;background: whitesmoke;color: black;padding: 5px;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;}
.upcoming_event_year_1 {display:block;color: black;font-size: 11px;background: lightgray;padding: 5px;font-weight: bold;}
.upcoming_event_info_1 {display: table-cell;vertical-align: top;width: auto;padding: 0px 10px;}
.upcoming_event_title_1 {display: inline-block;font-size: 20px;padding-bottom: 2px;margin-bottom: 10px;font-weight: bold;border-bottom: 3px solid black;}
.upcoming_event_desc {display:block;font-size: 11px;}
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .upcoming_event_block_1 {display:block;border:1px solid lightgray;padding:10px;margin: 10px 0px;}
.upcoming_event_block_1:first-child {margin-top:0px;}
.upcoming_event_block_1:last-child {margin-bottom:0px;}
.upcoming_event_line_1 {display: table;width: 100%;}
.upcoming_event_date_1 {display: table-cell;vertical-align: top;text-align: center;width: 15%;}
.upcoming_event_day_1 {display:block;font-size: 25px;background: black;color: white;padding: 5px;font-weight: bold;}
.upcoming_event_month_1 {display:block;font-size: 15px;background: whitesmoke;color: black;padding: 5px;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;}
.upcoming_event_year_1 {display:block;color: black;font-size: 11px;background: lightgray;padding: 5px;font-weight: bold;}
.upcoming_event_info_1 {display: table-cell;vertical-align: top;width: auto;padding: 0px 10px;}
.upcoming_event_title_1 {display: inline-block;font-size: 20px;padding-bottom: 2px;margin-bottom: 10px;font-weight: bold;border-bottom: 3px solid black;}
.upcoming_event_desc {display:block;font-size: 11px;}
PHP Code:
JS Code:
Site Information #1
HTML + CSS Code Preview:
Site Name: Estrella Design Coding
Administrator: Maria
Opening: January, 1st 2021
Site Language: English
Mobile Version: Yes
Contact: EMAIL OR URL
HTML Code:
<div class="site_information_block">
<div class="site_information_line"><strong>Site Name:</strong> <span>Estrella Design Coding</span></div>
<div class="site_information_line"><strong>Administrator:</strong> <span>Maria</span></div>
<div class="site_information_line"><strong>Opening:</strong> <span>January, 1st 2021</span></div>
<div class="site_information_line"><strong>Site Language:</strong> <span>English</span></div>
<div class="site_information_line"><strong>Mobile Version:</strong> <span>Yes</span></div>
<div class="site_information_line"><strong>Contact:</strong> <span><a href="EMAILORURL">EMAIL OR URL</a></span></div>
</div>
<div class="site_information_line"><strong>Site Name:</strong> <span>Estrella Design Coding</span></div>
<div class="site_information_line"><strong>Administrator:</strong> <span>Maria</span></div>
<div class="site_information_line"><strong>Opening:</strong> <span>January, 1st 2021</span></div>
<div class="site_information_line"><strong>Site Language:</strong> <span>English</span></div>
<div class="site_information_line"><strong>Mobile Version:</strong> <span>Yes</span></div>
<div class="site_information_line"><strong>Contact:</strong> <span><a href="EMAILORURL">EMAIL OR URL</a></span></div>
</div>
CSS Code:
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .site_information_block {display:block;padding: 5px;border: 1px solid lightgray;}
.site_information_line {display:block;padding: 10px;font-size: 13px;background:whitesmoke;color:black;font-size:11px;}
.site_information_line:nth-child(even) {background:lightgray;color:black;}
.site_information_line strong {color:black;font-weight:bold !important;vertical-align:middle;text-transform: uppercase;letter-spacing: 1px;}
.site_information_line span {display:inline-block;vertical-align:middle;font-size: 12px;}
.site_information_line a {color:gray;text-decoration:none;text-transform:inherit;}
If you are not going to add this code to the file style.css, then you should include this code in these tags: <style></style> .site_information_block {display:block;padding: 5px;border: 1px solid lightgray;}
.site_information_line {display:block;padding: 10px;font-size: 13px;background:whitesmoke;color:black;font-size:11px;}
.site_information_line:nth-child(even) {background:lightgray;color:black;}
.site_information_line strong {color:black;font-weight:bold !important;vertical-align:middle;text-transform: uppercase;letter-spacing: 1px;}
.site_information_line span {display:inline-block;vertical-align:middle;font-size: 12px;}
.site_information_line a {color:gray;text-decoration:none;text-transform:inherit;}
PHP Code:
JS Code: