123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- /* Добавил внешние отступы, чтобы было красивее
- и были видны границы */
- body {
- margin-left: 50px;
- margin-top: 50px;
- }
- /* 2.Второй уровень */
- p:first-child {
- width: 350px;
- height: 220px;
- padding: 15px 10px 20px 10px;
- margin-bottom: 30px;
- border: 2px red dashed;
- background: #0ada0a;
- }
- /* 3.Третий уровень
- Добавил рамку, чтобы показать внутренние отступы,
- потому что в оригинале отступы есть */
- .block {
- border: 1px red solid;
- width: 615px;
- text-align: justify;
- padding: 8px 10px 15px 6px;
- margin-bottom: 10px;
- box-sizing: border-box;
- }
- .photo-html {
- width: 200px;
- height: 112px;
- float: left;
- padding: 0 20px 5px 0;
- }
- .photo-53 {
- width: 150px;
- height: 85px;
- float: right;
- padding: 25px 0 15px 20px;
- }
- /* 4.Четвертый уровень */
- .positive {
- margin: 50px;
- position: relative;
- }
- .pink {
- background: #e72344;
- width: 100px;
- height: 100px;
- }
- .green {
- background: #09c212;
- width: 100px;
- height: 100px;
- z-index: 2;
- position: absolute;
- left: 120px;
- top: 120px;
- margin-bottom: 50px;
- }
- .blue {
- background: #0a32e2;
- width: 100px;
- height: 100px;
- position: absolute;
- top: 60px;
- left: 60px;
- z-index: 3;
- }
|