Skip to content

Commit

Permalink
sync
Browse files Browse the repository at this point in the history
  • Loading branch information
kokolina1888 committed Nov 27, 2016
1 parent cf67195 commit be3809a
Show file tree
Hide file tree
Showing 14 changed files with 373 additions and 0 deletions.
Binary file added CSS_layout/gr1/car.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions CSS_layout/gr1/index.html
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="#">link link</a>
<ul>
<li><a href="">list item 1</a></li><li>
<a href="">list item 1</a></li><li>
<a href="">list item 1</a></li>

</ul>

</body>
</html>
42 changes: 42 additions & 0 deletions CSS_layout/gr1/positioning.html
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style_p.css">
</head>
<body>
<div id="container">
<div id="first">
<img src="car.jpg">
<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. 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 id="second">
<img src="car.jpg">
<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. 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 id="third">
<img src="car.jpg">

<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. 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>

</body>
</html>
21 changes: 21 additions & 0 deletions CSS_layout/gr1/style.css
@@ -0,0 +1,21 @@
html, body, a, ul, li {
margin: 0;
padding: 0;
}
a {
background-color: red;
text-decoration: none;
}


li {
background-color: blue;
display: inline-block;
width: 100px;
height: 50px;
list-style-type: none;
border: 3px solid #11D51A;
/*padding: 10px;
margin: 10px;*/
color: #fff;
}
25 changes: 25 additions & 0 deletions CSS_layout/gr1/style_p.css
@@ -0,0 +1,25 @@
html, body, div, p, img {
margin: 0;
padding: 0;
}
body {
background-color: #E81414
}
#container div {
width: 30%;
background-color: #5BDEBB;
height: 800px;
position: absolute;
top: 0;
}
img {
width: 80%;
}
#second {
left: 31%;
}
#third {
left: 62%
}


Binary file added CSS_layout/gr2/car.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 45 additions & 0 deletions CSS_layout/gr2/index.html
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li><a href="#">link</a></li><li>
<a href="#">link</a></li><li>
<a href="#">link</a></li>
</ul>
<div id="wrapper">
<div id="first">
<img src="car.jpg">
<p id="bl">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
<span>tempor incididunt ut labore et </span>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. 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 id="second">
<img src="car.jpg">
<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. 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 id="gallery">
<img src="car.jpg">
<img src="car.jpg">
</div>
</div>

</body>
</html>
56 changes: 56 additions & 0 deletions CSS_layout/gr2/style.css
@@ -0,0 +1,56 @@
html, body, ul, li,
a, img, p, div {
margin: 0;
padding: 0
}
body{
background-color: #F50D0D
}
li {
background-color: #C39191;
display: inline-block;
width: 46px;
height:26px;
padding: 5px;
border: 2px solid #000;
/*margin: 10px*/
}
img {
width: 150px
}

#bl {
background-color: #FBDB06
}
/*span {
background-color: #0E32E9;
padding: 10px;
padding-top: 18px
}*/
li a {
padding: ;
}
/*#first {
position: relative;
top: 20px
}*/
#wrapper {
position: relative;
height: 500px;
background-color: #11AFF9
}
div {
width: 44%
}
#first, #second {
position: absolute;

}
#second {
top: 0;
left: 50%;
}
#gallery {
position: absolute;
top: 400px
}
25 changes: 25 additions & 0 deletions CSS_presentation/group1/index.html
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a class="demo" href="" ></a>
<img src="" width="">
<a class="demo" href="" ></a>
<img class="demo" src="" width="">
<a href="" ></a>
<img src="" width="">
<p></p>
<p></p>
<p id="strange"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

</body>
</html>
15 changes: 15 additions & 0 deletions CSS_presentation/group1/style.css
@@ -0,0 +1,15 @@
a, #strange {
background-color: red;
}
.demo, #strange {

}
table {
border: 1px solid #000;
border-collapse: collapse;
/*border-top: 1px solid #ccc;*/

}
td {
border: 1px solid #000;
}
31 changes: 31 additions & 0 deletions CSS_presentation/group1/table.html
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>

</body>
</html>
22 changes: 22 additions & 0 deletions CSS_presentation/group2/index.html
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<input type="" name="" class="class-name">
</form>

<div class="class-name">
<p>
<a href=""></a>
</p>
<p>
<a href=""></a>
</p>
</div>
</body>
</html>
25 changes: 25 additions & 0 deletions CSS_presentation/group2/style.css
@@ -0,0 +1,25 @@
body {
background-color: #F80E1F;
color: #ccc;
font-size: 15px
}

#name {

}

div.class-name:nth-child(2){
color: red;
}

table, td {
border: 1px solid #000;
border-collapse: collapse;
/*border-style: solid;
border-width: 1px;*/
}

/*td{
border: 1px solid #000;
}*/
48 changes: 48 additions & 0 deletions CSS_presentation/group2/table.html
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>

</body>
</html>

0 comments on commit be3809a

Please sign in to comment.