Skip to content
Snippets Groups Projects
Commit 52fbd428 authored by maria-moroz's avatar maria-moroz
Browse files

Project setup

parent 6ce25415
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/images/demo.jpg deleted 100644 → 0
+ 0
− 0
View file @ 6ce25415
src/images/demo.jpg

271 KiB

src/images/sprite.svg 0 → 100644
+ 31
− 0
View file @ 52fbd428
<svg width="0" height="0" class="hidden">
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="arrow-left">
<path d="M12.6666 8H3.33325" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7.99992 12.6668L3.33325 8.00016L7.99992 3.3335" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
</symbol>
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="arrow-right">
<path d="M3.33341 8H12.6667" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8.00008 12.6668L12.6667 8.00016L8.00008 3.3335" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
</symbol>
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" id="close">
<path d="M8 8L22 22" stroke="black" stroke-width="2"></path>
<path d="M8 22L22 8" stroke="black" stroke-width="2"></path>
</symbol>
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="logo">
<path d="M19.82 2H4.18C2.97602 2 2 2.97602 2 4.18V19.82C2 21.024 2.97602 22 4.18 22H19.82C21.024 22 22 21.024 22 19.82V4.18C22 2.97602 21.024 2 19.82 2Z" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7 2V22" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M17 2V22" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M2 12H22" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M2 7H7" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M2 17H7" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M17 17H22" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M17 7H22" stroke="#818181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</symbol>
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 13" id="heart">
<path d="M7 12.88L6.02 11.9C2.38 8.68 0 6.51 0 3.85C0 1.68 1.68 0 3.85 0C5.04 0 6.23 0.56 7 1.47C7.77 0.56 8.96 0 10.15 0C12.32 0 14 1.68 14 3.85C14 6.51 11.62 8.68 7.98 11.9L7 12.88Z" fill="#FF6B08"></path>
</symbol>
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" id="search">
<path d="M5.5 9.5C7.70914 9.5 9.5 7.70914 9.5 5.5C9.5 3.29086 7.70914 1.5 5.5 1.5C3.29086 1.5 1.5 3.29086 1.5 5.5C1.5 7.70914 3.29086 9.5 5.5 9.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.5 10.5002L8.32495 8.3252" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
</symbol>
</svg>
\ No newline at end of file
src/index.html
+ 10
− 2
View file @ 52fbd428
......@@ -10,11 +10,19 @@
integrity="sha512-ISS7cAi1PEhQ8jnbJpJZMd29NlhNj4AWYyLOSp2CE/CsHxTCu+r+t0D2yoJudVrd0/8fTVPUVDzY5Tvli75u/g=="
crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!-- Так добавляются фрагменты в главные HTML-файлы страниц. -->
<include src="./partials/example.html"></include>
<!-- <include src="./partials/example.html"></include> -->
<div class="container">
<p>hello</p>
</div>
<!-- Скрипт идёт последним в разметке. В нём уже подключен главный SASS-файл. -->
<script src="./index.js"></script>
</body>
......
src/partials/example.html deleted 100644 → 0
+ 0
− 33
View file @ 6ce25415
<article class="example">
<h1>HTML-фрагменты</h1>
<!-- Путь к изображениям из HTML-фрагмента такой, как из файла index.html -->
<img src="images/demo.jpg" alt="" width="320" />
<p>
Плагин
<a
href="https://github.com/posthtml/posthtml-include"
target="_blank"
rel="noopener noreferrer"
>
posthtml-include
</a>
позволяет добавлять в HTML-файлы страниц код из других HTML-файлов (фрагментов). Фрагменты
хранятся в папке
<code>src/partials</code>. Добавление происходит при компиляции файлов страниц, например
<code>index.html</code>.
</p>
<p>
Этот файл <code>example.html</code> &mdash; пример такого фрагмента, с разметкой определённой
части главной страницы. Это очень удобно при командной разработке на студенческих проектах,
когда в одном HTML-файле пишет несколько человек сразу.
</p>
<p>
Синтаксис добавление фрагмента в главный файл:
<code> &lt;include src="./partials/имя-файла.html"&gt;&lt;/include&gt; </code>
</p>
<div class="background"></div>
</article>
src/sass/_example.scss deleted 100644 → 0
+ 0
− 27
View file @ 6ce25415
.example {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.5;
background-color: #fff;
color: #424242;
max-width: 960px;
padding: 16px;
}
.example code {
font-family: monospace;
font-size: 16px;
font-weight: 700;
background-color: #009688;
color: #fff;
padding: 2px 6px;
border-radius: 2px;
}
.example .background {
height: 240px;
// Путь к изображениям из SASS-файла всегда такой, как из папки css
background-image: url('../images/demo.jpg');
background-size: cover;
background-position: center;
}
src/sass/_utility-classes.scss 0 → 100644
+ 63
− 0
View file @ 52fbd428
body {
background-color: $primary-white-color;
color: $primary-text-color;
font-family: Roboto, sans-serif;
font-weight: 500;
}
button {
font-family: inherit;
}
a {
color: inherit;
}
.container {
padding: 0 20px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
min-width: 320px;
width: 100%;
@media screen and (min-width: 480px) {
width: 480px;
}
@media screen and (min-width: 768px) {
width: 768px;
padding: 0 76px;
}
@media screen and (min-width: 1024px) {
width: 1024px;
padding: 0 71px;
}
}
.list {
list-style-type: none;
margin: 0;
padding: 0;
}
.img {
display: block;
width: 100%;
}
.visually-hidden {
position: absolute;
white-space: nowrap;
width: 1px;
height: 1px;
overflow: hidden;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
margin: -1px;
}
\ No newline at end of file
src/sass/_variables.scss 0 → 100644
+ 7
− 0
View file @ 52fbd428
$accent-color: #FF6B01;
$primary-white-color: #ffffff;
$secondary-white-color: #F7F7F7;
$primary-text-color: #000000;
$secondary-text-color: #8C8C8C;
$footer-text-color: #545454;
$alert-color: #FF001B;
\ No newline at end of file
src/sass/main.scss
+ 2
− 1
View file @ 52fbd428
......@@ -4,4 +4,5 @@
*/
// Стили для файла с примером HTML-фрагмента
@import './example';
@import './variables';
@import './utility-classes';
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment