diff --git a/TODO.md b/TODO.md index 4e1b2fb..e6095ac 100644 --- a/TODO.md +++ b/TODO.md @@ -7,12 +7,12 @@ * Proper background images for hover effect ## contact -* social icons at bottom right of form * form background image ## General * loading transitions * nav buttons +* social nav items -> put in store or whatever ## Maybes * gallery page - featured images in same style as on services page with the diff --git a/pages/contact.vue b/pages/contact.vue index 263ff6f..3dbf5b7 100644 --- a/pages/contact.vue +++ b/pages/contact.vue @@ -39,12 +39,31 @@ - + + @@ -78,7 +97,13 @@ export default { email: "", subject: "", message: "", - } + }, + socialNav: [ + { 'to': 'https://www.instagram.com', 'text': 'Instagram', icon: 'instagram' }, + { 'to': 'https://www.facebook.com', 'text': 'Facebook', icon: 'facebook' }, + { 'to': 'https://twitter.com', 'text': 'Twitter', icon: 'twitter' }, + { 'to': 'https://uk.linkedin.com', 'text': 'LinkedIn', icon: 'linkedin' }, + ], } }, @@ -180,5 +205,53 @@ export default { cursor: auto; } } + +.form-footer { + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding-top: 2rem; + margin-top: 2rem; + + &::before { + content: ''; + position: absolute; + width: 90%; + height: 1px; + top: 0; + left: 5%; + background-color: $color__neutral-800; + } +} + +.social-nav { + list-style: none; + padding: 0; + margin: 0; + + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-end; +} + +.social-nav__item { + margin: 0 .2em; +} + +.social-link { + transition: opacity .3s; + + &:link, &:visited { + color: $color__neutral-100; + opacity: .6; + } + + &:hover, &:active { + opacity: 1; + } +}