Skip to content

Instantly share code, notes, and snippets.

View kianurivzzz's full-sized avatar
👨‍💻

Nikita Karasyov kianurivzzz

👨‍💻
View GitHub Profile

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

Карточка товара имеет следующую структуру:

<article class="card">
  <img src="./images/1.jpg" class="card-img-top" alt="Фотография">
  <div class="card-body">
    <h2 class="card-title h4">Фотография</h2>
    <p class="card-text">Описание фотографии и имя фотографа. Возможности заказа репродукции фотографии на холсте</p>
 <a href="#" class="btn btn-primary">Немедленно купить</a>

Создайте сетку для товаров интернет-магазина. Магазин занимается печатью репродукции фотографий на холсте. Ваша задача: сверстать три строки с карточками используя классы, которые были изучены в этом уроке. В качестве карточек товара используется следующая разметка:

<article class="card">
  <img src="./images/1.jpg" class="card-img-top" alt="Фотография" />
  <div class="card-body">
    <h2 class="card-title h4">Фотография</h2>
    <p class="card-text">
      Описание фотографии и имя фотографа. Возможности заказа репродукции
 фотографии на холсте

Техническое задание

1. Цель проекта

Цель проекта - разработать мини-приложение для продажи игр на PlayStation, далее Приложение.

2. Описание мини-приложения

Приложение состоит из следующих частей:

  1. Главная страница, где отображаются иконки с подборками и списки приложений. Далее Главная;
  2. Карточка товара, где отображается информация о товаре и есть возможность положить товар в корзину. Далее Карточка;
  3. Корзина, где выводятся выбранные товары и возможность оформить покупку. Далее Корзина;
  4. Страница перед оплатой для ввода данных о себе. Далее Страница оплаты;

Задание по вёрстке #1

Календари — это очень распространённый элемент веб-страниц. Они могут быть реализованы самыми разными способами.

В этом задании нужно будет создать календарь, используя все доступные инструменты и средства.

Часть стилей и HTML-разметка уже готовы, осталось дописать стили.

Стили для body:

@import url("./variables.css");
@import url("./terminal-screen.css");
@import url("./terminal-print.css");
@font-face {
font-weight: 400;
font-family: "JetBrains Mono";
src: url("../assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/app.css">
<title>Карточки товара</title>
</head>
// Для примеров
let i = 1;
let j = 1;
const getSecondElement = () => 1;
const items = []; // Пустой Массив
const friends = ['Petya', 'Vasya', 'Ivan']; // Заполненный массив
const matrix = [
[1, 2, 3],
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Rectangles</title>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>

test