Second

10.07.2017(training project)/css/style.css

@@ -0,0 +1,289 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+}
+html {
+	font-size: 10px;
+}
+body {
+	font-family: 'Open Sans', sans-serif;
+	font-size: 1.4rem;
+	line-height: 1.7;
+	color: #6B6B6B;
+	background: #F2f2f2;
+}
+img {
+	max-width: 100%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-family: 'Roboto Slab', serif;
+}
+h2 {
+	font-size: 2.8rem;
+}
+main {
+	overflow: hidden;
+	margin: 40px 0;
+}
+header {
+	background: #363636;
+}
+header {
+	position: fixed;
+	width: 100%;
+	top: 0;
+	left: 0;
+	z-index: 1; /*повышает приоритет элементу*/
+}
+/*----------------------------------header------------------------------------*/
+header .head-menu {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	align-items: center;
+	height: 75px;
+}
+header section p a {
+	color: #DADADA;
+	font-weight:  bolder;
+	text-decoration: none;
+	font-size: 20px;
+}
+header .head-menu .menu {
+	list-style: none;
+	text-transform: uppercase;
+	font-size: 12px;
+}
+header li {
+	display: inline;
+	margin-right: 30px;
+}
+header li a {
+	text-decoration: none;
+	color: #fff;
+}
+header li a:hover {
+	color: #DA4453;
+	transition: .3s;
+}
+/*----------------------------------slider----------------------------------------------*/
+section.slider  {
+	background: url(../img/slider.jpg) no-repeat;
+	padding-top: 75px;
+	width: 100%;
+	height: 500px;
+	margin-bottom: 50px;
+	display: flex;
+	flex-flow: column wrap;
+	justify-content: flex-end;
+}
+.inslider {
+	max-width: 1170px;
+	margin: 0 auto;
+	position: absolute;
+	left: 0;
+	right: 0;
+	padding-bottom: 50px;
+}
+section .slider-caption {
+	background: rgba(218, 68, 83, 0.7);
+	font-size: 24px;
+	font-weight:  bolder;
+	padding: 12px 20px;
+	color: #fff;
+	max-width: 350px;
+}
+section .slider-under-caption {
+	background: rgba(59,59,59, 0.8);
+	color: #DDDDDD;
+	padding: 12px 20px;
+	max-width: 600px;
+}
+/*--------------------------------------------------------------------------------------*/
+
+.inner-content {
+	max-width: 1170px;
+	margin: auto;
+}
+main .colum-content {
+	float: left;
+	width: 750px;
+	max-width: 66%;
+}
+main .colum-side {
+	float: left;
+	width: 34%;
+	padding-left: 30px;
+}
+article {
+	margin-bottom: 50px;
+}
+article a.article-prew {
+	transition: opacity .3s;
+}
+article a.article-prew:hover {
+	opacity: 0.8;
+}
+article a img {
+	vertical-align: middle;
+}
+article .article-content {
+	background: #fff;
+	border: 1px solid #dadada;
+	padding: 45px 50px;
+}
+article h2 {
+	margin-bottom: 30px;
+}
+article h2 a {
+	text-decoration: none;
+	color: #444;
+	transition: color 0.3s;
+}
+article h2 a:hover {
+	color: #DA4453;
+}
+article .meta-info {
+	margin-bottom: 30px;
+}
+article .meta-info a {
+	text-decoration: none;
+	color: #6B6B6B;
+	margin-right: 15px;
+}
+article .links {
+	text-align: right;
+	margin-top: 20px;
+}
+article .links .readmore {
+	background: #DA4453;
+	color: #fff;
+	text-decoration: none;
+	padding: 11px 13px;
+	display: inline-block;
+	border-radius: 4px;
+	text-transform: uppercase;
+	transition: background 0.5s;
+	border: 1px solid transparent;
+}
+article .links .readmore:hover {
+	background: #000;
+	border-color: #000;
+}
+/*------------------------------------right----------------------------------------*/
+.colum-side .colum-side-inner {
+	background: #fff;
+	border:1px solid #DADADA;
+	border-radius: 4px;
+	padding: 30px;
+}
+.colum-side .colum-side-inner p {
+	font-weight: bolder;
+	color: #636467;
+	padding-bottom: 25px;
+	text-transform: uppercase;
+}
+.colum-side-inner .social-media {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: flex-start;
+}
+.colum-side-inner .social-media a {
+	height: 40px;
+	width: 40px;
+	color: #fff;
+	margin-right: 5px;
+	margin-bottom: 5px;
+	border-radius: 3px;
+	font-size: 18px;
+	background: #C1C0C0;
+	text-align: center;
+	line-height: 2;
+}
+.colum-side-inner .social-media a.tw:hover {
+	background: #55ACEE;
+}
+.colum-side-inner .social-media a.f:hover {
+	background: #4365B9;
+}
+.colum-side-inner .social-media a.yb:hover {
+	background: #DF3333;
+}
+.colum-side-inner .social-media a.gg:hover {
+	background: #D62408;
+}
+.colum-side-inner .social-media a.vk:hover {
+	background: #5B8BB4;
+}
+
+.colum-side .colum-side-inner .comments-block {
+	color: #C1C0C0;
+	margin-bottom: 10px;
+	padding-bottom: 50px;
+}
+.comments-block ul {
+	list-style: none;
+	padding-left: 0;
+}
+.comments-block ul li span {
+	font-weight: bolder;
+}
+
+.links-block {
+	margin-bottom: 0;
+}
+.links-block .tag-link {
+	display: flex;
+	flex-flow: row wrap;
+}
+.links-block .tag-link a {
+	background: #DADADA;
+	margin-bottom: 4px;
+	margin-right: 4px;
+	padding: 6px 7px;
+	color: #fff;
+	border-radius: 3px;
+	font-size: 12px;
+	text-decoration: none;
+}
+.links-block .tag-link a:hover {
+	background: #DA4453;
+}
+/*------------------------------------footer----------------------------------------*/
+footer {
+	background: #1F1F1F;
+	padding: 10px 0;
+}
+footer .footer-menu {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	align-items: center;	
+}
+footer .footer-menu .menu{
+	padding-left: 0;
+}
+footer li {
+	display: inline;
+	margin-right: 30px;
+}
+footer li a {
+	color: #DADADA;
+	text-decoration: none;
+	padding: 10px 15px;
+}
+footer li a:hover {
+	color: #FFF;
+}
+footer address {
+	color: #999;
+	font-size: 12px;
+	font-style: normal;
+}
+footer address span {
+	color: #DADADA;
+}

10.07.2017(training project)/index.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Project one</title>
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+	<link rel="stylesheet" href="css/style.css">
+	
+</head>
+<body>
+	<header>
+		<div class="inner-content"> 
+		<section class="head-menu">
+			<p><a href="#">Module #1</a></p>
+			<ul class="menu">
+				<li><a href="#">Home</a></li>
+				<li><a href="#">Downloads</a></li>
+				<li><a href="#">Gallery</a></li>
+				<li><a href="#">Contact us</a></li>
+				<li><a href="#">About</a></li>
+			</ul>
+		</section>
+		</div>
+	</header>
+	<section class="slider">
+			<div class="inslider">
+				<div class="slider-caption">
+					<p>A-Level: Front-End course</p>
+				</div>
+				<div class="slider-under-caption">
+					<p>Semantic elements are elements with a meaning. A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: &lt;div&gt; and &lt;span&gt; - tells nothing about its content. Examples of semantic elements: &lt;table&gt;, and &lt;img&gt; - clearly defines its content.</p>
+				</div>
+			</div>
+	</section>
+	<main class="inner-content">
+			<section class="colum-content">
+				<article>
+					<a class="article-prew" href="#"><img src="img/slider-wallpaper-colorlib-750x410.png" alt="">
+					</a>
+					<div class="article-content">
+						<h2><a href="">HTML Layot Using &lt;div&gt; Element</a></h2>
+						<div class="meta-info">
+							<a href=""><i class="fa fa-calendar"></i>&nbsp;20-07-2017</a>
+						 	<a href=""><i class="fa fa-user"></i>&nbsp;Admin</a>
+							<a href=""><i class="fa fa-comment"></i>&nbsp;15 comments</a>
+						</div>
+					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, sed quia consequuntur, illo, fugit, sunt dolorum natus libero consequatur commodi repellat enim! Officiis, deleniti dolorem alias quia quod commodi magni!</p>
+					<div class="links">
+						<a class="readmore" href="#">Read more</a>
+					</div>
+					</div>
+				</article>
+				<article>
+					<a class="article-prew" href="#"><img src="img/instagram_logo_new-750x410.jpg" alt="">
+					</a>
+					<div class="article-content">
+						<h2><a href="">HTML Layot Using &lt;div&gt; Element</a></h2>
+						<div class="meta-info">
+							<a href=""><i class="fa fa-calendar"></i>&nbsp;20-07-2017</a>
+						 	<a href=""><i class="fa fa-user"></i>&nbsp;Admin</a>
+							<a href=""><i class="fa fa-comment"></i>&nbsp;15 comments</a>
+						</div>
+					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, sed quia consequuntur, illo, fugit, sunt dolorum natus libero consequatur commodi repellat enim! Officiis, deleniti dolorem alias quia quod commodi magni!</p>
+					<div class="links">
+						<a class="readmore" href="#">Read more</a>
+					</div>
+					</div>
+				</article>
+			</section>
+			<div class="colum-side">
+				<section class="colum-side-inner">
+					<article class="social-block">
+						<p>Follow us </p>
+						<div class="social-media">
+							<a href="#" class="tw"><i class="fa fa-twitter" aria-hidden="true"></i></a>
+							<a href="#" class="f"><i class="fa fa-facebook" aria-hidden="true"></i></a>
+							<a href="#" class="gg"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
+							<a href="#" class="yb"><i class="fa fa-youtube" aria-hidden="true"></i></a>
+							<a href="#" class="vk"><i class="fa fa-vk" aria-hidden="true"></i></a>
+						</div>
+					</article>
+					<article class="comments-block">
+						<p>Resent comments</p>
+						<ul class="comments">
+							<li><i class="fa fa-comment-o"></i>&nbsp;<span>Jon</span> on How to Use WordPress Pingbacks And Trackbacks</li>
+							<li><i class="fa fa-comment-o"></i>&nbsp;<span>maayan</span> on How to Use WordPress Pingbacks And Trackbacks</li>
+							<li><i class="fa fa-comment-o"></i>&nbsp;<span>banar</span> on How to Use WordPress Pingbacks And Trackbacks</li>
+							<li><i class="fa fa-comment-o"></i>&nbsp;<span>fra</span> Use HTML5 and CSS3 technologies</li>
+							<li><i class="fa fa-comment-o"></i>&nbsp;<span>dan</span> on This is how comments will be displayed on Spakrkling WP Theme</li>
+						</ul>
+					</article>
+					<article class="links-block">
+						<p>Tags</p>
+						<section class="tag-link">
+							<a href="#">8BIT</a>
+							<a href="#">aligmint</a>
+							<a href="#">Articles</a>
+							<a href="#">aside</a>
+							<a href="#">audio</a>
+							<a href="#">captions</a>
+							<a href="#">categories</a>
+							<a href="#">chat</a>
+							<a href="#">Codex</a>
+							<a href="#">comments</a>
+							<a href="#">content</a>
+							<a href="#">css</a>
+							<a href="#">dowork</a>
+							<a href="#">edge case</a>
+							<a href="#">embeds</a>
+							<a href="#">excerpt</a>
+							<a href="#">Fail</a>
+							<a href="#">featured image</a>
+							<a href="#">firmatting</a>
+							<a href="#">FTW</a>
+							<a href="#">Fun</a>
+							<a href="#">gallery</a>
+							<a href="#">html</a>
+							<a href="#">image</a>
+							<a href="#">jetpack</a>
+							<a href="#">layout</a>
+							<a href="#">link</a>
+							<a href="#">lists</a>
+							<a href="#">Love</a>
+							<a href="#">markup</a>
+							<a href="#">media</a>
+							<a href="#">Mothership</a>
+							<a href="#">Must Read</a>
+							<a href="#">Nailed it</a>
+							<a href="#">pagination</a>
+							<a href="#">Post Formats</a>
+							<a href="#">quote</a>
+							<a href="#">shortcode</a>
+							<a href="#">standart</a>
+							<a href="#">template</a>
+							<a href="#">title</a>
+							<a href="#">twitter</a>
+							<a href="#">video</a>
+							<a href="#">videopress</a>
+							<a href="#">worldpress.tv</a>
+						</section>
+					</article>
+				</section>
+			</div>
+		</div>
+	</main>	
+	<footer>
+		<div class="inner-content">
+			<section class="footer-menu">	
+				<ul class="menu">
+					<li><a href="#">Home</a></li>
+					<li><a href="#">Downloads</a></li>
+					<li><a href="#">Gallery</a></li>
+					<li><a href="#">Contact us</a></li>
+					<li><a href="#">About</a></li>
+				</ul>
+				<address class="coprg">
+					<p><span>Sparking</span> All righhts reserved. Theme by <span>Colorlib</span> Powered by <span>WorldPress</span></p>
+				</address>
+			</section>
+		</div>
+	</footer>
+	
+</body>
+</html>

29.06.2017/1/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>First task</title>
+</head>
+<body>
+	<header>
+		<h1>heading1</h1>
+		<h2>heading2</h2>
+	</header>
+	<nav>
+		<a href="#">heading1</a>
+		<a href="#">heading2</a>
+	</nav>
+	<article>
+		<h3>heading3</h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde laudantium a sequi, necessitatibus deserunt nemo, natus tempora voluptatibus, accusantium harum facere saepe neque ab earum sapiente quisquam deleniti dicta dolorum.</p>
+	</article>
+	<details>
+		<summary>first text</summary>
+		<P><dfn>Lorem ipsum dolor sit amet,</dfn> consectetur adipisicing elit. Sint dolore sunt, ut placeat commodi, recusandae error. Doloribus eaque, praesentium, nam consequuntur facilis obcaecati provident mollitia, nesciunt amet excepturi aliquam accusantium!</P>
+	</details>
+	<footer>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi sit harum, optio dignissimos sequi deleniti rerum laudantium. Assumenda incidunt ea voluptatum illo delectus, perferendis rerum placeat, magni modi tempore quisquam quam laborum inventore numquam a eum non impedit consequuntur similique officiis praesentium, neque nulla? Ipsum eius possimus, minus impedit ab.</p>
+		<address>Kharkov</address>
+		<time>2017-06-30</time>
+	</footer>
+
+	<ul>
+		<li><a href="../2/index.html">Second task</a></li>
+		<li><a href="../3/index.html">Third task</a></li>
+		<li><a href="../4/index.html">Fourth task</a></li>
+	</ul>
+</body>
+</html>

29.06.2017/2/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Second task</title>
+</head>
+<body>
+	<header>
+		<h1>Site name</h1>
+		<img src="img/Gplus_gray.png" alt="">
+	</header>
+	<main>
+		<article>
+			<h2>Article 1 heading</h2>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem tenetur dolorum, itaque natus nemo animi at, dolorem recusandae repellendus obcaecati, commodi id vel neque distinctio rerum dolore amet ea quas!</p>
+		</article>
+		<article>
+			<h2>Article 2 heading</h2>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus repellat soluta impedit maxime voluptate ut at neque? Et sint sed pariatur, labore tempora, illum, vel unde ducimus reiciendis voluptates illo.</p>
+		</article>
+		<article>
+			<h2>Article 3 heading</h2>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse perspiciatis est, maxime. Maxime optio possimus, neque quasi ea in itaque, quidem similique excepturi architecto illum, harum vitae iusto consequatur asperiores.</p>
+		</article>
+	</main>
+	
+	<ul>
+		<li> Item 1
+			<ul>
+				<li>Nested element 1</li>
+				<li>Nested element 2</li>
+				<li>Nested element 3</li>
+				<li>Nested element 4</li>
+			</ul>
+		</li>
+		<li>Item 2</li>
+		<li>Item 3</li>
+	</ul>
+
+	<footer>
+		<addres>Kharkiv, Ukraine</addres>
+		<p><dfn>&copy All rights reserved</dfn></p>
+	</footer>
+	<ul>
+		<li><a href="../1/index.html">First task</a></li>
+		<li><a href="../3/index.html">Third task</a></li>
+		<li><a href="../4/index.html">Fourth task</a></li>
+	</ul>
+</body>
+</html>

29.06.2017/3/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Third task</title>
+</head>
+<body>
+
+	<p><em>Если я правильно понял задание то результаты выполнения таковы :</em></p>
+	<ui>
+		<li>http://www.radiorecord.ru/  - при просмотре исходного кода старниц сайта - отсутствует элемент footer </li>
+		<li>http://www.game-consoles-parts.com.ua/ - при просмотре исходного кода страниц - отсутствуют элементы html5 </li>
+		<li>Думаю что к "симантически хорошему" можно отнести данный пример - https://docs.emmet.io/cheat-sheet/</li>
+	</ui>
+	<ul>
+		<li><a href="../1/index.html">First task</a></li>
+		<li><a href="../2/index.html">Second task</a></li>
+		<li><a href="../4/index.html">Fourth task</a></li>
+	</ul>
+</body>
+</html>

29.06.2017/4/index.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Fourth task</title>
+</head>
+<body>
+	<header>
+		<h1>Fill the form</h1>
+	</header>
+	<form action="#">
+		<p>
+			<input type="text" name="user" >
+			User name 
+		</p>
+		<p>
+			<input type="text" name="email">
+			E-mail 
+		</p>
+		<p>
+			<input type="password" name="password">
+			Password
+		</p>
+		<p> Sex :
+			<input type="radio" name="Sex" value="male"> Male
+			<input type="radio" name="Sex" value="female"> Female
+		</p>
+		<p>
+			<input type="text" maxlength="2" pattern="[0-9]{2}"> Age
+		</p>
+		<p> Married :
+			<input type="checkbox" name="married" value="yes"> Yes
+			<input type="checkbox" name="married" value="no"> No
+		</p>
+		<p> 							
+			<input type="tel" pattern="[+]38-[0-9]{3}-[0-9]{3}-[0-9]{2}-[0-9]{2}"> Phone in format : +38 (000) 000-00-00
+		</p>
+		<p>
+			<select name="city" size="1">
+				<option value="Kharkiv">Kharkiv</option>
+				<option value="Izum">Izum</option>
+				<option value="Kiev">Kiev</option>
+				<option value="Dnipro">Dnipro</option>
+				<option value="Krasnodon">Krasnodon</option>
+				<option value="Belgorod">Belgorod</option>
+				<option value="Lviv">Lviv</option>
+				<option value="Rovno">Rovno</option>
+			</select> Choose city
+		</p>
+		<p> 
+			<textarea name="about" cols="21" rows="6"></textarea>
+			 About
+		</p>
+		<p>
+			<input type="submit" value="Submit">
+		</p>
+	</form>
+	<ul>
+		<li><a href="../1/index.html">First task</a></li>
+		<li><a href="../2/index.html">Second task</a></li>
+		<li><a href="../3/index.html">Third task</a></li>
+	</ul>
+</body>
+</html>