project two

20.07.2017/css/style.css

@@ -0,0 +1,183 @@
+@font-face {
+	font-family: 'Open Sans';
+	src: url('./../fonts/opensans/OpenSans-Regular.eot');
+	src: url('./../fonts/opensans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
+		url('./../fonts/opensans/OpenSans-Regular.woff') format('woff'),
+		url('./../fonts/opensans/OpenSans-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+}
+
+* {
+	box-sizing: border-box;
+}
+html {
+	font-size: 10px;
+}
+body {
+	margin: 0;
+	font-family: Open Sans;  /*подключение шрифта*/
+	font-size: 1.6rem;
+	color: #333332;
+	background: #e5e5e5;
+}
+img {
+	max-width: 100%;
+}
+
+.container {
+	width: 1170px;
+	margin: 80px auto;
+	background: #fff;
+	-webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.4);
+	-moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.4);
+	box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.4);
+}
+.nav {
+	margin: 0;
+	list-style: none;
+}
+.nav.horizontal {
+	display: flex;
+}
+.content {
+	max-width: 780px;
+	margin: auto;
+}
+/*-----------------------------header------------------------------------------------*/
+.header {
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+	justify-content: space-between;
+	padding: 30px 0;
+}
+.logo h1 a {
+	color: rgba(0, 0, 0, 0.8);
+	text-decoration: none;
+	font-size: 1.8rem;
+	font-weight: 600;
+	line-height: 24px;
+	padding-bottom: 3px;
+}
+.logo h1 a:hover {
+	color: #000;
+	text-transform: color 0.2s;
+}
+.logo h2 {
+	font-family: Helvetica, sans-serif;
+	font-size: 1.2rem;
+	font-weight: 300;
+	line-height: 18px;
+	padding-bottom: 3px;
+}
+.header .mainmenu ul a {
+	text-transform: uppercase;
+	padding: 7px 8px;
+	font-size: 1.4rem;
+	font-weight: 600;
+	text-decoration: none;
+	color: rgba(69, 69, 69, 0.8);
+}
+.header .mainmenu ul a:hover {
+	color: #000;
+}
+.header .mainmenu ul .active a {
+	color: #000;
+}
+/*-----------------------------slider------------------------------------------------*/
+.slider {
+	background: url(../img/slider.jpeg) no-repeat top -250px center / cover;  /*-первый слой*/
+	background-color: rgba(0,0,0,0.5);                                        /*-второй слой*/
+	background-blend-mode: multiply;                                           /*- наложение слоев со свойством*/
+	height: 400px;
+	width: 100%;
+	display: flex;
+	flex-flow: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.slider h1 {
+	font-size: 4rem;
+	font-family: Domine, sans-serif;
+	text-shadow: 0px 2px 25px rgba(0, 0, 0, 0.3);
+	color: #fff;
+}
+.slider h2 {
+	font-family: Helvetica, sans-serif;
+	font-size: 2.4rem;
+	text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.15);
+	color:  rgba(255, 255, 255, 0.8);
+}
+.slider h2:hover {
+	color: #fff;
+}
+/*-----------------------------main-cont------------------------------------------------*/
+main p, img {
+	padding: 15px 0;
+}
+.main-cont {
+	padding: 60px 0;
+	background: #fff;
+	line-height: 38px;
+}
+main p:first-child {
+	font-weight: bold;
+}
+main .caption {
+	color: #ababab;
+	font-family: Arial, sans-serif;
+	font-size: 1.4rem;
+	line-height: 26px;
+	text-align: center;
+}
+/*-----------------------------footer------------------------------------------------*/
+.fcontent {
+	width: 1170px;
+	margin: auto;
+}
+footer .copyright {
+	background: rgba(0, 0, 0, 0.85);
+	color: #a6a6a6;
+	padding: 25px 0;
+	text-align: center;
+}
+p span {
+	color: rgb(194, 205, 205);
+}
+footer .social {
+	padding: 30px 0;
+	background:  rgba(0, 0, 0, 0.9);
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: center;
+}
+footer .social a {
+	text-decoration: none;
+	margin: 3px;
+	width: 40px;
+	height: 40px;
+	text-align: center;
+	line-height: 2.4;
+	border-radius: 3px;
+	color: #fff;
+}
+footer .social a.tw {
+	background:  #00b0ef;
+}
+footer .social a.bh {
+	background: #0066ff;
+}
+footer .social a.dr {
+	background: #0083d1;
+}
+footer .social a.fb {
+	background: #265999;
+}
+footer .social a.rs {
+	background: #ff7600;
+}
+footer .social a:hover {
+	background:  rgba(0, 0, 0, 1);
+}

20.07.2017/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<!-- <meta name="viewport"> -->
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+	<link rel="stylesheet" href="css/reset.css">
+	<link rel="stylesheet" href="css/style.css">
+	<title>Project two</title>
+</head>
+<body>
+<div class="container">
+	<header>
+		<div class="content header">
+			<div class="logo">
+				<h1><a href="">Sitename</a></h1>
+				<h2>let me introduce myself</h2>
+			</div>
+			<div class="mainmenu">
+				<nav>
+					<ul class="nav horizontal">
+						<li class="active"><a href="#">Home</a></li>
+						<li><a href="#">Blog</a></li>
+						<li><a href="#">Gallery</a></li>
+						<li><a href="#">Contacts</a></li>
+					</ul>
+				</nav>
+			</div>
+		</div>
+		<div class="slider">
+			<h1>Beautiful WordPress theme for Blogging</h1>
+            <h2>the best WordPress theme developed by myThem.es</h2>
+		</div>
+	</header>
+	<main>
+		<div class="content">
+			<article class="main-cont">
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit velit explicabo quidem, repellat rerum voluptates quis eaque laboriosam dicta, nihil delectus autem sit quo similique ducimus cupiditate, possimus dolorum nemo?
+				</p>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur animi quis porro voluptatibus totam eveniet voluptas ipsa distinctio quod. Odio non maxime vel molestiae, sed commodi iusto similique cum nihil?
+				</p>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error nesciunt aliquam molestias explicabo dolor repudiandae ipsam ratione quo quaerat veniam excepturi voluptas magnam praesentium, officia vero ullam ex adipisci dolorum laudantium quasi repellat temporibus in. Veritatis sit architecto veniam magni, reiciendis nam fugiat a, minima qui error quisquam earum eum.
+				</p>
+				<img src="img/image.jpeg" alt="">
+				<p class="caption">
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam odit sequi ad accusantium, totam officiis nam sunt cumque cupiditate praesentium consectetur commodi! Consectetur, laudantium eum?
+				</p>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore impedit asperiores repellendus sed, illo minima fuga odit nostrum, eveniet vitae sapiente placeat quos, laborum doloremque perspiciatis! Modi animi rem, eaque, tenetur, corporis numquam culpa reprehenderit adipisci id harum sequi libero nesciunt. Quaerat ducimus delectus harum debitis voluptatem, voluptatibus, consequuntur consequatur!
+				</p>
+			</article>
+		</div>
+	</main>
+	<footer>
+		<div class="fcontent">
+			<section class="copyright">
+				<address>
+					<p>
+						Copyright &#169; 2017. Powered by <span>WordPress.</span> Designed by <span>myThem.es</span>
+					</p>
+				</address>
+			</section>
+			<section class="social">
+					<a href="#" class="tw"><i class="fa fa-twitter" aria-hidden="true"></i></a>
+					<a href="#" class="bh"><i class="fa fa-behance" aria-hidden="true"></i></a>
+					<a href="#" class="dr"><i class="fa fa-dropbox" aria-hidden="true"></i></a>
+					<a href="#" class="fb"><i class="fa fa-facebook" aria-hidden="true"></i></a>
+					<a href="#" class="rs"><i class="fa fa-rss" aria-hidden="true"></i></a>
+			</section>
+		</div>
+	</footer>
+</div>
+</body>
+</html>