123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mountain Travel</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">


  <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
  <header>
    <h2><a href="#">Lorem Ipsum</a></h2>
    <nav>
      <li><a href="#what-i-do">What I do</a></li>
      <li><a href="#offer">Offer</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#contact">Contact</a></li>
    </nav>
  </header>

  <section class="hero">
    <div class="background-image" style="background-image: url(https://images.unsplash.com/photo-1511316652-1a5eed7732e5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dc260c3bd89b239ddc38cd3f3a1ba8c2&auto=format&fit=crop&w=2125&q=80);"></div>
    <div class="hero-content-area">
      <h1>Lorem Ipsum</h1>
      <h3>Lorem | ipsum | dolor</h3>
      <a href="#" class="btn">Contact Me Now</a>
    </div>
  </section>
    <section class="destinations" id="what-i-do">
        <h3 class="title">Some of my work</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis velit sit amet ipsum tempus, nec sollicitudin nisl porttitor. Donec pharetra iaculis enim in finibus. In hac habitasse platea dictumst.</p>
        <hr>
    <ul class="grid">
      <li class="small"><a href="#" style="background-image: url(https://images.unsplash.com/photo-1511798616182-aab3698ac53e?ixlib=rb-0.3.5&s=1b3d99d3ea0e554b8ad1a553286d6f96&auto=format&fit=crop&w=1166&q=80);"></a></li>
      <li class="large"><a href="#" style="background-image: url(https://images.unsplash.com/photo-1502134249126-9f3755a50d78?ixlib=rb-0.3.5&s=5ca903e3da7b92aaf2858411df2a8213&auto=format&fit=crop&w=1350&q=80);"></a></li>
      <li class="large"><a href="#" style="background-image: url(https://images.unsplash.com/photo-1513436539083-9d2127e742f1?ixlib=rb-0.3.5&s=d1686bf25ffed4b0bb402549a1250b85&auto=format&fit=crop&w=1344&q=80);"></a></li>
      <li class="small"><a href="#" style="background-image: url(https://images.unsplash.com/photo-1520927718846-5d3c07d63950?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eed8f145b362787a597113cf3ddfc22c&auto=format&fit=crop&w=1353&q=80);"></a></li>
    </ul>
    </section>
    <section class="packages" id="offer">
        <h3 class="title">Offer</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis velit sit amet ipsum tempus, nec sollicitudin nisl porttitor. Donec pharetra iaculis enim in finibus. In hac habitasse platea dictumst.</p>
        <hr>
        <ul class="grid">
            <li>
                <i class="fas fa-chart-line fa-5x"></i>
                <h4>Lorem ipsum</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </li>
            <li>
                <i class="fas fa-bullhorn fa-5x"></i>
                <h4>Lorem ipsum</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </li>
            <li>
                <i class="fas fa-bullseye fa-5x"></i>
                <h4>Lorem ipsum</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </li>
            <li>
                <i class="far fa-file-alt fa-5x"></i>
                <h4>Lorem ipsum</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </li>
        </ul>
    </section>
    <section class="blog">
        <h3 class="title">Latest on blog</h3>
        <hr>
        <div class="latestblog">
            <div class="latestimage">
                <a href="#" style="background-image: url(https://images.unsplash.com/photo-1524821695732-717b25a38974?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=08f92fcbaca12ac3d128dbc91f447164&auto=format&fit=crop&w=1500&q=80);"></a>
            </div>
            <div class="latestlead">
                <h4>Title</h4>
                <p class="postlead">Lorem ipsum dolor sit amet, oblique principes disputationi sed an, ne debet dicant melius est. Vim in simul alienum, ea mandamus euripidis vix, his ut labitur dolorum percipitur. Ea nullam prompta pri, mea quis erat malorum at, possit abhorreant vel ut. Scripserit signiferumque ea eam, eu vix vero altera gubergren. Eu pri etiam persecuti, quo an habeo iusto.</p>
                <a href="#" class="readmore">Read more</a>
            </div>
        </div>
        <div class="moreblog">
            <a href="#" class="btn">Go to blog</a>
        </div>
    </section>
    <section class="contact" id="contact">
        <h3 class="title">Learn more</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis velit sit amet ipsum tempus, nec sollicitudin nisl porttitor. Donec pharetra iaculis enim in finibus. In hac habitasse platea dictumst.</p>
        <hr>
        <form>
            <input type="email" placeholder="Email">
            <a href="#" class="btn">Sunscribe Now</a>
        </form>
        <div class="social">
            <a href="#" class="fab fa-facebook"></a>
            <a href="#" class="fab fa-instagram"></a>
            <a href="#" class="fab fa-linkedin"></a>
            <a href="#" class="fab fa-quora"></a>
            <a href="#" class="fab fa-medium"></a>
        </div>
      
    </section>
    <footer>
        <p>Images credit: Unsplash</p>
        <p>JakubSadowskiPL</p>
<!--         <ul>
            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
        </ul> -->
    </footer>
</body>
</html>
            
          
!
            
              /*General Styles*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font: normal 16px sans-serif;
	color: #555;
}

ul,
nav {
	list-style: none;
}

a {
	text-decoration: none;
	opacity: 0.75;
	color: #fff;
}

a:hover {
	opacity: 1;
}

a.btn {
	border-radius: 4px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	background-color: #3f51b5;
	opacity: 1;
}

section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100px 80px;
}

section:not(.hero):nth-child(even) {
	background-color: #f5f5f5;
}

.grid {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

hr {
	width: 250px;
	height: 3px;
	background-color: #3f51b5;
	border: 0;
	margin-bottom: 50px;
}

section h3.title {
	text-transform: capitalize;
	font: bold 32px "Open Sans", sans-serif;
	margin-bottom: 30px;
	text-align: center;
}

section p {
	max-width: 1140px;
	line-height: 2;
	padding: 0 20px;
	margin-bottom: 30px;
	text-align: center;
}

@media (max-width: 800px) {
	section {
		padding: 50px 20px;
	}
}

/*Header Styles*/

header {
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 35px 100px 0;
	animation: 1s fadein 0.5s forwards;
	opacity: 0;
	color: #fff;
    z-index: 1;
}

@keyframes fadein {
	100% {
		opacity: 1;
	}
}

header h2 {
	font-family: "Quicksand", sans-serif;
}

header nav {
	display: flex;
	margin-right: -15px;
}

header nav li {
	margin: 0 15px;
}

@media (max-width: 800px) {
	header {
		padding: 20px 50px;
		flex-direction: column;
	}

	header h2 {
		margin-bottom: 15px;
	}
}

/*Hero Styles*/

.hero {
	position: relative;
	justify-content: center;
	text-align: center;
	min-height: 100vh;
	color: #fff;
}

.hero .background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	z-index: -1;
	background-color: #80a3db;
}

.hero h1 {
	font: bold 60px "Open Sans", sans-serif;
	margin-bottom: 15px;
}

.hero h3 {
	font: normal 28px "Open Sans", sans-serif;
	margin-bottom: 40px;
}

.hero a.btn {
	padding: 20px 46px;
}

.hero-content-area {
	opacity: 0;
	margin-top: 100px;
	animation: 1s slidefade 1s forwards;
}

@keyframes slidefade {
	100% {
		opacity: 1;
		margin: 0;
	}
}

@media (max-width: 800px) {
	.hero {
		min-height: 600px;
	}

	.hero h1 {
		font-size: 48px;
	}

	.hero h3 {
		font-size: 24px;
	}

	.hero a.btn {
		padding: 15px 40px;
	}
}

/*Destinations Section*/

.destinations .grid li {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    padding: 20px;
	background-clip: content-box;
	background-size: cover;
	background-position: center;
    background-color: #0A369D;
}

.destinations .grid li a {
    width: 100%;
	height: 350px;
	background-clip: content-box;
	background-size: cover;
	background-position: center;
    opacity: 1;
}

.destinations .grid li:hover a {
  opacity: 0.5;
  filter: grayscale(100%);
}

.destinations .grid li.small {
  flex-basis: 30%;
}

.destinations .grid li.large {
	flex-basis: 70%;
}

@media (max-width: 1100px) {
	.destinations .grid li.small,
	.destinations .grid li.large {
		flex-basis: 50%;
	}
}

@media (max-width: 800px) {
	.destinations .grid li.small,
	.destinations .grid li.large {
		flex-basis: 100%;
	}
}

/*Packages Section*/

.packages .grid li {
	padding: 50px;
	flex-basis: 50%;
	text-align: center;
}

.packages .grid li i {
	color: #3f51b5;
}

.packages .grid li h4 {
	font-size: 30px;
	margin: 25px 0;
}

@media (max-width: 800px) {
	.packages .grid li {
		flex-basis: 100%;
		padding: 20px;
	}
}

/*Blog Section*/

.blog .latestblog {
  padding: 20px;
	width: 100%;
  display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-clip: content-box;
	background-size: cover;
	background-position: center;
}

.blog div.latestblog div.latestimage a {
  width: 100%;
/*   height: 350px; */
  flex-wrap: wrap;
  justify-content: center;
	background-clip: content-box;
	background-size: cover;
	background-position: center;
  opacity: 1;
}

.blog .latestblog .latestimage {
	width: 100%;
	display: flex;
  padding: 20px;
	background-clip: content-box;
	background-size: cover;
	background-position: center;
  background-color: #0A369D;
}

.blog div.latestblog div.latestimage {
    flex-basis: 50%;
}

.blog div.latestblog div.latestlead {
    padding: 20px;
    flex-basis: 50%;
}

.blog div.latestblog div.latestlead h4 {
    padding: 20px;
    flex-basis: 50%;
    text-transform: capitalize;
	font: bold 28px "Open Sans", sans-serif;
	text-align: center;
}

.blog div.latestblog div.latestlead p {
  flex-basis: 50%;
	font: 18px;
	text-align: left;
}

.blog div.latestblog div.latestlead a {
  flex-basis: 50%;
	font: bold 18px;
	text-align: left;
	text-transform: uppercase;
}

.blog div.latestblog div.latestlead a.readmore {
    padding: 20px;
    color: #3f51b5;
    text-transform: uppercase;
	font-weight: bold;
	text-align: center; 
}

.blog div.moreblog {
    padding: 20px;
}

.blog div.moreblog a.btn {
    padding: 18px 42px;
}

@media (max-width: 800px) {
	.blog div.latestblog div.latestimage,
	.blog div.latestblog div.latestlead {
		flex-basis: 100%;
	}
}

/*Contact Section*/

.contact form {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: 60%;
}

.contact form .btn {
	padding: 18px 42px;
}

.contact form input {
	padding: 15px;
	margin-right: 30px;
	font-size: 18px;
	color: #555;
	flex: 1;
}

@media (max-width: 1000px) {
	.contact form input {
		flex-basis: 100%;
		margin: 0 0 20px 0;
	}
}

/*Social Media buttons*/

.social {
  padding: 20px;
}

.fab {
    padding: 20px;
    font-size: 30px;
    width: 70px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    opacity: 1;
}

.fab:hover {
    opacity: 0.7;
    color: white;
    text-decoration: none;
}

.fa-facebook {
    background: #3B5998;
    color: white;
}

.fa-instagram {
/*     background: #125688; */
    background: #f09433; 
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
    color: white;
}

.fa-linkedin {
    background: #007bb5;
    color: white;
}

.fa-quora {
    background: #a62100;
    color: white;
}

.fa-medium {
    background: black;
    color: white;
}


/*Footer Section*/

footer {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: #607d8b;
	color: #fff;
	padding: 20px 0;
}

footer ul {
	display: flex;
}

footer ul li {
	margin-left: 16px;
}

footer p {
	text-transform: uppercase;
	font-size: 14px;
	opacity: 0.6;
	align-self: center;
}

@media (max-width: 1100px) {
	footer {
		flex-direction: column;
	}

	footer p {
		text-align: center;
		margin-bottom: 20px;
	}

	footer ul li {
		margin: 0 8px;
	}
} 

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console