Main page without base, but with footer (?_adaptive_?)

src/App.vue

@@ -3,19 +3,21 @@
 	<nav class="container-fluid" id="navigator">
 		<div class="row">
 			<transition name="fade">
-				<div v-if="!mobile" id="logotip_div" class="WidthNavigation col-sm-3">
+				<div v-if="!mobile" id="logotip_div" class="WidthNavigation col-sm-3 col-md-3 col-lg-2">
 						<img id="logotip" src="./source/Logo.png" />
 				</div>
 			</transition>
-			<div class="WidthNavigation TitlesNavigation col-sm-7">
-				<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>
-				<router-link class="navig"  to="/contact"><span>Контакты</span></router-link>
-				<span id="lang">
+			<div class="WidthNavigation TitlesNavigation col-sm-7 col-md-9 col-lg-7">
+				<div class="menu">
+					<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>
+					<router-link class="navig"  to="/contact"><span>Контакты</span></router-link>
+				</div>
+				<div id="lang">
 						<span :class="[{ active: (select === 'Russia') }]" @click="SelectLang('Russia')">Ru</span>
 						<span :class="[{ active: (select === 'English') }]" @click="SelectLang('English')">En</span>	
-				</span>
+				</div>
 			</div>
 		</div>
 	</nav>
@@ -38,9 +40,6 @@ body{
 	-khtml-user-select: none;
 	-webkit-user-select: none;
 	font-family: Arial, Helvetica, sans-serif;
-	position: relative;
-	background-image: url('./source/Background.png') ;
-	background-size: cover;
 	overflow-x: hidden;
 }
 @font-face {
@@ -78,6 +77,12 @@ body{
 		height: 80px;
 	}
 }
+#navigator{
+	position: absolute;
+	top: 0;
+	left: 0;
+	max-height: 100px;
+}
 .navig span{
 	font-size: calc( 0.009 * 100vw + 11.2px );
 	color:#fff;
@@ -104,15 +109,14 @@ a.navig:hover span{
 	display: table-cell;
 }
 .WidthNavigation.TitlesNavigation{
-	width: 60vw;
 	text-align: right;
 	vertical-align: middle;
 }
 .router-link-exact-active span{
-	color: #00aeff;
+	color: rgb(0, 146, 202);
 }
 a.router-link-exact-active:hover span{
-	color: #00aeff;
+	color: rgb(0, 146, 202);
 }
 div#logotip_div{
 	max-width: 38vw;
@@ -126,11 +130,12 @@ img#logotip{
 @media only screen  and (max-width: 1023px) and (min-width: 300px) {
 
 }
-.WidthNavigation.TitlesNavigation #lang{
-	color: white;
-	width: 100px;
+.WidthNavigation.TitlesNavigation .menu{
+	margin-right: 16%;
+	display: inline;
 }
 .WidthNavigation.TitlesNavigation #lang{
+	color: white;
  	width: 10px;
 	display: inline;
 }

src/components/Main.vue

@@ -85,12 +85,34 @@
 				</div>
 			</div>
 		</div>
-		<div id="base" class="item row">
-			<div id="base_block" class="col-sm-12 col-md-12 col-lg-6">
+		<div class="background_image2">
+			<div id="base" class="item row">
+				<div id="base_block" class="col-sm-12 col-md-12 col-lg-6">
 
+				</div>
+				<div v-scroll-to="'#main'" class="strelka strelka_four">
+					<div id="arrow">
+						<div id="arrowleft"></div>
+						<div id="arrowright"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div id="footer">
+			<div class="footer">
+				<span>
+					{{footer_tel_mail}}
+				</span>
+			</div>
+			<div class="footer img">
+				<img id="logo" src="../source/Logo_circle.png" >
+			</div>
+			<div class="footer">
+				<span>
+					{{footer_address}}
+				</span>
 			</div>
 		</div>
-		
 	</div>
 </template>
 
@@ -100,13 +122,18 @@
 	-moz-osx-font-smoothing: grayscale;
 	text-align: center;
 	color: #2c3e50;
-	margin-top: 4vh;
 	/* height: 100vh; */
 	width: 100vw;
 	/* background-image: url('../source/Bacground.png') */
 }
 #main .background_image{
-	
+	padding-top: calc( 0.04 * 100vh + 100px );
+	background-image: url('../source/Background.png') ;
+	background-size: cover;	
+}
+#main .background_image2{
+	background-image: url('../source/Background2.png') ;
+	background-size: cover;	
 }
 #main .item{
 	/* width: 85%; */
@@ -163,10 +190,12 @@
 	width: 60%;
 }
 #main .about_block p#about_title{
+	width: 90%;
 	text-transform: uppercase;
 	font-size: calc( 0.01 * 100vmin + 19.2px );
 	color: white;
 	font-weight: bold;
+	margin: 0 auto;
 }
 #main .about_block .about_mini_block{
 	margin-top:6vh;
@@ -330,8 +359,13 @@
 	margin-left: calc(50% - 25px);
 }
 .strelka_three{
+	margin-top: 25px;
+	margin-left: calc(50% - 25px);
+}
+.strelka_four{
 	margin-top: 30px;
 	margin-left: calc(50% - 25px);
+	transform: rotate(180deg);
 }
 
 
@@ -366,6 +400,29 @@
 	}
 }
 
+
+
+
+#main #footer{
+	height: 7vh;
+	width: 100vw;
+	display: table-cell;
+	vertical-align: middle;
+	background: black;
+}
+#main #footer span{
+    font-size: calc(0.5 * 100% + 12px);
+	color: white;
+	font-weight: bold;
+}
+#main #footer .footer{
+	display: inline;
+}
+#main #footer div img#logo{
+	width: 50px;
+}#main #footer div.footer.img{
+	padding: 30px;
+}
 </style>
 <script>
 
@@ -416,6 +473,9 @@ export default {
 				},
 			],
 			info_telescope: 'АО "АНЦ" осуществляет управление работой 51 телескопом с апертурой от 19см до 65см, размещенными в 14 обсерваториях',
+
+			footer_tel_mail: ' +7 (495) 641 5135 / info@ancprotek.ru ',
+			footer_address: 'Россия, Москва, шоссе Энтузиастов, 56с25' 
 		}
 	},
 	created: function (){