move

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.

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!

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;
+	}
+}

index.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
+	<link rel="apple-touch-icon" sizes="180x180" href="иконка/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="иконка/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="иконка/favicon-16x16.png">
+	<link rel="manifest" href="иконка/site.webmanifest">
+	<link rel="mask-icon" href="иконка/safari-pinned-tab.svg" color="#5bbad5">
+	<meta name="msapplication-TileColor" content="#da532c">
+	<meta name="theme-color" content="#ffffff">
+	<link rel="stylesheet" href="css/style.css">
+	<title>Project for course</title>
+</head>
+<body>
+		<header class="header">
+			<div class="container">
+				<div class="header_inner">
+					<div class="logo">
+						<span class="text_logo">JBL<ion-icon name="headset-outline"></ion-icon></span>
+					</div>
+					<nav class="menu">
+						<ul class="menu-item">
+							<li class="menu__item">
+								<a href="#!" class="menu__link">About us</a>
+							</li>
+							<li class="menu__item">
+								<a href="#!" class="menu__link">Buy</a>
+							</li>
+							<li class="menu__item">
+								<a href="#!" class="menu__link">Contact</a>
+							</li>
+							<li class="menu__item">
+								<a href="#!" class="menu__link">FAQ</a>
+							</li>
+						</ul>
+					</nav>
+	</header>
+	<main>
+			<div class="container">
+				<div class="block-1 animate">
+					<div class="text-1">
+						<h1 class="title">The future has become. Influnce the sound</h1>
+						<p class="subtitle-1">
+							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!
+						</p>
+					</div>
+				<img src="img/adrian-regeci-rlJngr1ReOw-unsplash.webp" width="400" alt="" class="img-1">
+			</div>
+		</div>
+		<div class="container">
+			<div class="block-1 animate reverse">
+				<img src="img/JBL_TUNE_510BT_Product Image_Hero_Black.webp"  alt="" class="img-2">
+				<div class="text-2">
+					<h2 class="title">The new industry of headphones. Try it out!</h2>
+					<p class="subtitle-2">
+						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.
+					</p>
+				</div>
+		</div>
+	</div>
+	</main>
+	<footer class="footer">
+		<div class="container">
+			<div class="text-footer">
+				<p class="foot-sub">
+					Big Thanks to the team of this course, they make really big job. Another big thank to our teacher. I will be on the cloud nine if you write your feedback to me. The site is not selling anything. Be carefull. 
+					All rights not reserved. Use it in what way you want. Creative work.
+				</p>
+				<span class="year">2022</span>
+			</div>
+		</div>
+	</footer>
+	<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
+	<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
+</body>
+</html>

иконка/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

иконка/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"
+}