LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Make The
Most Of Your
Exchange Year

Favoruite Journey

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, temporibus
nesciunt et autem culpa alias quos facere voluptate.

$5000
Some Place

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More
$5000
Some Place

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More
$5000
Some Place

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More
$5000
Some Place

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More
$5000
Some Place

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More
$5000
Some Place

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More

About Our Agency

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum earum, laborum ipsum labore eaque esse asperiores quasi id totam ipsam? Dolore beatae ullam sapiente mollitia libero rem, ipsa architecto provident! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ex dolor eveniet, nam numquam suscipit, culpa incidunt voluptates natus quia reprehenderit, atque animi harum. Unde aliquam natus nisi quas accusantium.

Learn More

"I Think Travel Is The Best
In The World"

Redwanul Haque

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore itaque provident adipisci ullam soluta dolorum error doloribus, ex, eligendi laboriosam, esse hic neque. Facere necessitatibus non, veritatis ea voluptas consequuntur.

CSS
html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

.clearfix:after, .Nav:after, .Footer__top:after {
  content: "";
  display: table;
  clear: both;
}

.container, .Hero, .Locations, .Testimonials, .Signup, .Footer {
  padding: 0 10%;
}

body {
  font-family: 'Montserrat', sans-serif;
}

.Nav {
  display: inline;
}
.Nav__menu {
  float: right;
  text-transform: uppercase;
}
.Nav__menu-item {
  display: inline;
  padding: 0 0 0 60px;
  font-weight: 600;
  font-size: 20px;
}
.Nav__menu-item a {
  text-decoration: none;
  color: white;
  text-shadow: 0px 5px 20px rgba(0, 0, 0, 0.7);
}

.Hero {
  background-image: url(https://owncloud.batalp.com/fyles/data/Ika/files/Photos/contest-images/hero.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 35px;
  padding-bottom: 15px;
  margin-bottom: 200px;
}
.Hero__header {
  margin-top: 130px;
  font-size: 70px;
  text-transform: uppercase;
  color: #f9fafc;
  letter-spacing: 5px;
  text-shadow: 0px 5px 20px rgba(0, 0, 0, 0.7);
}
.Hero__form {
  background-color: #f9fafc;
  z-index: 999;
  position: relative;
  top: 120px;
  box-shadow: 1px 10px 40px rgba(0, 0, 0, 0.2);
}
.Hero__form--country {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 31.76157%;
}
.Hero__form--country:last-child {
  margin-right: 0;
}
.Hero__form--country .Form__select-container, .Hero__form--country .Form__select {
  width: 100%;
}
.Hero__form--check-in {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 14.70196%;
}
.Hero__form--check-in:last-child {
  margin-right: 0;
}
.Hero__form--check-in .Form__input {
  width: 100%;
}
.Hero__form--submit {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 31.76157%;
}
.Hero__form--submit:last-child {
  margin-right: 0;
}
.Hero__form--submit .Form__label {
  color: transparent;
}
.Hero__form--submit .Form__button {
  width: 100%;
}
@media only screen and (max-width: 1300px) {
  .Hero__form .Form__label {
    font-size: 80%;
  }
}
@media only screen and (max-width: 1060px) {
  .Hero__form--country {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 46.26223%;
  }
  .Hero__form--country:last-child {
    margin-right: 0;
  }
  .Hero__form--check-in {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
  }
  .Hero__form--check-in:last-child {
    margin-right: 0;
  }
  .Hero__form--submit {
    display: block;
    width: 100%;
  }
}
@media only screen and (max-width: 780px) {
  .Hero__form .Form__label {
    font-size: 120%;
  }
  .Hero__form--country {
    display: block;
    width: 100%;
    margin-bottom: 25px;
  }
  .Hero__form--check-in {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .Hero__form--check-in:last-child {
    margin-right: 0;
  }
  .Hero__form--check-in--two {
    margin: 0;
  }
}
@media only screen and (max-width: 580px) {
  .Hero__form--check-in {
    display: block;
    width: 100%;
    margin-bottom: 25px;
  }
}

.Form {
  padding: 70px;
  display: block;
}
.Form::after {
  clear: both;
  content: "";
  display: block;
}
.Form__group {
  display: inline-block;
  display: block;
}
.Form__group::after {
  clear: both;
  content: "";
  display: block;
}
.Form__label {
  display: block;
  font-weight: 400;
  margin-bottom: 10px;
}
.Form__input {
  display: block;
  border: solid 1px rgba(0, 0, 0, 0.4);
  color: #7c7d7f;
  font-weight: 300;
  padding: 15px 25px;
  background-color: #f9fafc;
  font-size: 20px;
  margin-right: 15px;
}
.Form__select {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#555658' d='M2 5L0 3h4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 94% 9px;
  background-size: 20px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: solid 1px rgba(0, 0, 0, 0.4);
  color: #7c7d7f;
  font-weight: 300;
  padding: 15px 25px;
  background-color: #f9fafc;
  font-size: 20px;
  margin-right: 15px;
}
.Form__button {
  border: solid 1px rgba(0, 0, 0, 0.4);
  color: #7c7d7f;
  font-weight: 300;
  padding: 15px 25px;
  background-color: #f9fafc;
  font-size: 20px;
  margin-right: 15px;
  color: #f9fafc;
  background-color: #5c95e6;
  border-color: #5c95e6;
}

.Content .Heading {
  text-align: center;
  text-transform: uppercase;
}
.Content .Lead {
  text-align: center;
  margin-bottom: 40px;
}

.Heading {
  font-size: 70px;
  color: #555658;
}

.Lead {
  font-weight: 300;
  line-height: 25px;
  color: #7c7d7f;
}

.Locations {
  margin-bottom: 200px;
}
.Locations .row {
  display: block;
  margin-bottom: 50px;
}
.Locations .row::after {
  clear: both;
  content: "";
  display: block;
}

.Location {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 31.76157%;
}
.Location:last-child {
  margin-right: 0;
}
@media only screen and (max-width: 780px) {
  .Location {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 100%;
  }
  .Location:last-child {
    margin-right: 0;
  }
}
.Location__price {
  position: relative;
  width: 50%;
  font-weight: bold;
  padding: 6px 20px 6px 25px;
  width: 105px;
  top: 60px;
  left: -19px;
  color: #f9fafc;
  background-color: #5c95e6;
}
.Location__price:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 0px;
  top: 100%;
  border-width: 5px 10px;
  border-style: solid;
  border-color: #3078df #3078df transparent transparent;
}
.Location__title {
  background-color: rgba(0, 0, 0, 0.5);
  position: relative;
  top: -80px;
  padding: 20px;
  color: #f9fafc;
  margin-bottom: -80px;
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.Location__desc {
  text-align: center;
  font-weight: 300;
  color: #7c7d7f;
}
.Location__link {
  text-align: center;
  display: block;
  text-decoration: none;
  color: #5c95e6;
  text-transform: uppercase;
  font-size: 15px;
}
.Location__image img {
  width: 100%;
  height: auto;
}

.Bio {
  margin-bottom: 200px;
  display: block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.Bio::after {
  clear: both;
  content: "";
  display: block;
}
.Bio__block {
  position: relative;
  left: 10%;
  vertical-align: middle;
  background-color: #f9fafc;
  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.25);
  padding: 40px 50px;
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 48.82117%;
}
.Bio__block:last-child {
  margin-right: 0;
}
@media only screen and (max-width: 1000px) {
  .Bio__block {
    width: 100%;
    margin: auto 2.35765%;
    display: block;
    left: 0;
  }
}
.Bio__header {
  font-size: 35px;
  color: #555658;
  text-transform: uppercase;
  margin: 0 0 20px 0;
}
.Bio__body {
  color: #7c7d7f;
  font-weight: 300;
  line-height: 25px;
  margin: 0 0 45px 0;
  font-size: 14;
}
.Bio__link {
  text-decoration: none;
  color: #5c95e6;
  text-transform: uppercase;
  font-size: 15px;
}
.Bio__image {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 48.82117%;
}
.Bio__image:last-child {
  margin-right: 0;
}
@media only screen and (max-width: 1000px) {
  .Bio__image {
    display: none;
  }
}
.Bio__image-tag {
  width: 100%;
  height: auto;
}

.Testimonials {
  margin-bottom: 160px;
}
.Testimonials__indicators {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 45px;
  padding-left: 0;
}
.Testimonials__indicator {
  display: inline-block;
  background-color: #7c7d7f;
  width: 5px;
  height: 5px;
  margin: 0 25px;
  cursor: pointer;
  text-indent: -999px;
  border-radius: 50%;
}
.Testimonials__indicator--active {
  background-color: transparent;
  border: solid 4px #5c95e6;
  width: 12px;
  height: 12px;
  position: relative;
  top: -3px;
}

.Testimonial {
  text-align: center;
}
.Testimonial__header {
  color: #555658;
  font-size: 40px;
  font-weight: 400;
  text-transform: uppercase;
}
.Testimonial__image img {
  border-radius: 50%;
}
.Testimonial__image-line {
  width: 2px;
  height: 30px;
  background-color: #5c95e6;
  margin: -10px auto;
  position: relative;
  top: 5px;
}
.Testimonial__name {
  margin: 25px 0;
  color: #555658;
  font-size: 25px;
  font-weight: 600;
  text-transform: uppercase;
}
.Testimonial__body {
  padding: 0 24%;
  font-weight: 300;
  color: #7c7d7f;
  line-height: 25px;
}

.Signup {
  background-image: url(https://owncloud.batalp.com/fyles/data/Ika/files/Photos/contest-images/signup-home.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 50px;
  padding-bottom: 150px;
}
.Signup__header {
  font-size: 35px;
  color: #555658;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}
.Signup .Lead {
  color: #555658;
  font-weight: 400;
}
.Signup__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.Signup__input--name {
  width: 400px;
  border-width: 3px;
}
.Signup__button {
  border-width: 3px;
}

.Footer__top {
  padding: 70px;
  background-color: #f9fafc;
  z-index: 999;
  position: relative;
  top: -140px;
  box-shadow: 1px 10px 40px rgba(0, 0, 0, 0.2);
}
.Footer__bottom {
  text-align: center;
  font-weight: 300;
  color: #7c7d7f;
  position: relative;
  top: -65px;
}
.Footer__bio {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 40.29137%;
  margin-left: 4.2649%;
}
.Footer__bio:last-child {
  margin-right: 0;
}
@media only screen and (max-width: 1060px) {
  .Footer__bio {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 100%;
    margin-left: 0%;
    text-align: center;
    display: block;
  }
  .Footer__bio:last-child {
    margin-right: 0;
  }
}
.Footer__name {
  text-transform: uppercase;
  color: #555658;
}
.Footer__desc {
  font-size: 15px;
  font-weight: 300;
  color: #7c7d7f;
  line-height: 20px;
}
.Footer__social-links {
  padding-left: 0px;
}
@media only screen and (max-width: 1060px) {
  .Footer__social-links {
    display: table;
    margin: auto;
  }
}
.Footer__social-link {
  display: inline;
}
.Footer__social-link a {
  color: #7c7d7f;
  width: 36px;
  height: 36px;
  float: left;
  text-align: center;
  text-decoration: none;
  border: 1px solid #7c7d7f;
  border-radius: 100%;
  margin-right: 15px;
}
.Footer__social-link a:hover {
  color: #5c95e6;
  border-color: #5c95e6;
}
.Footer__social-link a i {
  font-size: 15px;
  line-height: 33px;
}
.Footer__nav-list {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 14.70196%;
}
.Footer__nav-list:last-child {
  margin-right: 0;
}
@media only screen and (max-width: 1060px) {
  .Footer__nav-list {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
    text-align: center;
  }
  .Footer__nav-list:last-child {
    margin-right: 0;
  }
}
@media only screen and (max-width: 780px) {
  .Footer__nav-list {
    width: 100%;
    display: block;
  }
}
.Footer__header {
  text-transform: uppercase;
  color: #555658;
}
.Footer__list {
  list-style-type: none;
  position: relative;
  left: -28%;
}
@media only screen and (max-width: 1060px) {
  .Footer__list {
    left: -10%;
  }
}
@media only screen and (max-width: 780px) {
  .Footer__list {
    padding: 0;
    left: 0;
  }
}
.Footer__list-item {
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 300;
}
.Footer__list-item a {
  color: #555658;
  text-decoration: none;
}
.Footer__list-item a:hover {
  color: #5c95e6;
}
Host Instantly Drag and Drop Website Builder

 

Description

This is the web page I created for the CodingPhase landing page challenge.
Wed, 11/29/2017 - 11:18

Related Codes

Pen ID
Pen ID
Pen ID