Awesome Profile Card UI

Our Team Profile Card UI for website Team Section.

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Contributing
• License
• Contact
• Acknowledgements

About The Project

The project is about how to create a Our Team Profile Card UI page with html & css/scss. This Card has User image, Team name, Designation, Company name , icons & contact me button. An Hover Effect is triggered when mouse moves on card as shown in above image. After triggered effect, Card shows border, border around image, effect on button.

Built With

This Project is build with Html, Css/Scss & Javascript. For icons, We use FontAwesome that provides us with some cool icons. If u want to learn more about Html & Css/Scss below are some links given. Here are a few examples.

• Learn HTML
• Learn CSS
• Learn Sass
• FontAwesome

Prerequisites

Here, are some software & plugins required that enhance our performance for project.

• Visual Studio Code.

  This is text editor that we require for our project. You can use any text editor but I prefer Visual Studio Code as enhances & reduces our workload.

Vscode Plugins required for Our Project

• Live Server.

  This plugin simply reloads the page when we save the porject. We don't need to refresh page on browser.

• Live Sass Compiler.

  This plugin simply compiles our sass files & reduces our work. It creates css & css.map files.

• Bracket Pair Colorizer.

  This plugin colorizers our bracket on element we are styling in stylesheet/css file.

Installation

1. Copy downloaded project & Paste to desired drive/directory.

2. Install Visual Studio Code.

3. Open our project folder.

4. Right-click on folder & Click on Open With Code.

5. Open index.html file

6. link stylesheet file from sass/style.css by using

   <link rel="stylesheet" href="sass/style.css">
   

   Note: Don't link style.scss file bcoz browser can't read .scss file.

7. Add FontAwesome cdn link to index.html file by using

   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css">
   

8. link javascript file to index.html by using

   <script src="app.js"></script>
   

   Note: I name app.js but U can prefer any name to .js file.

9. Type code in desired file or just copy & paste.

10. Start Live Server from bottom-left corner option.

11. Start Live Sass Compiler from bottom-center option.

12. Now, Project runs successfully on your browser.

Usage

Below images will provide usage of our page.

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

• Fork the Project.

OR

• Please read CONTRIBUTING, for details on our code of conduct, and the process for submitting pull requests to us.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

• Twitter
• Gmail

Acknowledgements

• GitHub Emoji Cheat Sheet
• Img Shields
• Choose an Open Source License
• Font Awesome
• W3school