загрузка на Github

VitalyChy · Mar 11, 2024 · f53e371 · f53e371
1 parent 0f4663b
commit f53e371
Show file tree

Hide file tree

Showing 13 changed files with 321 additions and 0 deletions.
diff --git a/fonts/fonts.css b/fonts/fonts.css
@@ -1 +1,17 @@
 /* В этом файле вы импортируете все шрифты для сайта. Один из них вариативный и требует особенной настройки */
+@font-face {
+  font-family: 'PressStart2P';
+  src: url(./PressStart2P-Regular.woff) format('woff');  
+  font-display: swap;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter'),
+    url('../fonts/Inter-Variable.woff2') format('woff2 supports variations'),
+    url('../fonts/Inter-Variable.woff2') format('woff2-variations');
+  font-display: swap;
+  font-weight: 400 785;   
+}
diff --git a/images/Car.png b/images/Car.png
diff --git a/images/background-Light.png b/images/background-Light.png
diff --git a/images/favicon.ico b/images/favicon.ico
diff --git a/images/favicon.png b/images/favicon.png
diff --git a/index.html b/index.html
@@ -3,17 +3,24 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
     <title>Закрывающий тег</title>
+    <link rel="icon" href="./svg/favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="./fonts/fonts.css" />
     <link rel="stylesheet" href="./styles/variables.css" />
     <link rel="stylesheet" href="./styles/globals.css" />
     <link rel="stylesheet" href="./styles/style.css" />
     <link rel="stylesheet" href="./styles/animations.css" />
     <link rel="stylesheet" href="./styles/themes.css" />
+    <!-- <link rel="icon" href="./images/favicon.ico" sizes="any" />
+    <link rel="apple-touch-icon" href="./images/favicon.png" /> -->
+
     <script src="./scripts/set-theme.js"></script>
   </head>
   <body class="page">
     <header class="header">
+      <h1 class="header__title">&lt;/HTML></h1>
+      <p class="header__paragraph">закрывающий тег</p>
       <nav class="theme-menu header__theme-menu">
         <!-- Не меняйте разметку этого списка, иначе скрипты перестанут работать -->
         <ul class="theme-menu__list">

diff --git a/styles/style.css b/styles/style.css
@@ -14,7 +14,76 @@
 
 */
 
+/* 1. Блок Header  */
+/* 2. Блок Main    */
+/* 3. Блок Footer  */
+/* 4. Медиазапросы */
+
 .page {
+  padding-block-start: 100px;
+  color: var(--accent-color, #000);
+  font-family: var(--font-Int), serif;
+  font-size: var(--font-size);
+  background-color: var(--bg-color);
+  background-image: var(--background-image);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  background-attachment: fixed;
   min-inline-size: 320px;
   min-block-size: 100dvb;
+  font-variation-settings: 'wght' var(--font-weight-title), var(--font-weight-text);
+}
+
+/* ########################################## /*
+/* 1. Блок Header Начало */
+/* ########################################## */
+
+.header {  
+  display: flex;
+  flex-direction: column;
+  border: 2px solid var(--contour-color);
+  padding-inline: 14px;
+  font-family: var(--font-PS2P);
+  background-color: #fff;
+  color: var(--accent-color);
+}
+
+.header__title {
+  padding-block-start: 120px;
+  font-size: clamp(3.0625rem, 2.7104rem + 1.5023vw, 4.0625rem);  
+  text-align: center;
+}
+
+.header__paragraph {
+  padding-block-start: 20px;
+  font-size: clamp(0.875rem, 0.6769rem + 0.8451vw, 1.4375rem);
+  text-align: center;
+  text-transform: uppercase;
 }
+
+.theme-menu__list {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  align-content: center;  
+  gap: 14px;
+}
+
+.header__theme-menu {
+  padding-block: 25px;  
+}
+
+.theme-menu__button {
+  border: none;
+  font-size: 14px;
+  text-transform: uppercase;
+  background-color: transparent;
+  cursor: pointer;
+
+}
+
+/* ########################################## */
+/* Блок Header Конец */
+/* ########################################## */
diff --git a/styles/themes.css b/styles/themes.css
@@ -4,3 +4,42 @@
 ✦ theme-light — класс светлой темы
 ✦ не забудьте описать стили для изменения темы через медизапрос пользовательских предпочтений
 */
+
+:root.theme-light { 
+  --accent-color: #000;
+  --contour-color: #000;
+  --font-weight-text: 400;
+  --font-weight-title: 700;
+  --bg-color: #fff; 
+
+  --background-image: repeating-linear-gradient(#d3d3d3,#d3d3d3 2px, transparent 2px, transparent 4px), 
+                      repeating-linear-gradient(90deg,#d3d3d3,#d3d3d3 2px, transparent 2px, transparent 4px),
+                      linear-gradient(#e7e7e7, #1a1a1a);  
+}
+
+:root.theme-dark {  
+  --accent-color: #00CC14;
+  --contour-color: #00CC14;
+  --font-weight-text: 400;
+  --font-weight-title: 785;
+  --bg-color: #000; 
+
+  --background-image: repeating-linear-gradient(#000,#000 2px, transparent 2px, transparent 4px), 
+                      repeating-linear-gradient(90deg,#000,#000 2px, transparent 2px, transparent 4px),
+                      linear-gradient(#007f0c, #004306);
+}
+
+@media (prefers-color-scheme: dark) {
+
+  :root {
+    --accent-color: #00CC14;
+    --contour-color: #00CC14;
+    --font-weight-text: 400;
+    --font-weight-title: 785;
+    --bg-color: #000;     
+
+    --background-image: repeating-linear-gradient(#000,#000 2px, transparent 2px, transparent 4px), 
+                        repeating-linear-gradient(90deg,#000,#000 2px, transparent 2px, transparent 4px),
+                        linear-gradient(#007f0c, #004306);
+  }
+}
diff --git a/styles/variables.css b/styles/variables.css
@@ -1 +1,17 @@
 /* В этом файле будут храниться все значения переменных в исходном состоянии, а так же их изменения в зависимости от ширины устройства */
+
+:root {  
+  --font-Int: 'Inter';
+  --font-PS2P: 'PressStart2P';
+  --font-weight-text: 400;
+  --font-weight-title: 700;
+  --font-size: 18px;
+  --accent-color: #000; /* Цвет основного текста */
+  --contour-color: #000; /* Цвет Контура */
+  --bg-color: #fff; /* Цвет фона */  
+
+  --background-image: repeating-linear-gradient(#d3d3d3,#d3d3d3 2px, transparent 2px, transparent 4px), 
+                      repeating-linear-gradient(90deg,#d3d3d3,#d3d3d3 2px, transparent 2px, transparent 4px),
+                      linear-gradient(#e7e7e7, #1a1a1a);
+}
+
diff --git a/svg/favicon.ico b/svg/favicon.ico
diff --git a/svg/favicon.svg b/svg/favicon.svg
diff --git a/svg/floppy-mini.svg b/svg/floppy-mini.svg