Бесплатный HTML-курс
© MaxSite.org, 2006-2021

Контрольная работа

Здесь я собрал несколько блоков, которые ты должен сверстать без подсказок. Все они не очень сложные, поэтому используй эти задания как контрольную работу. Обрати внимание на поведение блоков на малых экранах. Не подсматривай ответ, пока не напишешь свой код. После этого сверь с моим вариантом.

Котик
Автор котика: I am R.

Call to Action

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum integritas corporis: misera debilitas. Quid sequatur
Ответ
<div class="layout-center-wrap-phone mar30-tb">
    <div class="layout-wrap t-center">
        <h1>Call to Action</h1>

        <div class="t-gray600 t130">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum integritas corporis: misera debilitas. Quid sequatur</div>

        <div class="mar20-t"><a class="button button2" href="">Download</a></div>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum integritas corporis: misera debilitas. Quid sequatur, quid repugnet, vident.

Ответ
<div class="layout-center-wrap-phone mar30-tb">
    <div class="layout-wrap t-center">
        <h3 class="t-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum integritas corporis: misera debilitas. Quid sequatur, quid repugnet, vident. </h3>

        <div class="mar30-t"><a class="button button-outline1" href="">Download</a></div>
    </div>
</div>

Call to Action

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Файл red.svg

Ответ
<div class="layout-center-wrap mar30-tb bg-no-repeat bg-size-cover bg-position-center" style="background-image: url(red.svg)">
    <div class="layout-wrap t-white pad100-tb pad50-rl">
        <h1 class="t-bold w-tablet-max">Call to Action</h1>

        <div class="mar50-t t120 w-tablet-max">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

        <div class="mar70-t"><a class="button button-var" href="" style="--bg: #ffffff; --hover-bg: #dddddd; --radius: 7px; --color: #444; --hover-color: #444; --focus-shadow: #eeeeee;">Call to Action</a> <a class="mar10-rl button button2" href="">Download</a></div>
    </div>
</div>

Feature One
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature One
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature One
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature One
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ответ
<div class="layout-center-wrap mar30-tb">
    <div class="layout-wrap t-center">
        <div class="flex flex-wrap">
            <div class="w23 w48-tablet w100-phone mar20-b">
                <div><i class="fas fa-atom t400 t-blue800"></i></div>
                <h5 class="mar20-t">Feature One</h5>
                <div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>

            <div class="w23 w48-tablet w100-phone mar20-b">
                <div><i class="fas fa-globe t400 t-blue800"></i></div>
                <h5 class="mar20-t">Feature One</h5>
                <div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>

            <div class="w23 w48-tablet w100-phone mar20-b">
                <div><i class="fas fa-key t400 t-blue800"></i></div>
                <h5 class="mar20-t">Feature One</h5>
                <div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>

            <div class="w23 w48-tablet w100-phone mar20-b">
                <div><i class="fas fa-home t400 t-blue800"></i></div>
                <h5 class="mar20-t">Feature One</h5>
                <div class="mar20-t t-gray600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>

        </div>
    </div>
</div>