├── .gitignore ├── favicon.ico ├── assets ├── images │ ├── logo.png │ ├── menu.png │ ├── headshot.jpg │ ├── indesign.png │ ├── illustrator.png │ ├── logo-design.png │ ├── logo-footer.png │ ├── photoshop.png │ ├── project-one.jpg │ ├── project-six.jpg │ ├── project-two.jpg │ ├── project-five.jpg │ ├── project-four.jpg │ ├── project-three.png │ ├── 3d-image-design.png │ ├── packaging-design.png │ └── social-media-thumbnail.jpg └── svg │ ├── facebook.svg │ ├── linkedin.svg │ ├── pinterest.svg │ ├── twitter.svg │ └── soap.svg ├── js └── script.js ├── sass ├── _contact.scss ├── style.scss ├── _promo.scss ├── _social-share.scss ├── _testimonial.scss ├── _global.scss ├── _about.scss ├── _footer.scss ├── _banner.scss ├── _portfolio.scss ├── _pricing.scss ├── _skill.scss ├── _service.scss ├── _header.scss ├── style.css.map └── style.css ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | utilites.txt -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/favicon.ico -------------------------------------------------------------------------------- /assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/logo.png -------------------------------------------------------------------------------- /assets/images/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/menu.png -------------------------------------------------------------------------------- /assets/images/headshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/headshot.jpg -------------------------------------------------------------------------------- /assets/images/indesign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/indesign.png -------------------------------------------------------------------------------- /assets/images/illustrator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/illustrator.png -------------------------------------------------------------------------------- /assets/images/logo-design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/logo-design.png -------------------------------------------------------------------------------- /assets/images/logo-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/logo-footer.png -------------------------------------------------------------------------------- /assets/images/photoshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/photoshop.png -------------------------------------------------------------------------------- /assets/images/project-one.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/project-one.jpg -------------------------------------------------------------------------------- /assets/images/project-six.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/project-six.jpg -------------------------------------------------------------------------------- /assets/images/project-two.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/project-two.jpg -------------------------------------------------------------------------------- /assets/images/project-five.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/project-five.jpg -------------------------------------------------------------------------------- /assets/images/project-four.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/project-four.jpg -------------------------------------------------------------------------------- /assets/images/project-three.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/project-three.png -------------------------------------------------------------------------------- /assets/images/3d-image-design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/3d-image-design.png -------------------------------------------------------------------------------- /assets/images/packaging-design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/packaging-design.png -------------------------------------------------------------------------------- /assets/images/social-media-thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shihabiiuc/animated-portfolio/HEAD/assets/images/social-media-thumbnail.jpg -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | const hamburger = document.getElementsByClassName("hamburger")[0] 2 | const mobileNavs = document.getElementsByClassName("nav-links")[0] 3 | 4 | hamburger.addEventListener("click", () => { 5 | mobileNavs.classList.toggle("active") 6 | }) -------------------------------------------------------------------------------- /sass/_contact.scss: -------------------------------------------------------------------------------- 1 | #contact { 2 | .contact-detail, address { 3 | max-width: 800px; 4 | display: block; 5 | margin: 0 auto; 6 | } 7 | address { 8 | margin-top: 60px; 9 | a { 10 | text-decoration: none; 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /sass/style.scss: -------------------------------------------------------------------------------- 1 | @import './global'; 2 | @import './header'; 3 | @import './banner'; 4 | @import './promo'; 5 | @import './about'; 6 | @import './skill'; 7 | @import './service'; 8 | @import './portfolio'; 9 | @import './testimonial'; 10 | @import './pricing'; 11 | @import './contact'; 12 | @import './social-share'; 13 | @import './footer'; -------------------------------------------------------------------------------- /sass/_promo.scss: -------------------------------------------------------------------------------- 1 | .promo { 2 | background-color: #DEF0FF; 3 | .content { 4 | h2 { 5 | font-size: 36px; 6 | font-weight: 300; 7 | color: #222; 8 | text-shadow: 0 1px 2px #222; 9 | @media screen and (min-width: 768px) { 10 | font-size: 70px; 11 | } 12 | span.orange { 13 | font-weight: 700; 14 | } 15 | } 16 | p { 17 | font-size: 22px; 18 | @media screen and (min-width: 768px) { 19 | font-size: 36px; 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /assets/svg/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sass/_social-share.scss: -------------------------------------------------------------------------------- 1 | .social-share { 2 | display: none; 3 | @media screen and (min-width: 768px) { 4 | display: flex; 5 | } 6 | justify-content: center; 7 | align-items: center; 8 | flex-direction: column; 9 | 10 | position: fixed; 11 | top: 50vh; 12 | left: 0; 13 | transform: translateY(-50%); 14 | 15 | a { 16 | width: 50px; 17 | height: 50px; 18 | background-color: #DEF0FF; 19 | border: 1px solid #7f53ac; 20 | transition: background-color 0.8s ease-in; 21 | display: flex; 22 | justify-content: center; 23 | 24 | img { 25 | width: 30px; 26 | height: auto; 27 | align-self: center; 28 | } 29 | } 30 | a:hover { 31 | background-color: #7f53ac; 32 | } 33 | } -------------------------------------------------------------------------------- /sass/_testimonial.scss: -------------------------------------------------------------------------------- 1 | #testimonial { 2 | h2 { 3 | max-width: 1200px; 4 | display: block; 5 | margin: 0 auto 30px auto; 6 | } 7 | .testimonial--content { 8 | display: block; 9 | @media screen and (min-width: 768px) { 10 | display: flex; 11 | justify-content: space-between; 12 | flex-wrap: wrap; 13 | align-items: flex-start; 14 | } 15 | .item { 16 | flex-basis: 45%; 17 | margin: 15px 0; 18 | } 19 | } 20 | } 21 | 22 | blockquote { 23 | margin: 0; 24 | } 25 | 26 | blockquote p { 27 | padding: 15px; 28 | background: #DEF0FF; 29 | border-radius: 5px; 30 | } 31 | 32 | blockquote p::before { 33 | content: '\201C'; 34 | } 35 | 36 | blockquote p::after { 37 | content: '\201D'; 38 | } -------------------------------------------------------------------------------- /sass/_global.scss: -------------------------------------------------------------------------------- 1 | html { 2 | line-height: 1.15; 3 | } 4 | * { 5 | box-sizing: border-box; 6 | } 7 | body { 8 | margin: 0; 9 | font-family: 'Oxygen', sans-serif; 10 | position: relative; 11 | overflow-x: hidden; 12 | } 13 | section { 14 | padding: 90px 15px; 15 | } 16 | .content { 17 | max-width: 1200px; 18 | display: block; 19 | margin: 0 auto; 20 | } 21 | p { 22 | font-size: 18px; 23 | margin: 5px 0 10px; 24 | } 25 | .bold { 26 | font-weight: 700; 27 | } 28 | .orange { 29 | color: #FF5100 30 | } 31 | h2 { 32 | font-size: 36px; 33 | margin: 5px 0 10px; 34 | @media screen and (min-width: 768px) { 35 | font-size: 70px; 36 | color: #848484; 37 | font-weight: 700; 38 | } 39 | } 40 | img { 41 | max-width: 100%; 42 | height: auto; 43 | } 44 | .center { 45 | text-align: center; 46 | } -------------------------------------------------------------------------------- /sass/_about.scss: -------------------------------------------------------------------------------- 1 | #about { 2 | .content { 3 | h2 { 4 | text-align: center; 5 | } 6 | } 7 | .about-container { 8 | display: block; 9 | @media screen and (min-width: 768px) { 10 | display: flex; 11 | justify-content: space-between; 12 | 13 | } 14 | } 15 | .about-container-left { 16 | flex-basis: 40%; 17 | background: #DEF0FF; 18 | padding: 30px 15px; 19 | li { 20 | font-style: italic; 21 | line-height: 1.9; 22 | } 23 | } 24 | .about-container-right { 25 | flex-basis: 60%; 26 | background: #F2F3F8; 27 | display: flex; 28 | flex-wrap: wrap; 29 | img { 30 | max-width: 100%; 31 | align-self: flex-start; 32 | @media screen and (min-width: 1200px) { 33 | align-self: stretch; 34 | } 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /sass/_footer.scss: -------------------------------------------------------------------------------- 1 | .site-footer { 2 | background-color: #222; 3 | padding: 90px 15px 30px; 4 | .site-footer--content{ 5 | max-width: 1600px; 6 | display: block; 7 | margin: 0 auto; 8 | color: #FFF; 9 | border-bottom: 1px solid #0000004D; 10 | 11 | @media screen and (min-width: 768px) { 12 | display: flex; 13 | justify-content: space-between; 14 | align-items: flex-start; 15 | } 16 | .footer-left { 17 | flex-basis: 55%; 18 | p { 19 | font-size: 16px; 20 | line-height: 1.6; 21 | color: #E0E0E0; 22 | } 23 | } 24 | .footer-right { 25 | flex-basis: 40%; 26 | text-align: right; 27 | } 28 | a { 29 | color: #FFF; 30 | text-decoration: none; 31 | } 32 | } 33 | .copyright-notice { 34 | padding-top: 20px; 35 | text-align: center; 36 | color: #7A7A7A; 37 | border-top: 1px solid #FFFFFF0D; 38 | } 39 | } -------------------------------------------------------------------------------- /sass/_banner.scss: -------------------------------------------------------------------------------- 1 | .banner { 2 | padding: 90px 15px; 3 | background-color: #923cb5; 4 | background-image: linear-gradient(147deg, #923cb5 0%, #000000 74%); 5 | text-align: center; 6 | color: #FFFFFF; 7 | .banner--content{ 8 | max-width: 1400px; 9 | height: auto; 10 | display: block; 11 | margin: 0 auto; 12 | background: url('../assets/svg/soap.svg'); 13 | background-repeat: no-repeat; 14 | background-position: top right; 15 | background-size: contain; 16 | .name{ 17 | text-transform: uppercase; 18 | } 19 | .designation { 20 | color: rgba($color: #FFFFFF, $alpha: 0.7); 21 | text-transform: uppercase; 22 | font-family: 'Oxygen', sans-serif; 23 | font-weight: 700; 24 | font-size: 36px; 25 | margin: 0; 26 | @media screen and (min-width: 768px) { 27 | font-size: 70px; 28 | } 29 | } 30 | .tagline { 31 | font-size: 18px; 32 | @media screen and (min-width: 768px) { 33 | font-size: 26px; 34 | } 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /sass/_portfolio.scss: -------------------------------------------------------------------------------- 1 | #portfolio { 2 | z-index: 1; 3 | h2 { 4 | color: rgba($color: #FFFFFF, $alpha: 0.8); 5 | display: block; 6 | margin-bottom: 30px; 7 | } 8 | background-color: #923cb5; 9 | background-image: linear-gradient(147deg, #923cb5 0%, #000000 74%); 10 | .portfolio--content { 11 | display: flex; 12 | justify-content: center; 13 | flex-wrap: wrap; 14 | .item { 15 | flex-basis: 50%; 16 | position: relative; 17 | background-color: #cb2027; 18 | transition: all 0.8s ease-in-out; 19 | h3 { 20 | color: #FFF; 21 | font-weight: 700; 22 | text-transform: uppercase; 23 | position: absolute; 24 | top: 50%; 25 | left: 50%; 26 | text-align: center; 27 | transform: translate(-50% , -50%); 28 | opacity: 0; 29 | transition: all 0.8s ease-in-out; 30 | } 31 | img { 32 | flex-shrink:0; 33 | min-width:100%; 34 | min-height:100% 35 | } 36 | } 37 | .item:hover > h3 { 38 | opacity: 1; 39 | } 40 | .item:hover > img { 41 | opacity: 0.3; 42 | } 43 | 44 | } 45 | } -------------------------------------------------------------------------------- /assets/svg/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sass/_pricing.scss: -------------------------------------------------------------------------------- 1 | #pricing { 2 | background-color: #DEF0FF; 3 | .pricing--content { 4 | display: block; 5 | max-width: 1600px; 6 | margin: 0 auto; 7 | @media screen and (min-width: 768px) { 8 | display: flex; 9 | justify-content: space-between; 10 | } 11 | .item { 12 | flex-basis: 32%; 13 | border: 1px solid #848484; 14 | border-radius: 3px; 15 | padding: 20px 10px 30px; 16 | margin-bottom: 30px; 17 | @media screen and (min-width: 768px) { 18 | margin-bottom: 0; 19 | } 20 | .price { 21 | font-size: 36px; 22 | color: #cb2027; 23 | font-weight: 700; 24 | } 25 | img { 26 | max-width: 200px; 27 | height: auto; 28 | display: block; 29 | margin: 0 auto; 30 | } 31 | .description { 32 | font-style: italic; 33 | min-height: 60px; 34 | display: block; 35 | margin: 20px 0; 36 | } 37 | a { 38 | padding: 10px 20px; 39 | font-weight: 700; 40 | text-transform: uppercase; 41 | border: 1px solid #222; 42 | text-decoration: none; 43 | color: #FFF; 44 | background: #222; 45 | } 46 | } 47 | } 48 | } -------------------------------------------------------------------------------- /sass/_skill.scss: -------------------------------------------------------------------------------- 1 | #skill { 2 | background-color: #7f53ac; 3 | background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%); 4 | .skill--content { 5 | display: block; 6 | @media screen and (min-width: 768px) { 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | } 11 | .left { 12 | flex-basis: 30%; 13 | h2 { 14 | font-size: 36px; 15 | color: #222; 16 | } 17 | } 18 | .right { 19 | flex-basis: 65%; 20 | display: block; 21 | @media screen and (min-width: 768px) { 22 | display: flex; 23 | justify-content: space-between; 24 | } 25 | .item { 26 | flex-basis: 32%; 27 | text-align: center; 28 | border: 1px solid #222; 29 | padding: 30px 15px; 30 | margin-bottom: 30px; 31 | @media screen and (min-width: 768px) { 32 | margin-bottom: 0; 33 | } 34 | 35 | border-width: 5px 5px 5px 5px; 36 | border-image: linear-gradient(45deg, rgba(#FF9800, 1) 0%, rgba(#800080, 1) 100%); 37 | border-image-slice: 9; 38 | border-style: solid; 39 | img { 40 | max-width: 100px; 41 | height: auto; 42 | } 43 | } 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /assets/svg/pinterest.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /assets/svg/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sass/_service.scss: -------------------------------------------------------------------------------- 1 | #service { 2 | h2 { 3 | max-width: 1200px; 4 | display: block; 5 | margin: 0 auto 30px auto; 6 | } 7 | .service--content { 8 | display: block; 9 | @media screen and (min-width: 768px) { 10 | display: flex; 11 | justify-content: space-between; 12 | } 13 | .item { 14 | flex-basis: 32%; 15 | text-align: center; 16 | border: 1px solid #E9EBEC; 17 | padding: 20px 10px 40px; 18 | margin-bottom: 30px; 19 | @media screen and (min-width: 768px) { 20 | margin-bottom: 0; 21 | } 22 | transition: background-color 0.8s ease-in; 23 | h3 { 24 | text-transform: uppercase; 25 | font-weight: 700; 26 | } 27 | img { 28 | max-width: 80%; 29 | display: block; 30 | margin: 0 auto; 31 | } 32 | p { 33 | font-style: italic; 34 | display: block; 35 | margin-bottom: 30px; 36 | text-shadow: 0 1px 2px #222; 37 | } 38 | a { 39 | border: 1px solid #7f53ac; 40 | border-radius: 4px; 41 | padding: 10px 30px; 42 | color: #FFF; 43 | text-decoration: none; 44 | text-transform: uppercase; 45 | font-weight: 700; 46 | letter-spacing: 1.3px; 47 | transition: all 0.8s ease-in-out; 48 | background-color: #9921e8; 49 | background-image: linear-gradient(315deg, #9921e8 0%, #5f72be 74%); 50 | } 51 | a:hover { 52 | background-color: #7f5a83; 53 | background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%); 54 | border: #0d324d; 55 | } 56 | } 57 | } 58 | .item:hover { 59 | background-color: #DEF0FF; 60 | } 61 | } -------------------------------------------------------------------------------- /sass/_header.scss: -------------------------------------------------------------------------------- 1 | .site-header { 2 | z-index: 10; 3 | font-family: 'Roboto Condensed', sans-serif; 4 | display: flex; 5 | align-items: center; 6 | flex-direction: column; 7 | position: sticky; 8 | top: 0; 9 | background-color: #FFF; 10 | @media screen and (min-width: 1250px) { 11 | justify-content: space-between; 12 | flex-direction: row; 13 | } 14 | .nav-logo { 15 | align-self: flex-start; 16 | padding: 10px 5px 5px; 17 | a { 18 | img { 19 | max-width: 200px; 20 | height: auto; 21 | @media screen and (min-width: 768px) { 22 | max-width: 314px; 23 | height: auto; 24 | } 25 | } 26 | } 27 | } 28 | .nav-links { 29 | display: none; 30 | width: 100%; 31 | background-color: #DEF0FF; 32 | @media screen and (min-width: 1250px) { 33 | display: block; 34 | background-color: #FFF; 35 | } 36 | ul { 37 | padding: 0; 38 | display: flex; 39 | flex-direction: column; 40 | justify-content: flex-end; 41 | @media screen and (min-width: 1250px) { 42 | flex-direction: row; 43 | } 44 | 45 | 46 | li { 47 | list-style: none; 48 | a { 49 | font-size: 18px; 50 | text-transform: uppercase; 51 | font-family: 400; 52 | color: #7f53ac; 53 | letter-spacing: 1.2px; 54 | padding: 10px 15px; 55 | text-decoration: none; 56 | display: block; 57 | } 58 | } 59 | li:hover { 60 | background-color: #efe0ff; 61 | } 62 | } 63 | } 64 | button { 65 | cursor: pointer; 66 | background: transparent; 67 | border: none; 68 | max-width: 50px; 69 | display: block; 70 | position: absolute; 71 | top: 10px; 72 | right: 10px; 73 | @media screen and (min-width: 768px) { 74 | top: 20px; 75 | } 76 | @media screen and (min-width: 1250px) { 77 | display: none; 78 | } 79 | } 80 | } 81 | .nav-links.active { 82 | display: block; 83 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animated portfolio website template 2 | This repository is an extended version of another [portfolio template](https://shihabiiuc.github.io/portfolio/index.html) that is also created by me. In this portfolio template, I only added JavaScript animation (AOS). You can check the finished product [here](https://shihabiiuc.github.io/animated-portfolio/index.html). 3 | 4 | This an one page portfolio template that you can download and use on your own project or to create a website. You are allowed to edit and make your portfolio website exactly the way you want. 5 | 6 | _However, you're **not allowed to make it available for download on any other websites** or you can't exchange this template with any commercial intent._ 7 | 8 | This portfolio template is a part of my blog post and the [detail instruction can be found on the actual post.](https://shihabiiuc.com/animated-portfolio-website) 9 | 10 | ## Which niche best suits this template 11 | I created this template for everyone who wants to create an online portfolio. Though it represents a **freelance graphic designer**. Yet, it's very easy to make changes to fit other industries. Such as **web designer, freelance writer, SEO expert, you name it.** This would be a great start if you're just getting started and thinking to build your portfolio. _I already did the heavy lifting for you._ 12 | 13 | ## Mobile responsiveness 14 | > This template is fully responsive for all kinds of devices. Also, it **does not need any CSS framework.** 15 | 16 | ## How does it work for you? 17 | After you download the repository, you will find all the necessary files and folders. However, the **CSS file lives in the "sass" folder.** But you **don't have to use SASS.** The only file you need in this folder is _"style.css"_ and ignore all other partials (_file.scss). 18 | I included these files (partials) because some of you may like to use SASS. But if you don't like SASS, just ignore the other files in the "sass" folder and only look/work on "style.css." 19 | 20 | ## Where to get support or if you have any questions? 21 | Most of you may not need extra support or don't have questions because of the simplicity. But if it's you who need help or has a question, then find my contact detail here: 22 | [Shihabiiuc.com/contact](https://shihabiiuc.com/contact) -------------------------------------------------------------------------------- /assets/svg/soap.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sass/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "style.scss", 6 | "_global.scss", 7 | "_header.scss", 8 | "_banner.scss", 9 | "_promo.scss", 10 | "_about.scss", 11 | "_skill.scss", 12 | "_service.scss", 13 | "_portfolio.scss", 14 | "_testimonial.scss", 15 | "_pricing.scss", 16 | "_contact.scss", 17 | "_social-share.scss", 18 | "_footer.scss" 19 | ], 20 | "names": [], 21 | "file": "style.css" 22 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 22 | 23 | 24 | 25 | 27 | 28 | 29 | 31 | 32 | 33 | 34 | 35 | Your Name -Portfolio 36 | 37 | 38 | 58 | 68 |
69 |
73 |

We bring your ideas to life.

74 |

Great ideas, beautifully executed & commercially sound.

75 |
76 |
77 |
78 |
79 |

About Me

80 |
81 |
85 |

Consectetur adipisicing elit fugiat ratione laboriosam nostrum atque. Accusantium atque molestias amet culpa, quam illo porro, cupiditate repellendus explicabo sunt natus voluptate fugit ducimus esse.

86 |

Accusantium atque molestias

87 |
    88 |
  • Amet consectetur adipisicing elit
    • 89 |
  • Fugiat ratione laboriosam nostrum atque
    • 90 |
  • Cupiditate repellendus explicabo
    • 91 |
92 |

Fugiat ratione laboriosam nostrum atque. Lorem ipsum dolor sit amet consectetur adipisicing elit.

93 |

Atque lccusantium molestias amet

94 |

Auam illo porro cupiditate repellendus explicabo ducimus esse. Dupiditate repellendus explicabo sunt natus voluptate fugit ducimus esse

95 |
96 |
100 | your name, headshot 101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |

My skills & expertise

109 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea quibusdam inventore molestias maiores esse eum, recusandae impedit? Neque inventore, saepe esse culpa, adipisci ipsum sed suscipit debitis in voluptatibus nisi.

110 |
111 |
112 |
116 | Photoshop 117 |

Abode Photoshop

118 |

laboriosam temporibus harum culpa recusandae nemo tempora ut vitae earum quo.

119 |
120 |
124 | Illustrator 125 |

Abode Illustrator

126 |

Sunt doloribus perferendis officia soluta enim optio distinctio exercitationem.

127 |
128 |
132 | InDesign 133 |

Abode InDesign

134 |

Lorem ipsum dolor sit amet consectetur adipisicing elit qui debitis.

135 |
136 |
137 |
138 |
139 |
140 |

Services I offer

141 |
145 |
146 |

Logo design

147 | Logo design 148 |

Maiores dicta suscipit voluptate dignissimos fugiat!

149 | Hire Me 150 |
151 |
152 |

Packaging design

153 | Packaging design 154 |

Consectetur adipisicing elit. Dicta necessitatibus officia vitae.

155 | Hire Me 156 |
157 |
158 |

3D image manipulation

159 | 3D image manipulation 160 |

Possimus repellendus voluptas vel assumenda distinctio tatibus.

161 | Hire Me 162 |
163 |
164 |
165 |
166 |

Portfolio -My past work samples

167 |
168 |
169 |

Project Name

170 | logo design 171 |
172 |
173 |

Project Name

174 | logo design 175 |
176 |
177 |

Project Name

178 | logo design 179 |
180 |
181 |

Project Name

182 | logo design 183 |
184 |
185 |

Project Name

186 | logo design 187 |
188 |
189 |

Project Name

190 | logo design 191 |
192 |
193 |
194 |
195 |

Testimonial -What clients are saying about me

196 |
197 |
198 |
199 |
200 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque cumque quibusdam libero! Aperiam qui unde dolores iste eos, odit laboriosam optio sunt commodi aliquid pariatur nobis dolore! Excepturi, harum possimus.

201 |
202 |
—John Doe, CEO, Lorem Digital
203 |
204 |
205 |
206 |
207 |
208 |

Sit amet consectetur adipisicing elit. Neque cumque quibusdam libero! Aperiam qui unde dolores iste eos, odit laboriosam optio sunt commodi aliquid pariatur nobis dolore! Excepturi, harum possimus.

209 |
210 |
—John Doe, CEO, Lorem Digital
211 |
212 |
213 |
214 |
215 |
216 |

Consectetur adipisicing elit. Neque cumque quibusdam libero! Aperiam qui unde dolores iste eos, odit laboriosam optio sunt commodi aliquid pariatur nobis dolore! Excepturi, harum possimus.

217 |
218 |
—John Doe, CEO, Lorem Digital
219 |
220 |
221 |
222 |
223 |
224 |

Adipisicing elit. Neque cumque quibusdam libero! Aperiam qui unde dolores iste eos, odit laboriosam optio sunt commodi aliquid pariatur nobis dolore! Excepturi, harum possimus.

225 |
226 |
—John Doe, CEO, Lorem Digital
227 |
228 |
229 |
230 |
231 |
236 |

Pricing

237 |

I charge $30/hour (USD). But if you need any of the following tasks done, see the fixed price below.

238 |
239 |
240 |

Logo design

241 |

$235

242 | logo design price 243 |

1 Professional Logo Designs in transparent format (png).

244 | Hire me 245 |
246 |
247 |

Packaging design

248 |

$450

249 | packaging design price 250 |

Print ready design label or packaging for one product.

251 | Hire me 252 |
253 |
254 |

Illustrate album cover

255 |

$370

256 | 3d image design price 257 |

Hi-res front cover image for streaming platforms.

258 | Hire me 259 |
260 |
261 |
262 |
263 |
264 |

Contact Me

265 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt nam doloremque, pariatur, repellat est natus soluta autem atque velit nisi ipsum sint fuga tenetur, harum molestias doloribus fugiat obcaecati culpa!

266 |
267 |

Email Me: hello@shihabiiuc.com

268 |

Call me: +88012345876

269 |

Office address: Box 564, Manchester
270 | England.

271 |
272 |
273 |
274 |
279 | share on facebook 280 | share on twitter 281 | share on pinterest 282 | share on linkedin 283 |
284 | 303 | 304 | 305 | 306 | 309 | 310 | -------------------------------------------------------------------------------- /sass/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | line-height: 1.15; 3 | } 4 | 5 | * { 6 | -webkit-box-sizing: border-box; 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | font-family: 'Oxygen', sans-serif; 13 | position: relative; 14 | overflow-x: hidden; 15 | } 16 | 17 | section { 18 | padding: 90px 15px; 19 | } 20 | 21 | .content { 22 | max-width: 1200px; 23 | display: block; 24 | margin: 0 auto; 25 | } 26 | 27 | p { 28 | font-size: 18px; 29 | margin: 5px 0 10px; 30 | } 31 | 32 | .bold { 33 | font-weight: 700; 34 | } 35 | 36 | .orange { 37 | color: #FF5100; 38 | } 39 | 40 | h2 { 41 | font-size: 36px; 42 | margin: 5px 0 10px; 43 | } 44 | 45 | @media screen and (min-width: 768px) { 46 | h2 { 47 | font-size: 70px; 48 | color: #848484; 49 | font-weight: 700; 50 | } 51 | } 52 | 53 | img { 54 | max-width: 100%; 55 | height: auto; 56 | } 57 | 58 | .center { 59 | text-align: center; 60 | } 61 | 62 | .site-header { 63 | z-index: 10; 64 | font-family: 'Roboto Condensed', sans-serif; 65 | display: -webkit-box; 66 | display: -ms-flexbox; 67 | display: flex; 68 | -webkit-box-align: center; 69 | -ms-flex-align: center; 70 | align-items: center; 71 | -webkit-box-orient: vertical; 72 | -webkit-box-direction: normal; 73 | -ms-flex-direction: column; 74 | flex-direction: column; 75 | position: -webkit-sticky; 76 | position: sticky; 77 | top: 0; 78 | background-color: #FFF; 79 | } 80 | 81 | @media screen and (min-width: 1250px) { 82 | .site-header { 83 | -webkit-box-pack: justify; 84 | -ms-flex-pack: justify; 85 | justify-content: space-between; 86 | -webkit-box-orient: horizontal; 87 | -webkit-box-direction: normal; 88 | -ms-flex-direction: row; 89 | flex-direction: row; 90 | } 91 | } 92 | 93 | .site-header .nav-logo { 94 | -ms-flex-item-align: start; 95 | align-self: flex-start; 96 | padding: 10px 5px 5px; 97 | } 98 | 99 | .site-header .nav-logo a img { 100 | max-width: 200px; 101 | height: auto; 102 | } 103 | 104 | @media screen and (min-width: 768px) { 105 | .site-header .nav-logo a img { 106 | max-width: 314px; 107 | height: auto; 108 | } 109 | } 110 | 111 | .site-header .nav-links { 112 | display: none; 113 | width: 100%; 114 | background-color: #DEF0FF; 115 | } 116 | 117 | @media screen and (min-width: 1250px) { 118 | .site-header .nav-links { 119 | display: block; 120 | background-color: #FFF; 121 | } 122 | } 123 | 124 | .site-header .nav-links ul { 125 | padding: 0; 126 | display: -webkit-box; 127 | display: -ms-flexbox; 128 | display: flex; 129 | -webkit-box-orient: vertical; 130 | -webkit-box-direction: normal; 131 | -ms-flex-direction: column; 132 | flex-direction: column; 133 | -webkit-box-pack: end; 134 | -ms-flex-pack: end; 135 | justify-content: flex-end; 136 | } 137 | 138 | @media screen and (min-width: 1250px) { 139 | .site-header .nav-links ul { 140 | -webkit-box-orient: horizontal; 141 | -webkit-box-direction: normal; 142 | -ms-flex-direction: row; 143 | flex-direction: row; 144 | } 145 | } 146 | 147 | .site-header .nav-links ul li { 148 | list-style: none; 149 | } 150 | 151 | .site-header .nav-links ul li a { 152 | font-size: 18px; 153 | text-transform: uppercase; 154 | font-family: 400; 155 | color: #7f53ac; 156 | letter-spacing: 1.2px; 157 | padding: 10px 15px; 158 | text-decoration: none; 159 | display: block; 160 | } 161 | 162 | .site-header .nav-links ul li:hover { 163 | background-color: #efe0ff; 164 | } 165 | 166 | .site-header button { 167 | cursor: pointer; 168 | background: transparent; 169 | border: none; 170 | max-width: 50px; 171 | display: block; 172 | position: absolute; 173 | top: 10px; 174 | right: 10px; 175 | } 176 | 177 | @media screen and (min-width: 768px) { 178 | .site-header button { 179 | top: 20px; 180 | } 181 | } 182 | 183 | @media screen and (min-width: 1250px) { 184 | .site-header button { 185 | display: none; 186 | } 187 | } 188 | 189 | .nav-links.active { 190 | display: block; 191 | } 192 | 193 | .banner { 194 | padding: 90px 15px; 195 | background-color: #923cb5; 196 | background-image: linear-gradient(147deg, #923cb5 0%, #000000 74%); 197 | text-align: center; 198 | color: #FFFFFF; 199 | } 200 | 201 | .banner .banner--content { 202 | max-width: 1400px; 203 | height: auto; 204 | display: block; 205 | margin: 0 auto; 206 | background: url("../assets/svg/soap.svg"); 207 | background-repeat: no-repeat; 208 | background-position: top right; 209 | background-size: contain; 210 | } 211 | 212 | .banner .banner--content .name { 213 | text-transform: uppercase; 214 | } 215 | 216 | .banner .banner--content .designation { 217 | color: rgba(255, 255, 255, 0.7); 218 | text-transform: uppercase; 219 | font-family: 'Oxygen', sans-serif; 220 | font-weight: 700; 221 | font-size: 36px; 222 | margin: 0; 223 | } 224 | 225 | @media screen and (min-width: 768px) { 226 | .banner .banner--content .designation { 227 | font-size: 70px; 228 | } 229 | } 230 | 231 | .banner .banner--content .tagline { 232 | font-size: 18px; 233 | } 234 | 235 | @media screen and (min-width: 768px) { 236 | .banner .banner--content .tagline { 237 | font-size: 26px; 238 | } 239 | } 240 | 241 | .promo { 242 | background-color: #DEF0FF; 243 | } 244 | 245 | .promo .content h2 { 246 | font-size: 36px; 247 | font-weight: 300; 248 | color: #222; 249 | text-shadow: 0 1px 2px #222; 250 | } 251 | 252 | @media screen and (min-width: 768px) { 253 | .promo .content h2 { 254 | font-size: 70px; 255 | } 256 | } 257 | 258 | .promo .content h2 span.orange { 259 | font-weight: 700; 260 | } 261 | 262 | .promo .content p { 263 | font-size: 22px; 264 | } 265 | 266 | @media screen and (min-width: 768px) { 267 | .promo .content p { 268 | font-size: 36px; 269 | } 270 | } 271 | 272 | #about .content h2 { 273 | text-align: center; 274 | } 275 | 276 | #about .about-container { 277 | display: block; 278 | } 279 | 280 | @media screen and (min-width: 768px) { 281 | #about .about-container { 282 | display: -webkit-box; 283 | display: -ms-flexbox; 284 | display: flex; 285 | -webkit-box-pack: justify; 286 | -ms-flex-pack: justify; 287 | justify-content: space-between; 288 | } 289 | } 290 | 291 | #about .about-container-left { 292 | -ms-flex-preferred-size: 40%; 293 | flex-basis: 40%; 294 | background: #DEF0FF; 295 | padding: 30px 15px; 296 | } 297 | 298 | #about .about-container-left li { 299 | font-style: italic; 300 | line-height: 1.9; 301 | } 302 | 303 | #about .about-container-right { 304 | -ms-flex-preferred-size: 60%; 305 | flex-basis: 60%; 306 | background: #F2F3F8; 307 | display: -webkit-box; 308 | display: -ms-flexbox; 309 | display: flex; 310 | -ms-flex-wrap: wrap; 311 | flex-wrap: wrap; 312 | } 313 | 314 | #about .about-container-right img { 315 | max-width: 100%; 316 | -ms-flex-item-align: start; 317 | align-self: flex-start; 318 | } 319 | 320 | @media screen and (min-width: 1200px) { 321 | #about .about-container-right img { 322 | -ms-flex-item-align: stretch; 323 | -ms-grid-row-align: stretch; 324 | align-self: stretch; 325 | } 326 | } 327 | 328 | #skill { 329 | background-color: #7f53ac; 330 | background-image: linear-gradient(315deg, #7f53ac 0%, #647dee 74%); 331 | } 332 | 333 | #skill .skill--content { 334 | display: block; 335 | } 336 | 337 | @media screen and (min-width: 768px) { 338 | #skill .skill--content { 339 | display: -webkit-box; 340 | display: -ms-flexbox; 341 | display: flex; 342 | -webkit-box-pack: justify; 343 | -ms-flex-pack: justify; 344 | justify-content: space-between; 345 | -webkit-box-align: center; 346 | -ms-flex-align: center; 347 | align-items: center; 348 | } 349 | } 350 | 351 | #skill .skill--content .left { 352 | -ms-flex-preferred-size: 30%; 353 | flex-basis: 30%; 354 | } 355 | 356 | #skill .skill--content .left h2 { 357 | font-size: 36px; 358 | color: #222; 359 | } 360 | 361 | #skill .skill--content .right { 362 | -ms-flex-preferred-size: 65%; 363 | flex-basis: 65%; 364 | display: block; 365 | } 366 | 367 | @media screen and (min-width: 768px) { 368 | #skill .skill--content .right { 369 | display: -webkit-box; 370 | display: -ms-flexbox; 371 | display: flex; 372 | -webkit-box-pack: justify; 373 | -ms-flex-pack: justify; 374 | justify-content: space-between; 375 | } 376 | } 377 | 378 | #skill .skill--content .right .item { 379 | -ms-flex-preferred-size: 32%; 380 | flex-basis: 32%; 381 | text-align: center; 382 | border: 1px solid #222; 383 | padding: 30px 15px; 384 | margin-bottom: 30px; 385 | border-width: 5px 5px 5px 5px; 386 | -o-border-image: linear-gradient(45deg, #ff9800 0%, purple 100%); 387 | border-image: linear-gradient(45deg, #ff9800 0%, purple 100%); 388 | border-image-slice: 9; 389 | border-style: solid; 390 | } 391 | 392 | @media screen and (min-width: 768px) { 393 | #skill .skill--content .right .item { 394 | margin-bottom: 0; 395 | } 396 | } 397 | 398 | #skill .skill--content .right .item img { 399 | max-width: 100px; 400 | height: auto; 401 | } 402 | 403 | #service h2 { 404 | max-width: 1200px; 405 | display: block; 406 | margin: 0 auto 30px auto; 407 | } 408 | 409 | #service .service--content { 410 | display: block; 411 | } 412 | 413 | @media screen and (min-width: 768px) { 414 | #service .service--content { 415 | display: -webkit-box; 416 | display: -ms-flexbox; 417 | display: flex; 418 | -webkit-box-pack: justify; 419 | -ms-flex-pack: justify; 420 | justify-content: space-between; 421 | } 422 | } 423 | 424 | #service .service--content .item { 425 | -ms-flex-preferred-size: 32%; 426 | flex-basis: 32%; 427 | text-align: center; 428 | border: 1px solid #E9EBEC; 429 | padding: 20px 10px 40px; 430 | margin-bottom: 30px; 431 | -webkit-transition: background-color 0.8s ease-in; 432 | transition: background-color 0.8s ease-in; 433 | } 434 | 435 | @media screen and (min-width: 768px) { 436 | #service .service--content .item { 437 | margin-bottom: 0; 438 | } 439 | } 440 | 441 | #service .service--content .item h3 { 442 | text-transform: uppercase; 443 | font-weight: 700; 444 | } 445 | 446 | #service .service--content .item img { 447 | max-width: 80%; 448 | display: block; 449 | margin: 0 auto; 450 | } 451 | 452 | #service .service--content .item p { 453 | font-style: italic; 454 | display: block; 455 | margin-bottom: 30px; 456 | text-shadow: 0 1px 2px #222; 457 | } 458 | 459 | #service .service--content .item a { 460 | border: 1px solid #7f53ac; 461 | border-radius: 4px; 462 | padding: 10px 30px; 463 | color: #FFF; 464 | text-decoration: none; 465 | text-transform: uppercase; 466 | font-weight: 700; 467 | letter-spacing: 1.3px; 468 | -webkit-transition: all 0.8s ease-in-out; 469 | transition: all 0.8s ease-in-out; 470 | background-color: #9921e8; 471 | background-image: linear-gradient(315deg, #9921e8 0%, #5f72be 74%); 472 | } 473 | 474 | #service .service--content .item a:hover { 475 | background-color: #7f5a83; 476 | background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%); 477 | border: #0d324d; 478 | } 479 | 480 | #service .item:hover { 481 | background-color: #DEF0FF; 482 | } 483 | 484 | #portfolio { 485 | z-index: 1; 486 | background-color: #923cb5; 487 | background-image: linear-gradient(147deg, #923cb5 0%, #000000 74%); 488 | } 489 | 490 | #portfolio h2 { 491 | color: rgba(255, 255, 255, 0.8); 492 | display: block; 493 | margin-bottom: 30px; 494 | } 495 | 496 | #portfolio .portfolio--content { 497 | display: -webkit-box; 498 | display: -ms-flexbox; 499 | display: flex; 500 | -webkit-box-pack: center; 501 | -ms-flex-pack: center; 502 | justify-content: center; 503 | -ms-flex-wrap: wrap; 504 | flex-wrap: wrap; 505 | } 506 | 507 | #portfolio .portfolio--content .item { 508 | -ms-flex-preferred-size: 50%; 509 | flex-basis: 50%; 510 | position: relative; 511 | background-color: #cb2027; 512 | -webkit-transition: all 0.8s ease-in-out; 513 | transition: all 0.8s ease-in-out; 514 | } 515 | 516 | #portfolio .portfolio--content .item h3 { 517 | color: #FFF; 518 | font-weight: 700; 519 | text-transform: uppercase; 520 | position: absolute; 521 | top: 50%; 522 | left: 50%; 523 | text-align: center; 524 | -webkit-transform: translate(-50%, -50%); 525 | transform: translate(-50%, -50%); 526 | opacity: 0; 527 | -webkit-transition: all 0.8s ease-in-out; 528 | transition: all 0.8s ease-in-out; 529 | } 530 | 531 | #portfolio .portfolio--content .item img { 532 | -ms-flex-negative: 0; 533 | flex-shrink: 0; 534 | min-width: 100%; 535 | min-height: 100%; 536 | } 537 | 538 | #portfolio .portfolio--content .item:hover > h3 { 539 | opacity: 1; 540 | } 541 | 542 | #portfolio .portfolio--content .item:hover > img { 543 | opacity: 0.3; 544 | } 545 | 546 | #testimonial h2 { 547 | max-width: 1200px; 548 | display: block; 549 | margin: 0 auto 30px auto; 550 | } 551 | 552 | #testimonial .testimonial--content { 553 | display: block; 554 | } 555 | 556 | @media screen and (min-width: 768px) { 557 | #testimonial .testimonial--content { 558 | display: -webkit-box; 559 | display: -ms-flexbox; 560 | display: flex; 561 | -webkit-box-pack: justify; 562 | -ms-flex-pack: justify; 563 | justify-content: space-between; 564 | -ms-flex-wrap: wrap; 565 | flex-wrap: wrap; 566 | -webkit-box-align: start; 567 | -ms-flex-align: start; 568 | align-items: flex-start; 569 | } 570 | } 571 | 572 | #testimonial .testimonial--content .item { 573 | -ms-flex-preferred-size: 45%; 574 | flex-basis: 45%; 575 | margin: 15px 0; 576 | } 577 | 578 | blockquote { 579 | margin: 0; 580 | } 581 | 582 | blockquote p { 583 | padding: 15px; 584 | background: #DEF0FF; 585 | border-radius: 5px; 586 | } 587 | 588 | blockquote p::before { 589 | content: '\201C'; 590 | } 591 | 592 | blockquote p::after { 593 | content: '\201D'; 594 | } 595 | 596 | #pricing { 597 | background-color: #DEF0FF; 598 | } 599 | 600 | #pricing .pricing--content { 601 | display: block; 602 | max-width: 1600px; 603 | margin: 0 auto; 604 | } 605 | 606 | @media screen and (min-width: 768px) { 607 | #pricing .pricing--content { 608 | display: -webkit-box; 609 | display: -ms-flexbox; 610 | display: flex; 611 | -webkit-box-pack: justify; 612 | -ms-flex-pack: justify; 613 | justify-content: space-between; 614 | } 615 | } 616 | 617 | #pricing .pricing--content .item { 618 | -ms-flex-preferred-size: 32%; 619 | flex-basis: 32%; 620 | border: 1px solid #848484; 621 | border-radius: 3px; 622 | padding: 20px 10px 30px; 623 | margin-bottom: 30px; 624 | } 625 | 626 | @media screen and (min-width: 768px) { 627 | #pricing .pricing--content .item { 628 | margin-bottom: 0; 629 | } 630 | } 631 | 632 | #pricing .pricing--content .item .price { 633 | font-size: 36px; 634 | color: #cb2027; 635 | font-weight: 700; 636 | } 637 | 638 | #pricing .pricing--content .item img { 639 | max-width: 200px; 640 | height: auto; 641 | display: block; 642 | margin: 0 auto; 643 | } 644 | 645 | #pricing .pricing--content .item .description { 646 | font-style: italic; 647 | min-height: 60px; 648 | display: block; 649 | margin: 20px 0; 650 | } 651 | 652 | #pricing .pricing--content .item a { 653 | padding: 10px 20px; 654 | font-weight: 700; 655 | text-transform: uppercase; 656 | border: 1px solid #222; 657 | text-decoration: none; 658 | color: #FFF; 659 | background: #222; 660 | } 661 | 662 | #contact .contact-detail, #contact address { 663 | max-width: 800px; 664 | display: block; 665 | margin: 0 auto; 666 | } 667 | 668 | #contact address { 669 | margin-top: 60px; 670 | } 671 | 672 | #contact address a { 673 | text-decoration: none; 674 | } 675 | 676 | .social-share { 677 | display: none; 678 | -webkit-box-pack: center; 679 | -ms-flex-pack: center; 680 | justify-content: center; 681 | -webkit-box-align: center; 682 | -ms-flex-align: center; 683 | align-items: center; 684 | -webkit-box-orient: vertical; 685 | -webkit-box-direction: normal; 686 | -ms-flex-direction: column; 687 | flex-direction: column; 688 | position: fixed; 689 | top: 50vh; 690 | left: 0; 691 | -webkit-transform: translateY(-50%); 692 | transform: translateY(-50%); 693 | } 694 | 695 | @media screen and (min-width: 768px) { 696 | .social-share { 697 | display: -webkit-box; 698 | display: -ms-flexbox; 699 | display: flex; 700 | } 701 | } 702 | 703 | .social-share a { 704 | width: 50px; 705 | height: 50px; 706 | background-color: #DEF0FF; 707 | border: 1px solid #7f53ac; 708 | -webkit-transition: background-color 0.8s ease-in; 709 | transition: background-color 0.8s ease-in; 710 | display: -webkit-box; 711 | display: -ms-flexbox; 712 | display: flex; 713 | -webkit-box-pack: center; 714 | -ms-flex-pack: center; 715 | justify-content: center; 716 | } 717 | 718 | .social-share a img { 719 | width: 30px; 720 | height: auto; 721 | -ms-flex-item-align: center; 722 | -ms-grid-row-align: center; 723 | align-self: center; 724 | } 725 | 726 | .social-share a:hover { 727 | background-color: #7f53ac; 728 | } 729 | 730 | .site-footer { 731 | background-color: #222; 732 | padding: 90px 15px 30px; 733 | } 734 | 735 | .site-footer .site-footer--content { 736 | max-width: 1600px; 737 | display: block; 738 | margin: 0 auto; 739 | color: #FFF; 740 | border-bottom: 1px solid #0000004D; 741 | } 742 | 743 | @media screen and (min-width: 768px) { 744 | .site-footer .site-footer--content { 745 | display: -webkit-box; 746 | display: -ms-flexbox; 747 | display: flex; 748 | -webkit-box-pack: justify; 749 | -ms-flex-pack: justify; 750 | justify-content: space-between; 751 | -webkit-box-align: start; 752 | -ms-flex-align: start; 753 | align-items: flex-start; 754 | } 755 | } 756 | 757 | .site-footer .site-footer--content .footer-left { 758 | -ms-flex-preferred-size: 55%; 759 | flex-basis: 55%; 760 | } 761 | 762 | .site-footer .site-footer--content .footer-left p { 763 | font-size: 16px; 764 | line-height: 1.6; 765 | color: #E0E0E0; 766 | } 767 | 768 | .site-footer .site-footer--content .footer-right { 769 | -ms-flex-preferred-size: 40%; 770 | flex-basis: 40%; 771 | text-align: right; 772 | } 773 | 774 | .site-footer .site-footer--content a { 775 | color: #FFF; 776 | text-decoration: none; 777 | } 778 | 779 | .site-footer .copyright-notice { 780 | padding-top: 20px; 781 | text-align: center; 782 | color: #7A7A7A; 783 | border-top: 1px solid #FFFFFF0D; 784 | } 785 | /*# sourceMappingURL=style.css.map */ --------------------------------------------------------------------------------