<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Programing4you-software house </title>
<meta name="description" content="+++++++++++m">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="ractangle">
<center>
<div id="nav">Programing4You-Software Room </div>
<div id="poster">
<img src="poster.img" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAM
AAADsEZWCAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAADsMAAA7DAc
dvqGQAAAAtUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMGgKD4A
AAAPdFJOUwL98gzTvBkvSqZfk3DjgPrfG5YAAAJKSURBVDgRvVO9ixNREP/
hXjYfxsAsyXkfycHioYLNYuMHFnmIXCFK9kT
0rMJpY3GSaBCukU0jogjJFVcngn0CgoVN4tWC4cBOyDWC4h/h773N5nbBVgd2vn7zZufNzAP+K9l76wd//+GCSCXQUPqDcy8R0t+4rFbpsX0RCeKQ30NeOs
Bn56M1PIwjbh1oTXFF9oHUSgyxHGPY6jxlTqeNyKoYbadYp8wsR27K8Ex6ckf78vEzEO3aKXlapJY0j2hS50FVM2bzT
OTV0g8YW/S0ikc9I2ZsOII1POfFXaFuD2/ccnn79a1fzxLoG0WvVL67Wtx8OcesL+JsrjxXHeDS659K5IE3w97K7Ua2XKjM7BebcqFuoILcZ0dKzfktrPey
aqL6ZQZYjj8AHlKr89uVDXKokeY+k7VkgLRpWstpRC3DmK1XUoat5wGre0juEgbGi7BFSkB3qs0FPaPudTLLXYMlwlTNrzTDfpuhFCqc0FBOM9rUWFgjnFYs
/+KSCpDfajDalPCUMeDwqxjX+lWqJNvxOFa3o3XsTqGCU9FN/QAZf9kzC
GMqyBVn+niAtjOaGcjyh6oXWs0qHh9EAE4sAu2zoan1Y2pXOezZMiUX5GjAotwAmk7qDs+
J9bBB34ydXDfTxhS7RsqEwujsmJb2ZKBFOoGEC980jyCBhMuLnPR4JpENqsEsdTO+5CPBUQd2t8ZnNwCyiaq3S6/2HKZ6VwywbQbAtI
Yy3M59aulJ6bfeyBg9ufvDWNdcMe8uBkXq1U/HfY58/1b+AcA7aR+ruHXXAAAAAElFTkSuQmCC">
</div>
</center>
</div>
<div class="squere">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur imperdiet finibus commodo. In at lorem vel
felis varius malesuada. Nulla semper sagittis convallis. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus
<p>non metus tincidunt nunc vulputate laoreet.
Sed sollicitudin dui ac pretium dictum. Suspendisse et suscipit ipsum. Mauris pretium
aliquam orci, luctus gravida mauris
finibus vitae. Aliquam pretium nibh eget pulvinar efficitur. Donec eget neque volutpat ligula laoreet
ultrices sed quis dolor. Phasellus tristique eros non ex volutpat pulvinar. In faucibus dapibus purus
id facilisis. Cras mollis enim quis feugiat volutpat. Vivamus venenatis tellus</p>
ellus, sit amet rutrum quam auctor in. Vivamus condimentum, felis sit amet porttitor
auctor, mi augue efficitur erat, at blandit erat magna
emper lorem. Ut ut libero euismod, rhoncus lacus eget, lobortis lectus.</p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
body
{
background-color: #303030;
color: #ffffff;
font-family: 'Roboto', sans-serif;
font-size: 21px;
}
#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.ractangle
{
width: 960px;
margin: 20px;
}
.squere
{
width: 960px;
}
.footer
{
width: 960px;
}
#nav
{
width: 780px;
height: 27px;
}
#poster
{
width: 780px;
height: 499px;
}
Wkleiłem dla was HTML'a i CSS'a. Jak zrobić żeby ikona (Atom Edytor) była na zdjęciu macbooka na samym dole. (Będzie ich kilka, jeszcze niewiem czy będą na środku czy gdzie. Muszę potestować) Strona wczesnej fazie tworzenia. Jeszcze coś jak zmienić kolor tego i dodać tekst pod spód.
Za wszystkie odpowiedzi i komentarze dziękuję. Pozdro!!