fresh html
TRANSCRIPT
![Page 1: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/1.jpg)
![Page 2: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/2.jpg)
Что будет?
![Page 3: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/3.jpg)
Используем шрифт Calibri
![Page 4: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/4.jpg)
![Page 5: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/5.jpg)
![Page 6: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/6.jpg)
И кое-что на сладкое
![Page 7: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/7.jpg)
<!DOCTYPE html>
![Page 8: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/8.jpg)
Размечаем
<header><nav></nav>
</header><section></section><footer></footer>
![Page 9: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/9.jpg)
Немного магии
<script>document.createElement('header');document.createElement('nav');document.createElement('section');document.createElement('footer');
</script>
![Page 10: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/10.jpg)
Блочим
header, nav, section, footer {display: block}
![Page 11: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/11.jpg)
Подсвечиваем меню
nav a:hover
{
text-shadow: 0px 0px 10px #fff;
}
![Page 12: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/12.jpg)
Придаем объем заголовкам
text-shadow: 1px 1px 0px #ec008c;
![Page 13: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/13.jpg)
Это же Calibri!
@font-face {font-family: "calibri"; src: url('calibri.ttf') format('truetype');}h1 {font-family: “calibri”}
Еще как работает!
![Page 14: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/14.jpg)
Скругляем легко!
section
{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
![Page 15: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/15.jpg)
Красим таблицы
table tbody tr:nth-child(2n+1)
{
background: #161616;
}
![Page 16: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/16.jpg)
Слушаем и смотрим
<video src="/video/swim.ogg" id="video" >
</video>
<audio src="/audio/bsh.mp3" controls>
</audio>
![Page 17: Fresh HTML](https://reader033.vdocuments.site/reader033/viewer/2022052507/5584b27ad8b42a8a768b4778/html5/thumbnails/17.jpg)
Спасибо за внимание