Nikita Karasyov kianurivzzz

test

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

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

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

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

Стили для body:

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

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

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

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

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

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

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

<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">
      Описание фотографии и имя фотографа. Возможности заказа репродукции
 фотографии на холсте

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

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

<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>

	<!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>

	<!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>

	// Для примеров
	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="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>

	@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");
	}