Introducing Wedding Day - HTML Theme

Licensing Terms: Please be advised, in order to use the theme in a legal manner, you need to purchase a separate license for each domain you are going to use the theme on.

A single license is limited to a single domain/application.

Thank you for purchasing our product! We are very glad that you have decided on our HTML theme.

The theme is very easy to use and we are here to guide and help you, so please read and follow the instructions and if you have further questions write us a email hi@theslathemes.com. This documentation is more of a reference work if you do not know what to do and need a better understanding on how the template is built write us a email.

Modification

To the Top

Wedding Day has 8 HTML Files:

  • index.html - Home Page
  • album.html - Album page with awesome filter
  • blog.html - Blog page with right sidebar
  • blog_post.html - Blog post
  • place.html - Date and place page
  • rsvp.html - RSVP page
  • story.html - Love story page
  • wedding.html - Wedding day with countdown page

A screen of the Home Page:

theme

The themes includes 4 javascripts:

CSS Files and Structure

To the Top

This theme has been implemented as a responsive layout. The full width of the template is fluid for screen mode, 768px for tablet size screen, and for mobile 400px and the smallest one is 300px.

The CSS file is located in the css folder. The css file is registered and included in the "head"..."/head".

CSS file is very good structured and arranged so you can search very easy:

/*========== Photo album ==========*/
.filter-album {
  margin: 3em 0 1.5em;
}
.filter-album > ul {
  *zoom: 1;
  display: table;
  margin: 0 auto;
}
.filter-album > ul:before,
.filter-album > ul:after {
  display: table;
  content: "";
  line-height: 0;
}
.filter-album > ul:after {
  clear: both;
}
.filter-album > ul > li {
  float: left;
  margin: 0 0.75em;
}
.filter-album > ul > li > label {
  padding: 0;
}
.filter-album > ul > li > label > input[type=checkbox] {
  display: none;
}
.filter-album > ul > li > label > input[type=checkbox]:checked + b {
  background-color: #b776a8;
  color: #ffffff;
}
.filter-album > ul > li > label > b {
  background-color: #e5e5e5;
  padding: 1.5em;
  display: inline-block;
  text-transform: uppercase;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.filter-album > ul > li > label > b:hover {
  background-color: #dab9d2;
  color: #ffffff;
}
.photo-album {
  margin-top: 1.5em;
}
.photo-album ul {
  *zoom: 1;
}
.photo-album ul:before,
.photo-album ul:after {
  display: table;
  content: "";
  line-height: 0;
}
.photo-album ul:after {
  clear: both;
}
.photo-album ul > li {
  float: left;
  width: 20%;
  height: auto;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.photo-album ul > li > figure {
  position: relative;
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
}
.photo-album ul > li > figure > a:hover + figcaption {
  top: 0;
}
.photo-album ul > li > figure > a:hover + figcaption > .link-image {
  left: 50%;
}
.photo-album ul > li > figure > a:hover + figcaption > .zoom-image {
  right: 50%;
}
.photo-album ul > li > figure > figcaption {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: -300%;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}
.photo-album ul > li > figure > figcaption:hover {
  top: 0;
}
.photo-album ul > li > figure > figcaption:hover > .link-image {
  left: 50%;
}
.photo-album ul > li > figure > figcaption:hover > .zoom-image {
  right: 50%;
}
.photo-album ul > li > figure > figcaption > h4 {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-top: 3em;
}
.photo-album ul > li > figure > figcaption > a {
  position: absolute;
  top: 50%;
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
  width: 21px;
  height: 21px;
  display: inline-block;
  -webkit-transition: all 0 ease-out;
  -moz-transition: all 0 ease-out;
  -o-transition: all 0 ease-out;
  transition: all 0 ease-out;
}
.photo-album ul > li > figure > figcaption .link-image {
  background: url(../img/photo-helpers.png) -45px 0 no-repeat transparent;
  left: -50%;
  margin-left: -30px;
  -webkit-transition: left 0.8s ease-out;
  -moz-transition: left 0.8s ease-out;
  -o-transition: left 0.8s ease-out;
  transition: left 0.8s ease-out;
}
.photo-album ul > li > figure > figcaption .link-image:hover {
  background: url(../img/photo-helpers.png) -45px -21px no-repeat transparent;
}
.photo-album ul > li > figure > figcaption .zoom-image {
  background: url(../img/photo-helpers.png) -22px 0 no-repeat transparent;
  right: -50%;
  margin-right: -30px;
  -webkit-transition: right 0.8s ease-out;
  -moz-transition: right 0.8s ease-out;
  -o-transition: right 0.8s ease-out;
  transition: right 0.8s ease-out;
}
.photo-album ul > li > figure > figcaption .zoom-image:hover {
  background: url(../img/photo-helpers.png) -22px -21px no-repeat transparent;
}
.pagination {
  *zoom: 1;
  margin: 1.5em 0;
}
.pagination:before,
.pagination:after {
  display: table;
  content: "";
  line-height: 0;
}
.pagination:after {
  clear: both;
}
.pagination > li {
  float: left;
}
.pagination > li > a {
  width: 3em;
  height: 3em;
  display: block;
  text-align: center;
  line-height: 3em;
  background-color: #c4c4c4;
  margin: 0 7px;
  color: #ffffff;
}
.pagination > li > a:hover {
  background-color: #b776a8;
}
.pagination .left-arrow > a,
.pagination .right-arrow > a {
  font-size: 3em;
  width: 1em;
  height: 1em;
  line-height: 0.95em;
  font-family: fixedsys, consolas, monospace;
  background-color: #e5e5e5;
}
.active-pagination > a {
  background: #b776a8 !important;
}
.show-item {
  -webkit-transform: scale(1.000001);
  -moz-transform: scale(1.000001);
  -ms-transform: scale(1.000001);
  -o-transform: scale(1.000001);
  transform: scale(1.000001);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hide-item {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
/*========== Wedding page ==========*/
.cowntdown {
  margin: 3em 0 6em;
}
.cowntdown > li {
  background: url(../img/countdown-decor.png) 95% 90% no-repeat #b776a8;
  -webkit-background-size: 30%;
  -moz-background-size: 30%;
  background-size: 30%;
  padding: 1.5em 0;
  text-align: center;
  position: relative;
}
.cowntdown > li:last-child:after {
  background: none;
  width: 0;
  height: 0;
}
.cowntdown > li:after {
  content: '';
  background: url(../img/hearts.png) center center no-repeat;
  width: 36px;
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -60%;
}
.cowntdown > li > b {
  display: block;
  font-size: 3em;
  color: #ffffff;
  line-height: 1em;
}
.cowntdown > li > span {
  text-transform: uppercase;
  display: block;
}
.wedding-hints {
  background: #f5f5f5;
  display: table;
  margin: 3em 0;
}
.wedding-hints > div {
  float: none !important;
  display: table-cell !important;
  vertical-align: top;
}
.dark-section {
  background: #3f3f3f;
  padding: 3%;
  margin: 0 !important;
  width: auto !important;
}
.slider-content-people {
  overflow: hidden;
}
.slider-people {
  *zoom: 1;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.slider-people:before,
.slider-people:after {
  display: table;
  content: "";
  line-height: 0;
}
.slider-people:after {
  clear: both;
}
.slider-people > li {
  float: left;
  width: 50%;
}
.slider-people > li > figure {
  margin: 0;
}
.slider-people > li > figure > a {
  display: block;
  background: #3f3f3f;
}
.slider-people > li > figure > a > img {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.slider-people > li > figure > a:hover > img {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.nav-slider-people {
  *zoom: 1;
  margin: 0;
}
.nav-slider-people:before,
.nav-slider-people:after {
  display: table;
  content: "";
  line-height: 0;
}
.nav-slider-people:after {
  clear: both;
}
.nav-slider-people > li {
  float: left;
  margin-right: 7px;
}
.nav-slider-people > li > a {
  background: #000000;
  width: 21px;
  height: 21px;
  display: block;
  color: #c4c4c4;
  font-size: 1.5em;
  line-height: 1em;
  text-align: center;
  font-family: fixedsys, consolas, monospace;
}
.nav-slider-people > li > a:hover {
  color: #ffffff;
  background: #272727;
}
.round-image {
  background: #e5e5e5;
  margin: 0 !important;
  position: relative;
}
.round-image > h2 {
  text-align: center;
  margin: 1.5em 0;
  padding-left: 3em;
}
.round-image > figure {
  padding: 0 1.5em 0 6em;
}
.round-image > figure > a {
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: block;
}
.round-image > figure > a:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
.round-image > figure > a:hover:after {
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.5);
}
.round-image > figure > figcaption {
  background-color: #d8d8d8;
  position: absolute;
  width: 4.5em;
  top: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.round-image > figure > figcaption > span {
  font-family: fixedsys, consolas, monospace;
  font-weight: 900;
  width: 0.5em;
  display: block;
  word-break: break-all;
  white-space: pre-wrap;
  text-align: center;
  margin: 1.5em auto 0;
  line-height: 1em;
}
.round-image > figure > figcaption > b {
  background: #000000;
  color: #ffffff;
  display: block;
  font-size: 2em;
  line-height: 2.5em;
  padding-bottom: 0.5em;
  text-align: center;
  text-shadow: 0px 1px 1px #ffffff, 0px 1px 1px #ffffff, 0px 1px 1px #ffffff, 0px 1px 1px #ffffff, 0px 1px 1px #ffffff, 0px 1px 1px #ffffff, 0px 1px 1px #ffffff, 0px 1px 1px #ffffff;
}
                    

Credits and Sources

To the Top

I've used the following images, icons, fonts or other files as listed.

Fonts used:

Thank you so much for choosing "Wedding Day" we hope you will enjoy using it!