diff --git a/Felidae/Felidae.ttf b/Felidae/Felidae.ttf new file mode 100644 index 0000000..554f296 Binary files /dev/null and b/Felidae/Felidae.ttf differ diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..58e7662 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Name? + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..8681eaf --- /dev/null +++ b/README.md @@ -0,0 +1,16 @@ +# πŸŽ‰ Welcome to MSHP_2035 Creative Work Project πŸŽ‰ + +This is a project created as part of the MSHP_2035 course and it's the first creative work of the course. The purpose of this project is to demonstrate creativity and showcase the skills learned throughout the course. + + +![Banner](github-header-image.png) + +## πŸš€ Project Overview πŸš€ + +The project is an application that showcases the creative capabilities of the developer. It includes a unique and user-friendly design that enhances the user experience. The application also provides some unique features that you may not find in other applications. + +## 🎨 Project Style 🎨 + +The app is designed with modern and elegant styles that bring a unique feel to the user. Colors, fonts, images, and icons are carefully selected to ensure visual harmony throughout the application. A user can feel the visual appeal of the app and enjoy using it. + +### Thank you for checking out my project! diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..357d4b0 --- /dev/null +++ b/css/style.css @@ -0,0 +1,198 @@ +@font-face { + font-family: Felidae; /* Имя ΡˆΡ€ΠΈΡ„Ρ‚Π° */ + src: url("../Felidae/Felidae.ttf"); /* ΠŸΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ со ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ */ + } +body{ + margin: 0; + padding: 0; + scroll-behavior: smooth; + font-family: 'Roboto', sans-serif; + overflow-x: hidden; + } + *,body, *::after,*::before{ + box-sizing: border-box; +} +.container{ + max-width: 1200px; + padding-left: 1rem; + padding-right: 1rem; + margin: 0 auto; +} +.animate{ + -webkit-animation: animate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; + animation: animate 1.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; +} +@-webkit-keyframes animate { + 0% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } + } + @keyframes animate { + 0% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } + } +.header{ + position: relative; +} +.text_logo{ + font-size: 1.2rem; + cursor: default; +} +ion-icon{ + padding-left: 0.3rem; +} +.logo{ + transition: background-color 0.5s, transform 0.5s ease-out; +} +.logo:hover{ + border-radius: 100%; + fill: #ffffff; + transform: scale(1.25); +} +.header_inner{ + display: flex; + justify-content: space-between; + align-items: center; +} +.menu-item{ + display: flex; +} +.menu__item{ + list-style: none; + padding: 0 1rem; +} +.menu__link{ + text-decoration: none; + font-size: 1.1rem; + color: gray; +} +.menu__link::after{ + content:''; + display: block; + width: 0px; + height: 2px; + background:rgb(100, 100, 100); + transition: 0.5s ease-in; + } +.menu__link:hover::after{ + width:100%; +} +.block-1{ + margin-top: 2rem; + position: relative; + display: flex; +} +.title{ + font-family: Felidae; + letter-spacing: 1px; + width: 100%; +} +.subtitle-1{ + width: 70%; + letter-spacing: 1px; +} +.subtitle-2{ + width: 70%; + letter-spacing: 1px; +} +.text-2{ + margin-top: 4rem; +} +.footer{ + background: rgb(92, 92, 92); + width: 100%; + height: 10rem; + color: #ffffff; +} +.foot-sub{ + font-size: 1rem; + letter-spacing: 0.5px; + padding-top: 1rem; +} +.year{ + margin-left: 90%; +} +@media (max-width: 1000px){ + .block-1{ + flex-wrap: wrap; + } + .title{ + text-align: center; + } + .subtitle-1{ + width: 60%; + text-align-last: center; + margin-left: 22%; + } + .subtitle-2{ + width: 60%; + text-align-last: center; + margin-left: 22%; + } + .img-1{ + margin: 0 auto; + } + .img-2{ + margin: 0 auto; + + } + .reverse{ + flex-wrap: wrap-reverse; + } + .foot-sub{ + font-size: 0.8rem; + } +} +@media (max-width: 565px){ + .subtitle-1{ + width: 80%; + margin-left: 12%; + } + .subtitle-2{ + width: 80%; + margin-left: 12%; + } + .img-2{ + max-width: 100%; + } + .img-1{ + max-width: 100%; + } +} +@media (max-width: 450px){ + .header_inner{ + flex-direction: column; + } + .logo{ + margin-top: 1rem; + } + .menu__item{ + padding: 0 1rem; + } + .menu__link{ + font-size: 0.9rem; + } + .img-1{ + max-width: 50%; + } + .subtitle-1{ + font-size: 0.8rem; + } + .subtitle-2{ + font-size: 0.8rem; + } + .footer{ + height: 15rem; + } +} \ No newline at end of file diff --git a/github-header-image.png b/github-header-image.png new file mode 100644 index 0000000..a1883f6 Binary files /dev/null and b/github-header-image.png differ diff --git a/img/JBL_TUNE_510BT_Product Image_Hero_Black.webp b/img/JBL_TUNE_510BT_Product Image_Hero_Black.webp new file mode 100644 index 0000000..0d99f32 Binary files /dev/null and b/img/JBL_TUNE_510BT_Product Image_Hero_Black.webp differ diff --git a/img/adrian-regeci-rlJngr1ReOw-unsplash.webp b/img/adrian-regeci-rlJngr1ReOw-unsplash.webp new file mode 100644 index 0000000..2471522 Binary files /dev/null and b/img/adrian-regeci-rlJngr1ReOw-unsplash.webp differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b4f778b --- /dev/null +++ b/index.html @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + Project for course + + +
+
+
+ + +
+
+
+
+
+

The future has become. Influnce the sound

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel voluptas velit iusto magni voluptatibus repellat asperiores, maiores dolor perferendis aliquid non error minima iure rem sequi atque in quibusdam minus! +

+
+ +
+
+
+
+ +
+

The new industry of headphones. Try it out!

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel voluptas velit iusto magni voluptatibus repellat asperiores, maiores dolor perferendis aliquid non error minima iure rem sequi atque in quibusdam minus! + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, ex. +

+
+
+
+
+ + + + + diff --git "a/\320\270\320\272\320\276\320\275\320\272\320\260/android-chrome-192x192.png" "b/\320\270\320\272\320\276\320\275\320\272\320\260/android-chrome-192x192.png" new file mode 100644 index 0000000..3f012cd Binary files /dev/null and "b/\320\270\320\272\320\276\320\275\320\272\320\260/android-chrome-192x192.png" differ diff --git "a/\320\270\320\272\320\276\320\275\320\272\320\260/android-chrome-512x512.png" "b/\320\270\320\272\320\276\320\275\320\272\320\260/android-chrome-512x512.png" new file mode 100644 index 0000000..bc2342f Binary files /dev/null and "b/\320\270\320\272\320\276\320\275\320\272\320\260/android-chrome-512x512.png" differ diff --git "a/\320\270\320\272\320\276\320\275\320\272\320\260/apple-touch-icon.png" "b/\320\270\320\272\320\276\320\275\320\272\320\260/apple-touch-icon.png" new file mode 100644 index 0000000..790aa0c Binary files /dev/null and "b/\320\270\320\272\320\276\320\275\320\272\320\260/apple-touch-icon.png" differ diff --git "a/\320\270\320\272\320\276\320\275\320\272\320\260/browserconfig.xml" "b/\320\270\320\272\320\276\320\275\320\272\320\260/browserconfig.xml" new file mode 100644 index 0000000..b3930d0 --- /dev/null +++ "b/\320\270\320\272\320\276\320\275\320\272\320\260/browserconfig.xml" @@ -0,0 +1,9 @@ + + + + + + #da532c + + + diff --git "a/\320\270\320\272\320\276\320\275\320\272\320\260/favicon-16x16.png" "b/\320\270\320\272\320\276\320\275\320\272\320\260/favicon-16x16.png" new file mode 100644 index 0000000..5e84d25 Binary files /dev/null and "b/\320\270\320\272\320\276\320\275\320\272\320\260/favicon-16x16.png" differ diff --git "a/\320\270\320\272\320\276\320\275\320\272\320\260/favicon-32x32.png" "b/\320\270\320\272\320\276\320\275\320\272\320\260/favicon-32x32.png" new file mode 100644 index 0000000..2dda91c Binary files /dev/null and "b/\320\270\320\272\320\276\320\275\320\272\320\260/favicon-32x32.png" differ diff --git "a/\320\270\320\272\320\276\320\275\320\272\320\260/favicon.ico" "b/\320\270\320\272\320\276\320\275\320\272\320\260/favicon.ico" new file mode 100644 index 0000000..a21f62c Binary files /dev/null and "b/\320\270\320\272\320\276\320\275\320\272\320\260/favicon.ico" differ diff --git "a/\320\270\320\272\320\276\320\275\320\272\320\260/mstile-150x150.png" "b/\320\270\320\272\320\276\320\275\320\272\320\260/mstile-150x150.png" new file mode 100644 index 0000000..f4fd655 Binary files /dev/null and "b/\320\270\320\272\320\276\320\275\320\272\320\260/mstile-150x150.png" differ diff --git "a/\320\270\320\272\320\276\320\275\320\272\320\260/safari-pinned-tab.svg" "b/\320\270\320\272\320\276\320\275\320\272\320\260/safari-pinned-tab.svg" new file mode 100644 index 0000000..5f83290 --- /dev/null +++ "b/\320\270\320\272\320\276\320\275\320\272\320\260/safari-pinned-tab.svg" @@ -0,0 +1,34 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + + + diff --git "a/\320\270\320\272\320\276\320\275\320\272\320\260/site.webmanifest" "b/\320\270\320\272\320\276\320\275\320\272\320\260/site.webmanifest" new file mode 100644 index 0000000..753a57d --- /dev/null +++ "b/\320\270\320\272\320\276\320\275\320\272\320\260/site.webmanifest" @@ -0,0 +1,19 @@ +{ + "name": "", + "short_name": "", + "icons": [ + { + "src": "ΠΈΠΊΠΎΠ½ΠΊΠ°/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "ΠΈΠΊΠΎΠ½ΠΊΠ°/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +}