First page with Main page

package-lock.json

@@ -2333,11 +2333,6 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
-    "bootstrap": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
-      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -8,7 +8,6 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "bootstrap": "^4.3.1",
     "core-js": "^2.6.5",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",

src/App.vue

@@ -12,6 +12,10 @@
 				<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 id="lang">
+					<span :class="[{ active: (select === 'Russia') }]" @click="SelectLang('Russia')">Ru</span>
+					<span :class="[{ active: (select === 'English') }]" @click="SelectLang('English')">En</span>	
+				</div>
 			</div>
 		</div>
 	</nav>
@@ -73,7 +77,7 @@ body{
 	}
 }
 .navig span{
-	font-size: 2em;
+	font-size: calc( 0.009 * 100vw + 11.2px );
 	color:#fff;
 	font-weight: 500;
 	margin-right: 1em;
@@ -175,12 +179,24 @@ a.router-link-exact-active:hover span{
 }
 div#logotip_div{
 	max-width: 38vw;
+	padding-left: 30px;
 }
 img#logotip{
 	max-width: 500px;
-	width: 33vw;
+	width: 22vw;
 	pointer-events: none;
 }
+.WidthNavigation.TitlesNavigation #lang{
+	color: white;
+	font-size: 35px;
+}
+.WidthNavigation.TitlesNavigation #lang span{
+	padding: 10px;
+}
+.WidthNavigation.TitlesNavigation #lang span.active{
+	border-radius: 50%;
+	border: 2px solid white;
+}
 
 
 
@@ -228,6 +244,8 @@ export default {
 	data () {
 		return {
 			mobile: false,
+			select: 'Russia',
+			activeClass: 'active',
 		}
 	},
 	methods:{
@@ -237,6 +255,9 @@ export default {
 		Before: function(){
 			this.mobile = this.$parent.mobile;
 		},
+		SelectLang(lang) {
+			this.select = lang;
+    	} 
 	}
 }
 </script>

src/components/Main.vue

@@ -24,6 +24,7 @@
 	-moz-osx-font-smoothing: grayscale;
 	text-align: center;
 	color: #2c3e50;
+	margin-top: 4vh;
 	/* height: 100vh; */
 }
 #main{