mirror of
https://github.com/KevinMidboe/planetposen.git
synced 2025-12-08 20:38:56 +00:00
Created header and the start of a shopping cart.
This commit is contained in:
91
frontend/components/Cart.vue
Normal file
91
frontend/components/Cart.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="container cart">
|
||||
<div class="row header">
|
||||
<div class="product">
|
||||
<h2>Product</h2>
|
||||
</div>
|
||||
<div class="info">
|
||||
<h2>Quantity</h2>
|
||||
<h2>Price</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="product">
|
||||
<img src="https://planetposen.no/Planetposen/Kjp_na_files/Media/IMG_1244/IMG_1244.jpg" />
|
||||
|
||||
<div class="flex-direction-column">
|
||||
<h3>Christmas joy</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Cart'
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.cart {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 150px;
|
||||
|
||||
&.header {
|
||||
height: min-content;
|
||||
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.product {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
display: inherit;
|
||||
flex-direction: inherit;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
h3, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 40%;
|
||||
display: inherit;
|
||||
flex-direction: inherit;
|
||||
|
||||
h2 {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
102
frontend/components/Header.vue
Normal file
102
frontend/components/Header.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<header class="flex space-between">
|
||||
<div>
|
||||
<img class="logo" src="https://planetposen.no/Planetposen/Hjem_files/shapeimage_1.png" />
|
||||
|
||||
<router-link to="/" class="header-element">
|
||||
<span>Hjem</span>
|
||||
</router-link>
|
||||
<router-link to="/" class="header-element">
|
||||
<span>Om oss</span>
|
||||
</router-link>
|
||||
<router-link to="/" class="header-element">
|
||||
<span>Produkter</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<!-- <i class="icon icon--profile"></i> -->
|
||||
<router-link to="/cart">
|
||||
<i class="icon icon--cart-outline header-element"></i>
|
||||
</router-link>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Header'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./frontend/styles/variables";
|
||||
|
||||
$header-height: 80px;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #3b945e; // 3
|
||||
height: $header-height;
|
||||
color: #f2f2f2; // 3
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $header-height;
|
||||
|
||||
a {
|
||||
text-decoration: unset;
|
||||
color: inherit;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// background-color: $green; // 1
|
||||
// background-color: #3aafa9; // 2
|
||||
// background-color: #3b945e; // 3
|
||||
// color: $text-color; // 1
|
||||
// color: white; // 2
|
||||
// color: #f2f2f2; // 3
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.header-element {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.7rem;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
// background-color: #379683; // 1
|
||||
background-color: #def2f1; // 2
|
||||
// background-color: #57ba98; // 3
|
||||
color: white; // 1
|
||||
color: $text-color; // 2
|
||||
color: #182628; // 3
|
||||
// background-color: #8ee4af;
|
||||
}
|
||||
|
||||
// &:first-of-type {
|
||||
// margin-left: 5rem;
|
||||
// }
|
||||
|
||||
span {
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: lowercase;
|
||||
font-weight: 300;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
34
frontend/components/Home.vue
Normal file
34
frontend/components/Home.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- <div class="img" :style="{'background-image': 'url(https://i.imgur.com/GTPZgje.jpg)'}"></div> -->
|
||||
<div class="img" :style="{'background-image': 'url(./frontend/assets/images/IMG_1122.jpeg)'}"></div>
|
||||
|
||||
<h1>Welcome home</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Home',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
height: 200vh;
|
||||
}
|
||||
|
||||
.img {
|
||||
height: calc(80vh - 80px);
|
||||
width: 100vw;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user