-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by vladdvin
-
-
Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
Скрытый текст<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>Webovio</title> </head> <body> <div class="wrapper"> <main class="page"> <div class="page__main-block main-block"> <div class="main-block__container"> <div class="main-block__header"> <!-- <img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader"> <img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader"> --> <img src="img/header/logo/webovio.png" class="main-block__logo_name" alt="logoname"> <img src="img/header/hamburger.png" class="main-block__logo_hamburger_icon" alt="logoname"> </div> <div class="main-block__body"> <div class="main-block__smalltitle">A place where</div> <h1 class="main-block__title">A creative agency for redemptive brands</h1> <div class="main-block__text"> Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises. </div> <div class="main-block__items"> <a href="" class="main-block__link main-block__link_yellow"> Get in touch</a> </div> </div> </div> <div class="main-block__image _ibg"> <img src="img/mainblock/mainimage.png" alt="cover"> </div> </div> </main> </div> </body> </html>
CSS
Скрытый текст/* Обнуление */ *, *::before, *::after { padding: 0; margin: 0; border: 0; box-sizing: border-box; } a { text-decoration: none; } ul, ol, li { list-style: none; } img { vertical-align: top; } h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; } html, body { height: 100%; line-height: 1; background: #fafafa; font-size: 14px; color: #252b42; font-weight: 400; font-family: Poppins; } .wrapper { min-height: 100%; overflow: hidden; display: flex; flex-direction: column; } ._container { max-width: 1046px; padding: 0px 15px; margin: 0px auto; box-sizing: content-box; } ._ibg { position: relative; } ._ibg img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } /* =========================================================================== */ .page { } .page__main-block { } .main-block { } .main-block__container { } .main-block__logo { } .main-block__body { } .main-block__smalltitle{ height: 21px; margin-left: 166px; /*right: 83.77%;*/ /*top: calc(50% - 21px/2 - 195.5px);*/ margin-top: 130.96px; width: 100px; font-family: 'Poppins'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 21px; /* identical to box height */ /*color: #FFFFFF;*/ z-index: 10; } .main-block__title { margin-left: 166px; width: 616px; margin-top: 22px; /*bottom: 35.68%;*/ font-family: 'Poppins'; font-style: normal; font-weight: 700; font-size: 60px; line-height: 74px; /* or 123% */ /*color: #FFFFFF;*/ z-index: 5; } .main-block__text { } .main-block__items { } .main-block__link { } .main-block__link_yellow { } .main-block__image { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } /* ============================================================================ */ .main-block__logo_white_triangle { width: 42px; height: 35px; left: 164px; top: 27.27px; background: #FFFFFF; /*transform: matrix(1, 0, 0, -1, 0, 0);*/ } .main-block__logo_yellow_triangle { width: 29.21px; height: 24.35px; left: 176.78px; top: 27.27px; background: #F6F6F6 } .main-block__logo_name { width: 179.23px; height: 33.05px; margin-left: 230.2px; margin-top: 23px; background: #FFFFFF; z-index: 15; }
В результате отображается следующая картинка
в режиме инструментов разработчика. А вне режима вообще отображает
Подскажите как добиться отображения текста как на макете.
Соотношения сторон для верстки
in HTML Coding
Posted
Смотрел видеоурок
с 14:00-17:50 В нем вычисляются размеры видео в %. Размеры видео - 600*442. Ширина блока контейнера - 1046px (если я конечно правильно понял значение этого числа - 1046px). Есть следующий класс
Скриншот блока страницы
https://i.stack.imgur.com/mAizr.png
1. Почему высота равна padding?
2. Почему высота видео 442px делится на ширину контейнера 1046px, а не на высоту сайта?