Homework discussion
In lastlesson I gave your homework (for fixation of last material). In this lesson we’ll consider this homework.
Code lesson (HTML)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!--<link rel="stylesheet" href="style.css">-->
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div id="resume">
<h1>Абзалов Камиль</h1>
<div class="likes">
<h2>Увлечения</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>спорт</li>
</ul>
</div>
<div class="me">
<h2>Ссылка</h2>
<a href="#"><img src="http://placekitten.com/g/250/300" alt=""></a>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>Code lesson (CSS)
body {
background-color: gray;
}
#resume {
width: 700px;
margin: 0 auto;
border: 1px solid #fff;
color: #fff;
}
.likes, .me {
float: left;
width: 45%;
}
#resume h1, h2 {
text-align: center;
}
ul li {
margin-bottom: 10px;
font-size: 18px;
}
a {
display: block;
text-align: center;
}
[/code]
[code lang="css"]
body {
background-color: gray;
}
#resume {
width: 700px;
margin: 0 auto;
border: 1px solid #fff;
color: #fff;
position: relative;
height: 500px;
}
#resume h1, h2 {
text-align: center;
}
ul li {
margin-bottom: 10px;
font-size: 18px;
}
a {
display: block;
text-align: center;
}
.likes, .me {
position: absolute;
}
.likes {
left: 30px;
}
.me {
right: 30px;
}
0 Comments