First page

package-lock.json

@@ -2845,7 +2845,8 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "coa": {
       "version": "2.0.2",
@@ -5374,7 +5375,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5395,12 +5397,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5415,17 +5419,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5542,7 +5549,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5554,6 +5562,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5568,6 +5577,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5575,12 +5585,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5599,6 +5611,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5679,7 +5692,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5691,6 +5705,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5776,7 +5791,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5812,6 +5828,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5831,6 +5848,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5874,12 +5892,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -9727,7 +9747,8 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "rx-lite-aggregates": {
       "version": "4.0.8",

src/App.vue

@@ -3,11 +3,11 @@
 	<nav class="container-fluid" id="navigator">
 		<div class="row">
 			<transition name="fade">
-				<div v-if="!mobile" id="logotip_div" class="WidthNavigation col-md-3">
+				<div v-if="!mobile" id="logotip_div" class="WidthNavigation">
 						<img id="logotip" src="./source/Logo.png" />
 				</div>
 			</transition>
-			<div class="WidthNavigation TitlesNavigation col-md-8">
+			<div class="WidthNavigation TitlesNavigation">
 				<router-link class="navig" to="/" exact><span>Главная</span></router-link>
 				<router-link class="navig" to="/product"><span>Оборудование</span></router-link>
 				<router-link class="navig" to="/files"><span>Услуги</span></router-link>
@@ -35,6 +35,8 @@ body{
 	-webkit-user-select: none;
 	font-family: Arial, Helvetica, sans-serif;
 	position: relative;
+	background-image: url('./source/Background.png') ;
+	background-size: cover;
 }
 @font-face {
 	font-family: "Europe";
@@ -100,6 +102,71 @@ a.navig:hover span{
 	text-align: right;
 	vertical-align: middle;
 }
+/* .Меню {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 1920px;
+  height: 4334px;
+  z-index: 6;
+}
+.Контакты {
+  font-size: 30px;
+  font-family: "Noah";
+  color: rgb(255, 255, 255);
+  font-weight: bold;
+  text-align: center;
+  -moz-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
+  -webkit-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
+  -ms-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
+  position: absolute;
+  left: 1424.35px;
+  top: 64.89px;
+  z-index: 5;
+}
+.Оборудование {
+  font-size: 30px;
+  font-family: "Noah";
+  color: rgb(255, 255, 255);
+  font-weight: bold;
+  text-align: center;
+  -moz-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
+  -webkit-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
+  -ms-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
+  position: absolute;
+  left: 1201.532px;
+  top: 64.253px;
+  z-index: 4;
+}
+.Услуги {
+  font-size: 30px;
+  font-family: "Noah";
+  color: rgb(255, 255, 255);
+  font-weight: bold;
+  text-align: center;
+  -moz-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
+  -webkit-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
+  -ms-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
+  position: absolute;
+  left: 1082.665px;
+  top: 64.753px;
+  z-index: 3;
+}
+.Главная {
+  font-size: 30px;
+  font-family: "Noah";
+  color: rgb(0, 146, 202);
+  font-weight: bold;
+  text-align: center;
+  -moz-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
+  -webkit-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
+  -ms-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
+  position: absolute;
+  left: 942.966px;
+  top: 64.887px;
+  z-index: 2;
+} */
+
 .router-link-exact-active span{
 	color: #00aeff;
 }
@@ -114,10 +181,6 @@ img#logotip{
 	width: 33vw;
 	pointer-events: none;
 }
-body{
-	background-image: url('./source/Background.jpg') ;
-	background-size: cover;
-}
 
 
 

src/components/Main.vue

 <template>
 	<div id="main">
 		<div id="block_title">
-			<p id="title">{{Title}}</p>
+			<div class="title_img">
+				<img class="img_on_main" src="../imgMain/pict/Earth.png" />
+			</div>
+			<div class="title">
+				<span id="title">{{Title}}</span>
+
+			</div>			
+		</div>
+		<div class="strelka">
+			<div id="arrow">
+				<div id="arrowleft"></div>
+				<div id="arrowright"></div>
 			</div>
-		<div id="strelka">
-			<span>∨</span>
 		</div>
 	</div>
 </template>
@@ -17,25 +26,113 @@
 	color: #2c3e50;
 	/* height: 100vh; */
 }
-#main div{
+#main{
 	width: 100%;
 	/* background-image: url('../source/Bacground.png') */
 }
 #main #block_title{
-	width: 42vw;
+	/* width: 43vw; */
 	margin: 0 auto;
-	margin-top: 3%;
-	margin-right: 12%;
+	padding-top: 6%;
+	/* margin-right: 13%; */
+	display: table-cell;
 }
-#main #title{
-	width: 95%;
-	margin: 0 auto;
-	font-size: 7.5em;
+#main #block_title div{
+	display: inline-block;
+	vertical-align: middle;
+}
+#main #block_title div.title_img{
+	width: 32%;
+}
+#main #block_title div.title_img img.img_on_main{
+	width: 72%;
+}
+#main #block_title div.title{
 	color: white;
 	text-align: left;
 	white-space: normal;
-	line-height: 0.9em;
+	text-transform: uppercase;
+	width: 40%;
+	/* font-family: "Noah"; */
+	font-weight: bold;
 }
+#main #title{
+	width: 95%;
+	margin: 0 auto;
+}
+#main #title {
+	font-size: calc( 0.05 * 100vw + 11.2px );
+}
+
+
+
+
+
+
+.strelka{
+	border-radius:50%;
+	border:3px solid white;
+	position: relative;
+	margin: 0 auto;
+}
+.strelka{
+	content: '';
+	background-color: none;
+	transition: all 0.3s;
+}
+#arrow{
+	margin-top: 39%;
+	margin-left: 22%;
+	width: 58%;
+	height: 58%;
+	position: relative;
+}
+#arrowleft, #arrowright{
+	position: absolute;
+	background-color: white;
+	width: 71%;
+	height: 9%;
+}
+#arrowleft{
+	transform: rotate(45deg);
+	transform-origin: bottom left;
+}
+#arrowright{
+	transform: rotate(-45deg);
+	transform-origin: bottom right;
+	right:0;
+}
+.strelka:hover{  
+	background-color: #00aeff;
+}
+
+
+
+@media only screen  and (min-width: 1400px) {
+	.strelka{
+		width: 40px;
+		height: 40px;
+		padding: 15px;
+		margin-top: 13vh;
+	}
+}
+@media only screen  and (max-width: 1399px) and (min-width: 1024px) {
+	.strelka{
+		width: 50px;
+		height: 50px;
+		padding: 15px;
+		margin-top: 13vh;
+	}
+}
+@media only screen  and (max-width: 1023px) and (min-width: 380px) {
+	.strelka{
+		width: 50px;
+		height: 50px;
+		padding: 15px;
+		margin-top: 13vh;
+	}
+}
+
 </style>
 <script>