Code Snippets | Estrella Design | Your Source for Wordpress, Coppermine, Twitter and Facebook Graphics

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>

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: inherit;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: inherit;text-transform: uppercase;display: inline-block;padding: 5px 8px;border: 2px solid white;}
.tour_dates_completed {color: inherit;text-transform: uppercase;display: inline-block;padding: 5px 8px;border: 2px solid white;}
#tickets.tour_dates_cell span a {text-transform: uppercase;color: inherit;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;inherit:white;text-decoration:none !important;}

PHP Code:

JS Code:

Upcoming Event #3

HTML + CSS Code Preview:

Dec 07 2019

Info Source Tickets

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>

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: inherit;}
.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: inherit;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:inherit !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.

Official Site Trailer IMDb Photos Watch Purchase

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>

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: inherit !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: inherit;}
.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

More Buy Tickets Source

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>

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: inherit;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: inherit;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:inherit;}

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>

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: inherit !important;}
blockquote strong, blockquote b {color: inherit !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 + CSS Code Preview:

Home > Your Category #1 > Your Album Title Goes Here

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>

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;}

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>

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;}}

PHP Code:

JS Code:

Affiliate Sites #1

HTML + CSS Code Preview:


Your First Site Title Your Second Site Title Your Third Site Title Your Fourth Site Title
Apply For Affiliates

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>

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:inherit;}

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>

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: inherit;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>

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;}

PHP Code:

JS Code:

See All The Code Snippets