{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня мы напишем первый сайт, использую все то что мы узнали из прошлых статей. Начнем!","type":"unstyled","key":"erqre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В HTML создадим несколько блоков.","type":"unstyled","key":"sdjh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Блок шапки сайта \"head\"","type":"unordered-list-item","key":"bbq1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Блок подвала сайта \"down\"","type":"unordered-list-item","key":"3hq1f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Блок страницы с информацией \"page\"","type":"unordered-list-item","key":"4508d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Три текстовых блока \"text1, text2,text3\"","type":"unordered-list-item","key":"dlo1f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Один блок с картинкой \"img\"\n","type":"unordered-list-item","key":"dh6fs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Мой первый сайт

","type":"unstyled","key":"5ntqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"5d4g2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Lorem ipsum dolor sit, amet consectetur adipisicing elit.\nDeleniti earum soluta dolore iusto eius molestiae veniam corrupti,\neligendi tenetur eaque sapiente voluptate vel culpa nostrum? Sequi\nrepudiandae molestias dolorem soluta?

","type":"unstyled","key":"bdvh3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"8n0kh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"7to5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n

","type":"unstyled","key":"8khc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"5in11"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В блоки с названием text напишем любую информацию, на данный момент не важно. В head предположительное название сайта.","type":"unstyled","key":"9u6sb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И у вас получиться так:","type":"unstyled","key":"3s6o7"},{"data":{"image":{"id":"64267aa84a61b159ef6ea353"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"76dbi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Даже и близко не похоже на сайт. Согласен.","type":"unstyled","key":"f9lip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы читали прошлые статьи, то уже поняли что сейчас нам будет необходимо сделать. А именно - работа со стилями.","type":"unstyled","key":"23qoi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS","type":"unstyled","key":"80j6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Информации сейчас будет много, но большинство тем уже были разобраны в ранних статьях.","type":"unstyled","key":"b1o6s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":7,"style":"ITALIC"},{"length":10,"offset":26,"style":"ITALIC"},{"length":5,"offset":45,"style":"ITALIC"},{"length":6,"offset":58,"style":"ITALIC"},{"length":16,"offset":72,"style":"ITALIC"},{"length":9,"offset":145,"style":"ITALIC"},{"length":10,"offset":176,"style":"ITALIC"},{"length":11,"offset":227,"style":"ITALIC"}],"text":".head{\nmax-width: 1920px;\nmax-height: 150px;\nwidth: 100%;\nheight: 100%;\nbackground-color: rgb(23, 152, 161); \\\\rgba это тот же выбор цвета блока\nfont-size: 50px; \\\\размер букв\ntext-align: center; \\\\Расположение текста - центр\npadding-top: 50px;\n}","type":"unstyled","key":"eldqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":7,"style":"ITALIC"},{"length":10,"offset":26,"style":"ITALIC"},{"length":5,"offset":46,"style":"ITALIC"},{"length":6,"offset":59,"style":"ITALIC"},{"length":11,"offset":73,"style":"ITALIC"},{"length":12,"offset":92,"style":"ITALIC"}],"text":".page{\nmax-width: 1024px;\nmax-height: 2000px;\nwidth: 100%;\nheight: 100%;\nmargin-left: auto;\nmargin-right: auto;\n}","type":"unstyled","key":"aghaa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":6,"style":"ITALIC"},{"length":10,"offset":25,"style":"ITALIC"},{"length":5,"offset":44,"style":"ITALIC"},{"length":6,"offset":57,"style":"ITALIC"},{"length":16,"offset":71,"style":"ITALIC"},{"length":16,"offset":93,"style":"ITALIC"},{"length":6,"offset":112,"style":"ITALIC"},{"length":13,"offset":190,"style":"ITALIC"},{"length":10,"offset":240,"style":"ITALIC"}],"text":".img{\nmax-width: 1024px;\nmax-height: 768px;\nwidth: 100%;\nheight: 100%;\nbackground-image: url(/IMG/img_kot.jpg);\nborder: solid 1px black; \\\\это границы блока, я сделал их в 1px, цвет черный\nborder-radius: 15px; \\\\закругление границы блока\nmargin-top: 2%;\n}","type":"unstyled","key":"18fl4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":8,"style":"ITALIC"},{"length":7,"offset":25,"style":"ITALIC"}],"text":".text1{\nfont-size: 40px;\npadding: 5px;\n}","type":"unstyled","key":"ak258"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":8,"style":"ITALIC"},{"length":7,"offset":25,"style":"ITALIC"},{"length":10,"offset":39,"style":"ITALIC"},{"length":13,"offset":55,"style":"ITALIC"},{"length":10,"offset":74,"style":"ITALIC"}],"text":".text2{\nfont-size: 25px;\npadding: 5px;\nmargin-top: 2%;\nmargin-bottom: 2%;\ntext-align: center;\n}","type":"unstyled","key":"aprs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":8,"style":"ITALIC"},{"length":9,"offset":25,"style":"ITALIC"},{"length":10,"offset":43,"style":"ITALIC"},{"length":5,"offset":62,"style":"ITALIC"},{"length":6,"offset":75,"style":"ITALIC"},{"length":6,"offset":89,"style":"ITALIC"},{"length":13,"offset":114,"style":"ITALIC"},{"length":7,"offset":135,"style":"ITALIC"},{"length":10,"offset":150,"style":"ITALIC"}],"text":".text3{\nfont-size: 15px;\nmax-width: 500px;\nmax-height: 100px;\nwidth: 100%;\nheight: 100%;\nborder: solid 2px black;\nborder-radius: 15px;\npadding: 15px;\nbackground: rgba(0, 0, 0, 0.295);\n}","type":"unstyled","key":"f81m0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":7,"style":"ITALIC"},{"length":9,"offset":26,"style":"ITALIC"},{"length":10,"offset":45,"style":"ITALIC"},{"length":5,"offset":64,"style":"ITALIC"},{"length":6,"offset":77,"style":"ITALIC"},{"length":16,"offset":91,"style":"ITALIC"}],"text":".down{\nmargin-top: 300px;\nmax-width: 1920px;\nmax-height: 150px;\nwidth: 100%;\nheight: 100%;\nbackground-color: rgb(23, 152, 161);\n}","type":"unstyled","key":"1mb2b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скрин HTML","type":"unstyled","key":"c7sgo"},{"data":{"image":{"id":"64267c82e1fa7f28648c3d57"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"c0ek6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скрины CSS","type":"unstyled","key":"4qsg3"},{"data":{"image":{"id":"64267c9519507204213982d4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5kig5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3rneg"},{"data":{"image":{"id":"64267c9f1950720421399a62"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1lrr8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробное описание незнакомого кода выше описано подробнее, ну а у нас получилось..","type":"unstyled","key":"2ai29"},{"data":{"image":{"id":"64267cfb45699857613b995b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"989ks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"14f6p"},{"data":{"image":{"id":"64267d0679f40c0d47bc718a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"68lqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Текст специально был настроен вод разный шрифт. Что бы наглядно посмотреть на разный вид. Можете поэксперементировать. Добавить свою картинку или несколько. Использовать различные цвета и другие настройки масштабирования.","type":"unstyled","key":"5a5dt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если остались вопросы пишите комментарии","type":"unstyled","key":"abiim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всего доброго!","type":"unstyled","key":"7f4rf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"hXYZrcQyaRs4pna5UJEA"}],"entityMap":{}},"mentions":[]}