/index.html

## index.html

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link href='http://fonts.googleapis.com/css?family=Lato|Open+Sans:400,600,800' rel='stylesheet' type='text/css'>
  </head>

<body>
  <header>

    <h1><a href="/index.html">Linas Lapeikis</a></h1>
    <h2>Optimistic creature</h2>

    <nav>
      <ul>
        <li><a href="/index.html">Gallery</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contacts</a></li>
      </ul>
    </nav>

  </header>

  <div id="wrapper">
  <section>
    <div class="jumbotron">
      <div class="photo">
      <img src="../img/Linas_Lap_1.jpg" alt="Profile photo of Linas">
        </div>
      <h3>About</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
  </section>

    <section>

      <div id="photos">

      <h3>Gallery</h3>

      <ul class="gallery">
        <li><img src="img/photo-1.jpg" alt="Landscape photo"></li>
        <li><img src="img/photo-2.jpg" alt="Landscape photo"></li>
        <li><img src="img/photo-3.jpg" alt="Landscape photo"></li>
        <li><img src="img/photo-4.jpg" alt="Landscape photo"></li>
        <li><img src="img/photo-5.jpg" alt="Landscape photo"></li>

      </ul>

      </div>

  </section>


  </div>

  <footer>
  </footer>


</body>
</html>

## jEMbgm.markdown

      
    Raw
  

              jEMbgm.markdown
            
          
    jEMbgm

A Pen by Captain Anonymous on CodePen.
License.

  
## style.css
/**************
 ***DEFAULTS***
***************/
body {
  margin:0;
  padding:0;
}

#wrapper {
  margin:0;
  padding:0;
}

header {
  margin:0;
  padding:0;
}

section {
  margin:0;
  padding:0;
}

a {
  text-decoration:none;
  color:#000;
}
a:hover {
  text-decoration:none;
  color:#000;
}

h1,h2 {
  margin:0;
  padding:0;
}

img {
  max-width:100%;
}
ul {
  margin:0;
  padding:0;
  list-style:none;
}


/**************
 ***FONTS***
***************/
h1 {
  font-family:'Lato', sans-serif;
  font-size:2.75em;
  color:#ccc;
}
h2 {
  font-family:'Open-sans', sans-serif;
  font-size:1.75em;
  color:#ccc;
}
a, p {
  font-family:'Open-sans', sans-serif;
  font-size: 0.75em;
  color:#ccc;
}

/**************
 ***HEADER***
***************/

header {
  text-align:center;
}

header h1 {
  font-weight:800;
  font-size:3em;
  padding:20px 0 10px 0;
}
header h2 {
  font-weight:400;
  font-size:1.25em;
  padding:0 0 20px 0;
}

header ul {
  margin:0;
  padding:10px 0;
  list-style:none;
}

header ul li {
  display:inline-block;
  clear:both;

}
header ul li:nth-child(1n) {
  padding-left:10px;
  padding-right:10px;
}
header ul li:nth-child(2n) {
  padding-left:10px;
  padding-right:10px;
}

header ul li:nth-child(3n) {
  padding-left:10px;
  padding-right:10px;

}

header ul li a {
  padding:5px;
  font-size:1.25em;
  font-weight:600;
  line-height:20px;
}

header a:hover {
  color:#00AF64;
  background-color:#36D792;
  border-radius:14%;
}


/**************
 ***JUMBOTRON***
***************/
.jumbotron {
  border-top:3px solid #ccc;
  border-bottom:3px solid #ccc;
  background-color:#D2CCDC;
  margin:0;
}

.photo {
  display:block;
  background-color:#DDD5EB;
  border-bottom:3px solid #ccc;
}

.jumbotron img {
  border-radius:100%;
  width:50%;
  margin:45px 25%;
}

.jumbotron p {
  margin:0 7% 10% 5%;
  color:#000;
  font-family:'Open-sans',sans-serif;
  font-size:1em;
  line-height: 22.25px;
  word-spacing:3px;
  text-indent:14px;
  text-align:justify;
}

.jumbotron h3 {
  margin-left:10%;
  color:#555;
  font-size:1.75em;
  opacity:80%;
}


/**************
 ***JUMBOTRON-1***
***************/


#photos h3 {
  margin-left:10%;
  color:#555;
  font-size:1.75em;
  opacity:80%;
}

#photos .gallery li{
  display:block;
  text-align:center;
  width:40%;
  margin:25px 5%;
  float:left;


}

/**************
 ***COLORS***
***************/

header {
  background-color:#36D792;
}

nav {
  background-color:#00AF64;
}
header h1 a, header h2 {
  color:#fff;
}
nav ul li a {
  color:#fff;
}

	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/main.css">
	<link href='http://fonts.googleapis.com/css?family=Lato\|Open+Sans:400,600,800' rel='stylesheet' type='text/css'>
	</head>

	<body>
	<header>

	<h1><a href="/index.html">Linas Lapeikis</a></h1>
	<h2>Optimistic creature</h2>

	<nav>
	<ul>
	<li><a href="/index.html">Gallery</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contacts</a></li>
	</ul>
	</nav>

	</header>

	<div id="wrapper">
	<section>
	<div class="jumbotron">
	<div class="photo">
	<img src="../img/Linas_Lap_1.jpg" alt="Profile photo of Linas">
	</div>
	<h3>About</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
	</div>
	</section>

	<section>

	<div id="photos">

	<h3>Gallery</h3>

	<ul class="gallery">
	<li><img src="img/photo-1.jpg" alt="Landscape photo"></li>
	<li><img src="img/photo-2.jpg" alt="Landscape photo"></li>
	<li><img src="img/photo-3.jpg" alt="Landscape photo"></li>
	<li><img src="img/photo-4.jpg" alt="Landscape photo"></li>
	<li><img src="img/photo-5.jpg" alt="Landscape photo"></li>

	</ul>

	</div>

	</section>



	</div>

	<footer>
	</footer>








	</body>
	</html>
	/**************
	*DEFAULTS*
	***************/
	body {
	margin:0;
	padding:0;
	}

	#wrapper {
	margin:0;
	padding:0;
	}

	header {
	margin:0;
	padding:0;
	}

	section {
	margin:0;
	padding:0;
	}

	a {
	text-decoration:none;
	color:#000;
	}
	a:hover {
	text-decoration:none;
	color:#000;
	}

	h1,h2 {
	margin:0;
	padding:0;
	}

	img {
	max-width:100%;
	}
	ul {
	margin:0;
	padding:0;
	list-style:none;
	}


	/**************
	*FONTS*
	***************/
	h1 {
	font-family:'Lato', sans-serif;
	font-size:2.75em;
	color:#ccc;
	}
	h2 {
	font-family:'Open-sans', sans-serif;
	font-size:1.75em;
	color:#ccc;
	}
	a, p {
	font-family:'Open-sans', sans-serif;
	font-size: 0.75em;
	color:#ccc;
	}

	/**************
	*HEADER*
	***************/

	header {
	text-align:center;
	}

	header h1 {
	font-weight:800;
	font-size:3em;
	padding:20px 0 10px 0;
	}
	header h2 {
	font-weight:400;
	font-size:1.25em;
	padding:0 0 20px 0;
	}

	header ul {
	margin:0;
	padding:10px 0;
	list-style:none;
	}

	header ul li {
	display:inline-block;
	clear:both;

	}
	header ul li:nth-child(1n) {
	padding-left:10px;
	padding-right:10px;
	}
	header ul li:nth-child(2n) {
	padding-left:10px;
	padding-right:10px;
	}

	header ul li:nth-child(3n) {
	padding-left:10px;
	padding-right:10px;

	}

	header ul li a {
	padding:5px;
	font-size:1.25em;
	font-weight:600;
	line-height:20px;
	}

	header a:hover {
	color:#00AF64;
	background-color:#36D792;
	border-radius:14%;
	}


	/**************
	*JUMBOTRON*
	***************/
	.jumbotron {
	border-top:3px solid #ccc;
	border-bottom:3px solid #ccc;
	background-color:#D2CCDC;
	margin:0;
	}

	.photo {
	display:block;
	background-color:#DDD5EB;
	border-bottom:3px solid #ccc;
	}

	.jumbotron img {
	border-radius:100%;
	width:50%;
	margin:45px 25%;
	}

	.jumbotron p {
	margin:0 7% 10% 5%;
	color:#000;
	font-family:'Open-sans',sans-serif;
	font-size:1em;
	line-height: 22.25px;
	word-spacing:3px;
	text-indent:14px;
	text-align:justify;
	}

	.jumbotron h3 {
	margin-left:10%;
	color:#555;
	font-size:1.75em;
	opacity:80%;
	}


	/**************
	*JUMBOTRON-1*
	***************/


	#photos h3 {
	margin-left:10%;
	color:#555;
	font-size:1.75em;
	opacity:80%;
	}

	#photos .gallery li{
	display:block;
	text-align:center;
	width:40%;
	margin:25px 5%;
	float:left;


	}

	/**************
	*COLORS*
	***************/

	header {
	background-color:#36D792;
	}

	nav {
	background-color:#00AF64;
	}
	header h1 a, header h2 {
	color:#fff;
	}
	nav ul li a {
	color:#fff;
	}