Web designing
This commit is contained in:
		
							
								
								
									
										11
									
								
								src/App.vue
									
									
									
									
									
								
							
							
						
						
									
										11
									
								
								src/App.vue
									
									
									
									
									
								
							| @@ -1,9 +1,6 @@ | ||||
| <template> | ||||
|   <div id="app"> | ||||
|     <div id="nav"> | ||||
|       <router-link to="/">Home</router-link> | | ||||
|       <router-link to="/about">About</router-link> | ||||
|     </div> | ||||
|     <navigation/> | ||||
|     <router-view/> | ||||
|   </div> | ||||
| </template> | ||||
| @@ -30,3 +27,9 @@ | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| <script> | ||||
| import Navigation from '@/components/Navigation.vue' | ||||
| export default { | ||||
|   components: { Navigation } | ||||
| } | ||||
| </script> | ||||
|   | ||||
| @@ -1,58 +0,0 @@ | ||||
| <template> | ||||
|   <div class="hello"> | ||||
|     <h1>{{ msg }}</h1> | ||||
|     <p> | ||||
|       For a guide and recipes on how to configure / customize this project,<br> | ||||
|       check out the | ||||
|       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. | ||||
|     </p> | ||||
|     <h3>Installed CLI Plugins</h3> | ||||
|     <ul> | ||||
|       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> | ||||
|       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> | ||||
|     </ul> | ||||
|     <h3>Essential Links</h3> | ||||
|     <ul> | ||||
|       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> | ||||
|       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> | ||||
|       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> | ||||
|       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> | ||||
|       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> | ||||
|     </ul> | ||||
|     <h3>Ecosystem</h3> | ||||
|     <ul> | ||||
|       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> | ||||
|       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> | ||||
|       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> | ||||
|       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> | ||||
|       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> | ||||
|     </ul> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
|   name: 'HelloWorld', | ||||
|   props: { | ||||
|     msg: String | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <!-- Add "scoped" attribute to limit CSS to this component only --> | ||||
| <style scoped lang="scss"> | ||||
| h3 { | ||||
|   margin: 40px 0 0; | ||||
| } | ||||
| ul { | ||||
|   list-style-type: none; | ||||
|   padding: 0; | ||||
| } | ||||
| li { | ||||
|   display: inline-block; | ||||
|   margin: 0 10px; | ||||
| } | ||||
| a { | ||||
|   color: #42b983; | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										27
									
								
								src/components/HomePageElement.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										27
									
								
								src/components/HomePageElement.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,27 @@ | ||||
| <template> | ||||
|   <div class="hello"> | ||||
|     <h1>{{ msg }}</h1> | ||||
|     <p>Witam na mojej stronie głównej. Wszystkich zainteresowanych oczywiście 😁</p> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
|  | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| h3 { | ||||
|   margin: 40px 0 0; | ||||
| } | ||||
| ul { | ||||
|   list-style-type: none; | ||||
|   padding: 0; | ||||
| } | ||||
| li { | ||||
|   display: inline-block; | ||||
|   margin: 0 10px; | ||||
| } | ||||
| a { | ||||
|   color: #42b983; | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										6
									
								
								src/components/Navigation.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										6
									
								
								src/components/Navigation.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,6 @@ | ||||
| <template> | ||||
|   <div id="nav"> | ||||
|     <router-link to="/">Strona główna</router-link> | | ||||
|     <router-link to="/about">O mnie</router-link> | ||||
|   </div> | ||||
| </template> | ||||
| @@ -1,7 +1,9 @@ | ||||
| <template> | ||||
|   <div class="about"> | ||||
|     <h1>O mnie</h1> | ||||
|     <p>Witajcie!</p> | ||||
|     <p>Nazywam się Kamil Niemczycki, jestem studentem uczelni Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy.</p> | ||||
|     <p>Nazywam się Kamil Niemczycki, jestem studentem kierunku Informatyka o specjalności Programowanie Aplikacji Mobilnych i Internetowych.</p> | ||||
|     <p>Swoją przygodę w internecie rozpocząłem od nagrywania poradników, które umieszczałem na moim starym kanale youtube Moje Poradniki (wcześniej Niemczycki12). Z czasem zacząłem odczuwać potrzebę wypowiedzenia się, co spowodowało, że utworzyłem drugi kanał NiKCamii (wcześniej KamilNiemczycki), który był miejscem gdzie dodawałem Vlogi.</p> | ||||
|     <p>Aktualnie zajmuję się projektowaniem i programowaniem aplikacji web w postaci stron www, wykorzystując od strony backend'u język skryptowy PHP. Znam także język znaczników - HTML 5, jego kompana - CSS, jak i podstawy JavaScript(), które są wykorzystwyane w frontend'dzie.</p> | ||||
|     <p>Backend, frontend ❤</p> | ||||
|   </div> | ||||
| </template> | ||||
|   | ||||
| @@ -1,13 +1,12 @@ | ||||
| <template> | ||||
|   <div class="home"> | ||||
|     <img alt="Vue logo" src="../assets/logo.png"> | ||||
|     <HelloWorld msg="Welcome to Your Vue.js App"/> | ||||
|     <img alt="KamilCraft.com logo" src="https://kamilcraft.com/assets/img/logo.png"> | ||||
|     <HelloWorld msg="Witam serdecznie 🤗"/> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // @ is an alias to /src | ||||
| import HelloWorld from '@/components/HelloWorld.vue' | ||||
| import HelloWorld from '@/components/HomePageElement.vue' | ||||
|  | ||||
| export default { | ||||
|   name: 'Home', | ||||
|   | ||||
		Reference in New Issue
	
	Block a user