Hope555 / Webpage-mock-up

Webpage-mock-up

This project is built by Vue and Vuetify.

Time usage

12 hours

File structure

📦src
 ┣ 📂assets
 ┃ ┣ 📂font
 ┃ ┃ ┣ 📜Avenir-Black.otf
 ┃ ┃ ┣ 📜Avenir-BlackOblique.ttf
 ┃ ┃ ┣ 📜Avenir-Book.otf
 ┃ ┃ ┣ 📜Avenir-Medium.otf
 ┃ ┃ ┣ 📜Avenir-Roman.otf
 ┃ ┃ ┗ 📜font.css
 ┃ ┣ 📂icon
 ┃ ┃ ┣ 📜iconfont.css
 ┃ ┃ ┣ 📜iconfont.eot
 ┃ ┃ ┣ 📜iconfont.svg
 ┃ ┃ ┣ 📜iconfont.ttf
 ┃ ┃ ┗ 📜iconfont.woff
 ┃ ┗ 📂img
 ┃ ┃ ┣ 📜icon-1.svg
 ┃ ┃ ┣ 📜icon-2.svg
 ┃ ┃ ┣ 📜icon-3.svg
 ┃ ┃ ┣ 📜icon-4.svg
 ┃ ┃ ┣ 📜interior.jpg
 ┃ ┃ ┣ 📜logo-white.png
 ┃ ┃ ┣ 📜logo.png
 ┃ ┃ ┣ 📜melbourne.png
 ┃ ┃ ┣ 📜round-1.svg
 ┃ ┃ ┣ 📜round-2.svg
 ┃ ┃ ┗ 📜round-3.svg
 ┣ 📂components
 ┃ ┣ 📜Header.vue
 ┃ ┣ 📜Body.vue
 ┃ ┣ 📜BodyTop.vue
 ┃ ┣ 📜BodyMiddle.vue
 ┃ ┣ 📜BodyMiddleContentBlock.vue
 ┃ ┣ 📜BodyBottom.vue
 ┃ ┣ 📜Footer.vue
 ┃ ┗ 📜FooterNavList.vue
 ┣ 📂plugins
 ┃ ┗ 📜vuetify.js
 ┣ 📜App.vue
 ┗ 📜main.js

Build instructions

git clone https://github.com/Hope555/Webpage-mock-up.git
cd Webpage-mock-up
npm install
npm run serve

Then access http://localhost:8080/ in browser.