├── .editorconfig ├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── .htmlnanorc ├── .parcelrc ├── .posthtmlrc ├── .prettierrc ├── .sassrc ├── README.en.md ├── README.es.md ├── README.md ├── README.pl.md ├── README.uk.md ├── assets ├── actions-config-step-1.png ├── actions-config-step-2.png ├── how-it-works.png ├── repo-settings.png └── status.png ├── package-lock.json ├── package.json └── src ├── hover.css ├── images ├── burger.svg ├── comment │ ├── avatar-mobile@1x.jpg │ ├── avatar-mobile@2x.jpg │ ├── avatar-pc@1x.jpg │ ├── avatar-pc@2x.jpg │ ├── avatar-tablet@1x.jpg │ └── avatar-tablet@2x.jpg ├── gallery │ ├── Home(1).svg │ ├── gallery-mobile@1x.jpg │ ├── gallery-mobile@2x.jpg │ ├── gallery-pc@1x.jpg │ ├── gallery-pc@2x.jpg │ ├── gallery-tablet@1x.jpg │ └── gallery-tablet@2x.jpg ├── header │ ├── logo-mobile@1x.png │ ├── logo-mobile@2x.png │ ├── logo-pc@1x.png │ ├── logo-pc@2x.png │ ├── logo-tablet@1x.png │ └── logo-tablet@2x.png ├── her-arrow.svg ├── hero │ ├── hero-arrow-tablet.svg │ ├── hero-icecream-mobile@1x.png │ ├── hero-icecream-mobile@2x.png │ ├── hero-icecream-pc@1x.png │ ├── hero-icecream-pc@2x.png │ ├── hero-icecream-tablet@1x.png │ ├── hero-icecream-tablet@2x.png │ ├── hero-milk-pc@1x.png │ ├── hero-milk-pc@2x.png │ ├── hero-milk-tablet@1x.png │ ├── hero-milk-tablet@2x.png │ ├── woman-pc@1x.png │ ├── woman-pc@2x.png │ ├── woman-tablet@1x.png │ └── woman-tablet@2x.png ├── locations-bg.png ├── products-arrow.svg ├── products │ ├── icecoffee-mobile@1x.png │ ├── icecoffee-mobile@2x.png │ ├── icecoffee-pc@1x.png │ ├── icecoffee-pc@2x.png │ ├── icecoffee-tablet@1x.png │ ├── icecoffee-tablet@2x.png │ ├── icecream-mobile@1x.png │ ├── icecream-mobile@2x.png │ ├── icecream-pc@1x.png │ ├── icecream-pc@2x.png │ ├── icecream-tablet@1x.png │ ├── icecream-tablet@2x.png │ ├── milkshake-mobile@1x.png │ ├── milkshake-mobile@2x.png │ ├── milkshake-pc@1x.png │ ├── milkshake-pc@2x.png │ ├── milkshake-tablet@1x.png │ └── milkshake-tablet@2x.png ├── sprite.svg ├── symbol.svg └── tradition │ ├── apple.svg │ ├── cow-mobile@1x.png │ ├── cow-mobile@2x.png │ ├── cow-pc@1x.png │ ├── cow-pc@2x.png │ ├── cow-tablet@1x.png │ ├── cow-tablet@2x.png │ ├── ice-cream.svg │ ├── milk-mobile@1x.png │ ├── milk-mobile@2x.png │ ├── milk-pc@1x.png │ ├── milk-pc@2x.png │ └── milk.svg ├── index.html ├── index.js ├── js ├── mobile-modal.js ├── mobile.js ├── modal.js └── tablet.js ├── partials ├── burger-modal.html ├── footer.html ├── header.html ├── hero.html ├── locations.html ├── modal.html ├── products.html └── tradition.html ├── sass ├── _common.scss ├── base │ ├── _commo.scss │ └── _reset.scss ├── components │ ├── _burger-modal.scss │ ├── _footer.scss │ ├── _header.scss │ ├── _hero.scss │ ├── _locations.scss │ ├── _modal.scss │ ├── _products.scss │ └── _tradition.scss ├── main.css ├── main.css.map ├── main.scss └── utils │ ├── _mixins.scss │ ├── _placeholders.scss │ └── _vars.scss └── wickedcss.min.css /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = false 9 | 10 | 11 | [*.{json,md,yaml}] 12 | indent_size = 2 -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build and deploy to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | 7 | jobs: 8 | build-and-deploy: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: Checkout 🛎️ 12 | uses: actions/checkout@v2.3.1 13 | 14 | - name: Install and Build 🔧 15 | run: | 16 | npm ci 17 | npm run build 18 | 19 | - name: Deploy 🚀 20 | uses: JamesIves/github-pages-deploy-action@4.1.0 21 | with: 22 | branch: gh-pages 23 | folder: dist 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /.htmlnanorc: -------------------------------------------------------------------------------- 1 | { 2 | "minifySvg": false 3 | } -------------------------------------------------------------------------------- /.parcelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@parcel/config-default" 4 | ], 5 | "reporters": [ 6 | "...", 7 | "parcel-reporter-clean-dist" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.posthtmlrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "posthtml-include": { 4 | "root": "./src" 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "useTabs": false, 4 | "semi": true, 5 | "singleQuote": true, 6 | "trailingComma": "es5", 7 | "bracketSpacing": true, 8 | "arrowParens": "avoid", 9 | "proseWrap": "always" 10 | } 11 | -------------------------------------------------------------------------------- /.sassrc: -------------------------------------------------------------------------------- 1 | { 2 | "includePaths": [ 3 | "node_modules" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /README.en.md: -------------------------------------------------------------------------------- 1 | # Parcel template 2 | 3 | This project was created with Parcel. For familiarization and setting additional features [refer to documentation](https://parceljs.org/). 4 | 5 | ## Preparing a new project 6 | 7 | 1. Make sure you have an LTS version of Node.js installed on your computer. 8 | [Download and install](https://nodejs.org/en/) if needed. 9 | 2. Clone this repository. 10 | 3. Change the folder name from `parcel-project-template` to the name of your project. 11 | 4. Create a new empty GitHub repository. 12 | 5. Open the project in VSCode, launch the terminal and link the project to the GitHub repository 13 | [by instructions](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url). 14 | 6. Install the project's dependencies in the terminal with the `npm install` command. 15 | 7. Start development mode by running the `npm start` command. 16 | 8. Go to [http://localhost:1234](http://localhost:1234) in your browser. 17 | This page will automatically reload after saving changes to the project files. 18 | 19 | ## Files and folders 20 | 21 | - All stylesheet parshas should be in the `src/sass` folder and imported into the page stylesheets. For example, for `index.html` the style file is named `index.scss`. 22 | - Add images to the `src/images` folder. The assembler optimizes them, but only when deploying the production version of the project. All this happens in the cloud so as not to burden your computer, as it can take a long time on weak machines. 23 | 24 | ## Deploy 25 | 26 | To set up a project deployment, you need to perform a few additional steps to set up your repository. Go to the `Settings` tab and in the `Actions` subsection select the `General` item. 27 | 28 | ![GitHub actions settings](./assets/actions-config-step-1.png) 29 | 30 | Scroll the page to the last section, in which make sure the options are selected as in the following image and click `Save`. Without these settings, the build will not have enough rights to automate the deployment process. 31 | 32 | ![GitHub actions settings](./assets/actions-config-step-2.png) 33 | 34 | The production version of the project will be automatically built and deployed to GitHub Pages, in the `gh-pages` branch, every time the `main` branch is updated. For example, after a direct push or an accepted pull request. To do this, you need to edit the `homepage` field and the `build` script in the `package.json` file, replacing `your_username` and `your_repo_name` with your own, and submit the changes to GitHub. 35 | 36 | 37 | ```json 38 | "homepage": "https://your_username.github.io/your_repo_name/", 39 | "scripts": { 40 | "build": "parcel build src/*.html --public-url /your_repo_name/" 41 | }, 42 | ``` 43 | 44 | Next, you need to go to the settings of the GitHub repository (`Settings` > `Pages`) and set the distribution of the production version of files from the `/root` folder of the `gh-pages` branch, if this was not done automatically. 45 | 46 | ![GitHub Pages settings](./assets/repo-settings.png) 47 | 48 | ### Deployment status 49 | 50 | The deployment status of the latest commit is displayed with an icon next to its ID. 51 | 52 | - **Yellow color** - the project is being built and deployed. 53 | - **Green color** - deployment completed successfully. 54 | - **Red color** - an error occurred during linting, build or deployment. 55 | 56 | More detailed information about the status can be viewed by clicking on the icon, and in the drop-down window, follow the link `Details`. 57 | 58 | ![Deployment status](./assets/status.png) 59 | 60 | ### Live page 61 | 62 | After some time, usually a couple of minutes, the live page can be viewed at the address specified in the edited `homepage` property. For example, here is a link to a live version for this repository 63 | [https://goitacademy.github.io/parcel-project-template](https://goitacademy.github.io/parcel-project-template). 64 | 65 | If a blank page opens, make sure there are no errors in the `Console` tab related to incorrect paths to the CSS and JS files of the project (**404**). Most likely you have the wrong value for the `homepage` property or the `build` script in the `package.json` file. 66 | 67 | ## How it works 68 | 69 | ![How it works](./assets/how-it-works.png) 70 | 71 | 1. After each push to the `main` branch of the GitHub repository, a special script (GitHub Action) is launched from the `.github/workflows/deploy.yml` file. 72 | 2. All repository files are copied to the server, where the project is initialized and built before deployment. 73 | 3. If all steps are successful, the built production version of the project files is sent to the `gh-pages` branch. Otherwise, the script execution log will indicate what the problem is. 74 | -------------------------------------------------------------------------------- /README.es.md: -------------------------------------------------------------------------------- 1 | # Parcel template 2 | 3 | Este proyecto fue creado con Parcel. [Consulte la documentación](https://parceljs.org/). 4 | para conocer y personalizar las funciones adicionales. 5 | 6 | ## Preparación de un nuevo proyecto 7 | 8 | 1. Asegúrate de que la versión LTS de Node.js está instalada en tu equipo. 9 | [Descárgala e instálala](https://nodejs.org/en/) si es necesario. 10 | 2. Clona este repositorio. 11 | 3. Cambie el nombre de la carpeta con `parcel-project-template` por el nombre de tu proyecto. 12 | 4. Crea un nuevo repositorio vacío en GitHub. 13 | 5. Abre el proyecto en VSCode, ejecuta el terminal y enlaza el proyecto con el repositorio de GitHub 14 | [según las instrucciones](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url). 15 | 6. Instala las dependencias del proyecto en el terminal con el comando `npm install`. 16 | 7. Inicia el modo de desarrollo, ejecutando el comando `npm start`. 17 | 8. Ve a la dirección [http://localhost:1234](http://localhost:1234) en tu navegador. 18 | Esta página se recargará automáticamente después de guardar los cambios en los 19 | archivos del proyecto. 20 | 21 | ## Archivos y carpetas 22 | 23 | - Todos los partials de los archivos de estilo deben estar en la carpeta `src/sass` 24 | y ser importados en los archivos de estilos de la página. Por ejemplo, para 25 | `index.html` el archivo de estilos se llama `index.scss`. 26 | - Añade las imágenes a la carpeta `src/images`. El ensamblador las optimizará, 27 | pero sólo cuando se cargue la versión de producción del proyecto. Todo esto 28 | se hace en la nube, para no sobrecargar tu ordenador, ya que puede tardar 29 | mucho en máquinas poco potentes. 30 | 31 | ## Deploy 32 | 33 | Para configurar un proyecto para ser implementado, hay algunos pasos adicionales 34 | para configurar tu repositorio. Ve a la pestaña `Settings` y en la subsección 35 | `Actions`, selecciona la opción `General`. 36 | 37 | ![GitHub actions settings](./assets/actions-config-step-1.png) 38 | 39 | Baja hasta la última sección, asegurándote de que las opciones esten seleccionadas 40 | como en la siguiente imagen, y haz clic en `Save`. Sin estas opciones, la compilación 41 | no tendrá suficientes permisos para automatizar el proceso de implementación. 42 | 43 | ![GitHub actions settings](./assets/actions-config-step-2.png) 44 | 45 | La versión de producción del proyecto se compilará e implementará automáticamente 46 | en GitHub Pages, en la rama `gh-pages`, cada vez que se actualice la rama `main`. 47 | Por ejemplo, después de un push directo o de un pool request aceptado. Para 48 | ello, edita el campo `homepage` y el script `build` en el archivo `package.json`, 49 | sustituyendo `your_username` y `your_repo_name` por los tuyos propios, y envía 50 | los cambios a GitHub. 51 | 52 | ```json 53 | "homepage": "https://your_username.github.io/your_repo_name/", 54 | "scripts": { 55 | "build": "parcel build src/*.html --public-url /your_repo_name/" 56 | }, 57 | ``` 58 | 59 | A continuación, hay que ir a la configuración del repositorio de GitHub 60 | (`Settings` > `Pages`) y seleccionar que la versión de producción de los archivos 61 | se distribuya desde la carpeta `/root` de la rama `gh-pages`, si no se hizo automáticamente. 62 | 63 | ![GitHub Pages settings](./assets/repo-settings.png) 64 | 65 | ### Estado del deploy 66 | 67 | El estado del deploy del último commit se indica con un icono junto a su identificador. 68 | 69 | - **Color amarillo** - el proyecto se está compilando y desplegando. 70 | - **Color verde** - el deploy se completó con éxito. 71 | - **Color rojo** - Se ha producido un error durante el linting, la compilación o el deploy. 72 | 73 | Se puede ver información de estado más detallada haciendo clic en el icono y 74 | en el enlace `Details` de la ventana desplegable. 75 | 76 | ![Deployment status](./assets/status.png) 77 | 78 | ### Página activa 79 | 80 | Después de un tiempo, normalmente un par de minutos, la página activa se puede 81 | ver en la dirección especificada en la propiedad `homepage`. Por ejemplo, aquí 82 | está el enlace a la versión activa de este repositorio. 83 | [https://goitacademy.github.io/parcel-project-template](https://goitacademy.github.io/parcel-project-template). 84 | 85 | Si se abre una página en blanco, asegúrese de que no haya errores en la pestaña 86 | `Console` relacionados con rutas incorrectas a los archivos CSS y JS del proyecto (**404**). 87 | Lo más probable es que tenga un valor incorrecto para la propiedad `homepage` o el 88 | script `build` en el archivo `package.json`. 89 | 90 | ## ¿Cómo funciona? 91 | 92 | ![How it works](./assets/how-it-works.png) 93 | 94 | 1. Después de cada push a la rama `main` del repositorio GitHub, se ejecuta un 95 | script especial (GitHub Action) del archivo `.github/workflows/deploy.yml`. 96 | 2. Todos los archivos del repositorio se copian en el servidor, donde el 97 | proyecto se inicializa y se compila antes de ser desplegado. 98 | 3. Si todos los pasos tienen éxito, la versión de producción compilada de los 99 | archivos del proyecto se envía a la rama `gh-pages`. De lo contrario, el 100 | registro de ejecución del script indicará cuál es el problema. 101 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # parcel-project-template -------------------------------------------------------------------------------- /README.pl.md: -------------------------------------------------------------------------------- 1 | # Parcel template 2 | 3 | Ten projekt został stworzony przy pomocy Parcel. W celu zapoznania się i 4 | skonfigurowania dodatkowych opcji [zobacz dokumentację](https://parceljs.org/) 5 | 6 | ## Przygotowanie nowego projektu 7 | 8 | 1. Upewnij się, że na komputerze zainstalowana jest wersja LTS Node.js. 9 | [Ściągnij i zainstaluj](https://nodejs.org/en/), jeśli jest taka potrzeba. 10 | 2. Sklonuj to repozytorium. 11 | 3. Zmień nazwę folderu z `parcel-project-template` na nazwę swojego projektu. 12 | 4. Utwórz nowe, puste repozytorium na GitHub. 13 | 5. Otwórz projekt w VSCode, uruchom terminal i zwiąż projekt z repozytorium 14 | GitHub 15 | [zgodnie z instrukcją](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url). 16 | 6. Utwórz zależność projektu w terminalu przez polecenie `npm install` . 17 | 7. Włącz tryb edycji, wykonując polecenie `npm start`. 18 | 8. Przejdź w przeglądarce pod adres 19 | [http://localhost:1234](http://localhost:1234). Ta strona będzie się 20 | automatycznie odświeżać po dokonaniu zmian w plikach projektu. 21 | 22 | ## Pliki i foldery 23 | 24 | - Wszystkie partiale plików stylów powinny znajdować się w folderze `src/sass` i 25 | importować się w pliki stylów stron. Na przykład dla `index.html` plik stylów 26 | nazywa się `index.scss`. 27 | - Obrazy dodawaj do pliku `src/images`. Moduł zbierający optymalizuje je, ale 28 | tylko przy deploymencie wersji produkcyjnej projektu. Wszystko to zachodzi w 29 | chmurze, aby nie obciążać twojego komputera, ponieważ na słabszym sprzęcie 30 | może to zająć sporo czasu. 31 | 32 | ## Deployment 33 | 34 | Aby skonfigurować deployment projektu należy wykonać kilka dodatkowych kroków 35 | konfigurowania twojego repozytorium. Wejdź w zakładkę `Settings` i w podsekcji 36 | `Actions` wybierz punkt `General`. 37 | 38 | ![GitHub actions settings](./assets/actions-config-step-1.png) 39 | 40 | Przejdź do ostatniej sekcji, w której upewnij się, że wybrane opcje są takie 41 | same jak na następnym obrazku i kliknij `Save`. Bez tych ustawień w module 42 | zbierającym będzie zbyt mało pozwoleń dla automatyzacji procesu deploymentu. 43 | 44 | ![GitHub actions settings](./assets/actions-config-step-2.png) 45 | 46 | Wersja produkcyjna projektu będzie automatycznie gromadzić się i deployować na 47 | GitHub Pages w gałęzi `gh-pages` za każdym razem, gdy aktualizuje się gałąź 48 | `main`. Na przykład po bezpośrednim pushu lub przyjętym pull requeście. W tym 49 | celu niezbędne jest, aby w pliku `package.json` wyedytować pole `homepage` i 50 | skrypt `build`, zamieniając `your_username` i `your_repo_name` na swoje nazwy i 51 | wysłać zmiany na GitHub. 52 | 53 | ```json 54 | "homepage": "https://your_username.github.io/your_repo_name/", 55 | "scripts": { 56 | "build": "parcel build src/*.html --public-url /your_repo_name/" 57 | }, 58 | ``` 59 | 60 | Dalej należy wejść w ustawienia repozytorium GitHub (`Settings` > `Pages`) i 61 | wystawić dystrybucję wersji produkcyjnej z folderu `/root` gałęzi `gh-pages`, 62 | jeśli nie zrobiło się to automatycznie. 63 | 64 | ![GitHub Pages settings](./assets/repo-settings.png) 65 | 66 | ### Status deploymentu 67 | 68 | Status deploymentu ostatniego commitu wyświetla się na ikonie obok jego 69 | identyfikatora. 70 | 71 | - ** Żółty kolor** - wykonuje się zbudowanie i deployment projektu. 72 | - ** Zielony kolor** - deployment zakończył się sukcesem. 73 | - ** Czerwony kolor** - w czasie lintingu, budowania lub deplymentu pojawił się 74 | błąd. 75 | 76 | Więcej informacji o statusie można zobaczyć klikając na ikonkę i w wyskakującym 77 | oknie przejść do odnośnika `Details`. 78 | 79 | ![Deployment status](./assets/status.png) 80 | 81 | ### Działająca strona 82 | 83 | Po jakimś czasie, zazwyczaj kilku minut, działającą stronę będzie można zobaczyć 84 | pod adresem wskazanym w wyedytowanej właściwości `homepage`. Na przykład tu 85 | znajduje się odnośnik do działającej strony dla tego repozytorium 86 | [https://goitacademy.github.io/parcel-project-template](https://goitacademy.github.io/parcel-project-template). 87 | 88 | Jeżeli otwiera się pusta strona, upewnij się, że w zakładce `Console` nie ma 89 | błędów związanych z nieprawidłowymi ścieżkami do plików projektu CSS i JS 90 | (**404**). Najprawdopodobniej wprowadzona została nieprawidłowa wartość 91 | właściwości `homepage` lub skryptu `build` w pliku `package.json`. 92 | 93 | ## Jak to działa 94 | 95 | ![How it works](./assets/how-it-works.png) 96 | 97 | 1. Po każdym pushu w gałęzi `main` repozytorium GitHub, włącza się specjalny 98 | skrypt (GitHub Action) z pliku `.github/workflows/deploy.yml`. 99 | 2. Wszystkie pliki repozytorium kopiują się na serwer, gdzie projekt 100 | inicjalizuje się i buduje przed deploymentem. 101 | 3. Jeżeli wszystkie kroki zakończyły się sukcesem, zbudowana wersja produkcyjna 102 | plików projektu wysyła się w gałąź `gh-pages`. W przeciwnym razie, w logu 103 | wykonania skryptu wskazane zostanie, w czym jest problem. 104 | -------------------------------------------------------------------------------- /README.uk.md: -------------------------------------------------------------------------------- 1 | # Parcel template 2 | 3 | Этот проект был создан при помощи Parcel. Для знакомства и настройки 4 | дополнительных возможностей [обратись к документации](https://parceljs.org/). 5 | 6 | ## Подготовка нового проекта 7 | 8 | 1. Убедись что на компьютере установлена LTS-версия Node.js. 9 | [Скачай и установи](https://nodejs.org/en/) её если необходимо. 10 | 2. Склонируй этот репозиторий. 11 | 3. Измени имя папки с `parcel-project-template` на имя своего проекта. 12 | 4. Создай новый пустой репозиторий на GitHub. 13 | 5. Открой проект в VSCode, запусти терминал и свяжи проект с GitHub-репозиторием 14 | [по инструкции](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url). 15 | 6. Установи зависимости проекта в терминале командой `npm install` . 16 | 7. Запусти режим разработки, выполнив команду `npm start`. 17 | 8. Перейди в браузере по адресу [http://localhost:1234](http://localhost:1234). 18 | Эта страница будет автоматически перезагружаться после сохранения изменений в 19 | файлах проекта. 20 | 21 | ## Файлы и папки 22 | 23 | - Все паршалы файлов стилей должны лежать в папке `src/sass` и импортироваться в 24 | файлы стилей страниц. Например, для `index.html` файл стилей называется 25 | `index.scss`. 26 | - Изображения добавляй в папку `src/images`. Сборщик оптимизирует их, но только 27 | при деплое продакшн версии проекта. Все это происходит в облаке, чтобы не 28 | нагружать твой компьютер, так как на слабых машинах это может занять много 29 | времени. 30 | 31 | ## Деплой 32 | 33 | Для настройки деплоя проекта необходимо выполнить несколько дополнительных шагов 34 | по настройке твоего репозитория. Зайди во вкладку `Settings` и в подсекции 35 | `Actions` выбери выбери пункт `General`. 36 | 37 | ![GitHub actions settings](./assets/actions-config-step-1.png) 38 | 39 | Пролистай страницу до последней секции, в которой убедись что выбраны опции как 40 | на следующем изображении и нажми `Save`. Без этих настроек у сборки будет 41 | недостаточно прав для автоматизации процесса деплоя. 42 | 43 | ![GitHub actions settings](./assets/actions-config-step-2.png) 44 | 45 | Продакшн версия проекта будет автоматически собираться и деплоиться на GitHub 46 | Pages, в ветку `gh-pages`, каждый раз когда обновляется ветка `main`. Например, 47 | после прямого пуша или принятого пул-реквеста. Для этого необходимо в файле 48 | `package.json` отредактировать поле `homepage` и скрипт `build`, заменив 49 | `your_username` и `your_repo_name` на свои, и отправить изменения на GitHub. 50 | 51 | ```json 52 | "homepage": "https://your_username.github.io/your_repo_name/", 53 | "scripts": { 54 | "build": "parcel build src/*.html --public-url /your_repo_name/" 55 | }, 56 | ``` 57 | 58 | Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и 59 | выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если 60 | это небыло сделано автоматически. 61 | 62 | ![GitHub Pages settings](./assets/repo-settings.png) 63 | 64 | ### Статус деплоя 65 | 66 | Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. 67 | 68 | - **Желтый цвет** - выполняется сборка и деплой проекта. 69 | - **Зеленый цвет** - деплой завершился успешно. 70 | - **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. 71 | 72 | Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в 73 | выпадающем окне перейти по ссылке `Details`. 74 | 75 | ![Deployment status](./assets/status.png) 76 | 77 | ### Живая страница 78 | 79 | Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть 80 | по адресу указанному в отредактированном свойстве `homepage`. Например, вот 81 | ссылка на живую версию для этого репозитория 82 | [https://goitacademy.github.io/parcel-project-template](https://goitacademy.github.io/parcel-project-template). 83 | 84 | Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок 85 | связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее 86 | всего у тебя неправильное значение свойства `homepage` или скрипта `build` в 87 | файле `package.json`. 88 | 89 | ## Как это работает 90 | 91 | ![How it works](./assets/how-it-works.png) 92 | 93 | 1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный 94 | скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`. 95 | 2. Все файлы репозитория копируются на сервер, где проект инициализируется и 96 | проходит сборку перед деплоем. 97 | 3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта 98 | отправляется в ветку `gh-pages`. В противном случае, в логе выполнения 99 | скрипта будет указано в чем проблема. 100 | -------------------------------------------------------------------------------- /assets/actions-config-step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/assets/actions-config-step-1.png -------------------------------------------------------------------------------- /assets/actions-config-step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/assets/actions-config-step-2.png -------------------------------------------------------------------------------- /assets/how-it-works.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/assets/how-it-works.png -------------------------------------------------------------------------------- /assets/repo-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/assets/repo-settings.png -------------------------------------------------------------------------------- /assets/status.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/assets/status.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "parcel-project-template", 3 | "version": "2.0.0", 4 | "description": "", 5 | "homepage": "https://m1xture.github.io/command/", 6 | "scripts": { 7 | "start": "parcel src/*.html", 8 | "build": "parcel build src/*.html --public-url /command/" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/m1xture/command.git" 13 | }, 14 | "keywords": [], 15 | "author": "Michael Ivanov ", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://m1xture.github.io/command/issues" 19 | }, 20 | "dependencies": { 21 | "modern-normalize": "^1.1.0" 22 | }, 23 | "devDependencies": { 24 | "@parcel/transformer-sass": "^2.6.0", 25 | "parcel": "^2.6.0", 26 | "parcel-reporter-clean-dist": "^1.0.4", 27 | "posthtml-include": "^1.7.4" 28 | }, 29 | "browserslist": "> 0.5%, last 2 versions, not dead" 30 | } 31 | -------------------------------------------------------------------------------- /src/images/burger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/images/comment/avatar-mobile@1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/comment/avatar-mobile@1x.jpg -------------------------------------------------------------------------------- /src/images/comment/avatar-mobile@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/comment/avatar-mobile@2x.jpg -------------------------------------------------------------------------------- /src/images/comment/avatar-pc@1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/comment/avatar-pc@1x.jpg -------------------------------------------------------------------------------- /src/images/comment/avatar-pc@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/comment/avatar-pc@2x.jpg -------------------------------------------------------------------------------- /src/images/comment/avatar-tablet@1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/comment/avatar-tablet@1x.jpg -------------------------------------------------------------------------------- /src/images/comment/avatar-tablet@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/comment/avatar-tablet@2x.jpg -------------------------------------------------------------------------------- /src/images/gallery/Home(1).svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/gallery/gallery-mobile@1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/gallery/gallery-mobile@1x.jpg -------------------------------------------------------------------------------- /src/images/gallery/gallery-mobile@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/gallery/gallery-mobile@2x.jpg -------------------------------------------------------------------------------- /src/images/gallery/gallery-pc@1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/gallery/gallery-pc@1x.jpg -------------------------------------------------------------------------------- /src/images/gallery/gallery-pc@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/gallery/gallery-pc@2x.jpg -------------------------------------------------------------------------------- /src/images/gallery/gallery-tablet@1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/gallery/gallery-tablet@1x.jpg -------------------------------------------------------------------------------- /src/images/gallery/gallery-tablet@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/gallery/gallery-tablet@2x.jpg -------------------------------------------------------------------------------- /src/images/header/logo-mobile@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/header/logo-mobile@1x.png -------------------------------------------------------------------------------- /src/images/header/logo-mobile@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/header/logo-mobile@2x.png -------------------------------------------------------------------------------- /src/images/header/logo-pc@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/header/logo-pc@1x.png -------------------------------------------------------------------------------- /src/images/header/logo-pc@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/header/logo-pc@2x.png -------------------------------------------------------------------------------- /src/images/header/logo-tablet@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/header/logo-tablet@1x.png -------------------------------------------------------------------------------- /src/images/header/logo-tablet@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/header/logo-tablet@2x.png -------------------------------------------------------------------------------- /src/images/her-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/hero/hero-arrow-tablet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/hero/hero-icecream-mobile@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/hero-icecream-mobile@1x.png -------------------------------------------------------------------------------- /src/images/hero/hero-icecream-mobile@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/hero-icecream-mobile@2x.png -------------------------------------------------------------------------------- /src/images/hero/hero-icecream-pc@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/hero-icecream-pc@1x.png -------------------------------------------------------------------------------- /src/images/hero/hero-icecream-pc@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/hero-icecream-pc@2x.png -------------------------------------------------------------------------------- /src/images/hero/hero-icecream-tablet@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/hero-icecream-tablet@1x.png -------------------------------------------------------------------------------- /src/images/hero/hero-icecream-tablet@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/hero-icecream-tablet@2x.png -------------------------------------------------------------------------------- /src/images/hero/hero-milk-pc@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/hero-milk-pc@1x.png -------------------------------------------------------------------------------- /src/images/hero/hero-milk-pc@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/hero-milk-pc@2x.png -------------------------------------------------------------------------------- /src/images/hero/hero-milk-tablet@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/hero-milk-tablet@1x.png -------------------------------------------------------------------------------- /src/images/hero/hero-milk-tablet@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/hero-milk-tablet@2x.png -------------------------------------------------------------------------------- /src/images/hero/woman-pc@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/woman-pc@1x.png -------------------------------------------------------------------------------- /src/images/hero/woman-pc@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/woman-pc@2x.png -------------------------------------------------------------------------------- /src/images/hero/woman-tablet@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/woman-tablet@1x.png -------------------------------------------------------------------------------- /src/images/hero/woman-tablet@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/hero/woman-tablet@2x.png -------------------------------------------------------------------------------- /src/images/locations-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/locations-bg.png -------------------------------------------------------------------------------- /src/images/products-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/products/icecoffee-mobile@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/icecoffee-mobile@1x.png -------------------------------------------------------------------------------- /src/images/products/icecoffee-mobile@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/icecoffee-mobile@2x.png -------------------------------------------------------------------------------- /src/images/products/icecoffee-pc@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/icecoffee-pc@1x.png -------------------------------------------------------------------------------- /src/images/products/icecoffee-pc@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/icecoffee-pc@2x.png -------------------------------------------------------------------------------- /src/images/products/icecoffee-tablet@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/icecoffee-tablet@1x.png -------------------------------------------------------------------------------- /src/images/products/icecoffee-tablet@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/icecoffee-tablet@2x.png -------------------------------------------------------------------------------- /src/images/products/icecream-mobile@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/icecream-mobile@1x.png -------------------------------------------------------------------------------- /src/images/products/icecream-mobile@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/icecream-mobile@2x.png -------------------------------------------------------------------------------- /src/images/products/icecream-pc@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/icecream-pc@1x.png -------------------------------------------------------------------------------- /src/images/products/icecream-pc@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/icecream-pc@2x.png -------------------------------------------------------------------------------- /src/images/products/icecream-tablet@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/icecream-tablet@1x.png -------------------------------------------------------------------------------- /src/images/products/icecream-tablet@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/icecream-tablet@2x.png -------------------------------------------------------------------------------- /src/images/products/milkshake-mobile@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/milkshake-mobile@1x.png -------------------------------------------------------------------------------- /src/images/products/milkshake-mobile@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/milkshake-mobile@2x.png -------------------------------------------------------------------------------- /src/images/products/milkshake-pc@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/milkshake-pc@1x.png -------------------------------------------------------------------------------- /src/images/products/milkshake-pc@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/milkshake-pc@2x.png -------------------------------------------------------------------------------- /src/images/products/milkshake-tablet@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/milkshake-tablet@1x.png -------------------------------------------------------------------------------- /src/images/products/milkshake-tablet@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/products/milkshake-tablet@2x.png -------------------------------------------------------------------------------- /src/images/sprite.svg: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /src/images/symbol.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/images/tradition/apple.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/tradition/cow-mobile@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/tradition/cow-mobile@1x.png -------------------------------------------------------------------------------- /src/images/tradition/cow-mobile@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/tradition/cow-mobile@2x.png -------------------------------------------------------------------------------- /src/images/tradition/cow-pc@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/tradition/cow-pc@1x.png -------------------------------------------------------------------------------- /src/images/tradition/cow-pc@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/tradition/cow-pc@2x.png -------------------------------------------------------------------------------- /src/images/tradition/cow-tablet@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/tradition/cow-tablet@1x.png -------------------------------------------------------------------------------- /src/images/tradition/cow-tablet@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/tradition/cow-tablet@2x.png -------------------------------------------------------------------------------- /src/images/tradition/ice-cream.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/tradition/milk-mobile@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/tradition/milk-mobile@1x.png -------------------------------------------------------------------------------- /src/images/tradition/milk-mobile@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/tradition/milk-mobile@2x.png -------------------------------------------------------------------------------- /src/images/tradition/milk-pc@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/tradition/milk-pc@1x.png -------------------------------------------------------------------------------- /src/images/tradition/milk-pc@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m1xture/command/6f4406249e8fbc1868c693133875c75999752bba/src/images/tradition/milk-pc@2x.png -------------------------------------------------------------------------------- /src/images/tradition/milk.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Moooo 7 | 17 | 18 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/js/mobile-modal.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | const refs = { 3 | openModalBtn: document.querySelector('[data-mobile-open]'), 4 | closeModalBtn: document.querySelector('[data-mobile-close]'), 5 | modal: document.querySelector('[data-mobile]'), 6 | }; 7 | 8 | refs.openModalBtn.addEventListener('click', toggleModal); 9 | refs.closeModalBtn.addEventListener('click', toggleModal); 10 | 11 | function toggleModal() { 12 | // document.body.classList.toggle('modal-open'); 13 | refs.modal.classList.toggle('is-close'); 14 | } 15 | })(); 16 | -------------------------------------------------------------------------------- /src/js/mobile.js: -------------------------------------------------------------------------------- 1 | const refs = { 2 | openModalBtn: document.querySelector('[data-open-modal-mob]'), 3 | closeModalBtn: document.querySelector('[data-close-modal-mob]'), 4 | backdrop: document.querySelector('[data-backdrop-mob]'), 5 | }; 6 | 7 | refs.openModalBtn.addEventListener('click', toggleModal); 8 | refs.closeModalBtn.addEventListener('click', toggleModal); 9 | 10 | refs.backdrop.addEventListener('click', logBackdropClick); 11 | 12 | function toggleModal() { 13 | refs.backdrop.classList.toggle('is-hidden'); 14 | } 15 | 16 | function logBackdropClick() { 17 | console.log('Це клік в бекдроп'); 18 | } 19 | -------------------------------------------------------------------------------- /src/js/modal.js: -------------------------------------------------------------------------------- 1 | const refs = { 2 | openModalBtn: document.querySelector('[data-open-modal]'), 3 | closeModalBtn: document.querySelector('[data-close-modal]'), 4 | backdrop: document.querySelector('[data-backdrop]'), 5 | }; 6 | 7 | refs.openModalBtn.addEventListener('click', toggleModal); 8 | refs.closeModalBtn.addEventListener('click', toggleModal); 9 | 10 | refs.backdrop.addEventListener('click', logBackdropClick); 11 | 12 | function toggleModal() { 13 | refs.backdrop.classList.toggle('is-hidden'); 14 | } 15 | 16 | function logBackdropClick() { 17 | console.log('Це клік в бекдроп'); 18 | } 19 | -------------------------------------------------------------------------------- /src/js/tablet.js: -------------------------------------------------------------------------------- 1 | const refs = { 2 | openModalBtn: document.querySelector('[data-open-modal-tablet]'), 3 | closeModalBtn: document.querySelector('[data-close-modal-tablet]'), 4 | backdrop: document.querySelector('[data-backdrop-tablet]'), 5 | }; 6 | 7 | refs.openModalBtn.addEventListener('click', toggleModal); 8 | refs.closeModalBtn.addEventListener('click', toggleModal); 9 | 10 | refs.backdrop.addEventListener('click', logBackdropClick); 11 | 12 | function toggleModal() { 13 | refs.backdrop.classList.toggle('is-hidden'); 14 | } 15 | 16 | function logBackdropClick() { 17 | console.log('Це клік в бекдроп'); 18 | } 19 | -------------------------------------------------------------------------------- /src/partials/burger-modal.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 8 | 9 | 28 |
29 |
-------------------------------------------------------------------------------- /src/partials/footer.html: -------------------------------------------------------------------------------- 1 | 49 | -------------------------------------------------------------------------------- /src/partials/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 11 | 18 | 25 | 26 | 31 | 32 | 54 |
55 | 68 | 71 |
72 |
73 |
74 | -------------------------------------------------------------------------------- /src/partials/hero.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | ice cream made with passion 6 |

7 |
8 | 9 | 10 |
11 |
12 |
13 |
    14 |
  • 15 |

    16cafes

    16 |
    17 |
    • 18 |
  • 19 |

    20 | 23food trucks 21 |

    22 |
    23 |
    • 24 |
25 |
26 |
27 |
28 | 29 | 36 | 43 | 44 | hero-milk 49 | 50 |
51 |
52 |

53 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 54 | eiusmod tempor incididunt ut labore et 55 |

56 | 61 |
62 |
63 | 64 | 71 | 78 | 85 | 86 | hero-icecream 91 | 92 |
93 | 94 | 98 | 105 | 106 | woman 111 | 112 |
113 |
114 | -------------------------------------------------------------------------------- /src/partials/locations.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
    4 | 5 |
  • 6 |
    7 |

    CAFE

    8 |
    9 |

    Chicago

    10 |

    11 | Fusce ut velit laoreet, tempus arcu molestie vulputate 12 |

    13 |
    14 |

    Monday - Friday

    15 |

    06:00 AM - 10:00 PM

    16 |

    Saturday - Sunday

    17 |

    08:00 AM - 16:00 PM

    18 |
    19 | +61(0) 383 766 284 22 | noreply@envato.com 25 |
    • 26 |
  • 27 |
    28 |

    FOOD TRUCK

    29 |
    30 |

    Los Angeles

    31 |

    32 | Fusce ut velit laoreet, tempus arcu molestie vulputate 33 |

    34 |
    35 |

    Monday - Friday

    36 |

    06:00 AM - 10:00 PM

    37 |

    Saturday - Sunday

    38 |

    08:00 AM - 16:00 PM

    39 |
    40 | +61(0) 383 766 284 43 | noreply@envato.com 46 |
    • 47 |
  • 48 |
    49 |

    CAFE

    50 |
    51 |

    New York

    52 |

    53 | Fusce ut velit laoreet, tempus arcu molestie vulputate 54 |

    55 |
    56 |

    Monday - Friday

    57 |

    06:00 AM - 10:00 PM

    58 |

    Saturday - Sunday

    59 |

    08:00 AM - 16:00 PM

    60 |
    61 | +61(0) 383 766 284 64 | noreply@envato.com 67 |
    • 68 |
69 |
    70 |
  • 71 | 72 |
    • 73 |
  • 74 | 75 |
    • 76 |
77 |
78 |
79 | -------------------------------------------------------------------------------- /src/partials/modal.html: -------------------------------------------------------------------------------- 1 | 71 | -------------------------------------------------------------------------------- /src/partials/products.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | 100% natural products 5 |

6 |
    7 |
  • 8 | 9 | 16 | 23 | 30 | icecream 35 | 36 |

    ice cream

    37 |

    38 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 39 | eiusmod tempor incididunt ut labore et 40 |

    41 | 42 |
    • 43 |
  • 44 | 45 | 52 | 53 | 60 | 67 | icecoffee 72 | 73 |

    ice coffee

    74 |

    75 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 76 | eiusmod tempor incididunt ut labore et 77 |

    78 | 79 |
    • 80 |
  • 81 | 82 | 89 | 96 | 97 | 104 | milkshake 109 | 110 |

    milkshakes

    111 |

    112 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 113 | eiusmod tempor incididunt ut labore et 114 |

    115 | 116 |
    • 117 |
118 |
119 |
120 | -------------------------------------------------------------------------------- /src/partials/tradition.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

tradition and love

5 |

how it’s made?

6 |
7 |
8 |
9 | 10 | 17 | 24 | 31 | MOOOOOOOOO 39 | 40 |
41 |
47 |

48 | Fusce ut velit laoreet, tempus arcu eu, molestie tortor. Nam vel justo 49 | cursus, faucibus lorem eget, egestas eros. Maecenas eleifend erat at 50 | justo fringilla. 51 |

52 |

53 | Curabitur lacinia enim at ex blandit, vel pellentesque odio elementum. 54 | Mauris rhoncus orci in imperdiet placerat. Vestibulum euismod nisl 55 | suscipit ligula volutpat, a feugiat urna maximus. Cras massa nibh, 56 | tincidunt. 57 |

58 |

59 | Aliquam erat volutpat. Aenean accumsan. 60 |

61 | 62 |
63 |
64 |
    65 |
  • 66 | 70 |

    721

    71 |

    72 | Aliquam ac dui vel dui vulputate consectetur. Mauris massa. 73 |

    74 |
    • 75 |
  • 76 | 80 |

    16kg

    81 |

    82 | Aliquam ac dui vel dui vulputate consectetur. Mauris massa. 83 |

    84 |
    • 85 |
  • 86 | 90 |

    84

    91 |

    92 | Aliquam ac dui vel dui vulputate consectetur. Mauris massa. 93 |

    94 |
    • 95 |
96 | 97 | 104 | 111 | 118 | icecream 127 | 128 |
129 |
130 | 131 | 138 | 145 | 152 | 157 | 158 |
159 |
164 |
165 | 166 | 167 | 168 |

169 | Nullam viverra consectetuer. Quisque cursus et, porttitor risus. 170 | Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem 171 | ipsum primis in nibh vel risus. 172 |

173 |
174 |
175 |
176 | 177 |
    178 |
  • 179 |
  • 180 |
  • 181 |
182 |

Emily, Los Angeles

183 |
    184 |
  • 185 | 191 | 195 | 196 |
    • 197 |
  • 198 |
  • 199 |
200 |
201 |
202 | -------------------------------------------------------------------------------- /src/sass/_common.scss: -------------------------------------------------------------------------------- 1 | @import '~node_modules/modern-normalize/modern-normalize.css'; 2 | -------------------------------------------------------------------------------- /src/sass/base/_commo.scss: -------------------------------------------------------------------------------- 1 | html { 2 | scroll-behavior: smooth; 3 | } 4 | body { 5 | font-family: 'DM Sans'; 6 | 7 | } 8 | button { 9 | cursor: pointer; 10 | transition-duration: 250ms; 11 | transition-delay: 50ms; 12 | &:hover { 13 | transform: scale(1.05); 14 | } 15 | } 16 | .container { 17 | width: auto; 18 | margin-left: auto; 19 | margin-right: auto; 20 | // outline: solid red; 21 | @media screen and (min-width: 320px) { 22 | width: 320px; 23 | padding-right: 20px; 24 | padding-left: 20px; 25 | } 26 | @media screen and (min-width: 768px) { 27 | width: 768px; 28 | padding-right: 34px; 29 | padding-left: 34px; 30 | } 31 | @media screen and (min-width: 1200px) { 32 | width: 1080px; 33 | padding-right: 15px; 34 | padding-left: 15px; 35 | } 36 | } 37 | *::selection { 38 | background-color: #e17992; 39 | } 40 | -------------------------------------------------------------------------------- /src/sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | a { 7 | text-decoration: none; 8 | } 9 | h1, 10 | h2, 11 | h3 { 12 | margin-top: 0; 13 | margin-bottom: 0; 14 | } 15 | p { 16 | margin: 0; 17 | } 18 | img { 19 | display: block; 20 | width: 100%; 21 | } 22 | input { 23 | outline: none; 24 | } 25 | textarea { 26 | outline: none; 27 | } 28 | select { 29 | outline: none; 30 | } 31 | optgroup { 32 | margin: 0; 33 | padding: 0; 34 | } 35 | option { 36 | margin: 0; 37 | padding: 0; 38 | &:focus { 39 | background-color: #fff; 40 | } 41 | } -------------------------------------------------------------------------------- /src/sass/components/_burger-modal.scss: -------------------------------------------------------------------------------- 1 | .mobile-modal { 2 | background: #E17992; 3 | position: fixed; 4 | top: 0px; 5 | right: 0px; 6 | width: 254px; 7 | z-index: 100; 8 | height: 100vh; 9 | padding: 23px 0px; 10 | filter: drop-shadow(-8px 0px 20px rgba(0, 0, 0, 0.25)); 11 | 12 | @media screen and(min-width: 1200px) { 13 | display: none; 14 | 15 | } 16 | } 17 | .is-close{ 18 | opacity: 0; 19 | pointer-events: none; 20 | } 21 | .svg-close { 22 | padding-right: 34px; 23 | } 24 | .mobile-btn { 25 | color: $title-color; 26 | background-color: $secondary-text-color; 27 | border-radius: 22px; 28 | border: none; 29 | width: 186px; 30 | height: 44px; 31 | font-family: 'DM Sans'; 32 | font-style: normal; 33 | font-weight: 700; 34 | font-size: 16px; 35 | line-height: 21px; 36 | margin-right: auto; 37 | margin-top: 23px; 38 | margin-bottom: 19px; 39 | margin-left: auto; 40 | margin-right: auto; 41 | display: block; 42 | } 43 | 44 | .mobile__link { 45 | font-family: 'DM Sans'; 46 | font-style: normal; 47 | font-weight: 700; 48 | font-size: 14px; 49 | line-height: 18px; 50 | display: flex; 51 | align-items: center; 52 | margin-left: 24px; 53 | padding-bottom: 10px; 54 | padding-top: 10px; 55 | color: #FFFFFF; 56 | 57 | 58 | } 59 | 60 | .mobile__item { 61 | border-bottom: 1px solid #E18298; 62 | 63 | } 64 | 65 | .mobile__item:first-child { 66 | border-top: 1px solid #E18298; 67 | 68 | } 69 | 70 | .mobile__list { 71 | flex-direction: column; 72 | display: flex; 73 | 74 | } 75 | 76 | .svg-close { 77 | background: none; 78 | border: none; 79 | margin-left: auto; 80 | display: block; 81 | } -------------------------------------------------------------------------------- /src/sass/components/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | @media screen and (min-width: 320px) { 3 | padding-top: 113px; 4 | } 5 | @media screen and (min-width: 768px) { 6 | padding-top: 165px; 7 | } 8 | } 9 | .container .footer__container { 10 | @media screen and (min-width: 320px) { 11 | display: block; 12 | border-bottom: 1px solid #e1e1e1; 13 | } 14 | @media screen and (min-width: 768px) { 15 | display: flex; 16 | justify-content: space-between; 17 | } 18 | @media screen and (min-width: 1200px) { 19 | // padding-bottom: 97px; 20 | } 21 | } 22 | 23 | .footer-block-title { 24 | display: inline; 25 | margin-bottom: 91px; 26 | } 27 | 28 | .footer__title { 29 | @media screen and (min-width: 320px) { 30 | text-align: left; 31 | font-size: 34px; 32 | line-height: 39px; 33 | letter-spacing: 0.04em; 34 | max-width: 200px; 35 | } 36 | @media screen and (min-width: 768px) { 37 | font-size: 48px; 38 | line-height: 55px; 39 | letter-spacing: 0.06em; 40 | max-width: 340px; 41 | } 42 | @media screen and (min-width: 1200px) { 43 | font-size: 58px; 44 | line-height: 1.137; 45 | max-width: 500px; 46 | } 47 | } 48 | 49 | .footer__subtitle { 50 | @media screen and (min-width: 320px) { 51 | text-align: left; 52 | font-size: 18px; 53 | line-height: 21px; 54 | max-width: 232px; 55 | display: flex; 56 | flex-wrap: nowrap; 57 | } 58 | @media screen and (min-width: 768px) { 59 | font-size: 26px; 60 | line-height: 30px; 61 | max-width: 340px; 62 | letter-spacing: 0.04em; 63 | } 64 | @media screen and (min-width: 1200px) { 65 | font-size: 30px; 66 | line-height: 1.13; 67 | max-width: 472px; 68 | } 69 | } 70 | 71 | .footer__contact { 72 | @media screen and (min-width: 320px) { 73 | font-weight: 700; 74 | font-size: 12px; 75 | line-height: 22px; 76 | text-align: right; 77 | display: block; 78 | color: $text-color; 79 | margin-bottom: 43px; 80 | } 81 | @media screen and (min-width: 768px) { 82 | } 83 | @media screen and (min-width: 1200px) { 84 | font-size: 16px; 85 | line-height: 1.875; 86 | letter-spacing: 0.02em; 87 | margin-bottom: 0px; 88 | } 89 | } 90 | .footer__phone { 91 | color: $title-color; 92 | } 93 | .footer__company { 94 | margin-top: 9px; 95 | display: flex; 96 | justify-content: center; 97 | } 98 | .footer__company-text { 99 | @media screen and (min-width: 320px) { 100 | max-width: 150px; 101 | font-weight: 700; 102 | font-size: 14px; 103 | line-height: 21px; 104 | letter-spacing: 0.02em; 105 | color: $subtext-color; 106 | padding-bottom: 25px; 107 | margin-top: 22px; 108 | } 109 | @media screen and (min-width: 768px) { 110 | line-height: 1.86; 111 | max-width: 276px; 112 | padding-bottom: 18px; 113 | margin-top: 29px; 114 | } 115 | @media screen and (min-width: 1200px) { 116 | line-height: 1.86; 117 | max-width: 276px; 118 | padding-bottom: 0px; 119 | margin-top: 0px; 120 | } 121 | } 122 | .footer__icon-list { 123 | @media screen and (min-width: 320px) { 124 | margin-bottom: 46px; 125 | margin-top: 43px; 126 | display: flex; 127 | justify-content: flex-end; 128 | } 129 | @media screen and (min-width: 768px) { 130 | margin-top: 0px; 131 | } 132 | @media screen and (min-width: 1200px) { 133 | margin-bottom: 50px; 134 | } 135 | } 136 | .footer__icon { 137 | @media screen and (min-width: 320px) { 138 | margin-right: 28.24px; 139 | &:last-child { 140 | margin-right: 0; 141 | } 142 | } 143 | @media screen and (min-width: 768px) { 144 | } 145 | @media screen and (min-width: 1200px) { 146 | margin-right: 24px; 147 | &:last-child { 148 | margin-right: 0; 149 | } 150 | } 151 | } 152 | .footer__link { 153 | background-color: #fea5bb; 154 | border-radius: 50%; 155 | width: 34px; 156 | height: 34px; 157 | display: flex; 158 | justify-content: center; 159 | align-items: center; 160 | fill: #fff; 161 | transition-property: background-color; 162 | transition-duration: 250ms; 163 | transition-delay: 50ms; 164 | transition-timing-function: cubic-bezier(.63,.34,.83,.67); 165 | &:hover { 166 | background-color: $title-color; 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /src/sass/components/_header.scss: -------------------------------------------------------------------------------- 1 | header { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | display: flex; 7 | flex-wrap: nowrap; 8 | align-items: center; 9 | z-index: 2; 10 | @media screen and (min-width: 320px) { 11 | padding-top: 6px; 12 | } 13 | @media screen and (min-width: 768px) { 14 | padding-top: 38px; 15 | } 16 | } 17 | 18 | header .container { 19 | position: relative; 20 | @media screen and (min-width: 320px) { 21 | display: flex; 22 | align-items: center; 23 | justify-content: space-between; 24 | } 25 | @media screen and (min-width: 1200px) { 26 | display: block; 27 | } 28 | } 29 | 30 | .header__logo { 31 | width: 200px; 32 | @media screen and (min-width: 320px) { 33 | position: static; 34 | } 35 | @media screen and (min-width: 1200px) { 36 | position: absolute; 37 | left: -70px; 38 | top: 0; 39 | } 40 | } 41 | 42 | .header__navigation { 43 | @media screen and (min-width: 320px) { 44 | display: none; 45 | } 46 | @media screen and (min-width: 1200px) { 47 | display: flex; 48 | justify-content: flex-end; 49 | align-items: center; 50 | } 51 | } 52 | 53 | .header__list { 54 | display: flex; 55 | } 56 | 57 | .header__item { 58 | margin-left: 35px; 59 | } 60 | 61 | .header__link { 62 | font-family: 'DM Sans'; 63 | font-style: normal; 64 | font-weight: 700; 65 | font-size: 16px; 66 | line-height: 21px; 67 | display: flex; 68 | align-items: center; 69 | color: $secondary-text-color; 70 | transition: 400ms cubic-bezier(0.165, 0.84, 0.44, 1) 50ms; 71 | transition-delay: 50ms; 72 | 73 | } 74 | 75 | .home { 76 | color: $title-color; 77 | } 78 | 79 | .header__link:hover { 80 | color: $title-color; 81 | } 82 | 83 | .header__btn { 84 | color: $title-color; 85 | background-color: $secondary-text-color; 86 | border-radius: 22px; 87 | border: none; 88 | width: 159px; 89 | height: 44px; 90 | font-family: 'DM Sans'; 91 | font-style: normal; 92 | font-weight: 700; 93 | font-size: 16px; 94 | line-height: 21px; 95 | margin-left: 110px; 96 | @media screen and (min-width: 320px) { 97 | display: none; 98 | } 99 | @media screen and (min-width: 1200px) { 100 | display: block; 101 | } 102 | } 103 | .header__burger { 104 | @media screen and (min-width: 320px) { 105 | background-color: transparent; 106 | border: none; 107 | // background-image: url(../images/burger.svg); 108 | } 109 | @media screen and (min-width: 1200px) { 110 | display: none; 111 | } 112 | } 113 | .header__btn-tablet { 114 | display: none; 115 | color: $title-color; 116 | background-color: $secondary-text-color; 117 | border-radius: 22px; 118 | border: none; 119 | width: 160px; 120 | height: 44px; 121 | font-family: 'DM Sans'; 122 | font-style: normal; 123 | font-weight: 700; 124 | font-size: 16px; 125 | line-height: 21px; 126 | @media screen and (min-width: 768px) { 127 | display: block; 128 | } 129 | @media screen and (min-width: 1200px) { 130 | display: none; 131 | } 132 | } 133 | .header-block { 134 | display: flex; 135 | justify-content: space-around; 136 | width: 210px; 137 | } 138 | -------------------------------------------------------------------------------- /src/sass/components/_hero.scss: -------------------------------------------------------------------------------- 1 | .hero { 2 | position: relative; 3 | background-color: $background-color; 4 | overflow: hidden; 5 | @media screen and (min-width: 320px) { 6 | // padding-bottom: 160px; 7 | // padding-top: 193px; 8 | height: 502px; 9 | } 10 | @media screen and (min-width: 768px) { 11 | height: auto; 12 | padding-bottom: 15px; 13 | padding-top: 102px; 14 | } 15 | @media screen and (min-width: 1200px) { 16 | padding-top: 160px; 17 | padding-bottom: 38px; 18 | height: auto; 19 | } 20 | } 21 | 22 | .hero .container { 23 | position: relative; 24 | } 25 | 26 | .hero__title { 27 | font-family: 'Titan One'; 28 | font-weight: 400; 29 | 30 | letter-spacing: 0.04em; 31 | text-transform: uppercase; 32 | color: $secondary-text-color; 33 | display: flex; 34 | flex-wrap: wrap; 35 | 36 | @media screen and (min-width: 320px) { 37 | font-size: 26px; 38 | line-height: 30px; 39 | max-width: 216px; 40 | } 41 | @media screen and (min-width: 768px) { 42 | font-size: 22px; 43 | line-height: 25px; 44 | max-width: 162px; 45 | } 46 | @media screen and (min-width: 1200px) { 47 | font-size: 38px; 48 | line-height: 44px; 49 | max-width: 277px; 50 | } 51 | } 52 | 53 | .passion { 54 | color: $title-color; 55 | font-weight: 400; 56 | @media screen and (min-width: 320px) { 57 | font-size: 48px; 58 | line-height: 0.9; 59 | } 60 | @media screen and (min-width: 1200px) { 61 | font-size: 58px; 62 | } 63 | } 64 | 65 | .hero-block-btn { 66 | display: flex; 67 | @media screen and (min-width: 320px){ 68 | margin-top: 19px; 69 | } 70 | @media screen and (min-width: 768px) { 71 | margin-top: 20px; 72 | } 73 | @media screen and (min-width: 1200px) { 74 | margin-top: 25px; 75 | } 76 | } 77 | 78 | .hero__button1 { 79 | @include btn($btn-width: 104px); 80 | @media screen and (min-width: 320px) { 81 | width: 61px; 82 | } 83 | @media screen and (min-width: 1200px) { 84 | width: 104px; 85 | } 86 | } 87 | 88 | .hero__button2 { 89 | @include btn($btn-width: 136px, $btn-background: $secondary-text-color); 90 | color: $title-color; 91 | 92 | @media screen and (min-width: 320px) { 93 | width: 83px; 94 | margin-left: 8px; 95 | } 96 | @media screen and (min-width: 1200px) { 97 | width: 138px; 98 | margin-left: 15px; 99 | } 100 | } 101 | 102 | .hero__numbers { 103 | @media screen and (min-width: 320px) { 104 | display: none; 105 | } 106 | @media screen and (min-width: 768px) { 107 | display: flex; 108 | position: absolute; 109 | right: 34px; 110 | top: -6px; 111 | } 112 | @media screen and (min-width: 1200px) { 113 | position: absolute; 114 | right: 0; 115 | top: -4px; 116 | } 117 | } 118 | 119 | .hero__milk-text { 120 | @media screen and (min-width: 320px) { 121 | display: none; 122 | } 123 | @media screen and (min-width: 768px) { 124 | display: flex; 125 | align-items: center; 126 | margin-top: 19px; 127 | } 128 | @media screen and (min-width: 1200px) { 129 | margin-top: 56px; 130 | } 131 | } 132 | 133 | .hero__milk-block { 134 | // position: relative; 135 | } 136 | 137 | .hero__milk { 138 | @media screen and (min-width: 768px) { 139 | margin-left: 0; 140 | width: 124px; 141 | } 142 | @media screen and (min-width: 1200px) { 143 | margin-left: -38px; 144 | width: 188px; 145 | } 146 | } 147 | 148 | .hero-block-arrow { 149 | position: relative; 150 | display: flex; 151 | @media screen and (min-width:768px){ 152 | margin-left: 0; 153 | } 154 | @media screen and (min-width: 1200px){ 155 | margin-left: 30px; 156 | } 157 | } 158 | 159 | .hero__text { 160 | font-family: 'DM Sans'; 161 | font-weight: 400; 162 | color: $secondary-text-color; 163 | @media screen and (min-width: 768px) { 164 | font-size: 8px; 165 | line-height: 150%; 166 | max-width: 114px; 167 | } 168 | @media screen and (min-width: 1200px) { 169 | font-size: 14px; 170 | line-height: 1.4; 171 | max-width: 200px; 172 | } 173 | } 174 | 175 | .hero__arrow { 176 | position: absolute; 177 | background-color: transparent; 178 | border: none; 179 | display: block; 180 | @media screen and (min-width: 768px) { 181 | top: 55px; 182 | width: 18px; 183 | height: 18px; 184 | background-image: url(../images/hero/hero-arrow-tablet.svg); 185 | } 186 | @media screen and (min-width: 1200px) { 187 | height: 26px; 188 | width: 26px; 189 | top: 93px; 190 | background-image: url(../images/her-arrow.svg); 191 | } 192 | } 193 | 194 | .hero-icecream { 195 | position: absolute; 196 | @media screen and (min-width: 320px) { 197 | width: 171px; 198 | top: 98px; 199 | right: 32px; 200 | z-index: 2; 201 | } 202 | @media screen and (min-width: 768px) { 203 | width: 143px; 204 | top: -39px; 205 | right: 247px; 206 | } 207 | @media screen and (min-width: 1200px) { 208 | left: 494px; 209 | top: -67px; 210 | z-index: 2; 211 | width: 236px; 212 | } 213 | } 214 | 215 | .circle { 216 | position: absolute; 217 | background-color: $subtitle-color; 218 | border-radius: 50%; 219 | @media screen and (min-width: 320px) { 220 | z-index: 1; 221 | width: 346px; 222 | height: 344px; 223 | top: 83px; 224 | left: 36px; 225 | } 226 | @media screen and (min-width: 768px) { 227 | width: 324px; 228 | height: 322px; 229 | top: -71px; 230 | right: 137px; 231 | left: auto; 232 | } 233 | @media screen and (min-width: 1200px) { 234 | z-index: 0; 235 | width: 538px; 236 | height: 538px; 237 | top: -108px; 238 | right: 165px; 239 | left: auto; 240 | } 241 | } 242 | 243 | .hero__woman { 244 | @media screen and (min-width: 320px) { 245 | display: none; 246 | } 247 | @media screen and (min-width: 768px) { 248 | display: block; 249 | width: 168px; 250 | position: absolute; 251 | top: 164px; 252 | right: 34px; 253 | z-index: 2; 254 | } 255 | @media screen and (min-width: 1200px) { 256 | width: 293px; 257 | height: 232px; 258 | top: 258px; 259 | z-index: auto; 260 | } 261 | } 262 | 263 | .hero__list { 264 | display: flex; 265 | flex-direction: column; 266 | justify-content: center; 267 | } 268 | 269 | .hero__item { 270 | position: relative; 271 | &:first-child { 272 | @media screen and (min-width: 768px) { 273 | margin-bottom: 14px; 274 | } 275 | @media screen and (min-width: 1200px) { 276 | margin-bottom: 18px; 277 | } 278 | } 279 | @media screen and (min-width: 768px) { 280 | padding-top: 32px; 281 | padding-right: 10px; 282 | } 283 | @media screen and (min-width: 1200px) { 284 | padding-top: 55px; 285 | padding-right: 0; 286 | } 287 | } 288 | 289 | .hero__number { 290 | font-family: 'Titan One'; 291 | font-style: normal; 292 | font-weight: 400; 293 | text-align: right; 294 | letter-spacing: 0.04em; 295 | text-transform: uppercase; 296 | color: $title-color; 297 | display: block; 298 | position: absolute; 299 | z-index: 2; 300 | 301 | top: 0; 302 | @media screen and (min-width: 768px) { 303 | font-size: 28px; 304 | line-height: 32px; 305 | right: 10px; 306 | } 307 | @media screen and (min-width: 1200px) { 308 | font-size: 46px; 309 | line-height: 53px; 310 | right: 0; 311 | } 312 | } 313 | 314 | .hero__subtext { 315 | font-family: 'DM Sans'; 316 | font-weight: 400; 317 | text-align: right; 318 | color: $secondary-text-color; 319 | // display: inline-flex; 320 | // flex-direction: column; 321 | @media screen and (min-width: 768px) { 322 | font-size: 8px; 323 | line-height: 10px; 324 | } 325 | @media screen and (min-width: 1200px) { 326 | font-size: 14px; 327 | line-height: 18px; 328 | } 329 | } 330 | 331 | .circle1 { 332 | position: absolute; 333 | z-index: 0; 334 | border-radius: 50%; 335 | background-color: $secondary-text-color; 336 | @media screen and (min-width: 768px) { 337 | width: 16px; 338 | height: 16px; 339 | top: -2px; 340 | right: 2px; 341 | } 342 | @media screen and (min-width: 1200px) { 343 | width: 30px; 344 | height: 30px; 345 | top: -4px; 346 | right: -18px; 347 | } 348 | } 349 | .hero__title-btn { 350 | @media screen and (min-width: 320px) { 351 | position: absolute; 352 | z-index: 3; 353 | // bottom: -260px; 354 | top: 193px; 355 | } 356 | @media screen and (min-width: 768px) { 357 | // top: 102px; 358 | position: static; 359 | } 360 | } 361 | -------------------------------------------------------------------------------- /src/sass/components/_locations.scss: -------------------------------------------------------------------------------- 1 | .locations { 2 | background-image: url(../images/locations-bg.png), linear-gradient(to bottom, #fff5f6 50%, #fff); 3 | background-repeat: no-repeat; 4 | background-size: 100%; 5 | } 6 | 7 | .locations .container { 8 | position: relative; 9 | 10 | @media screen and (min-width: 320px) { 11 | padding-top: 1291px; 12 | } 13 | 14 | @media screen and (min-width: 768px) { 15 | padding-top: 547px; 16 | } 17 | 18 | @media screen and (min-width: 1200px) { 19 | padding-top: 578px; 20 | } 21 | } 22 | 23 | 24 | .locations__list { 25 | display: flex; 26 | 27 | @media screen and (min-width: 320px) { 28 | // flex-direction: column; 29 | // flex-wrap: wrap; 30 | position: absolute; 31 | top: -84px; 32 | left: 50px; 33 | right: auto; 34 | // justify-content: center; 35 | // align-items: center; 36 | flex-flow: column wrap; 37 | } 38 | 39 | @media screen and (min-width: 768px) { 40 | left: auto; 41 | position: absolute; 42 | flex-wrap: nowrap; 43 | flex-direction: row; 44 | flex-flow: row nowrap; 45 | } 46 | 47 | @media screen and (min-width: 1200px) { 48 | top: -102px; 49 | } 50 | } 51 | 52 | .locations__item { 53 | max-width: 330.9px; 54 | padding-top: 51px; 55 | padding-bottom: 62px; 56 | background-color: $secondary-text-color; 57 | box-shadow: 0px 8px 30px rgba(212, 20, 67, 0.1); 58 | border-radius: 24px; 59 | 60 | @media screen and (min-width: 320px) { 61 | width: 220px; 62 | height: 451px; 63 | margin-bottom: 20px; 64 | justify-content: center; 65 | } 66 | 67 | @media screen and (min-width: 768px) { 68 | width: 220px; 69 | height: 544px; 70 | margin-right: 20px; 71 | } 72 | 73 | @media screen and (min-width: 1200px) { 74 | height: 572px; 75 | width: 330px; 76 | padding-left: 43px; 77 | margin-right: 30px; 78 | } 79 | 80 | &:last-child { 81 | margin-right: 0; 82 | } 83 | } 84 | 85 | .locations__block { 86 | border-radius: 6px; 87 | background-color: #f0d1a5; 88 | display: flex; 89 | justify-content: center; 90 | align-items: center; 91 | 92 | @media screen and (min-width: 320px) { 93 | margin-bottom: 25px; 94 | width: 80px; 95 | height: 16px; 96 | margin-left: 20px; 97 | } 98 | 99 | @media screen and (min-width: 768px) { 100 | width: 78px; 101 | height: 28px; 102 | margin-bottom: 30px; 103 | } 104 | 105 | @media screen and (min-width: 1200px) { 106 | margin-bottom: 32px; 107 | } 108 | } 109 | 110 | .locations__block-food { 111 | border-radius: 6px; 112 | background-color: #c2e297; 113 | display: block; 114 | 115 | display: flex; 116 | justify-content: center; 117 | align-items: center; 118 | 119 | @media screen and (min-width: 320px) { 120 | margin-left: 20px; 121 | height: 16px; 122 | width: 130px; 123 | margin-bottom: 25px; 124 | } 125 | 126 | @media screen and (min-width: 768px) { 127 | width: 138px; 128 | height: 28px; 129 | margin-bottom: 30px; 130 | } 131 | 132 | @media screen and (min-width: 1200px) { 133 | margin-bottom: 32px; 134 | } 135 | } 136 | 137 | .locations__cafe { 138 | @extend %main-text; 139 | 140 | @media screen and (min-width: 320px) { 141 | font-family: 'DM Sans'; 142 | font-weight: 500; 143 | font-size: 12px; 144 | line-height: 186%; 145 | color: $secondary-text-color; 146 | } 147 | 148 | @media screen and (min-width: 768px) { 149 | font-family: 'DM Sans'; 150 | font-weight: 500; 151 | font-size: 16px; 152 | line-height: 186%; 153 | color: $secondary-text-color; 154 | } 155 | 156 | @media screen and (min-width: 1200px) { 157 | color: $secondary-text-color; 158 | } 159 | } 160 | 161 | .locations__location { 162 | @extend %main-text; 163 | margin-bottom: 10px; 164 | 165 | @media screen and (min-width: 320px) { 166 | font-family: 'DM Sans'; 167 | font-weight: 500; 168 | font-size: 12px; 169 | line-height: 186%; 170 | letter-spacing: 0.04em; 171 | color: #000000; 172 | margin-left: 20px; 173 | } 174 | 175 | @media screen and (min-width: 768px) { 176 | font-family: 'DM Sans'; 177 | font-weight: 500; 178 | font-size: 14px; 179 | line-height: 186%; 180 | letter-spacing: 0.04em; 181 | color: #000000; 182 | } 183 | 184 | @media screen and (min-width: 1200px) { 185 | font-family: 'DM Sans'; 186 | font-weight: 500; 187 | font-size: 16px; 188 | line-height: 186%; 189 | letter-spacing: 0.04em; 190 | color: #000000; 191 | } 192 | } 193 | 194 | .locations__text { 195 | @extend %main-text; 196 | color: $subtext-color; 197 | 198 | @media screen and (min-width: 320px) { 199 | font-family: 'DM Sans'; 200 | font-weight: 500; 201 | font-size: 12px; 202 | line-height: 18px; 203 | color: #907e82; 204 | margin-left: 20px; 205 | } 206 | 207 | @media screen and (min-width: 768px) { 208 | font-family: 'DM Sans'; 209 | font-weight: 500; 210 | font-size: 14px; 211 | line-height: 166%; 212 | color: #907e82; 213 | } 214 | 215 | @media screen and (min-width: 1200px) { 216 | font-family: 'DM Sans'; 217 | font-weight: 500; 218 | font-size: 16px; 219 | line-height: 183%; 220 | letter-spacing: 0.04em; 221 | color: #907e82; 222 | } 223 | } 224 | 225 | .locations__line { 226 | width: 90%; 227 | height: 1px; 228 | background-color: #e1e1e1; 229 | margin-top: 32px; 230 | 231 | @media screen and (min-width: 1200px) { 232 | margin-bottom: 32px; 233 | 234 | 235 | } 236 | 237 | @media screen and (min-width: 320px) { 238 | margin-bottom: 25px; 239 | margin-left: 20px; 240 | // margin-right: 21px; 241 | width: 80%; 242 | } 243 | 244 | } 245 | 246 | .locations__schedules { 247 | @extend %main-text; 248 | 249 | @media screen and (min-width: 320px) { 250 | font-family: 'DM Sans'; 251 | font-weight: 500; 252 | font-size: 12px; 253 | line-height: 186%; 254 | color: #000000; 255 | margin-left: 20px; 256 | } 257 | 258 | @media screen and (min-width: 768px) { 259 | font-family: 'DM Sans'; 260 | font-weight: 500; 261 | font-size: 14px; 262 | line-height: 186%; 263 | color: #000000; 264 | } 265 | 266 | @media screen and (min-width: 1200px) { 267 | font-family: 'DM Sans'; 268 | font-weight: 500; 269 | font-size: 16px; 270 | line-height: 186%; 271 | letter-spacing: 0.04em; 272 | color: #000000; 273 | } 274 | } 275 | 276 | .locations__time { 277 | @extend %main-text; 278 | color: $subtitle-color; 279 | 280 | @media screen and (min-width: 320px) { 281 | margin-bottom: 10px; 282 | font-family: 'DM Sans'; 283 | font-weight: 500; 284 | font-size: 12px; 285 | line-height: 186%; 286 | color: #ffa5ba; 287 | margin-left: 20px; 288 | } 289 | 290 | @media screen and (min-width: 768px) { 291 | font-family: 'DM Sans'; 292 | font-weight: 500; 293 | font-size: 14px; 294 | line-height: 186%; 295 | color: #ffa5ba; 296 | } 297 | 298 | @media screen and (min-width: 1200px) { 299 | font-family: 'DM Sans'; 300 | font-weight: 500; 301 | font-size: 16px; 302 | line-height: 186%; 303 | color: #ffa5ba; 304 | } 305 | } 306 | 307 | .locations__contacts { 308 | @extend %main-text; 309 | line-height: 1.81; 310 | color: $subtext-color; 311 | transition-property: color; 312 | transition-duration: 370ms; 313 | transition-delay: 75ms; 314 | transition-timing-function: cubic-bezier(.32,.52,.83,.67); 315 | &:hover { 316 | color: $subtitle-color; 317 | } 318 | @media screen and (min-width: 320px) { 319 | font-family: 'DM Sans'; 320 | font-weight: 500; 321 | font-size: 12px; 322 | line-height: 18px; 323 | color: #907e82; 324 | margin-top: 25px; 325 | margin-left: 20px; 326 | } 327 | 328 | @media screen and (min-width: 768px) { 329 | font-family: 'DM Sans'; 330 | font-weight: 500; 331 | font-size: 14px; 332 | line-height: 183%; 333 | color: #907e82; 334 | } 335 | 336 | @media screen and (min-width: 1200px) { 337 | font-family: 'DM Sans'; 338 | font-style: normal; 339 | font-weight: 500; 340 | font-size: 16px; 341 | line-height: 183%; 342 | color: #907e82; 343 | } 344 | } 345 | 346 | .locations__sublist { 347 | justify-content: center; 348 | 349 | @media screen and (min-width: 320px) { 350 | margin-top: 54px; 351 | } 352 | 353 | @media screen and (min-width: 768px) { 354 | display: flex; 355 | margin-top: 0; 356 | } 357 | 358 | @media screen and (min-width: 1200px) { 359 | align-items: center; 360 | } 361 | } 362 | 363 | .locations__btn { 364 | @include btn($btn-background: $title-color, $btn-width: 198px); 365 | height: 44px; 366 | font-weight: 700; 367 | &:hover { 368 | background-color: #fff; 369 | color: $title-color; 370 | border: 3px solid $title-color; 371 | } 372 | @media screen and (min-width: 320px) { 373 | margin-left: auto; 374 | margin-right: auto; 375 | font-family: 'DM Sans'; 376 | font-weight: 700; 377 | font-size: 16px; 378 | line-height: 21px; 379 | display: flex; 380 | align-items: center; 381 | text-align: center; 382 | color: #ffffff; 383 | 384 | width: 161.45px; 385 | height: 44px; 386 | background: #d41342; 387 | border-radius: 22px; 388 | } 389 | 390 | @media screen and (min-width: 768px) { 391 | font-family: 'DM Sans'; 392 | font-weight: 700; 393 | font-size: 16px; 394 | line-height: 21px; 395 | display: flex; 396 | align-items: center; 397 | text-align: center; 398 | color: #ffffff; 399 | 400 | width: 191.45px; 401 | height: 44px; 402 | background: #d41342; 403 | border-radius: 22px; 404 | } 405 | 406 | @media screen and (min-width: 1200px) { 407 | font-family: 'DM Sans'; 408 | font-weight: 700; 409 | font-size: 16px; 410 | line-height: 21px; 411 | display: flex; 412 | align-items: center; 413 | text-align: center; 414 | color: #ffffff; 415 | 416 | width: 198px; 417 | height: 44px; 418 | background: #d41342; 419 | border-radius: 22px; 420 | } 421 | } 422 | 423 | .locations__btn2 { 424 | @include btn($btn-background: $secondary-text-color, $btn-width: 180px); 425 | box-shadow: 0px 0px 2px 0px rgba(255 165 186); 426 | height: 44px; 427 | font-weight: 700; 428 | color: $title-color; 429 | &:hover { 430 | background-color: $title-color; 431 | color: #fff; 432 | } 433 | @media screen and (min-width: 320px) { 434 | margin-top: 10px; 435 | margin-left: auto; 436 | margin-right: auto; 437 | font-family: 'DM Sans'; 438 | font-weight: 700; 439 | font-size: 16px; 440 | line-height: 21px; 441 | display: flex; 442 | align-items: center; 443 | text-align: center; 444 | color: $title-color; 445 | width: 161px; 446 | height: 44px; 447 | background: #ffffff; 448 | border-radius: 22px; 449 | } 450 | 451 | @media screen and (min-width: 768px) { 452 | margin-left: 15px; 453 | font-family: 'DM Sans'; 454 | font-weight: 700; 455 | font-size: 16px; 456 | line-height: 21px; 457 | display: flex; 458 | align-items: center; 459 | text-align: center; 460 | color: #d41443; 461 | margin-top: 0; 462 | width: 174.05px; 463 | height: 44px; 464 | background: #ffffff; 465 | border-radius: 22px; 466 | } 467 | 468 | @media screen and (min-width: 1200px) { 469 | margin-left: 15px; 470 | font-family: 'DM Sans'; 471 | font-weight: 700; 472 | font-size: 16px; 473 | line-height: 21px; 474 | display: flex; 475 | align-items: center; 476 | text-align: center; 477 | color: #d41443; 478 | 479 | width: 180px; 480 | height: 44px; 481 | background: #ffffff; 482 | border-radius: 22px; 483 | } 484 | } -------------------------------------------------------------------------------- /src/sass/components/_modal.scss: -------------------------------------------------------------------------------- 1 | .backdrop { 2 | position: fixed; 3 | top: 0; 4 | right: 0; 5 | bottom: 0; 6 | left: 0; 7 | background-color: rgba(0, 0, 0, 0.2); 8 | transition: opacity 300ms cubic-bezier(0.23, 0.5, 0.83, 0.67); 9 | z-index: 5; 10 | } 11 | .backdrop.is-hidden { 12 | opacity: 0; 13 | pointer-events: none; 14 | } 15 | .modal__container { 16 | background-color: #fff; 17 | position: absolute; 18 | top: 50%; 19 | left: 50%; 20 | transform: translate(-50%, -50%); 21 | z-index: 40; 22 | border-radius: 1%; 23 | position: relative; 24 | // padding-top: 35px; 25 | padding-right: 20px; 26 | padding-left: 20px; 27 | box-shadow: 0px 0px 20px 9px rgba(255, 184, 202, 0.51); 28 | @media screen and (min-width: 320px) { 29 | height: 609px; 30 | width: 90vw; 31 | padding-top: 45px; 32 | } 33 | @media screen and (min-width: 395px) { 34 | padding-top: 35px; 35 | } 36 | @media screen and (min-width: 480px) { 37 | width: 450px; 38 | } 39 | @media screen and (min-width: 1200px) { 40 | width: 528px; 41 | height: 581px; 42 | } 43 | } 44 | .modal__title { 45 | @extend %title; 46 | font-size: 24px; 47 | max-width: 400px; 48 | margin-left: auto; 49 | margin-right: auto; 50 | } 51 | .modal__btn-close { 52 | position: absolute; 53 | right: 10px; 54 | top: 10px; 55 | height: 32px; 56 | width: 32px; 57 | background-color: transparent; 58 | display: flex; 59 | justify-content: center; 60 | align-items: center; 61 | border: 1px solid $background-color; 62 | border-radius: 50%; 63 | transition-delay: 40ms; 64 | &:hover { 65 | border: 1px solid $title-color; 66 | } 67 | } 68 | .modal__svg-close { 69 | fill: $subtitle-color; 70 | transition-delay: 40ms; 71 | } 72 | .modal__btn-close:hover .modal__svg-close { 73 | fill: $title-color; 74 | } 75 | .modal__subtitle { 76 | @extend %subtitle; 77 | font-size: 18px; 78 | margin-bottom: 5px; 79 | } 80 | .modal__list { 81 | margin-top: 15px; 82 | } 83 | .modal__item:nth-child(1) { 84 | margin-bottom: 10px; 85 | } 86 | .modal__label { 87 | font-family: 'DM Sans'; 88 | font-weight: 500; 89 | font-size: 16px; 90 | line-height: 28px; 91 | letter-spacing: 0.04em; 92 | color: $text-color; 93 | padding-left: 7px; 94 | } 95 | .modal__input { 96 | padding-top: 5px; 97 | padding-right: 6px; 98 | padding-bottom: 5px; 99 | padding-left: 10px; 100 | width: 100%; 101 | display: block; 102 | background-color: transparent; 103 | border-radius: 22px; 104 | border: 3px solid $title-color; 105 | } 106 | .modal__input-dropdown { 107 | padding-top: 5px; 108 | padding-right: 6px; 109 | padding-bottom: 5px; 110 | height: 33px; 111 | padding-left: 10px; 112 | width: 100%; 113 | display: block; 114 | background-color: transparent; 115 | border-radius: 22px; 116 | border: 3px solid $title-color; 117 | margin-top: 15px; 118 | color: $text-color; 119 | cursor: pointer; 120 | box-shadow: none; 121 | user-select: none; 122 | } 123 | // .modal__input-dropdown:hover + .dropdown{ 124 | // display: block; 125 | // } 126 | 127 | .dropdown__text { 128 | color: #fff; 129 | } 130 | .dropdown { 131 | // display: none; 132 | // position: absolute; 133 | // z-index: 2; 134 | // background-color: #fff; 135 | } 136 | .modal__dropdown__text { 137 | font-family: 'DM Sans'; 138 | font-weight: 500; 139 | font-size: 16px; 140 | line-height: 28px; 141 | letter-spacing: 0.04em; 142 | color: $text-color; 143 | padding-left: 7px; 144 | } 145 | .dropdown__item { 146 | display: flex; 147 | align-items: center; 148 | border: none; 149 | outline: none; 150 | &:first-child { 151 | background-color: $background-color; 152 | } 153 | &:nth-child(2) { 154 | background-color: #f0d1a5; 155 | } 156 | &:nth-child(3) { 157 | background-color: #c2e297; 158 | } 159 | &:last-child { 160 | background-color: $title-color; 161 | } 162 | } 163 | .modal__textarea { 164 | box-sizing: border-box; 165 | height: 150px; 166 | width: 100%; 167 | resize: none; 168 | border: 3px solid $background-color; 169 | border-radius: 17px; 170 | margin-top: 15px; 171 | padding-top: 8px; 172 | padding-right: 8px; 173 | padding-bottom: 8px; 174 | padding-left: 8px; 175 | } 176 | .modal__btn { 177 | @include btn($btn-background: $secondary-text-color); 178 | &:hover { 179 | color: $secondary-text-color; 180 | background-color: $title-color; 181 | border: none; 182 | } 183 | @media screen and (min-width: 320px) { 184 | color: $title-color; 185 | font-weight: 700; 186 | font-size: 14px; 187 | line-height: 18px; 188 | background: $secondary-text-color; 189 | border-radius: 22px; 190 | height: 44px; 191 | width: 176px; 192 | border: 3px solid $title-color; 193 | outline: none; 194 | display: block; 195 | margin-left: auto; 196 | margin-right: auto; 197 | margin-top: 40px; 198 | } 199 | @media screen and (min-width: 768px) { 200 | font-size: 16px; 201 | line-height: 21px; 202 | height: 44px; 203 | border: 3px solid $title-color; 204 | margin-top: 30px; 205 | } 206 | @media screen and (min-width: 1200px) { 207 | border: 3px solid $title-color; 208 | margin-top: 30px; 209 | } 210 | } 211 | .modal-scale { 212 | transition-duration: 300ms; 213 | transition-delay: 50ms; 214 | &:hover { 215 | transform: scale(1.05); 216 | } 217 | } -------------------------------------------------------------------------------- /src/sass/components/_products.scss: -------------------------------------------------------------------------------- 1 | .products { 2 | 3 | @media screen and (min-width: 320px){ 4 | padding-top: 121px; 5 | padding-bottom: 98px; 6 | } 7 | @media screen and (min-width: 768px){ 8 | padding-top: 122px; 9 | padding-bottom: 112px; 10 | } 11 | @media screen and (min-width: 1200px){ 12 | padding-top: 127px; 13 | padding-bottom: 119px; 14 | } 15 | } 16 | .products__title { 17 | @extend %title; 18 | @media screen and (min-width: 320px) { 19 | font-size: 34px; 20 | } 21 | @media screen and (min-width: 768px) { 22 | font-size: 55px; 23 | } 24 | @media screen and (min-width: 1200px) { 25 | font-size: 58px; 26 | } 27 | } 28 | .products__100 { 29 | @extend %subtitle; 30 | @media screen and (min-width: 320px) { 31 | font-size: 18px; 32 | } 33 | @media screen and (min-width: 768px) { 34 | font-size: 26px; 35 | } 36 | @media screen and (min-width: 1200px) { 37 | font-size: 30px; 38 | } 39 | } 40 | .products__list { 41 | display: flex; 42 | justify-content: center; 43 | @media screen and (min-width: 320px) { 44 | flex-wrap: wrap; 45 | margin-top: 144px; 46 | } 47 | @media screen and (min-width: 768px) { 48 | flex-wrap: nowrap; 49 | margin-top: 150px; 50 | } 51 | @media screen and (min-width: 1200px) { 52 | margin-top: 259px; 53 | } 54 | } 55 | .products__item { 56 | margin-right: 30px; 57 | border-radius: 24px; 58 | position: relative; 59 | transition-duration: 250ms; 60 | transition-delay: 50ms; 61 | &:hover { 62 | transform: scale(1.05); 63 | } 64 | &:first-child { 65 | background-color: $background-color; 66 | } 67 | &:nth-child(2) { 68 | background-color: #f0d1a5; 69 | } 70 | &:last-child { 71 | margin-right: 0; 72 | background-color: #c2e297; 73 | margin-bottom: 0; 74 | } 75 | @media screen and (min-width: 320px) { 76 | padding-top: 161px; 77 | padding-right: 39px; 78 | padding-bottom: 41px; 79 | padding-left: 39px; 80 | margin-right: 0; 81 | margin-bottom: 130px; 82 | } 83 | @media screen and (min-width: 768px) { 84 | padding-top: 152px; 85 | padding-right: 11px; 86 | padding-bottom: 40px; 87 | padding-left: 11px; 88 | margin-right: 20px; 89 | margin-bottom: 0; 90 | } 91 | @media screen and (min-width: 1200px) { 92 | padding-top: 163px; 93 | padding-right: 44px; 94 | padding-bottom: 50px; 95 | padding-left: 44px; 96 | } 97 | } 98 | .products__subtitle { 99 | font-weight: 400; 100 | line-height: 1.13; 101 | text-align: center; 102 | letter-spacing: 0.04em; 103 | text-transform: uppercase; 104 | color: $secondary-text-color; 105 | font-family: 'Titan One'; 106 | margin-top: 38px; 107 | @media screen and (min-width: 320px){ 108 | font-size: 20px; 109 | } 110 | @media screen and (min-width: 1200px){ 111 | font-size: 30px; 112 | } 113 | &::after { 114 | content: '...'; 115 | display: block; 116 | @media screen and (min-width: 320px){ 117 | margin-top: 30px; 118 | } 119 | @media screen and (min-width: 1200px){ 120 | margin-top: 32px; 121 | } 122 | } 123 | } 124 | .products__text { 125 | @include special-text($align: center); 126 | @media screen and (min-width: 320px){ 127 | margin-top: 30px; 128 | font-size: 14px; 129 | } 130 | @media screen and (min-width: 1200px){ 131 | margin-top: 32px; 132 | font-size: 16px; 133 | } 134 | } 135 | .products__icecream { 136 | position: absolute; 137 | 138 | @media screen and (min-width: 320px) { 139 | width: 249px; 140 | right: 15px; 141 | left: 16px; 142 | top: -113px; 143 | } 144 | @media screen and (min-width: 768px) { 145 | width: 220px; 146 | top: -104px; 147 | right: 0; 148 | left: 0; 149 | } 150 | @media screen and (min-width: 1200px) { 151 | width: 335px; 152 | right: 0.5%; 153 | top: -200px; 154 | } 155 | } 156 | .products__btn { 157 | background-image: url(../images/products-arrow.svg); 158 | height: 40px; 159 | width: 40px; 160 | background-color: transparent; 161 | border: none; 162 | display: block; 163 | margin-left: auto; 164 | margin-right: auto; 165 | @media screen and (min-width: 320px){ 166 | margin-top: 30px; 167 | } 168 | @media screen and (min-width: 768px){ 169 | margin-top: 40px; 170 | } 171 | @media screen and (min-width: 1200px){ 172 | margin-top: 62px; 173 | } 174 | } 175 | -------------------------------------------------------------------------------- /src/sass/components/_tradition.scss: -------------------------------------------------------------------------------- 1 | .tradition-block-text { 2 | @media screen and (min-width: 320px) { 3 | } 4 | @media screen and (min-width: 768px) { 5 | // margin-left: 17px; 6 | } 7 | @media screen and (min-width: 1200px) { 8 | margin-left: 74px; 9 | } 10 | } 11 | 12 | 13 | .tradition { 14 | @media screen and (min-width: 320px) { 15 | // background-color: #fff; 16 | // background-image: url(../images/tradition/milk-pc@1x.png); 17 | background-repeat: no-repeat; 18 | background-size: 100%; 19 | padding-top: 125px; 20 | padding-bottom: 197px; 21 | background-color: #FFF5F6; 22 | background-image: url(../images/tradition/milk-pc@1x.png), 23 | linear-gradient(to top, #fff 63%, #fff5f6 65%); 24 | background-size: 100%; 25 | background-position-y: 680px; 26 | // background-image: url(../images/tradition/milk-pc@1x.png), 27 | // linear-gradient(to top, #fff5f6 1640px,#fff 1640px); 28 | // background-position-y: 766px; 29 | 30 | } 31 | @media screen and (min-width: 768px) { 32 | background-image: url(../images/tradition/milk-pc@1x.png), 33 | linear-gradient(to top,#fff 71.6%,#fff5f6 30%,#fff5f6); 34 | } 35 | @media screen and (min-width: 1200px) { 36 | // background-image: url(../images/tradition/milk-pc@1x.png), linear-gradient( 37 | // to top, 38 | // #fff 1244px, 39 | // #fff5f6 1244px, 40 | // #fff5f6 41 | // ); 42 | // background-position-y: 102px; 43 | // background-image: url(../images/tradition/milk-pc@1x.png), 44 | 45 | background-color: #FFF5F6; 46 | background-image: url(../images/tradition/milk-pc@1x.png), 47 | linear-gradient(to top, #fff 53.44%, #fff5f6 53.44%);; 48 | background-repeat: no-repeat; 49 | background-size: 100%; 50 | background-position-y: 342px; 51 | padding-top: 125px; 52 | } 53 | } 54 | 55 | .text-underline { 56 | border: 1px solid #e1e1e1; 57 | // background-color: #E1E1E1; 58 | // width: 1px; 59 | // height: 100%; 60 | } 61 | 62 | .tradition-block-img { 63 | margin-right: 74px; 64 | } 65 | 66 | .tradition__item::before { 67 | @media screen and (min-width: 320px) { 68 | content: ''; 69 | display: block; 70 | width: 50px; 71 | height: 50px; 72 | background-image: url(../images/tradition/apple.svg); 73 | margin-bottom: 16px; 74 | } 75 | @media screen and (min-width: 768px) { 76 | margin-bottom: 36px; 77 | } 78 | @media screen and (min-width: 1200px) { 79 | margin-bottom: 40px; 80 | } 81 | } 82 | 83 | .tradition__item:first-child::before { 84 | @media screen and (min-width: 320px) { 85 | content: ''; 86 | display: block; 87 | width: 33px; 88 | height: 50px; 89 | background-image: url(../images/tradition/milk.svg); 90 | margin-bottom: 16px; 91 | } 92 | @media screen and (min-width: 768px) { 93 | margin-bottom: 36px; 94 | } 95 | @media screen and (min-width: 1200px) { 96 | margin-bottom: 40px; 97 | } 98 | } 99 | 100 | .tradition__item:last-child::before { 101 | @media screen and (min-width: 320px) { 102 | content: ''; 103 | display: block; 104 | width: 44px; 105 | height: 50px; 106 | background-image: url(../images/tradition/ice-cream.svg); 107 | margin-bottom: 16px; 108 | } 109 | @media screen and (min-width: 768px) { 110 | margin-bottom: 36px; 111 | } 112 | @media screen and (min-width: 1200px) { 113 | margin-bottom: 40px; 114 | } 115 | } 116 | 117 | .tradition-block-title { 118 | @media screen and (min-width: 320px) { 119 | margin-bottom: 26px; 120 | } 121 | @media screen and (min-width: 768px) { 122 | margin-bottom: 100px; 123 | } 124 | @media screen and (min-width: 1200px) { 125 | margin-bottom: 102px; 126 | } 127 | } 128 | 129 | .cow__title { 130 | @media screen and (min-width: 320px) { 131 | font-size: 34px; 132 | line-height: 39px; 133 | letter-spacing: 0.04em; 134 | } 135 | @media screen and (min-width: 768px) { 136 | font-size: 48px; 137 | line-height: 55px; 138 | } 139 | @media screen and (min-width: 1200px) { 140 | font-size: 58px; 141 | line-height: 66px; 142 | letter-spacing: 0.06em; 143 | } 144 | } 145 | 146 | .cow__subtitle { 147 | @media screen and (min-width: 320px) { 148 | font-size: 18px; 149 | line-height: 21px; 150 | } 151 | @media screen and (min-width: 768px) { 152 | font-size: 26px; 153 | line-height: 30px; 154 | } 155 | @media screen and (min-width: 1200px) { 156 | font-size: 30px; 157 | line-height: 34px; 158 | letter-spacing: 0.04em; 159 | } 160 | } 161 | 162 | .tradition-block { 163 | @media screen and (min-width: 320px) { 164 | display: flex; 165 | flex-wrap: wrap; 166 | } 167 | @media screen and (min-width: 768px) { 168 | flex-wrap: nowrap; 169 | } 170 | } 171 | 172 | .tradition__cow { 173 | @media screen and (min-width: 320px) { 174 | width: 280px; 175 | } 176 | @media screen and (min-width: 768px) { 177 | width: 340px; 178 | } 179 | @media screen and (min-width: 1200px) { 180 | width: 516px; 181 | } 182 | } 183 | 184 | .tradition__svg { 185 | fill: $subtitle-color; 186 | } 187 | 188 | .tradition__subtitle { 189 | font-family: 'Titan One'; 190 | font-weight: 400; 191 | font-size: 30px; 192 | line-height: 34px; 193 | text-align: center; 194 | letter-spacing: 0.04em; 195 | text-transform: uppercase; 196 | color: #ffa5ba; 197 | } 198 | 199 | .tradition__text { 200 | @media screen and (min-width: 320px) { 201 | font-weight: 500; 202 | font-size: 12px; 203 | line-height: 19px; 204 | color: #000000; 205 | margin-bottom: 31px; 206 | padding-left: 30px; 207 | padding-right: 30px; 208 | } 209 | @media screen and (min-width: 768px) { 210 | font-size: 14px; 211 | line-height: 25px; 212 | margin-bottom: 28px; 213 | width: auto; 214 | padding-left: 0px; 215 | padding-right: 0px; 216 | } 217 | @media screen and (min-width: 1200px) { 218 | font-size: 16px; 219 | line-height: 176%; 220 | letter-spacing: 0.04em; 221 | margin-bottom: 35px; 222 | } 223 | } 224 | 225 | .tradition__subtext { 226 | @media screen and (min-width: 320px) { 227 | margin-top: 31px; 228 | font-weight: 500; 229 | font-size: 12px; 230 | line-height: 19px; 231 | color: $subtext-color; 232 | padding-left: 30px; 233 | padding-right: 30px; 234 | } 235 | @media screen and (min-width: 768px) { 236 | margin-top: 14px; 237 | font-size: 14px; 238 | line-height: 25px; 239 | letter-spacing: 0.04em; 240 | padding-left: 0px; 241 | padding-right: 0px; 242 | } 243 | @media screen and (min-width: 1200px) { 244 | margin-top: 35px; 245 | font-size: 14px; 246 | line-height: 27px; 247 | } 248 | } 249 | 250 | .tradition__btn { 251 | @media screen and (min-width: 320px) { 252 | // @include btn($btn-background: $secondary-text-color, $btn-width: 176px); 253 | color: $title-color; 254 | margin-top: 17px; 255 | margin-bottom: 39px; 256 | font-weight: 700; 257 | font-size: 14px; 258 | line-height: 18px; 259 | background: $secondary-text-color; 260 | border-radius: 22px; 261 | height: 44px; 262 | width: 176px; 263 | border: none; 264 | outline: none; 265 | } 266 | @media screen and (min-width: 768px) { 267 | margin-top: 62px; 268 | margin-bottom: 66px; 269 | font-size: 16px; 270 | line-height: 21px; 271 | height: 44px; 272 | } 273 | @media screen and (min-width: 1200px) { 274 | margin-top: 45px; 275 | margin-bottom: 146px; 276 | } 277 | // &:hover { 278 | // border: 2px solid $title-color; 279 | // } 280 | } 281 | 282 | .tradition__item { 283 | @media screen and (min-width: 320px) { 284 | margin-bottom: 38px; 285 | } 286 | @media screen and (min-width: 768px) { 287 | margin-bottom: 0px; 288 | margin-right: 60px; 289 | } 290 | @media screen and (min-width: 1200px) { 291 | margin-bottom: 0px; 292 | margin-right: 30px; 293 | } 294 | } 295 | 296 | .tradition__item:last-child { 297 | @media screen and (min-width: 320px) { 298 | margin-bottom: 97px; 299 | } 300 | @media screen and (min-width: 768px) { 301 | margin-bottom: 136px; 302 | } 303 | @media screen and (min-width: 1200px) { 304 | margin-bottom: 139px; 305 | } 306 | } 307 | 308 | .tradition__title { 309 | @media screen and (min-width: 320px) { 310 | font-family: 'Titan One'; 311 | font-weight: 400; 312 | font-size: 36px; 313 | line-height: 41px; 314 | letter-spacing: 0.04em; 315 | text-transform: uppercase; 316 | color: #d41443; 317 | margin-bottom: 10px; 318 | } 319 | @media screen and (min-width: 768px) { 320 | font-size: 48px; 321 | line-height: 51px; 322 | margin-bottom: 13px; 323 | } 324 | @media screen and (min-width: 1200px) { 325 | margin-right: 115px; 326 | font-size: 58px; 327 | line-height: 66px; 328 | margin-bottom: 15px; 329 | } 330 | } 331 | 332 | .tradition__list { 333 | @media screen and (min-width: 320px) { 334 | display: block; 335 | } 336 | @media screen and (min-width: 768px) { 337 | display: flex; 338 | } 339 | } 340 | 341 | .tradition__text1 { 342 | @media screen and (min-width: 320px) { 343 | font-weight: 700; 344 | font-size: 12px; 345 | line-height: 20px; 346 | color: #000000; 347 | max-width: 230px; 348 | } 349 | @media screen and (min-width: 768px) { 350 | font-size: 14px; 351 | line-height: 24px; 352 | left: 36px; 353 | max-width: 180px; 354 | } 355 | @media screen and (min-width: 1200px) { 356 | font-weight: 700; 357 | font-size: 16px; 358 | line-height: 28px; 359 | letter-spacing: 0.02em; 360 | left: 115px; 361 | max-width: 330px; 362 | } 363 | } 364 | 365 | .gallery__svg { 366 | z-index: 2; 367 | top: 32px; 368 | left: 50px; 369 | position: absolute; 370 | fill: #e1e1e1; 371 | } 372 | 373 | .tradition__comment { 374 | @media screen and (min-width: 320px) { 375 | font-weight: 500; 376 | font-size: 12px; 377 | line-height: 31px; 378 | text-align: center; 379 | letter-spacing: 0.04em; 380 | color: #000000; 381 | font-family: 'DM Sans'; 382 | max-width: 100%; 383 | text-decoration: underline; 384 | text-decoration-color: #e1e1e1; 385 | text-underline-position: under; 386 | text-decoration-line: underline; 387 | } 388 | @media screen and (min-width: 768px) { 389 | padding-right: 20px; 390 | padding-left: 20px; 391 | font-size: 14px; 392 | line-height: 30px; 393 | } 394 | @media screen and (min-width: 1200px) { 395 | padding-right: 5px; 396 | padding-left: 5px; 397 | font-size: 16px; 398 | line-height: 30px; 399 | } 400 | } 401 | 402 | .gallery_commetsdiv { 403 | position: relative; 404 | } 405 | 406 | .gallery__background { 407 | margin-left: auto; 408 | margin-right: auto; 409 | position: relative; 410 | max-width: 926px; 411 | padding-top: 47px; 412 | padding-right: 89px; 413 | padding-bottom: 39px; 414 | padding-left: 87px; 415 | background-color: #fafafa; 416 | } 417 | 418 | .gallery_div { 419 | background-color: $secondary-text-color; 420 | } 421 | 422 | .gallery-block-avatar { 423 | justify-content: center; 424 | display: flex; 425 | } 426 | 427 | .gallery__img { 428 | @media screen and (min-width: 320px) { 429 | margin-bottom: 30px; 430 | margin-top: 80px; 431 | width: 85px; 432 | } 433 | @media screen and (min-width: 768px) { 434 | margin-bottom: 20px; 435 | margin-top: 121px; 436 | } 437 | @media screen and (min-width: 1200px) { 438 | margin-bottom: 15px; 439 | margin-top: 123px; 440 | } 441 | } 442 | 443 | .gallery-points { 444 | @media screen and (min-width: 320px) { 445 | display: flex; 446 | justify-content: center; 447 | margin-top: 30px; 448 | margin-bottom: 18px; 449 | } 450 | @media screen and (min-width: 768px) { 451 | margin-top: 24px; 452 | margin-bottom: 14px; 453 | } 454 | @media screen and (min-width: 1200px) { 455 | margin-top: 15px; 456 | margin-bottom: 15px; 457 | } 458 | } 459 | 460 | .gallery-points__item { 461 | border-radius: 50%; 462 | background-color: #c7133e; 463 | width: 4px; 464 | height: 4px; 465 | margin-left: 10px; 466 | 467 | &:first-child { 468 | margin-left: 0; 469 | } 470 | } 471 | 472 | .gallery-Emily { 473 | @media screen and (min-width: 320px) { 474 | font-family: 'DM Sans'; 475 | font-weight: 500; 476 | font-size: 14px; 477 | line-height: 26px; 478 | text-align: center; 479 | color: #000000; 480 | } 481 | @media screen and (min-width: 768px) { 482 | font-size: 16px; 483 | line-height: 30px; 484 | } 485 | @media screen and (min-width: 1200px) { 486 | font-size: 20px; 487 | line-height: 37px; 488 | } 489 | } 490 | 491 | .gallery__list { 492 | @media screen and (min-width: 320px) { 493 | align-items: center; 494 | margin-top: 30px; 495 | justify-content: center; 496 | display: flex; 497 | } 498 | @media screen and (min-width: 768px) { 499 | margin-top: 35px; 500 | } 501 | } 502 | 503 | .gallery__item-svg { 504 | fill: $title-color; 505 | } 506 | 507 | .gallery__item { 508 | margin-left: 18px; 509 | width: 12px; 510 | height: 12px; 511 | border-radius: 50%; 512 | background-color: #d9d9d9; 513 | transition-property: background-color; 514 | transition-duration: 350ms; 515 | transition-delay: 50ms; 516 | transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); 517 | &:hover { 518 | background-color: $title-color; 519 | } 520 | } 521 | -------------------------------------------------------------------------------- /src/sass/main.css: -------------------------------------------------------------------------------- 1 | @import '~node_modules/modern-normalize/modern-normalize.css'; 2 | ul { 3 | list-style: none; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | a { 9 | text-decoration: none; 10 | } 11 | 12 | h1, 13 | h2, 14 | h3 { 15 | margin-top: 0; 16 | margin-bottom: 0; 17 | } 18 | 19 | p { 20 | margin: 0; 21 | } 22 | 23 | img { 24 | display: block; 25 | width: 100%; 26 | } 27 | 28 | input { 29 | outline: none; 30 | } 31 | 32 | textarea { 33 | outline: none; 34 | } 35 | 36 | body { 37 | font-family: "DM Sans"; 38 | } 39 | 40 | button { 41 | cursor: pointer; 42 | transition-duration: 250ms; 43 | } 44 | button:hover { 45 | transform: scale(1.05); 46 | } 47 | 48 | .container { 49 | width: auto; 50 | margin-left: auto; 51 | margin-right: auto; 52 | padding-right: 115px; 53 | padding-left: 115px; 54 | } 55 | @media screen and (min-width: 320px) { 56 | .container { 57 | width: 320px; 58 | } 59 | } 60 | @media screen and (min-width: 768px) { 61 | .container { 62 | width: 768px; 63 | } 64 | } 65 | @media screen and (min-width: 1200px) { 66 | .container { 67 | width: 1200px; 68 | } 69 | } 70 | 71 | p::-moz-selection { 72 | background-color: #E17992; 73 | } 74 | 75 | p::selection { 76 | background-color: #E17992; 77 | } 78 | 79 | .passion, .products__100 { 80 | font-family: "Titan One"; 81 | font-weight: 400; 82 | font-size: 30px; 83 | line-height: 1.13; 84 | text-align: center; 85 | letter-spacing: 0.04em; 86 | text-transform: uppercase; 87 | color: #FFA5BA; 88 | display: block; 89 | margin-bottom: 15px; 90 | } 91 | 92 | .products__title { 93 | font-family: "Titan One"; 94 | font-weight: 400; 95 | font-size: 58px; 96 | line-height: 1.137; 97 | text-align: center; 98 | letter-spacing: 0.06em; 99 | text-transform: uppercase; 100 | color: #D41443; 101 | } 102 | 103 | header { 104 | position: absolute; 105 | top: 0; 106 | left: 0; 107 | right: 0; 108 | display: flex; 109 | align-items: center; 110 | z-index: 2; 111 | } 112 | 113 | .header__logo { 114 | position: absolute; 115 | width: 200px; 116 | left: 46px; 117 | top: 37px; 118 | } 119 | 120 | .header__list { 121 | padding-top: 50px; 122 | display: flex; 123 | justify-content: center; 124 | } 125 | 126 | .header__item { 127 | margin-left: 35px; 128 | } 129 | 130 | .header__link { 131 | font-family: "DM Sans"; 132 | font-style: normal; 133 | font-weight: 700; 134 | font-size: 16px; 135 | line-height: 21px; 136 | display: flex; 137 | align-items: center; 138 | color: #ffffff; 139 | } 140 | 141 | .header__btn { 142 | color: #d41443; 143 | background-color: #fff; 144 | border-radius: 22px; 145 | border: none; 146 | width: 159px; 147 | height: 44px; 148 | font-family: "DM Sans"; 149 | font-style: normal; 150 | font-weight: 700; 151 | font-size: 16px; 152 | line-height: 21px; 153 | } 154 | 155 | .hero { 156 | position: relative; 157 | background-color: #FFB8CA; 158 | padding-top: 160px; 159 | height: 665px; 160 | } 161 | 162 | .hero__title { 163 | font-family: "Titan One"; 164 | font-style: normal; 165 | font-weight: 400; 166 | font-size: 38px; 167 | line-height: 44px; 168 | letter-spacing: 0.04em; 169 | text-transform: uppercase; 170 | color: #fff; 171 | display: flex; 172 | flex-wrap: wrap; 173 | max-width: 277px; 174 | } 175 | 176 | .passion { 177 | color: #D41443; 178 | font-size: 58px; 179 | line-height: 0.9; 180 | } 181 | 182 | .hero-block-btn { 183 | display: flex; 184 | margin-top: 25px; 185 | } 186 | 187 | .hero__button1 { 188 | font-family: "DM Sans"; 189 | font-style: normal; 190 | font-weight: 400; 191 | font-size: 14px; 192 | line-height: 18px; 193 | display: flex; 194 | align-items: center; 195 | color: #fff; 196 | background-color: #D41443; 197 | border-radius: 20px; 198 | border: none; 199 | height: 40px; 200 | width: 104px; 201 | justify-content: center; 202 | } 203 | 204 | .hero__button2 { 205 | font-family: "DM Sans"; 206 | font-style: normal; 207 | font-weight: 400; 208 | font-size: 14px; 209 | line-height: 18px; 210 | display: flex; 211 | align-items: center; 212 | color: #fff; 213 | background-color: #fff; 214 | border-radius: 20px; 215 | border: none; 216 | height: 40px; 217 | width: 136px; 218 | justify-content: center; 219 | color: #D41443; 220 | margin-left: 15px; 221 | } 222 | 223 | .hero__numbers { 224 | position: absolute; 225 | left: 1111px; 226 | top: 156px; 227 | } 228 | 229 | .hero__milk-text { 230 | display: flex; 231 | margin-top: 56px; 232 | align-items: center; 233 | } 234 | 235 | .hero-block-arrow { 236 | position: relative; 237 | display: flex; 238 | } 239 | 240 | .hero__text { 241 | font-family: "DM Sans"; 242 | font-style: normal; 243 | font-weight: 400; 244 | font-size: 14px; 245 | line-height: 1.4; 246 | color: #fff; 247 | max-width: 200px; 248 | } 249 | 250 | .hero__arrow { 251 | position: absolute; 252 | background-image: url(../images/her-arrow.svg); 253 | height: 26px; 254 | width: 26px; 255 | background-color: transparent; 256 | border: none; 257 | display: block; 258 | top: 93px; 259 | } 260 | 261 | .hero-icecream { 262 | position: absolute; 263 | height: 557px; 264 | width: 236px; 265 | left: 594px; 266 | top: 108px; 267 | } 268 | 269 | .circle { 270 | position: absolute; 271 | z-index: -1; 272 | width: 538px; 273 | height: 538px; 274 | left: 475px; 275 | top: 52px; 276 | background-color: #FFA5BA; 277 | border-radius: 50%; 278 | } 279 | 280 | .hero__woman { 281 | position: absolute; 282 | width: 293px; 283 | height: 232px; 284 | left: 878px; 285 | top: 433px; 286 | } 287 | 288 | .hero__list { 289 | display: flex; 290 | flex-direction: column; 291 | justify-content: center; 292 | } 293 | 294 | .hero__number { 295 | font-family: "Titan One"; 296 | font-style: normal; 297 | font-weight: 400; 298 | font-size: 46px; 299 | line-height: 53px; 300 | text-align: right; 301 | letter-spacing: 0.04em; 302 | text-transform: uppercase; 303 | color: #D41443; 304 | display: block; 305 | } 306 | 307 | .hero__subtext { 308 | font-family: "DM Sans"; 309 | font-style: normal; 310 | font-weight: 400; 311 | font-size: 14px; 312 | line-height: 18px; 313 | text-align: right; 314 | color: #fff; 315 | } 316 | 317 | .circle1 { 318 | position: absolute; 319 | width: 30px; 320 | height: 30px; 321 | left: 1153px; 322 | top: 156px; 323 | z-index: -1; 324 | border-radius: 50%; 325 | background-color: #fff; 326 | } 327 | 328 | .circle2 { 329 | position: absolute; 330 | width: 30px; 331 | height: 30px; 332 | left: 1153px; 333 | top: 248px; 334 | z-index: -1; 335 | border-radius: 50%; 336 | background-color: #fff; 337 | } 338 | 339 | .products { 340 | padding-top: 127px; 341 | padding-bottom: 119px; 342 | } 343 | 344 | .products__list { 345 | display: flex; 346 | margin-top: 259px; 347 | justify-content: center; 348 | } 349 | 350 | .products__item { 351 | margin-right: 30px; 352 | border-radius: 24px; 353 | padding-top: 163px; 354 | padding-right: 44px; 355 | padding-bottom: 50px; 356 | padding-left: 44px; 357 | position: relative; 358 | } 359 | .products__item:first-child { 360 | background-color: #FFB8CA; 361 | } 362 | .products__item:nth-child(2) { 363 | background-color: #f0d1a5; 364 | } 365 | .products__item:last-child { 366 | margin-right: 0; 367 | background-color: #c2e297; 368 | } 369 | 370 | .products__subtitle { 371 | font-weight: 400; 372 | font-size: 30px; 373 | line-height: 1.13; 374 | text-align: center; 375 | letter-spacing: 0.04em; 376 | text-transform: uppercase; 377 | color: #fff; 378 | font-family: "Titan One"; 379 | margin-top: 38px; 380 | } 381 | .products__subtitle::after { 382 | content: "..."; 383 | display: block; 384 | margin-top: 32px; 385 | } 386 | 387 | .products__text { 388 | font-weight: 700; 389 | font-size: 16px; 390 | line-height: 1.75; 391 | text-align: center; 392 | letter-spacing: 0.04em; 393 | color: #fff; 394 | margin-top: 32px; 395 | } 396 | 397 | .products__icecream { 398 | position: absolute; 399 | top: -200px; 400 | right: 0.5%; 401 | } 402 | 403 | .products__btn { 404 | background-image: url(../images/products-arrow.svg); 405 | height: 40px; 406 | width: 40px; 407 | background-color: transparent; 408 | border: none; 409 | margin-top: 62px; 410 | } 411 | 412 | .locations { 413 | background-image: linear-gradient(to bottom, #FFF5F6 50%, #fff); 414 | } 415 | 416 | .locations__list { 417 | display: flex; 418 | } 419 | 420 | .locations__item { 421 | padding-top: 51px; 422 | padding-right: 44px; 423 | padding-bottom: 62px; 424 | padding-left: 43px; 425 | } 426 | 427 | footer { 428 | padding-top: 165px; 429 | } 430 | 431 | .container .footer__container { 432 | display: flex; 433 | justify-content: space-between; 434 | border-bottom: 1px solid #e1e1e1; 435 | padding-bottom: 97px; 436 | } 437 | 438 | .footer__contact { 439 | font-weight: 700; 440 | font-size: 16px; 441 | line-height: 1.875; 442 | letter-spacing: 0.02em; 443 | color: #000; 444 | } 445 | 446 | .footer__phone { 447 | color: #D41443; 448 | } 449 | 450 | .footer__company { 451 | margin-top: 9px; 452 | } 453 | 454 | .footer__company-text { 455 | font-weight: 700; 456 | font-size: 14px; 457 | line-height: 1.86; 458 | letter-spacing: 0.02em; 459 | color: #907E82; 460 | text-align: center; 461 | } 462 | 463 | .footer__icon-list { 464 | display: flex; 465 | margin-bottom: 50px; 466 | justify-content: flex-end; 467 | } 468 | 469 | .footer__icon { 470 | margin-right: 24px; 471 | } 472 | .footer__icon:last-child { 473 | margin-right: 0; 474 | } 475 | 476 | .footer__link { 477 | background-color: #fea5bb; 478 | border-radius: 50%; 479 | width: 34px; 480 | height: 34px; 481 | display: flex; 482 | justify-content: center; 483 | align-items: center; 484 | fill: #fff; 485 | }/*# sourceMappingURL=main.css.map */ -------------------------------------------------------------------------------- /src/sass/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["_common.scss","base/_reset.scss","main.css","base/_commo.scss","utils/_placeholders.scss","utils/_vars.scss","components/_header.scss","components/_hero.scss","utils/_mixins.scss","components/_products.scss","components/_locations.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ,6DAAA;ACAR;EACE,gBAAA;EACA,UAAA;EACA,SAAA;ACEF;;ADAA;EACE,qBAAA;ACGF;;ADDA;;;EAGE,aAAA;EACA,gBAAA;ACIF;;ADFA;EACE,SAAA;ACKF;;ADHA;EACE,cAAA;EACA,WAAA;ACMF;;ADJA;EACE,aAAA;ACOF;;ADLA;EACE,aAAA;ACQF;;ACjCA;EACE,sBAAA;ADoCF;;AClCA;EACE,eAAA;EACA,0BAAA;ADqCF;ACpCE;EACG,sBAAA;ADsCL;;ACnCA;EACI,WAAA;EACA,iBAAA;EACA,kBAAA;EACA,oBAAA;EACA,mBAAA;ADsCJ;ACrCI;EANJ;IAOQ,YAAA;EDwCN;AACF;ACvCI;EATJ;IAUQ,YAAA;ED0CN;AACF;ACzCI;EAZJ;IAaQ,aAAA;ED4CN;AACF;;AC1CA;EACI,yBAAA;AD6CJ;;AC9CA;EACI,yBAAA;AD6CJ;;AExEA;EACE,wBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,sBAAA;EACA,yBAAA;EACA,cCPe;EDQf,cAAA;EACA,mBAAA;AF2EF;;AEzEA;EACE,wBAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,kBAAA;EACA,sBAAA;EACA,yBAAA;EACA,cCpBY;AHgGd;;AIhGA;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,aAAA;EACA,mBAAA;EACA,UAAA;AJmGF;;AIhGA;EACE,kBAAA;EACA,YAAA;EACA,UAAA;EACA,SAAA;AJmGF;;AIhGA;EACE,iBAAA;EACA,aAAA;EACA,uBAAA;AJmGF;;AI9FA;EACE,iBAAA;AJiGF;;AI9FA;EACE,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,cAAA;AJiGF;;AI9FA;EAIE,cAAA;EACA,sBDzCqB;EC0CrB,mBAAA;EACA,YAAA;EACA,YAAA;EACA,YAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;AJ8FF;;AKpJA;EACE,kBAAA;EACA,yBAAA;EACA,kBAAA;EACA,aAAA;ALuJF;;AK9IA;EACE,wBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;EACA,yBAAA;EACA,WFjBqB;EEkBrB,aAAA;EACA,eAAA;EACA,gBAAA;ALiJF;;AK9IA;EACE,cF5BY;EE6BZ,eAAA;EACA,gBAAA;ALiJF;;AK9IA;EACE,aAAA;EACA,gBAAA;ALiJF;;AK9IA;EC5BE,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,WHbqB;EGcrB,yBHlBY;EGmBZ,mBAAA;EACA,YAAA;EACA,YAAA;EACA,YDiByB;EChBzB,uBAAA;AN8KF;;AK3JA;EChCE,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,WHbqB;EGcrB,sBHdqB;EGerB,mBAAA;EACA,YAAA;EACA,YAAA;EACA,YDqByB;ECpBzB,uBAAA;EDqBA,cF5CY;EE6CZ,iBAAA;AL2KF;;AKxKA;EACE,kBAAA;EACA,YAAA;EACA,UAAA;AL2KF;;AKxKA;EACE,aAAA;EACA,gBAAA;EACA,mBAAA;AL2KF;;AKhKA;EACE,kBAAA;EACA,aAAA;ALmKF;;AKhKA;EACE,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,WF3EqB;EE4ErB,gBAAA;ALmKF;;AKhKA;EACE,kBAAA;EACA,8CAAA;EACA,YAAA;EACA,WAAA;EACA,6BAAA;EACA,YAAA;EACA,cAAA;EACA,SAAA;ALmKF;;AKhKA;EACE,kBAAA;EACA,aAAA;EACA,YAAA;EACA,WAAA;EACA,UAAA;ALmKF;;AKhKA;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,WAAA;EACA,SAAA;EACA,yBF5Ge;EE6Gf,kBAAA;ALmKF;;AKhKA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,WAAA;EACA,UAAA;ALmKF;;AKhKA;EACE,aAAA;EACA,sBAAA;EACA,uBAAA;ALmKF;;AK7JA;EACE,wBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,sBAAA;EACA,yBAAA;EACA,cF3IY;EE4IZ,cAAA;ALgKF;;AK7JA;EACE,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,WFlJqB;AHkTvB;;AK7JA;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;EACA,sBF7JqB;AH6TvB;;AK7JA;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;EACA,sBFxKqB;AHwUvB;;AO5UA;EACE,kBAAA;EACA,qBAAA;AP+UF;;AOvUA;EACE,aAAA;EACA,iBAAA;EACA,uBAAA;AP0UF;;AOxUA;EACE,kBAAA;EACA,mBAAA;EACA,kBAAA;EACA,mBAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;AP2UF;AO1UE;EACE,yBJtBgB;AHkWpB;AO1UE;EACE,yBAAA;AP4UJ;AO1UE;EACE,eAAA;EACA,yBAAA;AP4UJ;;AOzUA;EACE,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,sBAAA;EACA,yBAAA;EACA,WJrCqB;EIsCrB,wBAAA;EACA,gBAAA;AP4UF;AO3UE;EACE,cAAA;EACA,cAAA;EACA,gBAAA;AP6UJ;;AO1UA;EDjDE,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,kBC+CgC;ED9ChC,sBAAA;EACA,WHFqB;EIgDnB,gBAAA;APkVJ;;AOhVA;EACI,kBAAA;EACA,WAAA;EACA,WAAA;APmVJ;;AOjVA;EACI,mDAAA;EACA,YAAA;EACA,WAAA;EACA,6BAAA;EACA,YAAA;EACA,gBAAA;APoVJ;;AQrZA;EACI,+DAAA;ARwZJ;;AQtZA;EACI,aAAA;ARyZJ;;AQvZA;EACI,iBAAA;EACA,mBAAA;EACA,oBAAA;EACA,kBAAA;AR0ZJ;;ASpaA;EACE,kBAAA;ATuaF;;ASraA;EACE,aAAA;EACA,8BAAA;EACA,gCAAA;EACA,oBAAA;ATwaF;;ASnaA;EACE,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,sBAAA;EACA,WNdW;AHobb;;ASpaA;EACE,cNpBY;AH2bd;;ASraA;EACE,eAAA;ATwaF;;AStaA;EACE,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;EACA,cNzBc;EM0Bd,kBAAA;ATyaF;;ASvaA;EACE,aAAA;EACA,mBAAA;EACA,yBAAA;AT0aF;;ASxaA;EACE,kBAAA;AT2aF;AS1aE;EACE,eAAA;AT4aJ;;ASzaA;EACE,yBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,UAAA;AT4aF","file":"main.css"} -------------------------------------------------------------------------------- /src/sass/main.scss: -------------------------------------------------------------------------------- 1 | @import './common'; 2 | @import './base/reset'; 3 | @import './base/commo'; 4 | @import './utils/vars'; 5 | @import './utils/placeholders'; 6 | @import './utils/mixins'; 7 | @import './components/header'; 8 | @import './components/hero'; 9 | @import './components/products'; 10 | @import './components/tradition'; 11 | @import './components/locations'; 12 | @import './components/footer'; 13 | @import './components/modal'; 14 | @import './components/burger-modal'; 15 | -------------------------------------------------------------------------------- /src/sass/utils/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin special-text($align) { 2 | font-weight: 700; 3 | font-size: 16px; 4 | line-height: 1.75; 5 | text-align: $align; 6 | letter-spacing: 0.04em; 7 | color: $secondary-text-color; 8 | } 9 | 10 | @mixin btn($btn-background: $title-color, $btn-width: 159px) { 11 | font-family: 'DM Sans'; 12 | font-style: normal; 13 | font-weight: 400; 14 | 15 | display: flex; 16 | align-items: center; 17 | color: $secondary-text-color; 18 | background-color: $btn-background; 19 | border-radius: 20px; 20 | border: none; 21 | width: $btn-width; 22 | justify-content: center; 23 | @media screen and (min-width: 320px) { 24 | height: 24px; 25 | font-size: 8px; 26 | line-height: 10px; 27 | } 28 | @media screen and (min-width: 1200px) { 29 | height: 40px; 30 | font-size: 14px; 31 | line-height: 18px; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/sass/utils/_placeholders.scss: -------------------------------------------------------------------------------- 1 | %subtitle { 2 | font-family: 'Titan One'; 3 | font-weight: 400; 4 | font-size: 30px; 5 | line-height: 1.13; 6 | text-align: center; 7 | letter-spacing: 0.04em; 8 | text-transform: uppercase; 9 | color: $subtitle-color; 10 | display: block; 11 | margin-bottom: 15px; 12 | } 13 | %title { 14 | font-family: 'Titan One'; 15 | font-weight: 400; 16 | font-size: 58px; 17 | line-height: 1.137; 18 | text-align: center; 19 | letter-spacing: 0.06em; 20 | text-transform: uppercase; 21 | color: $title-color; 22 | } 23 | %main-text { 24 | font-weight: 500; 25 | font-size: 16px; 26 | line-height: 1.75; 27 | letter-spacing: 0.04em; 28 | color: $text-color; 29 | } 30 | %subtext { 31 | font-weight: 500; 32 | font-size: 14px; 33 | line-height: 1.92; 34 | letter-spacing: 0.04em; 35 | color: $subtext-color; 36 | } 37 | -------------------------------------------------------------------------------- /src/sass/utils/_vars.scss: -------------------------------------------------------------------------------- 1 | $title-color: #D41443; 2 | $subtitle-color: #FFA5BA; 3 | $background-color: #FFB8CA; 4 | $text-color: #000; 5 | $secondary-text-color: #fff; 6 | $subtext-color: #907E82; -------------------------------------------------------------------------------- /src/wickedcss.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * WickedCSS v1.0 (https://github.com/kristofferandreasen/wickedCSS) 3 | * Copyright 2015 Kristoffer Andreasen 4 | * MIT License 5 | */.barrelRoll,.fadeIn,.floater,.heartbeat,.pulse,.rollerLeft,.rollerRight,.rotateIn,.rotateInLeft,.rotateInRight,.rotation,.shake,.sideToSide,.slideDown,.slideLeft,.slideRight,.slideUp,.spinner,.wiggle,.zoomer,.zoomerOut{visibility:visible!important}.rotation{animation-name:rotation;-webkit-animation-name:rotation;animation-duration:4s;-webkit-animation-duration:4s;animation-timing-function:linear;-webkit-animation-timing-function:linear;animation-iteration-count:infinite}.rotation,.sideToSide{-webkit-animation-iteration-count:infinite}@-webkit-keyframes rotation{from{-webkit-transform:rotate(0) translateX(50%) rotate(0)}to{-webkit-transform:rotate(360deg) translateX(50%) rotate(-360deg)}}@keyframes rotation{from{transform:rotate(0) translateX(50%) rotate(0)}to{transform:rotate(360deg) translateX(50%) rotate(-360deg)}}.sideToSide{animation-name:sideToSide;-webkit-animation-name:sideToSide;animation-duration:3s;-webkit-animation-duration:3s;animation-timing-function:ease;-webkit-animation-timing-function:ease;animation-iteration-count:infinite}@-webkit-keyframes sideToSide{0%,100%{-webkit-transform:translate(100%,0)}50%{-webkit-transform:translate(-100%,0)}}@keyframes sideToSide{0%,100%{transform:translate(100%,0)}50%{transform:translate(-100%,0)}}.zoomer{animation-name:zoomer;-webkit-animation-name:zoomer;-webkit-animation-duration:1s;-webkit-animation-timing-function:cubic-bezier(.5,.2,.3,1);animation-iteration-count:1}.zoomer,.zoomerOut{-webkit-animation-iteration-count:1;animation-timing-function:cubic-bezier(.5,.2,.3,1);animation-duration:1s}@-webkit-keyframes zoomer{0%{-webkit-transform:scale(.3)}100%{-webkit-transform:scale(1)}}@keyframes zoomer{0%{transform:scale(.3)}100%{transform:scale(1)}}.zoomerOut{animation-name:zoomerOut;-webkit-animation-name:zoomerOut;-webkit-animation-duration:1s;-webkit-animation-timing-function:cubic-bezier(.5,.2,.3,1);animation-iteration-count:1;animation-fill-mode:forwards}.rollerRight,.zoomerOut{-webkit-animation-fill-mode:forwards}@-webkit-keyframes zoomerOut{0%{-webkit-transform:scale(1)}100%{-webkit-transform:scale(0)}}@keyframes zoomerOut{0%{transform:scale(1)}100%{transform:scale(0)}}.spinner{animation-name:spinner;-webkit-animation-name:spinner;-webkit-animation-duration:2s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.pulse,.spinner{animation-timing-function:linear;animation-duration:2s}@-webkit-keyframes spinner{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@keyframes spinner{from{transform:rotate(0)}to{transform:rotate(360deg)}}.pulse{animation-name:pulse;-webkit-animation-name:pulse;-webkit-animation-duration:2s;-webkit-animation-timing-function:linear;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite}@keyframes pulse{0%,100%{transform:scale(.9);opacity:.9}50%{transform:scale(1);opacity:1}}@-webkit-keyframes pulse{0%,100%{-webkit-transform:scale(.95);opacity:.9}50%{-webkit-transform:scale(1);opacity:1}}.shake{animation-name:shake;-webkit-animation-name:shake;-webkit-animation-duration:.4s;-webkit-animation-timing-function:ease;-webkit-animation-iteration-count:1}.barrelRoll,.shake{animation-iteration-count:1;animation-timing-function:ease;animation-duration:.4s}@keyframes shake{0%,100%{transform:translateX(0)}16%,50%,83%{transform:translateX(-10px)}33%,66%{transform:translateX(10px)}}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0)}16%,50%,83%{-webkit-transform:translateX(-10px)}33%,66%{-webkit-transform:translateX(10px)}}.barrelRoll{animation-name:barrelRoll;-webkit-animation-name:barrelRoll;-webkit-animation-duration:.4s;-webkit-animation-timing-function:ease;-webkit-animation-iteration-count:1}@keyframes barrelRoll{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes barrelRoll{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}.floater{animation-name:floater;-webkit-animation-name:floater;animation-duration:1.5s;-webkit-animation-duration:1.5s;-webkit-animation-iteration-count:infinite}.floater,.wiggle{animation-iteration-count:infinite}@keyframes floater{0%,100%{transform:translateY(0)}50%{transform:translateY(8%)}}@-webkit-keyframes floater{0%,100%{-webkit-transform:translateY(0)}50%{-webkit-transform:translateY(8%)}}.wiggle{animation-name:wiggle;-webkit-animation-name:wiggle;animation-duration:2.5s;-webkit-animation-duration:2.5s;-webkit-animation-iteration-count:infinite}@keyframes wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}@-webkit-keyframes wiggle{0%,100%{-webkit-transform:rotate(-4deg)}50%{-webkit-transform:rotate(4deg)}}.pound{animation-name:pound;-webkit-animation-name:pound;animation-duration:.5s;-webkit-animation-duration:.5s;-webkit-animation-timing-function:ease;-webkit-animation-iteration-count:infinite;visibility:visible!important}.heartbeat,.pound{animation-iteration-count:infinite;animation-timing-function:ease}@keyframes pound{to{transform:scale(1.2)}}@-webkit-keyframes pound{to{transform:scale(1.2)}}.heartbeat{animation-name:heartbeat;-webkit-animation-name:heartbeat;animation-duration:3s;-webkit-animation-duration:3s;-webkit-animation-timing-function:ease;-webkit-animation-iteration-count:infinite}@keyframes heartbeat{0%,100%{transform:scale(1)}10%{transform:scale(1.2)}20%{transform:scale(1.4)}}@-webkit-keyframes heartbeat{0%,100%{-webkit-transform:scale(1)}10%{-webkit-transform:scale(1.2)}20%{-webkit-transform:scale(1.4)}}.rollerRight{animation-name:rollerRight;-webkit-animation-name:rollerRight;animation-duration:2s;-webkit-animation-duration:2s;-webkit-animation-timing-function:ease;-webkit-animation-iteration-count:1;animation-fill-mode:forwards}.rollerLeft,.rollerRight{animation-iteration-count:1;animation-timing-function:ease}@keyframes rollerRight{0%{transform:translateX(-200px) rotate(0);opacity:0}100%{transform:translateX(0) rotate(2turn);opacity:1}}@-webkit-keyframes rollerRight{0%{-webkit-transform:translateX(-200px) rotate(0);opacity:0}100%{-webkit-transform:translateX(0) rotate(2turn);opacity:1}}.rollerLeft{animation-name:rollerLeft;-webkit-animation-name:rollerLeft;animation-duration:2s;-webkit-animation-duration:2s;-webkit-animation-timing-function:ease;-webkit-animation-iteration-count:1;animation-fill-mode:forwards}.fadeOut,.rollerLeft{-webkit-animation-fill-mode:forwards}@keyframes rollerLeft{0%{transform:translateX(200px) rotate(0);opacity:0}100%{transform:translateX(0) rotate(-2turn);opacity:1}}@-webkit-keyframes rollerLeft{0%{-webkit-transform:translateX(200px) rotate(0);opacity:0}100%{-webkit-transform:translateX(0) rotate(-2turn);opacity:1}}.slideDown{animation-name:slideDown;-webkit-animation-name:slideDown;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease}.slideDown,.slideUp{animation-timing-function:ease;animation-duration:1s}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes slideDown{0%{-webkit-transform:translateY(-100%);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}.slideUp{animation-name:slideUp;-webkit-animation-name:slideUp;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes slideUp{0%{-webkit-transform:translateY(100%);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}.slideLeft{animation-name:slideLeft;-webkit-animation-name:slideLeft;animation-duration:1s;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease}.slideLeft,.slideRight{animation-timing-function:ease}@keyframes slideLeft{0%{transform:translateX(150%);opacity:0}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes slideLeft{0%{-webkit-transform:translateX(150%);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}.slideRight{animation-name:slideRight;-webkit-animation-name:slideRight;animation-duration:1s;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease}@keyframes slideRight{0%{transform:translateX(-150%);opacity:0}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes slideRight{0%{-webkit-transform:translateX(-150%);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}.fadeIn{animation-name:fadeIn;-webkit-animation-name:fadeIn;-webkit-animation-duration:2s;-webkit-animation-timing-function:ease}.fadeIn,.fadeOut{animation-timing-function:ease;animation-duration:2s}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeOut{animation-name:fadeOut;-webkit-animation-name:fadeOut;-webkit-animation-duration:2s;-webkit-animation-timing-function:ease;animation-fill-mode:forwards}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.rotateInRight{animation-name:rotateInRight;-webkit-animation-name:rotateInRight;animation-duration:3s;-webkit-animation-duration:3s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}.rotateInLeft,.rotateInRight{animation-timing-function:ease-in-out}@-webkit-keyframes rotateInRight{from{-webkit-transform:rotate(0) translateX(100%) rotate(0)}to{-webkit-transform:rotate(360deg) translateX(0) rotate(-360deg)}}@keyframes rotateInRight{from{transform:rotate(0) translateX(100%) rotate(0)}to{transform:rotate(360deg) translateX(0) rotate(-360deg)}}.rotateInLeft{animation-name:rotateInLeft;-webkit-animation-name:rotateInLeft;animation-duration:3s;-webkit-animation-duration:3s;-webkit-animation-timing-function:ease-in-out;animation-iteration-count:1}.rotateIn,.rotateInLeft{-webkit-animation-iteration-count:1}@-webkit-keyframes rotateInLeft{from{-webkit-transform:rotate(0) translateX(-100%) rotate(0)}to{-webkit-transform:rotate(360deg) translateX(0) rotate(-360deg)}}@keyframes rotateInLeft{from{transform:rotate(0) translateX(-100%) rotate(0)}to{transform:rotate(360deg) translateX(0) rotate(-360deg)}}.rotateIn{animation-name:rotateIn;-webkit-animation-name:rotateIn;animation-duration:3s;-webkit-animation-duration:3s;animation-timing-function:ease;-webkit-animation-timing-function:ease;animation-iteration-count:1;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate3d(0,0,1,-720deg);transform:rotate3d(0,0,1,-720deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate3d(0,0,1,-720deg);transform:rotate3d(0,0,1,-720deg);opacity:0}100%{-webkit-transform:none;transform:none;opacity:1}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}} --------------------------------------------------------------------------------