diff --git a/Task 2/AndyUGA_portfolio/.DS_Store b/Task 2/AndyUGA_portfolio/.DS_Store new file mode 100644 index 00000000..2032ae21 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/.DS_Store differ diff --git a/Task 2/AndyUGA_portfolio/AboutMe.html b/Task 2/AndyUGA_portfolio/AboutMe.html new file mode 100644 index 00000000..79fd56b1 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/AboutMe.html @@ -0,0 +1,145 @@ + + + + + + + About Me + + + + + + + + + + + + + +
+ +
+
+

About Me

+
+ +
+ +

Hi! My name is Andy Truong! I am a UGA alumni who graduated in Spring 2019. + +

+ My hobbies include playing tennis, working out, running, hiking, reading books, playing poker and watching documentaries. + +

+
+ +
+
+ +

Programming Languages

+ + +
+ + + + + +
+ +
+
+
+

Technologies

+
+
+

Ionic

+ +
+ +
+

Angular

+ +
+
+

Mongo

+ +
+
+
+
+
+

Node

+ +
+ +
+

Bootstrap

+ +
+
+

HTML5

+ +
+
+
+
+ +
+

CSS3

+ +
+
+

Git

+ +
+
+

Github

+ +
+
+
+
+ +
+

Bitbucket

+ +
+
+

Wordpress

+ +
+
+
+
+
+
+ + diff --git a/Task 2/AndyUGA_portfolio/CNAME b/Task 2/AndyUGA_portfolio/CNAME new file mode 100644 index 00000000..9baf758f --- /dev/null +++ b/Task 2/AndyUGA_portfolio/CNAME @@ -0,0 +1 @@ +portfolio.andytruong.dev \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/Experience.html b/Task 2/AndyUGA_portfolio/Experience.html new file mode 100644 index 00000000..7c77ab9a --- /dev/null +++ b/Task 2/AndyUGA_portfolio/Experience.html @@ -0,0 +1,138 @@ + + + + + + + + Experience + + + + + + + + + + + + + +
+ +
+ + + + +
+

Experience

+ + +
+

Associate Application Developer | ADP

+
August 2019 - Present
+ + + +
+
+ +
+

Freelance Web Developer

+
August 2018 - Present
+ + - Develop fully customized, responsive websites + +
- Utilizing HTML5, CSS3, Bootstrap 4, JavaScript, and jQuery +
- Communicate clearly and consistently with clients to ensure the final product addresses the clients' + needs +
+ - Freelance Portfolio + +
+
+
+

Web Application Developer | UVSASE

+
November 2018 - June 2019
+ + - Developing full-stack web application to handle all technology-related needs +
- Web application will serve over 150+ attendees for duration of leadership conference +
+ +
+ +
+
+ +

Software Developer (Part-time) | Unclaimed Property Consulting and Reporting

+
December 2018 - February 2019
+ + - Implementing new features to enhance mobile application efficiency and experience +
- Developing python script to automate encrypting data-sensitive files utilizing RSA and TwoFish encryption +
+
+ + +
+ +

Mobile App Developer Intern | Unclaimed Property Consulting and Reporting

+
May 2018 - August 2018
+ + - Built mobile application, UPNavigator, to assist alongside the UPNavigator web application +
- Developed using Angular, TypeScript, Ionic, HTML5 and CSS3 +
- Created mobile application to search, display, and modify data from Django backend +
- Decreased each data interaction time by 50% by implementing efficient lookup and modification of data +
- Utilized Bitbucket, JIRA, and Git to track detailed changes and collaborate during development phase +
- Coordinated with CTO in weekly one-on-one meetings to develop improvements and debug major issues +
- Published app to iOS App Store and Google Play Store + +
+ + + + + +
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/Inquiry.html b/Task 2/AndyUGA_portfolio/Inquiry.html new file mode 100644 index 00000000..356673c7 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/Inquiry.html @@ -0,0 +1,145 @@ + + + + + + + + Inquiry + + + + + + + + + + + + + + +
+ +
+ + + + +
+ + + +

Services Provided + +

+ +
+ +
+ Complete Website Management + +
+

+ Manage all aspects of server hosting, domain management and renewal, and complete custom development +

+ Card image + +
+
+
+ +
+ Fully Responsive +
+

Ensure your website looks amazing on any device!

+ Card image + +
+
+
+ +
+ Intelligently Customized and Developed +
+

+ Use best practices and latest frameworks to design and develop a beatifully crafted site! +

+ Card image + +
+
+
+ +
+ Ensure Security using Latest Web Security Standards +
+

+ Utilize SSL/TLS certificate to enable HTTPS on your site +

+ Card image + +
+ +
+
+ +
+ Reliable and Afforable Hosting +
+

+ In-depth Knowledge of Best Server Host to Ensure 24/7 Uptime +

+ Card image + +
+ + + + + +
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/README.md b/Task 2/AndyUGA_portfolio/README.md new file mode 100644 index 00000000..55d8af9c --- /dev/null +++ b/Task 2/AndyUGA_portfolio/README.md @@ -0,0 +1,24 @@ +

Homepage

+ +![alt-text-1](https://github.com/AndyUGA/AndyUGA.github.io/blob/master/img/Freelance/Portfolio.jpg) + +

Personal Projects

+ +![alt-text-1](https://github.com/AndyUGA/AndyUGA.github.io/blob/master/img/Freelance/Projects.png) + +

About Me

+ +![alt-text-1](https://github.com/AndyUGA/AndyUGA.github.io/blob/master/img/Freelance/Bio.png) + + + +------------------------------------------------------------------------------------------------------------------------------ + +## Technologies utitilized: +- HTML5 +- CSS3 +- [Bootstrap 4](https://getbootstrap.com) + +--------------------------------------------------------------------------------------------------------------------------- +## Live Preview +[My Portfolio](https://www.andytruong.dev) diff --git a/Task 2/AndyUGA_portfolio/css/hover.css b/Task 2/AndyUGA_portfolio/css/hover.css new file mode 100644 index 00000000..6e7ecf61 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/css/hover.css @@ -0,0 +1,4183 @@ +/*! + * Hover.css (http://ianlunn.github.io/Hover/) + * Version: 2.3.2 + * Author: Ian Lunn @IanLunn + * Author URL: http://ianlunn.co.uk/ + * Github: https://github.com/IanLunn/Hover + + * Hover.css Copyright Ian Lunn 2017. Generated with Sass. + */ +/* 2D TRANSITIONS */ +/* Grow */ +.hvr-grow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + + /* Shrink */ + .hvr-shrink { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active { + -webkit-transform: scale(0.9); + transform: scale(0.9); + } + + /* Pulse */ + @-webkit-keyframes hvr-pulse { + 25% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + 75% { + -webkit-transform: scale(0.9); + transform: scale(0.9); + } + } + @keyframes hvr-pulse { + 25% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + 75% { + -webkit-transform: scale(0.9); + transform: scale(0.9); + } + } + .hvr-pulse { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active { + -webkit-animation-name: hvr-pulse; + animation-name: hvr-pulse; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + } + + /* Pulse Grow */ + @-webkit-keyframes hvr-pulse-grow { + to { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + } + @keyframes hvr-pulse-grow { + to { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + } + .hvr-pulse-grow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active { + -webkit-animation-name: hvr-pulse-grow; + animation-name: hvr-pulse-grow; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; + } + + /* Pulse Shrink */ + @-webkit-keyframes hvr-pulse-shrink { + to { + -webkit-transform: scale(0.9); + transform: scale(0.9); + } + } + @keyframes hvr-pulse-shrink { + to { + -webkit-transform: scale(0.9); + transform: scale(0.9); + } + } + .hvr-pulse-shrink { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active { + -webkit-animation-name: hvr-pulse-shrink; + animation-name: hvr-pulse-shrink; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; + } + + /* Push */ + @-webkit-keyframes hvr-push { + 50% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } + } + @keyframes hvr-push { + 50% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } + } + .hvr-push { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-push:hover, .hvr-push:focus, .hvr-push:active { + -webkit-animation-name: hvr-push; + animation-name: hvr-push; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Pop */ + @-webkit-keyframes hvr-pop { + 50% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + } + @keyframes hvr-pop { + 50% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + } + .hvr-pop { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active { + -webkit-animation-name: hvr-pop; + animation-name: hvr-pop; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Bounce In */ + .hvr-bounce-in { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + } + .hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active { + -webkit-transform: scale(1.2); + transform: scale(1.2); + -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); + transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); + } + + /* Bounce Out */ + .hvr-bounce-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + } + .hvr-bounce-out:hover, .hvr-bounce-out:focus, .hvr-bounce-out:active { + -webkit-transform: scale(0.8); + transform: scale(0.8); + -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); + transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); + } + + /* Rotate */ + .hvr-rotate { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active { + -webkit-transform: rotate(4deg); + transform: rotate(4deg); + } + + /* Grow Rotate */ + .hvr-grow-rotate { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active { + -webkit-transform: scale(1.1) rotate(4deg); + transform: scale(1.1) rotate(4deg); + } + + /* Float */ + .hvr-float { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-float:hover, .hvr-float:focus, .hvr-float:active { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); + } + + /* Sink */ + .hvr-sink { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + + /* Bob */ + @-webkit-keyframes hvr-bob { + 0% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); + } + 50% { + -webkit-transform: translateY(-4px); + transform: translateY(-4px); + } + 100% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); + } + } + @keyframes hvr-bob { + 0% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); + } + 50% { + -webkit-transform: translateY(-4px); + transform: translateY(-4px); + } + 100% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); + } + } + @-webkit-keyframes hvr-bob-float { + 100% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); + } + } + @keyframes hvr-bob-float { + 100% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); + } + } + .hvr-bob { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active { + -webkit-animation-name: hvr-bob-float, hvr-bob; + animation-name: hvr-bob-float, hvr-bob; + -webkit-animation-duration: .3s, 1.5s; + animation-duration: .3s, 1.5s; + -webkit-animation-delay: 0s, .3s; + animation-delay: 0s, .3s; + -webkit-animation-timing-function: ease-out, ease-in-out; + animation-timing-function: ease-out, ease-in-out; + -webkit-animation-iteration-count: 1, infinite; + animation-iteration-count: 1, infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-direction: normal, alternate; + animation-direction: normal, alternate; + } + + /* Hang */ + @-webkit-keyframes hvr-hang { + 0% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + 50% { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + 100% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + } + @keyframes hvr-hang { + 0% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + 50% { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + 100% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + } + @-webkit-keyframes hvr-hang-sink { + 100% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + } + @keyframes hvr-hang-sink { + 100% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + } + .hvr-hang { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-hang:hover, .hvr-hang:focus, .hvr-hang:active { + -webkit-animation-name: hvr-hang-sink, hvr-hang; + animation-name: hvr-hang-sink, hvr-hang; + -webkit-animation-duration: .3s, 1.5s; + animation-duration: .3s, 1.5s; + -webkit-animation-delay: 0s, .3s; + animation-delay: 0s, .3s; + -webkit-animation-timing-function: ease-out, ease-in-out; + animation-timing-function: ease-out, ease-in-out; + -webkit-animation-iteration-count: 1, infinite; + animation-iteration-count: 1, infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-direction: normal, alternate; + animation-direction: normal, alternate; + } + + /* Skew */ + .hvr-skew { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-skew:hover, .hvr-skew:focus, .hvr-skew:active { + -webkit-transform: skew(-10deg); + transform: skew(-10deg); + } + + /* Skew Forward */ + .hvr-skew-forward { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; + } + .hvr-skew-forward:hover, .hvr-skew-forward:focus, .hvr-skew-forward:active { + -webkit-transform: skew(-10deg); + transform: skew(-10deg); + } + + /* Skew Backward */ + .hvr-skew-backward { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; + } + .hvr-skew-backward:hover, .hvr-skew-backward:focus, .hvr-skew-backward:active { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + + /* Wobble Vertical */ + @-webkit-keyframes hvr-wobble-vertical { + 16.65% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + 33.3% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + 49.95% { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + 66.6% { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } + 83.25% { + -webkit-transform: translateY(1px); + transform: translateY(1px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + } + @keyframes hvr-wobble-vertical { + 16.65% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + 33.3% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + 49.95% { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + 66.6% { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } + 83.25% { + -webkit-transform: translateY(1px); + transform: translateY(1px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + } + .hvr-wobble-vertical { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active { + -webkit-animation-name: hvr-wobble-vertical; + animation-name: hvr-wobble-vertical; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Wobble Horizontal */ + @-webkit-keyframes hvr-wobble-horizontal { + 16.65% { + -webkit-transform: translateX(8px); + transform: translateX(8px); + } + 33.3% { + -webkit-transform: translateX(-6px); + transform: translateX(-6px); + } + 49.95% { + -webkit-transform: translateX(4px); + transform: translateX(4px); + } + 66.6% { + -webkit-transform: translateX(-2px); + transform: translateX(-2px); + } + 83.25% { + -webkit-transform: translateX(1px); + transform: translateX(1px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + } + @keyframes hvr-wobble-horizontal { + 16.65% { + -webkit-transform: translateX(8px); + transform: translateX(8px); + } + 33.3% { + -webkit-transform: translateX(-6px); + transform: translateX(-6px); + } + 49.95% { + -webkit-transform: translateX(4px); + transform: translateX(4px); + } + 66.6% { + -webkit-transform: translateX(-2px); + transform: translateX(-2px); + } + 83.25% { + -webkit-transform: translateX(1px); + transform: translateX(1px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + } + .hvr-wobble-horizontal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active { + -webkit-animation-name: hvr-wobble-horizontal; + animation-name: hvr-wobble-horizontal; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Wobble To Bottom Right */ + @-webkit-keyframes hvr-wobble-to-bottom-right { + 16.65% { + -webkit-transform: translate(8px, 8px); + transform: translate(8px, 8px); + } + 33.3% { + -webkit-transform: translate(-6px, -6px); + transform: translate(-6px, -6px); + } + 49.95% { + -webkit-transform: translate(4px, 4px); + transform: translate(4px, 4px); + } + 66.6% { + -webkit-transform: translate(-2px, -2px); + transform: translate(-2px, -2px); + } + 83.25% { + -webkit-transform: translate(1px, 1px); + transform: translate(1px, 1px); + } + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + } + @keyframes hvr-wobble-to-bottom-right { + 16.65% { + -webkit-transform: translate(8px, 8px); + transform: translate(8px, 8px); + } + 33.3% { + -webkit-transform: translate(-6px, -6px); + transform: translate(-6px, -6px); + } + 49.95% { + -webkit-transform: translate(4px, 4px); + transform: translate(4px, 4px); + } + 66.6% { + -webkit-transform: translate(-2px, -2px); + transform: translate(-2px, -2px); + } + 83.25% { + -webkit-transform: translate(1px, 1px); + transform: translate(1px, 1px); + } + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + } + .hvr-wobble-to-bottom-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-wobble-to-bottom-right:hover, .hvr-wobble-to-bottom-right:focus, .hvr-wobble-to-bottom-right:active { + -webkit-animation-name: hvr-wobble-to-bottom-right; + animation-name: hvr-wobble-to-bottom-right; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Wobble To Top Right */ + @-webkit-keyframes hvr-wobble-to-top-right { + 16.65% { + -webkit-transform: translate(8px, -8px); + transform: translate(8px, -8px); + } + 33.3% { + -webkit-transform: translate(-6px, 6px); + transform: translate(-6px, 6px); + } + 49.95% { + -webkit-transform: translate(4px, -4px); + transform: translate(4px, -4px); + } + 66.6% { + -webkit-transform: translate(-2px, 2px); + transform: translate(-2px, 2px); + } + 83.25% { + -webkit-transform: translate(1px, -1px); + transform: translate(1px, -1px); + } + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + } + @keyframes hvr-wobble-to-top-right { + 16.65% { + -webkit-transform: translate(8px, -8px); + transform: translate(8px, -8px); + } + 33.3% { + -webkit-transform: translate(-6px, 6px); + transform: translate(-6px, 6px); + } + 49.95% { + -webkit-transform: translate(4px, -4px); + transform: translate(4px, -4px); + } + 66.6% { + -webkit-transform: translate(-2px, 2px); + transform: translate(-2px, 2px); + } + 83.25% { + -webkit-transform: translate(1px, -1px); + transform: translate(1px, -1px); + } + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + } + .hvr-wobble-to-top-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-wobble-to-top-right:hover, .hvr-wobble-to-top-right:focus, .hvr-wobble-to-top-right:active { + -webkit-animation-name: hvr-wobble-to-top-right; + animation-name: hvr-wobble-to-top-right; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Wobble Top */ + @-webkit-keyframes hvr-wobble-top { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } + } + @keyframes hvr-wobble-top { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } + } + .hvr-wobble-top { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; + } + .hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active { + -webkit-animation-name: hvr-wobble-top; + animation-name: hvr-wobble-top; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Wobble Bottom */ + @-webkit-keyframes hvr-wobble-bottom { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } + } + @keyframes hvr-wobble-bottom { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } + } + .hvr-wobble-bottom { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transform-origin: 100% 0; + transform-origin: 100% 0; + } + .hvr-wobble-bottom:hover, .hvr-wobble-bottom:focus, .hvr-wobble-bottom:active { + -webkit-animation-name: hvr-wobble-bottom; + animation-name: hvr-wobble-bottom; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Wobble Skew */ + @-webkit-keyframes hvr-wobble-skew { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } + } + @keyframes hvr-wobble-skew { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } + } + .hvr-wobble-skew { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-wobble-skew:hover, .hvr-wobble-skew:focus, .hvr-wobble-skew:active { + -webkit-animation-name: hvr-wobble-skew; + animation-name: hvr-wobble-skew; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Buzz */ + @-webkit-keyframes hvr-buzz { + 50% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 100% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + } + @keyframes hvr-buzz { + 50% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 100% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + } + .hvr-buzz { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active { + -webkit-animation-name: hvr-buzz; + animation-name: hvr-buzz; + -webkit-animation-duration: 0.15s; + animation-duration: 0.15s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + } + + /* Buzz Out */ + @-webkit-keyframes hvr-buzz-out { + 10% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 20% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 30% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 40% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 50% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 60% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 70% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 80% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 90% { + -webkit-transform: translateX(1px) rotate(0); + transform: translateX(1px) rotate(0); + } + 100% { + -webkit-transform: translateX(-1px) rotate(0); + transform: translateX(-1px) rotate(0); + } + } + @keyframes hvr-buzz-out { + 10% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 20% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 30% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 40% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 50% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 60% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 70% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 80% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 90% { + -webkit-transform: translateX(1px) rotate(0); + transform: translateX(1px) rotate(0); + } + 100% { + -webkit-transform: translateX(-1px) rotate(0); + transform: translateX(-1px) rotate(0); + } + } + .hvr-buzz-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active { + -webkit-animation-name: hvr-buzz-out; + animation-name: hvr-buzz-out; + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Forward */ + .hvr-forward { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active { + -webkit-transform: translateX(8px); + transform: translateX(8px); + } + + /* Backward */ + .hvr-backward { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-backward:hover, .hvr-backward:focus, .hvr-backward:active { + -webkit-transform: translateX(-8px); + transform: translateX(-8px); + } + + /* BACKGROUND TRANSITIONS */ + /* Fade */ + .hvr-fade { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + overflow: hidden; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: color, background-color; + transition-property: color, background-color; + } + .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active { + background-color: #2098D1; + color: white; + } + + /* Back Pulse */ + @-webkit-keyframes hvr-back-pulse { + 50% { + background-color: rgba(32, 152, 209, 0.75); + } + } + @keyframes hvr-back-pulse { + 50% { + background-color: rgba(32, 152, 209, 0.75); + } + } + .hvr-back-pulse { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + overflow: hidden; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-property: color, background-color; + transition-property: color, background-color; + } + .hvr-back-pulse:hover, .hvr-back-pulse:focus, .hvr-back-pulse:active { + -webkit-animation-name: hvr-back-pulse; + animation-name: hvr-back-pulse; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + background-color: #2098D1; + background-color: #2098d1; + color: white; + } + + /* Sweep To Right */ + .hvr-sweep-to-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-sweep-to-right:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 0 50%; + transform-origin: 0 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { + color: white; + } + .hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { + -webkit-transform: scaleX(1); + transform: scaleX(1); + } + + /* Sweep To Left */ + .hvr-sweep-to-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-sweep-to-left:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active { + color: white; + } + .hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before { + -webkit-transform: scaleX(1); + transform: scaleX(1); + } + + /* Sweep To Bottom */ + .hvr-sweep-to-bottom { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-sweep-to-bottom:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: 50% 0; + transform-origin: 50% 0; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active { + color: white; + } + .hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before { + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + + /* Sweep To Top */ + .hvr-sweep-to-top { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-sweep-to-top:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active { + color: white; + } + .hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before { + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + + /* Bounce To Right */ + .hvr-bounce-to-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + } + .hvr-bounce-to-right:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 0 50%; + transform-origin: 0 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active { + color: white; + } + .hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before { + -webkit-transform: scaleX(1); + transform: scaleX(1); + -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + } + + /* Bounce To Left */ + .hvr-bounce-to-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + } + .hvr-bounce-to-left:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-bounce-to-left:hover, .hvr-bounce-to-left:focus, .hvr-bounce-to-left:active { + color: white; + } + .hvr-bounce-to-left:hover:before, .hvr-bounce-to-left:focus:before, .hvr-bounce-to-left:active:before { + -webkit-transform: scaleX(1); + transform: scaleX(1); + -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + } + + /* Bounce To Bottom */ + .hvr-bounce-to-bottom { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + } + .hvr-bounce-to-bottom:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: 50% 0; + transform-origin: 50% 0; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active { + color: white; + } + .hvr-bounce-to-bottom:hover:before, .hvr-bounce-to-bottom:focus:before, .hvr-bounce-to-bottom:active:before { + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + } + + /* Bounce To Top */ + .hvr-bounce-to-top { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + } + .hvr-bounce-to-top:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-bounce-to-top:hover, .hvr-bounce-to-top:focus, .hvr-bounce-to-top:active { + color: white; + } + .hvr-bounce-to-top:hover:before, .hvr-bounce-to-top:focus:before, .hvr-bounce-to-top:active:before { + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + } + + /* Radial Out */ + .hvr-radial-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + background: #e1e1e1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-radial-out:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + border-radius: 100%; + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active { + color: white; + } + .hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before { + -webkit-transform: scale(2); + transform: scale(2); + } + + /* Radial In */ + .hvr-radial-in { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + background: #2098D1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-radial-in:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #e1e1e1; + border-radius: 100%; + -webkit-transform: scale(2); + transform: scale(2); + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-radial-in:hover, .hvr-radial-in:focus, .hvr-radial-in:active { + color: white; + } + .hvr-radial-in:hover:before, .hvr-radial-in:focus:before, .hvr-radial-in:active:before { + -webkit-transform: scale(0); + transform: scale(0); + } + + /* Rectangle In */ + .hvr-rectangle-in { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + background: #2098D1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-rectangle-in:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #e1e1e1; + -webkit-transform: scale(1); + transform: scale(1); + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-rectangle-in:hover, .hvr-rectangle-in:focus, .hvr-rectangle-in:active { + color: white; + } + .hvr-rectangle-in:hover:before, .hvr-rectangle-in:focus:before, .hvr-rectangle-in:active:before { + -webkit-transform: scale(0); + transform: scale(0); + } + + /* Rectangle Out */ + .hvr-rectangle-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + background: #e1e1e1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-rectangle-out:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-rectangle-out:hover, .hvr-rectangle-out:focus, .hvr-rectangle-out:active { + color: white; + } + .hvr-rectangle-out:hover:before, .hvr-rectangle-out:focus:before, .hvr-rectangle-out:active:before { + -webkit-transform: scale(1); + transform: scale(1); + } + + /* Shutter In Horizontal */ + .hvr-shutter-in-horizontal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + background: #2098D1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-shutter-in-horizontal:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #e1e1e1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + -webkit-transform-origin: 50%; + transform-origin: 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active { + color: white; + } + .hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before { + -webkit-transform: scaleX(0); + transform: scaleX(0); + } + + /* Shutter Out Horizontal */ + .hvr-shutter-out-horizontal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + background: #e1e1e1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-shutter-out-horizontal:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #2098D1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 50%; + transform-origin: 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active { + color: white; + } + .hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before { + -webkit-transform: scaleX(1); + transform: scaleX(1); + } + + /* Shutter In Vertical */ + .hvr-shutter-in-vertical { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + background: #2098D1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-shutter-in-vertical:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #e1e1e1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: 50%; + transform-origin: 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-shutter-in-vertical:hover, .hvr-shutter-in-vertical:focus, .hvr-shutter-in-vertical:active { + color: white; + } + .hvr-shutter-in-vertical:hover:before, .hvr-shutter-in-vertical:focus:before, .hvr-shutter-in-vertical:active:before { + -webkit-transform: scaleY(0); + transform: scaleY(0); + } + + /* Shutter Out Vertical */ + .hvr-shutter-out-vertical { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + background: #e1e1e1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-shutter-out-vertical:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #2098D1; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: 50%; + transform-origin: 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-shutter-out-vertical:hover, .hvr-shutter-out-vertical:focus, .hvr-shutter-out-vertical:active { + color: white; + } + .hvr-shutter-out-vertical:hover:before, .hvr-shutter-out-vertical:focus:before, .hvr-shutter-out-vertical:active:before { + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + + /* BORDER TRANSITIONS */ + /* Border Fade */ + .hvr-border-fade { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ + } + .hvr-border-fade:hover, .hvr-border-fade:focus, .hvr-border-fade:active { + box-shadow: inset 0 0 0 4px #2098D1, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ + } + + /* Hollow */ + .hvr-hollow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: background; + transition-property: background; + box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ + } + .hvr-hollow:hover, .hvr-hollow:focus, .hvr-hollow:active { + background: none; + } + + /* Trim */ + .hvr-trim { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-trim:before { + content: ''; + position: absolute; + border: white solid 4px; + top: 4px; + left: 4px; + right: 4px; + bottom: 4px; + opacity: 0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: opacity; + transition-property: opacity; + } + .hvr-trim:hover:before, .hvr-trim:focus:before, .hvr-trim:active:before { + opacity: 1; + } + + /* Ripple Out */ + @-webkit-keyframes hvr-ripple-out { + 100% { + top: -12px; + right: -12px; + bottom: -12px; + left: -12px; + opacity: 0; + } + } + @keyframes hvr-ripple-out { + 100% { + top: -12px; + right: -12px; + bottom: -12px; + left: -12px; + opacity: 0; + } + } + .hvr-ripple-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-ripple-out:before { + content: ''; + position: absolute; + border: #e1e1e1 solid 6px; + top: 0; + right: 0; + bottom: 0; + left: 0; + -webkit-animation-duration: 1s; + animation-duration: 1s; + } + .hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before { + -webkit-animation-name: hvr-ripple-out; + animation-name: hvr-ripple-out; + } + + /* Ripple In */ + @-webkit-keyframes hvr-ripple-in { + 100% { + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 1; + } + } + @keyframes hvr-ripple-in { + 100% { + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 1; + } + } + .hvr-ripple-in { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-ripple-in:before { + content: ''; + position: absolute; + border: #e1e1e1 solid 4px; + top: -12px; + right: -12px; + bottom: -12px; + left: -12px; + opacity: 0; + -webkit-animation-duration: 1s; + animation-duration: 1s; + } + .hvr-ripple-in:hover:before, .hvr-ripple-in:focus:before, .hvr-ripple-in:active:before { + -webkit-animation-name: hvr-ripple-in; + animation-name: hvr-ripple-in; + } + + /* Outline Out */ + .hvr-outline-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-outline-out:before { + content: ''; + position: absolute; + border: #e1e1e1 solid 4px; + top: 0; + right: 0; + bottom: 0; + left: 0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: top, right, bottom, left; + transition-property: top, right, bottom, left; + } + .hvr-outline-out:hover:before, .hvr-outline-out:focus:before, .hvr-outline-out:active:before { + top: -8px; + right: -8px; + bottom: -8px; + left: -8px; + } + + /* Outline In */ + .hvr-outline-in { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-outline-in:before { + pointer-events: none; + content: ''; + position: absolute; + border: #e1e1e1 solid 4px; + top: -16px; + right: -16px; + bottom: -16px; + left: -16px; + opacity: 0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: top, right, bottom, left; + transition-property: top, right, bottom, left; + } + .hvr-outline-in:hover:before, .hvr-outline-in:focus:before, .hvr-outline-in:active:before { + top: -8px; + right: -8px; + bottom: -8px; + left: -8px; + opacity: 1; + } + + /* Round Corners */ + .hvr-round-corners { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: border-radius; + transition-property: border-radius; + } + .hvr-round-corners:hover, .hvr-round-corners:focus, .hvr-round-corners:active { + border-radius: 1em; + } + + /* Underline From Left */ + .hvr-underline-from-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + } + .hvr-underline-from-left:before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 100%; + bottom: 0; + background: #2098D1; + height: 4px; + -webkit-transition-property: right; + transition-property: right; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before { + right: 0; + } + + /* Underline From Center */ + .hvr-underline-from-center { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + } + .hvr-underline-from-center:before { + content: ""; + position: absolute; + z-index: -1; + left: 51%; + right: 51%; + bottom: 0; + background: red; + height: 4px; + -webkit-transition-property: left, right; + transition-property: left, right; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before { + left: 0; + right: 0; + } + + .hvr-underline-from-center2 { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + } + .hvr-underline-from-center2:before { + content: ""; + position: absolute; + z-index: -1; + left: 51%; + right: 51%; + bottom: 0; + background: white; + height: 4px; + -webkit-transition-property: left, right; + transition-property: left, right; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-underline-from-center2:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before { + left: 0; + right: 0; + } + + /* Underline From Right */ + .hvr-underline-from-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + } + .hvr-underline-from-right:before { + content: ""; + position: absolute; + z-index: -1; + left: 100%; + right: 0; + bottom: 0; + background: #2098D1; + height: 4px; + -webkit-transition-property: left; + transition-property: left; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-underline-from-right:hover:before, .hvr-underline-from-right:focus:before, .hvr-underline-from-right:active:before { + left: 0; + } + + /* Overline From Left */ + .hvr-overline-from-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + } + .hvr-overline-from-left:before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 100%; + top: 0; + background: #2098D1; + height: 4px; + -webkit-transition-property: right; + transition-property: right; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-overline-from-left:hover:before, .hvr-overline-from-left:focus:before, .hvr-overline-from-left:active:before { + right: 0; + } + + /* Overline From Center */ + .hvr-overline-from-center { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + } + .hvr-overline-from-center:before { + content: ""; + position: absolute; + z-index: -1; + left: 51%; + right: 51%; + top: 0; + background: #2098D1; + height: 4px; + -webkit-transition-property: left, right; + transition-property: left, right; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before { + left: 0; + right: 0; + } + + /* Overline From Right */ + .hvr-overline-from-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + } + .hvr-overline-from-right:before { + content: ""; + position: absolute; + z-index: -1; + left: 100%; + right: 0; + top: 0; + background: #2098D1; + height: 4px; + -webkit-transition-property: left; + transition-property: left; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-overline-from-right:hover:before, .hvr-overline-from-right:focus:before, .hvr-overline-from-right:active:before { + left: 0; + } + + /* Reveal */ + .hvr-reveal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + } + .hvr-reveal:before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 0; + top: 0; + bottom: 0; + border-color: red; + border-style: solid; + border-width: 0; + -webkit-transition-property: border-width; + transition-property: border-width; + -webkit-transition-duration: 0.1s; + transition-duration: 0.1s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before { + -webkit-transform: translateY(0); + transform: translateY(0); + border-width: 4px; + } + + /* Underline Reveal */ + .hvr-underline-reveal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + } + .hvr-underline-reveal:before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + height: 4px; + -webkit-transform: translateY(4px); + transform: translateY(4px); + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-underline-reveal:hover:before, .hvr-underline-reveal:focus:before, .hvr-underline-reveal:active:before { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + /* Overline Reveal */ + .hvr-overline-reveal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + } + .hvr-overline-reveal:before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 0; + top: 0; + background: #2098D1; + height: 4px; + -webkit-transform: translateY(-4px); + transform: translateY(-4px); + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-overline-reveal:hover:before, .hvr-overline-reveal:focus:before, .hvr-overline-reveal:active:before { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + /* SHADOW/GLOW TRANSITIONS */ + /* Glow */ + .hvr-glow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + } + .hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active { + box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); + } + + /* Shadow */ + .hvr-shadow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + } + .hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active { + box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); + } + + /* Grow Shadow */ + .hvr-grow-shadow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow, transform; + transition-property: box-shadow, transform; + } + .hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active { + box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + + /* Box Shadow Outset */ + .hvr-box-shadow-outset { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + } + .hvr-box-shadow-outset:hover, .hvr-box-shadow-outset:focus, .hvr-box-shadow-outset:active { + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); + } + + /* Box Shadow Inset */ + .hvr-box-shadow-inset { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ + } + .hvr-box-shadow-inset:hover, .hvr-box-shadow-inset:focus, .hvr-box-shadow-inset:active { + box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ + } + + /* Float Shadow */ + .hvr-float-shadow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(207, 15, 15, 0.178); + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-float-shadow:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: 100%; + left: 5%; + height: 10px; + width: 90%; + opacity: 0; + background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); + background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); + /* W3C */ + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform, opacity; + transition-property: transform, opacity; + } + .hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active { + -webkit-transform: translateY(-5px); + transform: translateY(-5px); + /* move the element up by 5px */ + } + .hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before { + opacity: 1; + -webkit-transform: translateY(5px); + transform: translateY(5px); + /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ + } + + /* Shadow Radial */ + .hvr-shadow-radial { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-shadow-radial:before, .hvr-shadow-radial:after { + pointer-events: none; + position: absolute; + content: ''; + left: 0; + width: 100%; + box-sizing: border-box; + background-repeat: no-repeat; + height: 5px; + opacity: 0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: opacity; + transition-property: opacity; + } + .hvr-shadow-radial:before { + bottom: 100%; + background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); + background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); + } + .hvr-shadow-radial:after { + top: 100%; + background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); + background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); + } + .hvr-shadow-radial:hover:before, .hvr-shadow-radial:focus:before, .hvr-shadow-radial:active:before, .hvr-shadow-radial:hover:after, .hvr-shadow-radial:focus:after, .hvr-shadow-radial:active:after { + opacity: 1; + } + + /* SPEECH BUBBLES */ + /* Bubble Top */ + .hvr-bubble-top { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-bubble-top:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + left: calc(50% - 10px); + top: 0; + border-width: 0 10px 10px 10px; + border-color: transparent transparent #e1e1e1 transparent; + } + .hvr-bubble-top:hover:before, .hvr-bubble-top:focus:before, .hvr-bubble-top:active:before { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } + + /* Bubble Right */ + .hvr-bubble-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-bubble-right:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + top: calc(50% - 10px); + right: 0; + border-width: 10px 0 10px 10px; + border-color: transparent transparent transparent #e1e1e1; + } + .hvr-bubble-right:hover:before, .hvr-bubble-right:focus:before, .hvr-bubble-right:active:before { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } + + /* Bubble Bottom */ + .hvr-bubble-bottom { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-bubble-bottom:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + left: calc(50% - 10px); + bottom: 0; + border-width: 10px 10px 0 10px; + border-color: #e1e1e1 transparent transparent transparent; + } + .hvr-bubble-bottom:hover:before, .hvr-bubble-bottom:focus:before, .hvr-bubble-bottom:active:before { + -webkit-transform: translateY(10px); + transform: translateY(10px); + } + + /* Bubble Left */ + .hvr-bubble-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-bubble-left:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + top: calc(50% - 10px); + left: 0; + border-width: 10px 10px 10px 0; + border-color: transparent #e1e1e1 transparent transparent; + } + .hvr-bubble-left:hover:before, .hvr-bubble-left:focus:before, .hvr-bubble-left:active:before { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + /* Bubble Float Top */ + .hvr-bubble-float-top { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-bubble-float-top:before { + position: absolute; + z-index: -1; + content: ''; + left: calc(50% - 10px); + top: 0; + border-style: solid; + border-width: 0 10px 10px 10px; + border-color: transparent transparent #e1e1e1 transparent; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-bubble-float-top:hover, .hvr-bubble-float-top:focus, .hvr-bubble-float-top:active { + -webkit-transform: translateY(10px); + transform: translateY(10px); + } + .hvr-bubble-float-top:hover:before, .hvr-bubble-float-top:focus:before, .hvr-bubble-float-top:active:before { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } + + /* Bubble Float Right */ + .hvr-bubble-float-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-bubble-float-right:before { + position: absolute; + z-index: -1; + top: calc(50% - 10px); + right: 0; + content: ''; + border-style: solid; + border-width: 10px 0 10px 10px; + border-color: transparent transparent transparent #e1e1e1; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-bubble-float-right:hover, .hvr-bubble-float-right:focus, .hvr-bubble-float-right:active { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + .hvr-bubble-float-right:hover:before, .hvr-bubble-float-right:focus:before, .hvr-bubble-float-right:active:before { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } + + /* Bubble Float Bottom */ + .hvr-bubble-float-bottom { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-bubble-float-bottom:before { + position: absolute; + z-index: -1; + content: ''; + left: calc(50% - 10px); + bottom: 0; + border-style: solid; + border-width: 10px 10px 0 10px; + border-color: #e1e1e1 transparent transparent transparent; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-bubble-float-bottom:hover, .hvr-bubble-float-bottom:focus, .hvr-bubble-float-bottom:active { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } + .hvr-bubble-float-bottom:hover:before, .hvr-bubble-float-bottom:focus:before, .hvr-bubble-float-bottom:active:before { + -webkit-transform: translateY(10px); + transform: translateY(10px); + } + + /* Bubble Float Left */ + .hvr-bubble-float-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-bubble-float-left:before { + position: absolute; + z-index: -1; + content: ''; + top: calc(50% - 10px); + left: 0; + border-style: solid; + border-width: 10px 10px 10px 0; + border-color: transparent #e1e1e1 transparent transparent; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-bubble-float-left:hover, .hvr-bubble-float-left:focus, .hvr-bubble-float-left:active { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } + .hvr-bubble-float-left:hover:before, .hvr-bubble-float-left:focus:before, .hvr-bubble-float-left:active:before { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + /* ICONS */ + /* Icon Back */ + .hvr-icon-back { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.1s; + transition-duration: 0.1s; + } + .hvr-icon-back .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.1s; + transition-duration: 0.1s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-back:hover .hvr-icon, .hvr-icon-back:focus .hvr-icon, .hvr-icon-back:active .hvr-icon { + -webkit-transform: translateX(-4px); + transform: translateX(-4px); + } + + /* Icon Forward */ + .hvr-icon-forward { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.1s; + transition-duration: 0.1s; + } + .hvr-icon-forward .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.1s; + transition-duration: 0.1s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-forward:hover .hvr-icon, .hvr-icon-forward:focus .hvr-icon, .hvr-icon-forward:active .hvr-icon { + -webkit-transform: translateX(4px); + transform: translateX(4px); + } + + /* Icon Down */ + @-webkit-keyframes hvr-icon-down { + 0%, + 50%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 25%, + 75% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + } + @keyframes hvr-icon-down { + 0%, + 50%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 25%, + 75% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + } + /* Icon Down */ + .hvr-icon-down { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-icon-down .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + } + .hvr-icon-down:hover .hvr-icon, .hvr-icon-down:focus .hvr-icon, .hvr-icon-down:active .hvr-icon { + -webkit-animation-name: hvr-icon-down; + animation-name: hvr-icon-down; + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + /* Icon Up */ + @-webkit-keyframes hvr-icon-up { + 0%, + 50%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 25%, + 75% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + } + @keyframes hvr-icon-up { + 0%, + 50%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 25%, + 75% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + } + /* Icon Up */ + .hvr-icon-up { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-icon-up .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + } + .hvr-icon-up:hover .hvr-icon, .hvr-icon-up:focus .hvr-icon, .hvr-icon-up:active .hvr-icon { + -webkit-animation-name: hvr-icon-up; + animation-name: hvr-icon-up; + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + /* Icon Spin */ + .hvr-icon-spin { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-icon-spin .hvr-icon { + -webkit-transition-duration: 1s; + transition-duration: 1s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + } + .hvr-icon-spin:hover .hvr-icon, .hvr-icon-spin:focus .hvr-icon, .hvr-icon-spin:active .hvr-icon { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + + /* Icon Drop */ + @-webkit-keyframes hvr-icon-drop { + 0% { + opacity: 0; + } + 50% { + opacity: 0; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } + 51%, + 100% { + opacity: 1; + } + } + @keyframes hvr-icon-drop { + 0% { + opacity: 0; + } + 50% { + opacity: 0; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } + 51%, + 100% { + opacity: 1; + } + } + /* Icon Drop */ + .hvr-icon-drop { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-icon-drop .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + } + .hvr-icon-drop:hover .hvr-icon, .hvr-icon-drop:focus .hvr-icon, .hvr-icon-drop:active .hvr-icon { + opacity: 0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-animation-name: hvr-icon-drop; + animation-name: hvr-icon-drop; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + } + + /* Icon Fade */ + .hvr-icon-fade { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-icon-fade .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-property: color; + transition-property: color; + } + .hvr-icon-fade:hover .hvr-icon, .hvr-icon-fade:focus .hvr-icon, .hvr-icon-fade:active .hvr-icon { + color: #0F9E5E; + } + + /* Icon Float Away */ + @-webkit-keyframes hvr-icon-float-away { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translateY(-1em); + transform: translateY(-1em); + } + } + @keyframes hvr-icon-float-away { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translateY(-1em); + transform: translateY(-1em); + } + } + /* Icon Float Away */ + .hvr-icon-float-away { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-icon-float-away .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + } + .hvr-icon-float-away:hover .hvr-icon, .hvr-icon-float-away:focus .hvr-icon, .hvr-icon-float-away:active .hvr-icon { + -webkit-animation-name: hvr-icon-float-away; + animation-name: hvr-icon-float-away; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + /* Icon Sink Away */ + @-webkit-keyframes hvr-icon-sink-away { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translateY(1em); + transform: translateY(1em); + } + } + @keyframes hvr-icon-sink-away { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translateY(1em); + transform: translateY(1em); + } + } + /* Icon Sink Away */ + .hvr-icon-sink-away { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-icon-sink-away .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + } + .hvr-icon-sink-away:hover .hvr-icon, .hvr-icon-sink-away:focus .hvr-icon, .hvr-icon-sink-away:active .hvr-icon { + -webkit-animation-name: hvr-icon-sink-away; + animation-name: hvr-icon-sink-away; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + /* Icon Grow */ + .hvr-icon-grow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-grow .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-grow:hover .hvr-icon, .hvr-icon-grow:focus .hvr-icon, .hvr-icon-grow:active .hvr-icon { + -webkit-transform: scale(1.3) translateZ(0); + transform: scale(1.3) translateZ(0); + } + + /* Icon Shrink */ + .hvr-icon-shrink { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-shrink .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-shrink:hover .hvr-icon, .hvr-icon-shrink:focus .hvr-icon, .hvr-icon-shrink:active .hvr-icon { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + + /* Icon Pulse */ + @-webkit-keyframes hvr-icon-pulse { + 25% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + 75% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + } + @keyframes hvr-icon-pulse { + 25% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + 75% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + } + .hvr-icon-pulse { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-icon-pulse .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-pulse:hover .hvr-icon, .hvr-icon-pulse:focus .hvr-icon, .hvr-icon-pulse:active .hvr-icon { + -webkit-animation-name: hvr-icon-pulse; + animation-name: hvr-icon-pulse; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + } + + /* Icon Pulse Grow */ + @-webkit-keyframes hvr-icon-pulse-grow { + to { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + } + @keyframes hvr-icon-pulse-grow { + to { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + } + .hvr-icon-pulse-grow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-icon-pulse-grow .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-pulse-grow:hover .hvr-icon, .hvr-icon-pulse-grow:focus .hvr-icon, .hvr-icon-pulse-grow:active .hvr-icon { + -webkit-animation-name: hvr-icon-pulse-grow; + animation-name: hvr-icon-pulse-grow; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; + } + + /* Icon Pulse Shrink */ + @-webkit-keyframes hvr-icon-pulse-shrink { + to { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + } + @keyframes hvr-icon-pulse-shrink { + to { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + } + .hvr-icon-pulse-shrink { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + .hvr-icon-pulse-shrink .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-pulse-shrink:hover .hvr-icon, .hvr-icon-pulse-shrink:focus .hvr-icon, .hvr-icon-pulse-shrink:active .hvr-icon { + -webkit-animation-name: hvr-icon-pulse-shrink; + animation-name: hvr-icon-pulse-shrink; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; + } + + /* Icon Push */ + @-webkit-keyframes hvr-icon-push { + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + } + @keyframes hvr-icon-push { + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + } + .hvr-icon-push { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-push .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-push:hover .hvr-icon, .hvr-icon-push:focus .hvr-icon, .hvr-icon-push:active .hvr-icon { + -webkit-animation-name: hvr-icon-push; + animation-name: hvr-icon-push; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Icon Pop */ + @-webkit-keyframes hvr-icon-pop { + 50% { + -webkit-transform: scale(1.5); + transform: scale(1.5); + } + } + @keyframes hvr-icon-pop { + 50% { + -webkit-transform: scale(1.5); + transform: scale(1.5); + } + } + .hvr-icon-pop { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-pop .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-pop:hover .hvr-icon, .hvr-icon-pop:focus .hvr-icon, .hvr-icon-pop:active .hvr-icon { + -webkit-animation-name: hvr-icon-pop; + animation-name: hvr-icon-pop; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Icon Bounce */ + .hvr-icon-bounce { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-bounce .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-bounce:hover .hvr-icon, .hvr-icon-bounce:focus .hvr-icon, .hvr-icon-bounce:active .hvr-icon { + -webkit-transform: scale(1.5); + transform: scale(1.5); + -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); + transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); + } + + /* Icon Rotate */ + .hvr-icon-rotate { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-rotate .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-rotate:hover .hvr-icon, .hvr-icon-rotate:focus .hvr-icon, .hvr-icon-rotate:active .hvr-icon { + -webkit-transform: rotate(20deg); + transform: rotate(20deg); + } + + /* Icon Grow Rotate */ + .hvr-icon-grow-rotate { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-grow-rotate .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-grow-rotate:hover .hvr-icon, .hvr-icon-grow-rotate:focus .hvr-icon, .hvr-icon-grow-rotate:active .hvr-icon { + -webkit-transform: scale(1.5) rotate(12deg); + transform: scale(1.5) rotate(12deg); + } + + /* Icon Float */ + .hvr-icon-float { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-float .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-float:hover .hvr-icon, .hvr-icon-float:focus .hvr-icon, .hvr-icon-float:active .hvr-icon { + -webkit-transform: translateY(-4px); + transform: translateY(-4px); + } + + /* Icon Sink */ + .hvr-icon-sink { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-sink .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-icon-sink:hover .hvr-icon, .hvr-icon-sink:focus .hvr-icon, .hvr-icon-sink:active .hvr-icon { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + + /* Icon Bob */ + @-webkit-keyframes hvr-icon-bob { + 0% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + 50% { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } + 100% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + } + @keyframes hvr-icon-bob { + 0% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + 50% { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } + 100% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + } + @-webkit-keyframes hvr-icon-bob-float { + 100% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + } + @keyframes hvr-icon-bob-float { + 100% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + } + .hvr-icon-bob { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-bob .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + } + .hvr-icon-bob:hover .hvr-icon, .hvr-icon-bob:focus .hvr-icon, .hvr-icon-bob:active .hvr-icon { + -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob; + animation-name: hvr-icon-bob-float, hvr-icon-bob; + -webkit-animation-duration: .3s, 1.5s; + animation-duration: .3s, 1.5s; + -webkit-animation-delay: 0s, .3s; + animation-delay: 0s, .3s; + -webkit-animation-timing-function: ease-out, ease-in-out; + animation-timing-function: ease-out, ease-in-out; + -webkit-animation-iteration-count: 1, infinite; + animation-iteration-count: 1, infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-direction: normal, alternate; + animation-direction: normal, alternate; + } + + /* Icon Hang */ + @-webkit-keyframes hvr-icon-hang { + 0% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + 50% { + -webkit-transform: translateY(2px); + transform: translateY(2px); + } + 100% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + } + @keyframes hvr-icon-hang { + 0% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + 50% { + -webkit-transform: translateY(2px); + transform: translateY(2px); + } + 100% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + } + @-webkit-keyframes hvr-icon-hang-sink { + 100% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + } + @keyframes hvr-icon-hang-sink { + 100% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + } + .hvr-icon-hang { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-hang .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + } + .hvr-icon-hang:hover .hvr-icon, .hvr-icon-hang:focus .hvr-icon, .hvr-icon-hang:active .hvr-icon { + -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang; + animation-name: hvr-icon-hang-sink, hvr-icon-hang; + -webkit-animation-duration: .3s, 1.5s; + animation-duration: .3s, 1.5s; + -webkit-animation-delay: 0s, .3s; + animation-delay: 0s, .3s; + -webkit-animation-timing-function: ease-out, ease-in-out; + animation-timing-function: ease-out, ease-in-out; + -webkit-animation-iteration-count: 1, infinite; + animation-iteration-count: 1, infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-direction: normal, alternate; + animation-direction: normal, alternate; + } + + /* Icon Wobble Horizontal */ + @-webkit-keyframes hvr-icon-wobble-horizontal { + 16.65% { + -webkit-transform: translateX(6px); + transform: translateX(6px); + } + 33.3% { + -webkit-transform: translateX(-5px); + transform: translateX(-5px); + } + 49.95% { + -webkit-transform: translateX(4px); + transform: translateX(4px); + } + 66.6% { + -webkit-transform: translateX(-2px); + transform: translateX(-2px); + } + 83.25% { + -webkit-transform: translateX(1px); + transform: translateX(1px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + } + @keyframes hvr-icon-wobble-horizontal { + 16.65% { + -webkit-transform: translateX(6px); + transform: translateX(6px); + } + 33.3% { + -webkit-transform: translateX(-5px); + transform: translateX(-5px); + } + 49.95% { + -webkit-transform: translateX(4px); + transform: translateX(4px); + } + 66.6% { + -webkit-transform: translateX(-2px); + transform: translateX(-2px); + } + 83.25% { + -webkit-transform: translateX(1px); + transform: translateX(1px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + } + .hvr-icon-wobble-horizontal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-wobble-horizontal .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + } + .hvr-icon-wobble-horizontal:hover .hvr-icon, .hvr-icon-wobble-horizontal:focus .hvr-icon, .hvr-icon-wobble-horizontal:active .hvr-icon { + -webkit-animation-name: hvr-icon-wobble-horizontal; + animation-name: hvr-icon-wobble-horizontal; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Icon Wobble Vertical */ + @-webkit-keyframes hvr-icon-wobble-vertical { + 16.65% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + 33.3% { + -webkit-transform: translateY(-5px); + transform: translateY(-5px); + } + 49.95% { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + 66.6% { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } + 83.25% { + -webkit-transform: translateY(1px); + transform: translateY(1px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + } + @keyframes hvr-icon-wobble-vertical { + 16.65% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + 33.3% { + -webkit-transform: translateY(-5px); + transform: translateY(-5px); + } + 49.95% { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + 66.6% { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } + 83.25% { + -webkit-transform: translateY(1px); + transform: translateY(1px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + } + .hvr-icon-wobble-vertical { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-wobble-vertical .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + } + .hvr-icon-wobble-vertical:hover .hvr-icon, .hvr-icon-wobble-vertical:focus .hvr-icon, .hvr-icon-wobble-vertical:active .hvr-icon { + -webkit-animation-name: hvr-icon-wobble-vertical; + animation-name: hvr-icon-wobble-vertical; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* Icon Buzz */ + @-webkit-keyframes hvr-icon-buzz { + 50% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 100% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + } + @keyframes hvr-icon-buzz { + 50% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 100% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + } + .hvr-icon-buzz { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-buzz .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + } + .hvr-icon-buzz:hover .hvr-icon, .hvr-icon-buzz:focus .hvr-icon, .hvr-icon-buzz:active .hvr-icon { + -webkit-animation-name: hvr-icon-buzz; + animation-name: hvr-icon-buzz; + -webkit-animation-duration: 0.15s; + animation-duration: 0.15s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + } + + /* Icon Buzz Out */ + @-webkit-keyframes hvr-icon-buzz-out { + 10% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 20% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 30% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 40% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 50% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 60% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 70% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 80% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 90% { + -webkit-transform: translateX(1px) rotate(0); + transform: translateX(1px) rotate(0); + } + 100% { + -webkit-transform: translateX(-1px) rotate(0); + transform: translateX(-1px) rotate(0); + } + } + @keyframes hvr-icon-buzz-out { + 10% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 20% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 30% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 40% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 50% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 60% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 70% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 80% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 90% { + -webkit-transform: translateX(1px) rotate(0); + transform: translateX(1px) rotate(0); + } + 100% { + -webkit-transform: translateX(-1px) rotate(0); + transform: translateX(-1px) rotate(0); + } + } + .hvr-icon-buzz-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + } + .hvr-icon-buzz-out .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + } + .hvr-icon-buzz-out:hover .hvr-icon, .hvr-icon-buzz-out:focus .hvr-icon, .hvr-icon-buzz-out:active .hvr-icon { + -webkit-animation-name: hvr-icon-buzz-out; + animation-name: hvr-icon-buzz-out; + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + } + + /* CURLS */ + /* Curl Top Left */ + .hvr-curl-top-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-curl-top-left:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + top: 0; + left: 0; + background: white; + /* IE9 */ + background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000'); + /*For IE7-8-9*/ + z-index: 1000; + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: width, height; + transition-property: width, height; + } + .hvr-curl-top-left:hover:before, .hvr-curl-top-left:focus:before, .hvr-curl-top-left:active:before { + width: 25px; + height: 25px; + } + + /* Curl Top Right */ + .hvr-curl-top-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-curl-top-right:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + top: 0; + right: 0; + background: white; + /* IE9 */ + background: linear-gradient(225deg, white 45%, #aaa 50%, #ccc 56%, white 80%); + box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: width, height; + transition-property: width, height; + } + .hvr-curl-top-right:hover:before, .hvr-curl-top-right:focus:before, .hvr-curl-top-right:active:before { + width: 25px; + height: 25px; + } + + /* Curl Bottom Right */ + .hvr-curl-bottom-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-curl-bottom-right:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + bottom: 0; + right: 0; + background: white; + /* IE9 */ + background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%); + box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: width, height; + transition-property: width, height; + } + .hvr-curl-bottom-right:hover:before, .hvr-curl-bottom-right:focus:before, .hvr-curl-bottom-right:active:before { + width: 25px; + height: 25px; + } + + /* Curl Bottom Left */ + .hvr-curl-bottom-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + } + .hvr-curl-bottom-left:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + bottom: 0; + left: 0; + background: white; + /* IE9 */ + background: linear-gradient(45deg, white 45%, #aaa 50%, #ccc 56%, white 80%); + box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: width, height; + transition-property: width, height; + } + .hvr-curl-bottom-left:hover:before, .hvr-curl-bottom-left:focus:before, .hvr-curl-bottom-left:active:before { + width: 25px; + height: 25px; + } + + /*# sourceMappingURL=hover.css.map */ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/css/stylesheet.css b/Task 2/AndyUGA_portfolio/css/stylesheet.css new file mode 100644 index 00000000..37d74233 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/css/stylesheet.css @@ -0,0 +1,660 @@ + + +* { + font-family: 'Roboto', sans-serif; +} + +.bg-dark { + background-color: black !important; +} + +body, html { + height: 100%; + margin: 0; + position: relative; + +} + +.nameFont { + font-size:3rem; + font-weight: 300; +} + +.reduceHeight { + height: 50vh; +} + +.freelanceTitle { + font-weight: bold; + text-decoration: underline; + font-size: 2vh; + padding-bottom: 1vh; +} + +.grow { + transition: all .3s ease-in-out; +} + +.grow:hover { + transform: scale(1.05); +} + + +.enlarge { + transition: all .2s ease-in-out; +} + +.enlarge:hover { + transform: scale(1.1); +} +/* Underline From Center */ +.hvr-underline-from-center { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; +} +.hvr-underline-from-center:before { + content: ""; + position: absolute; + z-index: -1; + left: 51%; + right: 51%; + bottom: 0; + background: red; + height: 4px; + -webkit-transition-property: left, right; + transition-property: left, right; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before { + left: 0; + right: 0; +} + +.hvr-grow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + } + .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + +.card-title { + font-weight: bold; + font-size: 3vh; + text-decoration: underline; +} + +.portfolioImg:hover { + background-color: blue; + background: red; +} + +.card { + width: 50%; +} + +.reddit { + color: #FF5700; +} + +.upcr { + color: #199045; +} + +.uvsase { + color: #009FB7; + +} + +.node { + color: #75AD64; +} + +.reactNative { + color: #00D8FF; +} + +.newspaper { + color:black; +} + +.angular { + color: #DD1915; +} + +.ionic { + color: #4F8FF7; + +} + + + +.nodeJS { + color: #83CD2A; +} + +.mongoDB { + color: #56AE46; +} + +.bootstrap { + color: #5B4282; +} + +.html5 { + color: #E44D25; +} + +.css3 { + color: #34A9DC; +} + +.git { + color: #E44D25; +} + +.github { + color: #171515; +} + +.bitbucket { + color: #205081; +} + +.wordpress { + color: #494949; + +} + + + + +.logo { + width: 15vh; + + height: 10vh; + display: block; + margin-left: auto; + margin-right: auto; +} + +.fas, .far { + font-size: 12vh; +} + +.languageIcon { + height: 70%; + width: 100%; + +} + +.githubIcon { + width: 10% +} + + + +.programmingIcon { + height: 50%; + width: 20%; +} + +.projectIcon2 { + height: 50%; + width: 40%; +} + + + + + + +.techIconFont { + font-size: 25px; + font-weight: bold; +} + +.logo2 { + width: 40%; + height: 10vh; + vertical-align: middle; + +} + +.line { + color: white; +} + +.appName { + font-size: 20px; +} + + + +.icon { + height: 50px; + width: 50px; +} + +.icon2 { + height: 90px; + width: 90px; +} + +.icon3 { + width: 40px; + height: auto; +} + +.icon3 { + height: 60px; + width: 60px; +} + + +.navbar { + margin-bottom: 0; + border-radius: 0; +} + +/* Add a gray background color and some padding to the footer */ +footer { + background-color: #f2f2f2; + padding: 25px; +} + +img { + width: 50%; + height: auto; +} + +.homeImage { + width: 70%; + border-radius: 20%; +} + +.homeImage2 { + width: 25%; +} + +.homeImage3 { + width: 80%; + border-radius: 15%; +} + +.indexTitle { + font-size: 4rem; +} + +.tempText { + color: white; +} + +.contact { + text-align: center; + color: white; +} + +.footerIMG { + height: 40px; + width: 40px; +} + +.footerIMG2 { + height: 60px; + width: 50px; +} + +.link { + color: red; +} + +.link:hover { + color: white; + font-weight: bold; +} + +.link2 { + padding-top: 15px; +} + + + +.text { + text-align: center; + position:relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + font-family: "Roboto", Times, serif; + font-size: 50px; + font-weight: bold; + +} + +.temp { + color: white; + font-size: 50px; + text-align: center; +} + +.jumbotron { + background: none !important; + +} + + +*{ + margin:0; + padding:0; +} + +.container{ padding-top: 20px; + padding-bottom: 20px;} + + + +.name { + font-weight: bold; + font-size: 35px; +} + + + + + + +@keyframes animate { + 0% { + transform:scaleX(0); + transform-origin: left; + } + 50% + { + transform:scaleX(1); + transform-origin: left; + } + 50.1% + { + transform:scaleX(1); + transform-origin: right; + + } + + 100% + { + transform:scaleX(0); + transform-origin: right; + + } + + +} + + + +.menuButton { + background-color: transparent; + color: white; + border-color: white; + font-size: 18px; + border: 0px; +} + +.menuButton:hover { + border-color: red; +} + + + +.backgroundImg { + background-size: cover; + background-position: center; + background-repeat: no-repeat; + width: 100%; + height: 100%; + background-image: + /* top, transparent red */ + linear-gradient( + rgba(4, 9, 30, 0.7), + rgba(4, 9, 30, 0.7) + ), + /* your image */ + url(../img/background/gaming.jpg); +} + + + + + +.projectHeading { + text-align: center; +} + + + +.projectIcon { + width: 100%; + height: auto; + +} + + + + + + +/* Most mobile devices */ +@media screen and (min-width: 300px) and (max-width: 749px) { + + .hideMobile { + display: none; + } + .grow { + transition: all .3s ease-in-out; + } + + .grow:hover { + transform: scale(1.0); + } + .techIconFont { + font-size: 18px; + font-weight: bold; + } + + .card2 { + width: 85%; + } + + .fas, .far { + font-size: 10vh; + } + + .logo { + + height: 10vh; + display: block; + margin-left: auto; + margin-right: auto; + } + + + .githubIcon { + width: 20%; + } + + .languageIcon { + height: 70%; + width: 100%; + + } + + + + + .programmingIcon { + height: 100%; + width: 35%; + } + /* Underline From Center */ + + .hvr-underline-from-center:before { + background: #343A3F; + + } +} + +/* Table devices */ +@media screen and (min-width: 750px) and (max-width: 1000px) { + + + .icon { + height: 40px; + width: 40px; + } + + .fas, .far { + font-size: 8vh; + } + + .icon2 { + height: 70px; + width: 70px; + } + + .icon3 { + height: 45px; + width: 45px; + } + + .logo { + + height: 10vh; + display: block; + margin-left: auto; + margin-right: auto; + } + + .languageIcon { + height: 70%; + width: 100%; + + } + + .techIconFont { + font-size: 16px; + } + + .programmingIcon { + height: 50%; + width: 35%; + } + + + + + .testbg3 { + background-size: cover; + background-position: center; + background-repeat: repeat-y; + width: 100%; + height: 270vh; + background-image: + /* top, transparent red */ + linear-gradient( + rgba(4, 9, 30, .5), + rgba(4, 9, 30, 0.5) + ), + /* your image */ + url(img/background/tech3.jpg); + } + + + + + /* The typewriter cursor effect */ + + .box{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 370px; + height: 370px; + font-size: 19px; + box-sizing: border-box; + overflow: hidden; + box-shadow: 0 20px 50px rgb(250, 100, 100); + border: 2px solid black; + color: white; + padding: 20px; + } + + + + + +} + +@media screen and (min-width: 1400px) { + .card2 { + width: 40vw; + } +} + + +@media only screen and (max-width: 768px) { + .hvr-underline-from-center { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + } + .hvr-underline-from-center:before { + content: ""; + position: absolute; + z-index: -1; + left: 51%; + right: 51%; + bottom: 0; + background: black; + height: 4px; + -webkit-transition-property: left, right; + transition-property: left, right; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + .hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before { + left: 0; + right: 0; + } +} + + +@media screen and (max-width:362px) { + .marginBottomButton { + margin-bottom: 1rem; + } +} \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/.DS_Store b/Task 2/AndyUGA_portfolio/img/.DS_Store new file mode 100644 index 00000000..892bdb14 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/.DS_Store differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/.DS_Store b/Task 2/AndyUGA_portfolio/img/Freelance/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/.DS_Store differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/Bio.png b/Task 2/AndyUGA_portfolio/img/Freelance/Bio.png new file mode 100644 index 00000000..2014ca19 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/Bio.png differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/Girltalk.png b/Task 2/AndyUGA_portfolio/img/Freelance/Girltalk.png new file mode 100644 index 00000000..38b3884b Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/Girltalk.png differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/Portfolio.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/Portfolio.jpg new file mode 100644 index 00000000..eee5a7b1 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/Portfolio.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/Projects.png b/Task 2/AndyUGA_portfolio/img/Freelance/Projects.png new file mode 100644 index 00000000..625abf84 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/Projects.png differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Hosting.svg b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Hosting.svg new file mode 100644 index 00000000..1c632fa9 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Hosting.svg @@ -0,0 +1 @@ +cloud hosting \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Manage.svg b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Manage.svg new file mode 100644 index 00000000..6cfaeb2e --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Manage.svg @@ -0,0 +1 @@ +personal settings \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/SVG/MobilePrototype.svg b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/MobilePrototype.svg new file mode 100644 index 00000000..d6bcdcb0 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/MobilePrototype.svg @@ -0,0 +1 @@ +mobile_prototyping \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Prototype.svg b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Prototype.svg new file mode 100644 index 00000000..cfd712c4 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Prototype.svg @@ -0,0 +1 @@ +programming \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Prototype2.svg b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Prototype2.svg new file mode 100644 index 00000000..5cc3286b --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Prototype2.svg @@ -0,0 +1 @@ +prototyping process \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Responsive.svg b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Responsive.svg new file mode 100644 index 00000000..5acea5da --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Responsive.svg @@ -0,0 +1 @@ +Devices \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Secure.svg b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Secure.svg new file mode 100644 index 00000000..220850e4 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/Secure.svg @@ -0,0 +1 @@ +safe \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/SVG/ThreeWindows.svg b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/ThreeWindows.svg new file mode 100644 index 00000000..b4c2391e --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/Freelance/SVG/ThreeWindows.svg @@ -0,0 +1 @@ +windows \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/SiriThai.png b/Task 2/AndyUGA_portfolio/img/Freelance/SiriThai.png new file mode 100644 index 00000000..c96d6d28 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/SiriThai.png differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/UGAVSA.png b/Task 2/AndyUGA_portfolio/img/Freelance/UGAVSA.png new file mode 100644 index 00000000..3c5fe28b Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/UGAVSA.png differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/Vincent.png b/Task 2/AndyUGA_portfolio/img/Freelance/Vincent.png new file mode 100644 index 00000000..b73776a1 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/Vincent.png differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/awards.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/awards.jpg new file mode 100644 index 00000000..094b7312 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/awards.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/ccla.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/ccla.jpg new file mode 100644 index 00000000..c137f618 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/ccla.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/invisarmor.png b/Task 2/AndyUGA_portfolio/img/Freelance/invisarmor.png new file mode 100644 index 00000000..4d61535b Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/invisarmor.png differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/koa.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/koa.jpg new file mode 100644 index 00000000..0883c512 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/koa.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/landing.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/landing.jpg new file mode 100644 index 00000000..51632547 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/landing.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/selc.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/selc.jpg new file mode 100644 index 00000000..1418fa48 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/selc.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/staff.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/staff.jpg new file mode 100644 index 00000000..91eac1ad Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/staff.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/test/awards.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/test/awards.jpg new file mode 100644 index 00000000..9852e451 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/test/awards.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/test/ccla.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/test/ccla.jpg new file mode 100644 index 00000000..160cc1f7 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/test/ccla.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/test/koa.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/test/koa.jpg new file mode 100644 index 00000000..2fdccb4d Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/test/koa.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/test/landing.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/test/landing.jpg new file mode 100644 index 00000000..51632547 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/test/landing.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/test/portfolio.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/test/portfolio.jpg new file mode 100644 index 00000000..5e3ad537 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/test/portfolio.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/test/selc.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/test/selc.jpg new file mode 100644 index 00000000..5c8fe350 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/test/selc.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/test/staff.jpg b/Task 2/AndyUGA_portfolio/img/Freelance/test/staff.jpg new file mode 100644 index 00000000..e12f8db8 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/test/staff.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Freelance/uvsase.png b/Task 2/AndyUGA_portfolio/img/Freelance/uvsase.png new file mode 100644 index 00000000..7cbbfc73 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Freelance/uvsase.png differ diff --git a/Task 2/AndyUGA_portfolio/img/Homepage/Experience.svg b/Task 2/AndyUGA_portfolio/img/Homepage/Experience.svg new file mode 100644 index 00000000..9bf1a3e6 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/Homepage/Experience.svg @@ -0,0 +1 @@ +files \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/Homepage/Experience2.svg b/Task 2/AndyUGA_portfolio/img/Homepage/Experience2.svg new file mode 100644 index 00000000..b9d63c8d --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/Homepage/Experience2.svg @@ -0,0 +1 @@ +resume \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/Homepage/Freelance.svg b/Task 2/AndyUGA_portfolio/img/Homepage/Freelance.svg new file mode 100644 index 00000000..37ac4440 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/Homepage/Freelance.svg @@ -0,0 +1 @@ +web_developer \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/Homepage/Portfolio.svg b/Task 2/AndyUGA_portfolio/img/Homepage/Portfolio.svg new file mode 100644 index 00000000..9b693d35 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/Homepage/Portfolio.svg @@ -0,0 +1 @@ +Designer \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/Homepage/SriThai.jpg b/Task 2/AndyUGA_portfolio/img/Homepage/SriThai.jpg new file mode 100644 index 00000000..d69f5957 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Homepage/SriThai.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/Homepage/VSALogo.png b/Task 2/AndyUGA_portfolio/img/Homepage/VSALogo.png new file mode 100644 index 00000000..5915c306 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Homepage/VSALogo.png differ diff --git a/Task 2/AndyUGA_portfolio/img/Homepage/Vincent.png b/Task 2/AndyUGA_portfolio/img/Homepage/Vincent.png new file mode 100644 index 00000000..a8ba941b Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/Homepage/Vincent.png differ diff --git a/Task 2/AndyUGA_portfolio/img/Homepage/link.svg b/Task 2/AndyUGA_portfolio/img/Homepage/link.svg new file mode 100644 index 00000000..50ce54c1 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/Homepage/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/background/.DS_Store b/Task 2/AndyUGA_portfolio/img/background/.DS_Store new file mode 100644 index 00000000..8b37cabc Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/background/.DS_Store differ diff --git a/Task 2/AndyUGA_portfolio/img/background/Beach.jpg b/Task 2/AndyUGA_portfolio/img/background/Beach.jpg new file mode 100644 index 00000000..534a87ca Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/background/Beach.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/background/Koa.png b/Task 2/AndyUGA_portfolio/img/background/Koa.png new file mode 100644 index 00000000..2f96d464 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/background/Koa.png differ diff --git a/Task 2/AndyUGA_portfolio/img/background/gaming.jpg b/Task 2/AndyUGA_portfolio/img/background/gaming.jpg new file mode 100644 index 00000000..480f0003 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/background/gaming.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/background/tech10.jpg b/Task 2/AndyUGA_portfolio/img/background/tech10.jpg new file mode 100644 index 00000000..bb00bea4 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/background/tech10.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/background/tech11.png b/Task 2/AndyUGA_portfolio/img/background/tech11.png new file mode 100644 index 00000000..9287e32a Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/background/tech11.png differ diff --git a/Task 2/AndyUGA_portfolio/img/background/tech12.jpg b/Task 2/AndyUGA_portfolio/img/background/tech12.jpg new file mode 100644 index 00000000..2defef5e Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/background/tech12.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/background/tech13.jpg b/Task 2/AndyUGA_portfolio/img/background/tech13.jpg new file mode 100644 index 00000000..6aa600fd Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/background/tech13.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/background/tech14.jpg b/Task 2/AndyUGA_portfolio/img/background/tech14.jpg new file mode 100644 index 00000000..8d02ae72 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/background/tech14.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/background/tech9.jpg b/Task 2/AndyUGA_portfolio/img/background/tech9.jpg new file mode 100644 index 00000000..4b538b5f Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/background/tech9.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/developer.png b/Task 2/AndyUGA_portfolio/img/developer.png new file mode 100644 index 00000000..86c34f5c Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/developer.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/.DS_Store b/Task 2/AndyUGA_portfolio/img/icons/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/.DS_Store differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/AppStore.png b/Task 2/AndyUGA_portfolio/img/icons/AppStore.png new file mode 100644 index 00000000..c0c75530 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/AppStore.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/Github.png b/Task 2/AndyUGA_portfolio/img/icons/Github.png new file mode 100644 index 00000000..633790f7 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/Github.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/Github2.png b/Task 2/AndyUGA_portfolio/img/icons/Github2.png new file mode 100644 index 00000000..5185eb1c Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/Github2.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/LinkedIn.png b/Task 2/AndyUGA_portfolio/img/icons/LinkedIn.png new file mode 100644 index 00000000..f3f6975a Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/LinkedIn.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/PlayStore.png b/Task 2/AndyUGA_portfolio/img/icons/PlayStore.png new file mode 100644 index 00000000..0a5c819c Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/PlayStore.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/Preview.png b/Task 2/AndyUGA_portfolio/img/icons/Preview.png new file mode 100644 index 00000000..b7a665d6 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/Preview.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/ResumeIcon.png b/Task 2/AndyUGA_portfolio/img/icons/ResumeIcon.png new file mode 100644 index 00000000..f97f1e6b Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/ResumeIcon.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/book.svg b/Task 2/AndyUGA_portfolio/img/icons/book.svg new file mode 100644 index 00000000..0cbaa44a --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/icons/book.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/icons/ionic.png b/Task 2/AndyUGA_portfolio/img/icons/ionic.png new file mode 100644 index 00000000..08c81db8 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/ionic.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/logo.svg b/Task 2/AndyUGA_portfolio/img/icons/logo.svg new file mode 100644 index 00000000..dca8c805 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/icons/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/Task 2/AndyUGA_portfolio/img/icons/news.png b/Task 2/AndyUGA_portfolio/img/icons/news.png new file mode 100644 index 00000000..c481fb81 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/news.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/node.png b/Task 2/AndyUGA_portfolio/img/icons/node.png new file mode 100644 index 00000000..180d00ed Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/node.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/redditLogo.png b/Task 2/AndyUGA_portfolio/img/icons/redditLogo.png new file mode 100644 index 00000000..92bafa8c Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/redditLogo.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/upcr.png b/Task 2/AndyUGA_portfolio/img/icons/upcr.png new file mode 100644 index 00000000..ad984f73 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/upcr.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/uvsase.png b/Task 2/AndyUGA_portfolio/img/icons/uvsase.png new file mode 100644 index 00000000..a89fd93f Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/uvsase.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/webdev.png b/Task 2/AndyUGA_portfolio/img/icons/webdev.png new file mode 100644 index 00000000..659e8834 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/webdev.png differ diff --git a/Task 2/AndyUGA_portfolio/img/icons/workout.svg b/Task 2/AndyUGA_portfolio/img/icons/workout.svg new file mode 100644 index 00000000..9f9a106a --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/icons/workout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/icons/workout3.png b/Task 2/AndyUGA_portfolio/img/icons/workout3.png new file mode 100644 index 00000000..3dd3e750 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/icons/workout3.png differ diff --git a/Task 2/AndyUGA_portfolio/img/profilePicture/andy.jpg b/Task 2/AndyUGA_portfolio/img/profilePicture/andy.jpg new file mode 100644 index 00000000..5245639e Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/profilePicture/andy.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/profilePicture/andy2.jpg b/Task 2/AndyUGA_portfolio/img/profilePicture/andy2.jpg new file mode 100644 index 00000000..ce862c20 Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/profilePicture/andy2.jpg differ diff --git a/Task 2/AndyUGA_portfolio/img/programmingIcons/java-original-wordmark.svg b/Task 2/AndyUGA_portfolio/img/programmingIcons/java-original-wordmark.svg new file mode 100644 index 00000000..228eab72 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/programmingIcons/java-original-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/programmingIcons/javascript-original.svg b/Task 2/AndyUGA_portfolio/img/programmingIcons/javascript-original.svg new file mode 100644 index 00000000..40a89196 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/programmingIcons/javascript-original.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/programmingIcons/python-original.svg b/Task 2/AndyUGA_portfolio/img/programmingIcons/python-original.svg new file mode 100644 index 00000000..a6f9780b --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/programmingIcons/python-original.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/.DS_Store b/Task 2/AndyUGA_portfolio/img/technologyIcons/.DS_Store new file mode 100644 index 00000000..7ed7721e Binary files /dev/null and b/Task 2/AndyUGA_portfolio/img/technologyIcons/.DS_Store differ diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/angularjs-original.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/angularjs-original.svg new file mode 100644 index 00000000..d5e73fc0 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/angularjs-original.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/atom-original.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/atom-original.svg new file mode 100644 index 00000000..bcf79d30 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/atom-original.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/bitbucket-original-wordmark.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/bitbucket-original-wordmark.svg new file mode 100644 index 00000000..7aa96e08 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/bitbucket-original-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/bitbucket-original.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/bitbucket-original.svg new file mode 100644 index 00000000..4bfc8d4a --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/bitbucket-original.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/bootstrap-plain-wordmark.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/bootstrap-plain-wordmark.svg new file mode 100644 index 00000000..ddd63585 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/bootstrap-plain-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/bootstrap-plain.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/bootstrap-plain.svg new file mode 100644 index 00000000..5902e6ec --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/bootstrap-plain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/css3-original-wordmark.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/css3-original-wordmark.svg new file mode 100644 index 00000000..2c895eb9 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/css3-original-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/css3-original.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/css3-original.svg new file mode 100644 index 00000000..1a4e63db --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/css3-original.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/django-line.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/django-line.svg new file mode 100644 index 00000000..5df1987d --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/django-line.svg @@ -0,0 +1 @@ + diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/express-original-wordmark.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/express-original-wordmark.svg new file mode 100644 index 00000000..ca664ef4 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/express-original-wordmark.svg @@ -0,0 +1 @@ +Artboard 12 \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/git-original-wordmark.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/git-original-wordmark.svg new file mode 100644 index 00000000..79d29a17 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/git-original-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/git-original.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/git-original.svg new file mode 100644 index 00000000..5cb34bec --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/git-original.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/github-original-wordmark.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/github-original-wordmark.svg new file mode 100644 index 00000000..d05d8b07 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/github-original-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/github-original.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/github-original.svg new file mode 100644 index 00000000..faee4077 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/github-original.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/html5-original-wordmark.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/html5-original-wordmark.svg new file mode 100644 index 00000000..d355398d --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/html5-original-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/html5-original.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/html5-original.svg new file mode 100644 index 00000000..698cb039 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/html5-original.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/ionic-original-wordmark.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/ionic-original-wordmark.svg new file mode 100644 index 00000000..aa483068 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/ionic-original-wordmark.svg @@ -0,0 +1 @@ +Artboard 7 \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/ionic-original.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/ionic-original.svg new file mode 100644 index 00000000..e4dc8508 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/ionic-original.svg @@ -0,0 +1 @@ +Artboard 5 \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/javascript-original.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/javascript-original.svg new file mode 100644 index 00000000..40a89196 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/javascript-original.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/mongodb-original.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/mongodb-original.svg new file mode 100644 index 00000000..ea04dbda --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/mongodb-original.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/mongodb-plain-wordmark.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/mongodb-plain-wordmark.svg new file mode 100644 index 00000000..f9492b2d --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/mongodb-plain-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/nodejs-original.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/nodejs-original.svg new file mode 100644 index 00000000..f991b502 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/nodejs-original.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/react-original-wordmark.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/react-original-wordmark.svg new file mode 100644 index 00000000..36785b92 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/react-original-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/react-original.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/react-original.svg new file mode 100644 index 00000000..6a115f52 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/react-original.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/trello-plain-wordmark.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/trello-plain-wordmark.svg new file mode 100644 index 00000000..bfacba52 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/trello-plain-wordmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/trello-plain.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/trello-plain.svg new file mode 100644 index 00000000..b9153636 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/trello-plain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/typescript-original.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/typescript-original.svg new file mode 100644 index 00000000..c15dda80 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/typescript-original.svg @@ -0,0 +1 @@ +Artboard 3 \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/img/technologyIcons/wordpress-plain.svg b/Task 2/AndyUGA_portfolio/img/technologyIcons/wordpress-plain.svg new file mode 100644 index 00000000..48b778f0 --- /dev/null +++ b/Task 2/AndyUGA_portfolio/img/technologyIcons/wordpress-plain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/index.html b/Task 2/AndyUGA_portfolio/index.html new file mode 100644 index 00000000..129ff9ae --- /dev/null +++ b/Task 2/AndyUGA_portfolio/index.html @@ -0,0 +1,196 @@ + + + + + + + + Andy Truong | Software Developer + + + + + + + + + + + + + + + +
+
+
+
Andy Truong
+
+ + + LinkedIn + + + GitHub + + + Resume + +
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/index2.html b/Task 2/AndyUGA_portfolio/index2.html new file mode 100644 index 00000000..6d5c2f0c --- /dev/null +++ b/Task 2/AndyUGA_portfolio/index2.html @@ -0,0 +1,158 @@ + + + + + + + + Andy Truong | Software Developer + + + + + + + + + + + + + + +
+
+
+ +
+
+
+
+

+ + Experience + + +

+

+ Application Developer | ADP +
+ Software Developer | UPCR +
+ Mobile Application Developer | UPCR +

+
+
+
+
+
+
+ +
+
+
+
+

+ + Portfolio + +

+

+
+
+ UPNavigator +
+ + + +
+ +
+
+ UVSASE Gamification System +
+ + + +
+ +
+
+ UVSASE Registration System +
+ + + +
+ +

+
+
+
+
+
+
+ +
+
+
+
+

+ + Freelance + + +

+

+
+ +
+
+ +
+
+ +
+

+
+
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/Task 2/AndyUGA_portfolio/portfolio.html b/Task 2/AndyUGA_portfolio/portfolio.html new file mode 100644 index 00000000..86ff171e --- /dev/null +++ b/Task 2/AndyUGA_portfolio/portfolio.html @@ -0,0 +1,339 @@ + + + + + + + + Portfolio + + + + + + + + + + + + + + + + + + +
+ + + +
+ +
+

Projects

+ +
+ + + +
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+ + + + + + + +
+
+
+ + + +
+
+

USVASE Gamification System

+ +
+
+
+ +
+
+ +
+ + +
+ +
+ + + +
+ +
+
+ +
+
+ +
+
+
+ + + + GitHub Repo + + + + Live Demo + + +
+
+ +
+
+

USVASE Registration System

+ +
+
+
+ +
+
+ +
+ + +
+ +
+ + + +
+ +
+
+ +
+
+ +
+
+
+ + + + GitHub Repo + + + + Live Demo + + + +
+
+ +
+
+

USVASE Leaderboard Tracker

+ +
+
+
+ +
+
+ +
+ + +
+ +
+ + + +
+ +
+
+ +
+
+ +
+
+
+ + + + GitHub Repo + + + + Live Demo + + +
+
+ +
+ +
+

Book Note Tracker

+ +
+
+
+ +
+
+ +
+ +
+ +
+ + + +
+ +
+
+ +
+
+ +
+
+
+ + + GitHub Repo + + + + Live Demo + +
+
+ + + + +
+
+

A Reddit Clone

+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ + + + GitHub Repo + + + + Live Demo + +
+ +
+ +
+
+
+ + + + + \ No newline at end of file