Home Explore Help
Sign In
pavelefimen95
/
homework
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

commit

Pavel 7 years ago
parent
883f6195f5
commit
0cabd9c656
8 changed files with 396 additions and 0 deletions
Split View Show Diff Stats
  1. 252 0
      HWFromPSD/css/styles.css
  2. BIN
      HWFromPSD/images/banner.jpg
  3. BIN
      HWFromPSD/images/image1.jpg
  4. BIN
      HWFromPSD/images/image2.jpg
  5. BIN
      HWFromPSD/images/image3.jpg
  6. BIN
      HWFromPSD/images/image4.jpg
  7. BIN
      HWFromPSD/images/logo.png
  8. 144 0
      HWFromPSD/index.html

+ 252 - 0
HWFromPSD/css/styles.css
View File 

@@ -0,0 +1,252 @@
 
+html {
 
+	font-size: 10px;
 
+}
 
+
 
+body {
 
+	margin: 0 auto;
 
+	padding: 0;
 
+	background: #e7e7e7;
 
+	font-size: 1.3rem;
 
+	color: #000;
 
+	font-family: Arial, sans-serif;
 
+}
 
+
 
+body * {
 
+	box-sizing: border-box;
 
+}
 
+
 
+h1 {
 
+	font-size: 3rem;
 
+	font-weight: bold;
 
+	color: #838383;
 
+}
 
+
 
+h2 {
 
+	font-size: 2rem;
 
+	font-weight: bold;
 
+	color: #838383;
 
+}
 
+
 
+p {
 
+	margin: 0;
 
+	padding: 0;
 
+}
 
+
 
+.clearfix::after {
 
+	content: "";
 
+	display: block;
 
+	clear: both;
 
+}
 
+
 
+.container {
 
+	width: 1000px;
 
+	margin: 0 auto;
 
+}
 
+
 
+.container-main {
 
+	width: 1000px;
 
+	margin: 0 auto;
 
+	background-color: #fff;
 
+}
 
+
 
+.container-main-inner {
 
+	margin: 0 auto;
 
+	width: 974px;
 
+}
 
+
 
+header {
 
+	background: #171616;
 
+	height: 60px;
 
+	color: #686868;
 
+}
 
+
 
+header form {
 
+	float: right;
 
+	margin-top: 16px;
 
+}
 
+
 
+header p {
 
+	line-height: 11px;
 
+	font-size: 1.2rem;
 
+}
 
+
 
+.logo {
 
+	display: inline-block;
 
+	margin-top: 12px;
 
+}
 
+
 
+header input:first-child {
 
+	background: #323232;
 
+	border: 1px solid #4c4c4c;
 
+	box-shadow: inset 0 0 3px #000;
 
+	height: 27px;
 
+	color: #fff;
 
+	width: 350px;
 
+	outline: none;
 
+}
 
+
 
+header input:nth-of-type(2) {
 
+	background: #000;
 
+	font-family: Arial, sans-serif;
 
+	font-weight: bold;
 
+	color: #fff;
 
+	font-size: 1.4rem;
 
+	height: 27px;
 
+	border: 1px solid #4c4c4c;
 
+	margin-left: 11px;
 
+	width: 75px;
 
+	outline: none;
 
+}
 
+
 
+.banner {
 
+	background: #000;
 
+	position: relative;
 
+	height: 329px;
 
+}
 
+
 
+.banner-text {
 
+	height: 57px;
 
+	background: rgba(0, 0, 0, .5);
 
+	width: 100%;
 
+	position: absolute;
 
+	bottom: 0px;
 
+	color: #fff;
 
+	padding: 14px 20px;
 
+	font-size: 1.2rem;
 
+}
 
+
 
+.nav-bar nav {
 
+	background: #000;
 
+}
 
+
 
+.nav-bar ul {
 
+	margin: 0;
 
+	padding: 0;
 
+	list-style: none;
 
+}
 
+
 
+.nav-bar li {
 
+	display: inline-block;
 
+}
 
+
 
+.nav-bar a{
 
+	text-decoration: none;
 
+	color: #fff;
 
+	font-weight: bold;
 
+	font-size: 1.4rem;
 
+	padding: 7px 24px;
 
+	border-right: 1px solid #272727;
 
+	line-height: 30px;
 
+}
 
+
 
+.we-do a {
 
+	color: #0075d0;
 
+}
 
+
 
+.we-do h1 {
 
+	margin-top: 0;
 
+	padding-top: 30px;
 
+	margin-bottom: 8px;
 
+}
 
+
 
+.we-do span {
 
+	font-style: italic;
 
+}
 
+
 
+.we-do h2 {
 
+	margin-top: 38px;
 
+}
 
+
 
+.we-do img {
 
+	border: 12px solid #e2e2e2;
 
+	margin-right: 19px;
 
+}
 
+
 
+.we-do img:last-child {
 
+	margin-right: 0;
 
+}
 
+
 
+.lists h2 {
 
+	margin-bottom: 0;
 
+	margin-top: 25px;
 
+}
 
+
 
+.lists ul, .lists ol, .lists dl {
 
+	display: inline-block;
 
+	width: 33%;
 
+}
 
+
 
+.lists ol {
 
+	padding-left: 20px;
 
+	width: 32%;
 
+}
 
+
 
+.lists {
 
+	line-height: 20px;
 
+}
 
+
 
+table {
 
+	border-collapse: collapse;
 
+	width: 99.5%;
 
+}
 
+
 
+.table h2 {
 
+	margin-bottom: 15px;
 
+}
 
+
 
+th {
 
+	text-align: left;
 
+}
 
+
 
+thead {
 
+	background: #efefef;
 
+}
 
+
 
+td, th {
 
+	border: 1px solid #d5d5d5;
 
+	padding: 8px 9px;
 
+}
 
+
 
+form * {
 
+	margin-bottom: 10px;
 
+}
 
+
 
+#text-input, #select{
 
+	width: 224px;
 
+	height: 30px;
 
+	padding-left: 5px;
 
+}
 
+
 
+.checkbox {
 
+	border: 1px solid #000;
 
+}
 
+
 
+.radio {
 
+	margin-bottom: 20px;
 
+}
 
+
 
+.submit {
 
+	padding: 7px 10px;
 
+	background: #202020;
 
+	color: #fff;
 
+	font-family: Arial, sans-serif;
 
+	font-size: 1.4rem;
 
+	font-weight: bold;
 
+	height: 35px;
 
+	padding: 0 24px;
 
+	border: 1px solid #4c4c4c;
 
+	outline: none;
 
+	margin-bottom: 25px;
 
+}
 
+
 
+footer {
 
+	padding: 9px 0;
 
+	color: #656565;
 
+}
 
+
 
+footer a {
 
+	color: #0075d0;
 
+}
 
+
 
+
 
+

BIN
HWFromPSD/images/banner.jpg
View File


BIN
HWFromPSD/images/image1.jpg
View File


BIN
HWFromPSD/images/image2.jpg
View File


BIN
HWFromPSD/images/image3.jpg
View File


BIN
HWFromPSD/images/image4.jpg
View File


BIN
HWFromPSD/images/logo.png
View File


+ 144 - 0
HWFromPSD/index.html
View File 

@@ -0,0 +1,144 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<title>HW3</title>
 
+	<link rel="stylesheet" href="css/styles.css">
 
+</head>
 
+<body>
 
+	<header>
 
+		<div class="container clearfix">
 
+			<div class="logo">
 
+				<img src="images/logo.png" alt="Black and White">
 
+				<p>Lorem ipsum dolor sit amet</p>
 
+			</div>
 
+			<form action="url">
 
+				<input type="text" name="text-search">
 
+				<input type="submit" name="button-search" value="Search">
 
+			</form>
 
+		</div>
 
+	</header>
 
+	<section class="banner">
 
+		<div class="container">
 
+			<img src="images/banner.jpg" alt="img">
 
+			<div class="banner-text">
 
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br>
 
+				sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
+			</div>
 
+		</div>
 
+	</section>
 
+	<section class="nav-bar">
 
+		<div class="container clearfix">
 
+			<nav>
 
+				<ul>
 
+					<li><a href="#">Home</a></li>
 
+					<li><a href="#">About</a></li>
 
+					<li><a href="#">Work</a></li>
 
+					<li><a href="#">Blog</a></li>
 
+					<li><a href="#">Contact</a></li>
 
+				</ul>
 
+			</nav>
 
+		</div>
 
+	</section>
 
+	<main>
 
+		<div class="container-main">
 
+			<div class="container-main-inner">
 
+				<div class="we-do">
 
+					<h1>What we do</h1>
 
+					<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>, 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 <span>commodo consequat</span>. 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 
+					ollit anim id est laborum.</p>
 
+					<h2>Images</h2>
 
+					<img src="images/image1.jpg" alt="img">
 
+					<img src="images/image2.jpg" alt="img">
 
+					<img src="images/image3.jpg" alt="img">
 
+					<img src="images/image4.jpg" alt="img">
 
+				</div>
 
+				<div class="lists">
 
+					<h2>Lists and Descriptions</h2>
 
+					<ul>
 
+						<li>Sed ut perspiciatis unde omnis iste natus</li>
 
+						<li>Lorem ipsum dolor sit amet, consectetur</li>
 
+						<li>At vero eos et accusamus et iusto odio</li>
 
+						<li>Et harum quidem rerum facilis est</li>
 
+					</ul>
 
+					<ol>
 
+						<li>Sed ut perspiciatis unde omnis iste natus</li>
 
+						<li>Lorem ipsum dolor sit amet, consectetur</li>
 
+						<li>At vero eos et accusamus et iusto odio</li>
 
+						<li>Et harum quidem rerum facilis est</li>
 
+					</ol>
 
+					<dl>
 
+						<dt>Sed ut perspiciatis unde omnis iste natus</dt>
 
+							<dd>Lorem ipsum dolor sit amet, consectetur</dd>
 
+						<dt>At vero eos et accusamus et iusto odio</dt>
 
+							<dd>Et harum quidem rerum facilis est</dd>
 
+					</dl>
 
+				</div>
 
+				<div class="table">
 
+					<h2>Table</h2>
 
+					<table>
 
+						<thead>
 
+							<tr>
 
+								<th>Lorem</th>
 
+								<th>Sed ut perspiciatis unde</th>
 
+								<th>Sed ut perspiciatis unde</th>
 
+								<th>Sed ut perspiciatis unde</th>
 
+							</tr>
 
+						</thead>
 
+						<tr>
 
+							<td>At vero eos et</td>
 
+							<td>At vero eos et</td>
 
+							<td>At vero eos et</td>
 
+							<td>At vero eos et</td>
 
+						</tr>
 
+						<tr>
 
+							<td>At vero eos et</td>
 
+							<td>At vero eos et</td>
 
+							<td>At vero eos et</td>
 
+							<td>At vero eos et</td>
 
+						</tr>
 
+						<tr>
 
+							<td>At vero eos et</td>
 
+							<td>At vero eos et</td>
 
+							<td>At vero eos et</td>
 
+							<td>At vero eos et</td>
 
+						</tr>
 
+						<tr>
 
+							<td>At vero eos et</td>
 
+							<td>At vero eos et</td>
 
+							<td>At vero eos et</td>
 
+							<td>At vero eos et</td>
 
+						</tr>
 
+					</table>
 
+				</div>
 
+				<div class="forms">
 
+					<form action="url">
 
+						<h2>Forms</h2>
 
+						<label for="text-input">Text:</label><br>
 
+						<input type="text" id="text-input" placeholder="Input type text"><br>
 
+						<label for="select">Select:</label><br>
 
+						<select id="select">
 
+							<option value="Option">Option</option>
 
+							<option value="Option">Option</option>
 
+							<option value="Option">Option</option>
 
+							<option value="Option">Option</option>
 
+						</select><br>
 
+						<input type="checkbox" class="checkbox">
 
+						<span>Sed ut perspiciatis unde omnis iste natus</span><br>
 
+						<input type="radio" class="radio">
 
+						<span>Lorem ipsum dolor sit amet, consectetur</span><br>
 
+						<label for="textarea">Textarea:</label><br>
 
+						<textarea id="textarea" cols="40" rows="8"></textarea><br>
 
+						<input type="submit" class="submit" value="Button">
 
+					</form>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	</main>
 
+	<footer>
 
+		<div class="container">
 
+			© Footer content <a href="#">Link footer</a>
 
+		</div>
 
+	</footer>
 
+</body>
 
+</html>