pelinoloji/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
	   <title>Product Landing Page</title>

        <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="freelance-style.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type"text/css">

    </head>

    <body>
        <!-- Navigation -->

    	<div id="navigation">
    		<div id="nav-inner" class="container">
                <a id="logo" href="#">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_LS5DorhcHaHfghdBXKdqbjpXljWOCEk0YTLtF2cXOWFqHRoO">
            </a>
                <ul id="nav-menu">
                    <li>
                        <a href="#">
                            Products
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            About
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Contact
                        </a>
                    </li>
                </ul>
                <div class="clear"/></div>
    		</div>
        </div>

        <!-- Header -->

        <div id="header">
            <div id="header-inner" class="container">
                <img src="https://image.freepik.com/free-photo/coffee-maker-pouring-coffee-on-filter_1162-135.jpg" alt="product-image">

                <h1>
                    Amazing Product
                </h1>

                <hr class="line-darkblue">

                <span>
                    Lorem ipsum dolor sit amet.
                </span>
            </div>
         </div>

        <!-- Portfolio -->

        <div id="content">
            <div id="content-inner" class="container">
                <h2>
                    Products
                </h2>

                <hr class= "line-white">

                <div id="product">

                    <div class="product-item">
                        <a href="#">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fas fa-search fa-3x"></i>
                                </div>
                            </div>
                            <img src="https://image.freepik.com/free-photo/top-view-of-wooden-spoon-and-a-canvas-bag-of-coffee-beans_1112-441.jpg">
                        </a>
                    </div>

                     <div class="product-item">
                        <a href="#">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fas fa-search fa-3x"></i>
                                </div>
                            </div>
                            <img src="https://image.freepik.com/free-photo/top-view-of-wooden-spoon-and-a-canvas-bag-of-coffee-beans_1112-441.jpg">
                        </a>
                    </div>

                     <div class="product-item">
                        <a href="#">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fas fa-search fa-3x"></i>
                                </div>
                            </div>
                            <img src="https://image.freepik.com/free-photo/top-view-of-wooden-spoon-and-a-canvas-bag-of-coffee-beans_1112-441.jpg">
                        </a>
                    </div>

                     <div class="product-item">
                        <a href="#">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fas fa-search fa-3x"></i>
                                </div>
                            </div>
                            <img src="https://image.freepik.com/free-photo/top-view-of-wooden-spoon-and-a-canvas-bag-of-coffee-beans_1112-441.jpg">
                        </a>
                    </div>

                     <div class="product-item">
                        <a href="#">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fas fa-search fa-3x"></i>
                                </div>
                            </div>
                            <img src="https://image.freepik.com/free-photo/top-view-of-wooden-spoon-and-a-canvas-bag-of-coffee-beans_1112-441.jpg">
                        </a>
                    </div>

                     <div class="product-item">
                        <a href="#">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fas fa-search fa-3x"></i>
                                </div>
                            </div>
                            <img src="https://image.freepik.com/free-photo/top-view-of-wooden-spoon-and-a-canvas-bag-of-coffee-beans_1112-441.jpg">
                        </a>
                    </div>

                </div>
            </div>
        </div>

        <!-- About -->

        <div id="about">
            <div class="container">

                <h2>
                    About
                </h2>

                <hr class="line-darkblue">

                <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.
                    <br>
                    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.
                </p>

            </div>

        </div>

        <!-- Contact -->

        <div id="contact">

            <div class="container">

                <h2>
                    Contact Us
                </h2>

                <hr class= "line-white">

                <div id="form">

                    <form>
                        <div class="form-group">
                            <input type="text" id="name" placeholder="Name" required="required" data-validation-required-message="Please enter your name.">
                        </div>

                         <div class="form-group">
                            <input type="text" id="email" placeholder="Email Address" required="required" data-validation-required-message="Please enter your email address.">
                        </div>

                        <div class="form-group">
                            <input type="text" id="phone" placeholder="Phone Number" required="required" data-validation-required-message="Please enter your phone number.">
                        </div>

                        <div class="form-group">
                            <textarea type="text" id="message" placeholder="Message" rows="5" required="required" data-validation-required-message="Please enter your message."></textarea>
                        </div>

                        <div class="form-group">
                            <button type="submit" id="sendbtn" value="Send">
                                Send
                            </button>

                        </div>
                    </form>
                </div>

            </div>

        </div>

         <!-- Footer -->

         <div id="footer">

            <div id="footer-top">

                <div class="container">

                    <div class="footer-column">
                        <h3>
                            location
                        </h3>

                        <p id="adress">
                            London, UK
                        </p>
                    </div>

                        <div class="footer-column">

                            <h3>
                                Be Social
                            </h3>

                            <ul>
                                <li>
                                    <a href="#">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="fab fa-instagram"></i>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="fab fa-linkedin"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                <div id="footer-bottom">

                    <div class="container">
                        <p id="copyright">
                            Copyright © Company Name 2018
                        </p>
                    </div>
                </div>
             </div>
         </div>
    </body>
</html>


## product-landing-page-dummy.markdown

      
    Raw
  

              product-landing-page-dummy.markdown
            
          
    Product Landing Page - Dummy

A Pen by pelinoloji on CodePen.
License.

  
## style.css
/* yelow #FDCF32*/
/* mint #65DFB6 */
/* darkblue #2D3E4F */

*{
    padding: 0;
    margin: 0;
}

h1,h2,h3,h4,h5,h6{
    margin-top: 20px;
    margin-bottom: 40px;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform: lowercase;
    font-weight: 300px;
    text-align: center;
}

.container{
    width: 1170px;
    margin: 0 auto;
}

.clear{
    clear: both;
}

/* Navigation */

#navigation{
    background-color: #FDCF32;
    height: 100px;
}

#nav-inner{
    height: 100px;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

#logo{
    float: left;
    margin-top: 20px;
}

#nav-menu{
    float: right;
    text-decoration: none;
    margin-top: 40px;
}

#nav-inner a{
    color: #2D3E4F;
    text-decoration: none;
    font-weight: 600;
    text-transform: lowercase;
}

#nav-menu li{
    float: left;
    list-style: none;
    margin: 0 15px;
}

#nav-menu li a{
    font-size: 20px;
}

#nav-menu li a:hover{
    color: #fff;
}

/* Header */

hr{
    border: none;
    border-top: solid 5px;
    max-width: 300px;
    overflow: visible;
    margin-left: 425px; /* bunu ben ekledim */
    margin-bottom: 27px;
}

hr:after{
    font-family: FontAwesome;
    content: "\f005";
    position: relative;
    top: -17px;
    font-size: 30px;
    padding: 10px;
}

.line-darkblue:after{
   background-color: #fff;
   color: #2D3E4F;
}

.line-white:after{
    background-color: #2D3E4F;
    color: #fff;
}


#header{
    text-align: center;
    background-color: #fff;
    color: #2D3E4F;
}

#header span{
    font-size: 20px;
    font-weight: 50px;
    text-transform: lowercase;
    font-family: Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
}

#header h1{
    font-size: 60px;
}

#header .container{
    padding-top: 50px;
    padding-bottom: 50px;
}

#header img{
  display: block;
    margin: 50 auto;
}

/* Portfolio */

#content{
    text-align:center;
    background-color: #2D3E4F;
    color: #fff;
}

#content h2{
    font-size: 60px;
    color: #fff;
}

#content .container{
    padding-top: 50px;
    padding-bottom: 50px;
}

.product-item{
    width: 30%;
    display: inline-block;
    margin-right: 1.1%;
    margin-bottom: 15px;
}

.product-item img{
    width: 100%;
    border-radius: 10px;
}

.product-item a{
    display: block;
    position: relative;
}

.caption{
    background-color: #65DFB6;
    position: absolute;
    top: 0;
    border-radius: 10px;
    height: 100%;
    width: 100%;
    opacity: 0;
}

.caption:hover{
    opacity: 0.9;
    transition: 1s;
}

.caption-content{
    position: absolute;
    top: 50%;
    width: 100%;
    color: #fff;
    margin-top: -20px;
}

/* About */

#about{
    background-color: #fff;
    color: #2D3E4F;
    text-align: center;
}

#about h2{
    font-size: 50px;
}

#about .container{
    padding-top: 50px;
    padding-bottom: 90px;
}

#about p{
    -webkit-column-count:2;
    text-align: left;
    margin: 0 auto;
    width: 70%;
    font-size: 20px;
    line-height: 1.37;
}

/* Contact */

#contact{
    background-color: #2D3E4F;
    color: #fff;
    text-align: center;
}

#contact h2{
    font-size: 50px;
}

#contact .container{
    padding-top: 50px;
    padding-bottom: 50px;
}

#form{
    width: 60%;
    margin: 0 auto;
    padding-bottom: 50px;
}

input[type="text"],textarea{
    width: 100%;
    border: none;
    border: 1px solid #65DFB6;
    padding: 6px 12px;
    height: 30px;
    border-radius: 5px;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1.2em;
}

.form-group{
    margin-top: 10px;
}

textarea{
    height: auto;
}

#sendbtn{
    background-color: #65DFB6;
    padding: 10px 20px;
    border-radius: 5px;
    float: left;
    color: #fff;
    font-size: 17px;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

#sendbtn:hover{
    background-color: #fff;
    color: #65DFB6;
}

/* Footer */

#footer{
    text-align:center;
    background-color: #FDCF32;
    color: #fff;
}

#footer-bottom{
    background-color: #FDCF32;
    padding: 5px 0;
}

#footer .container{
    padding-top: 50px;
    padding-bottom: 25px;
}

#footer h3{
    font-size: 30px;
}

#adress{
    font-size: 20px;
    padding-bottom: 10px;
    font-family: Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
}

#copyright{
    font-size: 13px;
    font-family: Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
}

.footer-column{
    width: 33%;
    display: inline-block;
}

#footer ul li{
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 50%;
    margin-right: 7px;
    list-style: none;
}

#footer ul li:hover{
    background-color: #65DFB6;
    color: #fff;
}

ul li a{
    color: #fff;
    font-size: 25px;
    line-height: 50px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Product Landing Page</title>

	<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="freelance-style.css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type"text/css">

	</head>

	<body>
	<!-- Navigation -->

	<div id="navigation">
	<div id="nav-inner" class="container">
	<a id="logo" href="#">
	<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_LS5DorhcHaHfghdBXKdqbjpXljWOCEk0YTLtF2cXOWFqHRoO">
	</a>
	<ul id="nav-menu">
	<li>
	<a href="#">
	Products
	</a>
	</li>
	<li>
	<a href="#">
	About
	</a>
	</li>
	<li>
	<a href="#">
	Contact
	</a>
	</li>
	</ul>
	<div class="clear"/></div>
	</div>
	</div>

	<!-- Header -->

	<div id="header">
	<div id="header-inner" class="container">
	<img src="https://image.freepik.com/free-photo/coffee-maker-pouring-coffee-on-filter_1162-135.jpg" alt="product-image">

	<h1>
	Amazing Product
	</h1>

	<hr class="line-darkblue">

	<span>
	Lorem ipsum dolor sit amet.
	</span>
	</div>
	</div>

	<!-- Portfolio -->

	<div id="content">
	<div id="content-inner" class="container">
	<h2>
	Products
	</h2>

	<hr class= "line-white">

	<div id="product">

	<div class="product-item">
	<a href="#">
	<div class="caption">
	<div class="caption-content">
	<i class="fas fa-search fa-3x"></i>
	</div>
	</div>
	<img src="https://image.freepik.com/free-photo/top-view-of-wooden-spoon-and-a-canvas-bag-of-coffee-beans_1112-441.jpg">
	</a>
	</div>

	<div class="product-item">
	<a href="#">
	<div class="caption">
	<div class="caption-content">
	<i class="fas fa-search fa-3x"></i>
	</div>
	</div>
	<img src="https://image.freepik.com/free-photo/top-view-of-wooden-spoon-and-a-canvas-bag-of-coffee-beans_1112-441.jpg">
	</a>
	</div>

	<div class="product-item">
	<a href="#">
	<div class="caption">
	<div class="caption-content">
	<i class="fas fa-search fa-3x"></i>
	</div>
	</div>
	<img src="https://image.freepik.com/free-photo/top-view-of-wooden-spoon-and-a-canvas-bag-of-coffee-beans_1112-441.jpg">
	</a>
	</div>

	<div class="product-item">
	<a href="#">
	<div class="caption">
	<div class="caption-content">
	<i class="fas fa-search fa-3x"></i>
	</div>
	</div>
	<img src="https://image.freepik.com/free-photo/top-view-of-wooden-spoon-and-a-canvas-bag-of-coffee-beans_1112-441.jpg">
	</a>
	</div>

	<div class="product-item">
	<a href="#">
	<div class="caption">
	<div class="caption-content">
	<i class="fas fa-search fa-3x"></i>
	</div>
	</div>
	<img src="https://image.freepik.com/free-photo/top-view-of-wooden-spoon-and-a-canvas-bag-of-coffee-beans_1112-441.jpg">
	</a>
	</div>

	<div class="product-item">
	<a href="#">
	<div class="caption">
	<div class="caption-content">
	<i class="fas fa-search fa-3x"></i>
	</div>
	</div>
	<img src="https://image.freepik.com/free-photo/top-view-of-wooden-spoon-and-a-canvas-bag-of-coffee-beans_1112-441.jpg">
	</a>
	</div>

	</div>
	</div>
	</div>

	<!-- About -->

	<div id="about">
	<div class="container">

	<h2>
	About
	</h2>

	<hr class="line-darkblue">

	<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.
	<br>
	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.
	</p>

	</div>

	</div>

	<!-- Contact -->

	<div id="contact">

	<div class="container">

	<h2>
	Contact Us
	</h2>

	<hr class= "line-white">

	<div id="form">

	<form>
	<div class="form-group">
	<input type="text" id="name" placeholder="Name" required="required" data-validation-required-message="Please enter your name.">
	</div>

	<div class="form-group">
	<input type="text" id="email" placeholder="Email Address" required="required" data-validation-required-message="Please enter your email address.">
	</div>

	<div class="form-group">
	<input type="text" id="phone" placeholder="Phone Number" required="required" data-validation-required-message="Please enter your phone number.">
	</div>

	<div class="form-group">
	<textarea type="text" id="message" placeholder="Message" rows="5" required="required" data-validation-required-message="Please enter your message."></textarea>
	</div>

	<div class="form-group">
	<button type="submit" id="sendbtn" value="Send">
	Send
	</button>

	</div>
	</form>
	</div>

	</div>

	</div>

	<!-- Footer -->

	<div id="footer">

	<div id="footer-top">

	<div class="container">

	<div class="footer-column">
	<h3>
	location
	</h3>

	<p id="adress">
	London, UK
	</p>
	</div>

	<div class="footer-column">

	<h3>
	Be Social
	</h3>

	<ul>
	<li>
	<a href="#">
	<i class="fab fa-facebook-f"></i>
	</a>
	</li>

	<li>
	<a href="#">
	<i class="fab fa-instagram"></i>
	</a>
	</li>

	<li>
	<a href="#">
	<i class="fab fa-linkedin"></i>
	</a>
	</li>
	</ul>
	</div>
	</div>
	<div id="footer-bottom">

	<div class="container">
	<p id="copyright">
	Copyright © Company Name 2018
	</p>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>
	/* yelow #FDCF32*/
	/* mint #65DFB6 */
	/* darkblue #2D3E4F */

	*{
	padding: 0;
	margin: 0;
	}

	h1,h2,h3,h4,h5,h6{
	margin-top: 20px;
	margin-bottom: 40px;
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	text-transform: lowercase;
	font-weight: 300px;
	text-align: center;
	}

	.container{
	width: 1170px;
	margin: 0 auto;
	}

	.clear{
	clear: both;
	}

	/* Navigation */

	#navigation{
	background-color: #FDCF32;
	height: 100px;
	}

	#nav-inner{
	height: 100px;
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	}

	#logo{
	float: left;
	margin-top: 20px;
	}

	#nav-menu{
	float: right;
	text-decoration: none;
	margin-top: 40px;
	}

	#nav-inner a{
	color: #2D3E4F;
	text-decoration: none;
	font-weight: 600;
	text-transform: lowercase;
	}

	#nav-menu li{
	float: left;
	list-style: none;
	margin: 0 15px;
	}

	#nav-menu li a{
	font-size: 20px;
	}

	#nav-menu li a:hover{
	color: #fff;
	}

	/* Header */

	hr{
	border: none;
	border-top: solid 5px;
	max-width: 300px;
	overflow: visible;
	margin-left: 425px; /* bunu ben ekledim */
	margin-bottom: 27px;
	}

	hr:after{
	font-family: FontAwesome;
	content: "\f005";
	position: relative;
	top: -17px;
	font-size: 30px;
	padding: 10px;
	}

	.line-darkblue:after{
	background-color: #fff;
	color: #2D3E4F;
	}

	.line-white:after{
	background-color: #2D3E4F;
	color: #fff;
	}


	#header{
	text-align: center;
	background-color: #fff;
	color: #2D3E4F;
	}

	#header span{
	font-size: 20px;
	font-weight: 50px;
	text-transform: lowercase;
	font-family: Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
	}

	#header h1{
	font-size: 60px;
	}

	#header .container{
	padding-top: 50px;
	padding-bottom: 50px;
	}

	#header img{
	display: block;
	margin: 50 auto;
	}

	/* Portfolio */

	#content{
	text-align:center;
	background-color: #2D3E4F;
	color: #fff;
	}

	#content h2{
	font-size: 60px;
	color: #fff;
	}

	#content .container{
	padding-top: 50px;
	padding-bottom: 50px;
	}

	.product-item{
	width: 30%;
	display: inline-block;
	margin-right: 1.1%;
	margin-bottom: 15px;
	}

	.product-item img{
	width: 100%;
	border-radius: 10px;
	}

	.product-item a{
	display: block;
	position: relative;
	}

	.caption{
	background-color: #65DFB6;
	position: absolute;
	top: 0;
	border-radius: 10px;
	height: 100%;
	width: 100%;
	opacity: 0;
	}

	.caption:hover{
	opacity: 0.9;
	transition: 1s;
	}

	.caption-content{
	position: absolute;
	top: 50%;
	width: 100%;
	color: #fff;
	margin-top: -20px;
	}

	/* About */

	#about{
	background-color: #fff;
	color: #2D3E4F;
	text-align: center;
	}

	#about h2{
	font-size: 50px;
	}

	#about .container{
	padding-top: 50px;
	padding-bottom: 90px;
	}

	#about p{
	-webkit-column-count:2;
	text-align: left;
	margin: 0 auto;
	width: 70%;
	font-size: 20px;
	line-height: 1.37;
	}

	/* Contact */

	#contact{
	background-color: #2D3E4F;
	color: #fff;
	text-align: center;
	}

	#contact h2{
	font-size: 50px;
	}

	#contact .container{
	padding-top: 50px;
	padding-bottom: 50px;
	}

	#form{
	width: 60%;
	margin: 0 auto;
	padding-bottom: 50px;
	}

	input[type="text"],textarea{
	width: 100%;
	border: none;
	border: 1px solid #65DFB6;
	padding: 6px 12px;
	height: 30px;
	border-radius: 5px;
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 1.2em;
	}

	.form-group{
	margin-top: 10px;
	}

	textarea{
	height: auto;
	}

	#sendbtn{
	background-color: #65DFB6;
	padding: 10px 20px;
	border-radius: 5px;
	float: left;
	color: #fff;
	font-size: 17px;
	border: none;
	cursor: pointer;
	font-weight: 600;
	}

	#sendbtn:hover{
	background-color: #fff;
	color: #65DFB6;
	}

	/* Footer */

	#footer{
	text-align:center;
	background-color: #FDCF32;
	color: #fff;
	}

	#footer-bottom{
	background-color: #FDCF32;
	padding: 5px 0;
	}

	#footer .container{
	padding-top: 50px;
	padding-bottom: 25px;
	}

	#footer h3{
	font-size: 30px;
	}

	#adress{
	font-size: 20px;
	padding-bottom: 10px;
	font-family: Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
	}

	#copyright{
	font-size: 13px;
	font-family: Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
	}

	.footer-column{
	width: 33%;
	display: inline-block;
	}

	#footer ul li{
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 2px solid #fff;
	border-radius: 50%;
	margin-right: 7px;
	list-style: none;
	}

	#footer ul li:hover{
	background-color: #65DFB6;
	color: #fff;
	}

	ul li a{
	color: #fff;
	font-size: 25px;
	line-height: 50px;
	}