Векторная графика для начинающих: теория и практика технического дизайна — страница 20 из 31

"btn" target="_blank" title="Download image in PNG">PNG
SVG
Chinese rose with red nature of plant

PNG
SVG
Complex bud and flower of plant

PNG
SVG
Complex bud and plant of flower Rowan

PNG
SVG
Flower astra: plant & bud

PNG
SVG
Flower astra or rose: bud

PNG
SVG
Flower bud of chinese rose in plant

PNG
SVG
Flower bud in natural plant

PNG
SVG
Flower bud of nature

      class="previewImg">
PNG
SVG
Flower bud and plant of rose

PNG
SVG
Flower bud of rose or astra

PNG
SVG

В исходном коде HTML для реализации задания практикума всего 188 строк, большая часть кода – это описание результатов поиска по списку изображений.

Код каскадных таблиц стилей CSS

Файл ui.css (в директории: public_html/css/ui.css)

body {
    width:100%;
    height:100%;
    overflow-x:hidden;
    overflow-y:scroll;
}
.search {
    position: relative;
    display: block;
    width: calc(100% – 40px);
    min-height: calc(100vh – 40px);
    height: fit-content;
    margin: 20px;
    padding: 0;
}
input[type="search"] {
    float: left;
    display: inline-block;
    width: 100%;
    max-width: 360px;
    height: 36px;
    padding: 0 20px 0 10px;
    background-image: url('../img/ui/search.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 98%;
    border-radius: 4px;
    border: 1px solid #333;
    font-size: 15px;