Крутой стильный вид цитат на CSS3
Достаточно интересный стиль цитирования для вашего сайта. Где применять, решайте сами
Для начала посмотрите ДЕМО
Установка:
1#: В самый верх вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap'); .quote { display: flex; justify-content: center; border-top: 1px solid #646464; border-bottom: 1px solid #646464; font-size: 32px; line-height: 0; height: 50px; } .container { display: flex; flex-direction: column; width: 400px; } .text-container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0px 0; } .text { width: 50%; } .text h1 { font-family: "Comfortaa", sans-serif; text-transform: uppercase; letter-spacing: -2px; white-space: nowrap; line-height: 0.9; } .interleave { font-size: 20px; letter-spacing: -1px; line-height: 2; } |
2#: В то место, где должна быть цитата, вставьте:
|
1 2 3 4 5 6 7 8 9 |
<div class="container"> <div class="quote"><h1>“</h1></div> <div class="text-container"> <div class="text"> <h1>ПОМНИ!<br/><span class="interleave">Даже если ты</span> <br/>не кодер<br/><span class="interleave">тебе никто не запретит стать</span> <br/>разработчиком <br/><span class="interleave">в будущем.</h1> </div> </div> <div class="quote"><h1>”</h1></div> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
