Altech

Folder Structure

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders

Here they are, sorted alphabetically:

1. Altech - Main folder for template
2. Documentation - Documentation for Altech site template

Template features

• Build on React Platform (v16.13.1)
• No jQuery Dependency
• 3 Home Variations
• 5 Blog Pages View
• Build with Bootstrap 4.x.x
• Made with SASS(SCSS)
• Google font include
• Font Awesome Icons
• Themify Icons
• Flaticon Icons
• Fully Responsive Design
• W3C Validated Code
• Clean Code
• Cross Browser Support
• Well Documented
• No console error
• Free Updates

Installation

Your computer must have installed nodejs and yarn to run this template. You can download Node.js from https://nodejs.org and yarn from https://yarnpkg.com/lang/en/docs/install/. NPM comes bundled with Node.js

• First unzip Altech.zip you will find two folders including Altech (this is your root folder). Open this folder with VS(Visual Studio) Code or any other you like. And follow step below.
• NPM/YARN : You must have to run npm install or yarn install packages. You can do this by running npm/yarn install from the root of your project to install all the necessary dependencies.

• Run yarn start or npm start from the root of your project to start a dev server. Navigate to http://localhost:3000/. The app will automatically reload if you change any of the source files.

• Run yarn build or npm run build to build the project. The build artifacts will be stored in the build/ directory.

• Run yarn eject or npm eject If you are not satisfied with the default configuration. Note: this is a one-way operation. Once you eject, you can’t go back!

Template Structure

The detailed structure of react files and folders

    altech
    ├───public
    │   ├───css    
    │   ├───fonts 
    │   ├───images  
    │   ├───js 
    │   ├───index.html
    │   ├───manifest.json
    │   │   
    ├───src
    │   ├───components 
    |   │   ├───banner   
    |   │   ├───blog    
    |   │   ├───layout   
    |   │   ├───pages   
    |   │   ├───project 
    |   │   ├───services
    |   │   ├───shop   
    |   │   ├───home.js 
    |   │   ├───home2.js  
    |   │   ├───home3.js 
    |   ├───.env
    │   ├───App.css  
    │   ├───App.js 
    │   ├───index.css
    │   ├───imdex.js 
    │   ├───serviceWorker.js
    │   ├───setupTests.js
    │   │   
    ├───.gitignore
    ├───.htaccess
    └───package.json

                

Code Structure

SCSS Structure

"Atech" using the following CSS/SCSS files:

• bootstrap.css - grid structure based on Bootstrap Framework
• global.scss - main color stylesheet
• main.scss - main theme stylesheet
• shortcodes.scss - shortcodes stylesheet
• font-awesome.css - The css file for font-awesome icons. To see all the available icons and instructions on how to use them
• flaticon.css - The css file for flaticon icons. To see all the available icons and instructions on how to use them
• themify-icons.css - The css file for themify icons. To see all the available icons and instructions on how to use them
• animate.css - animate stylesheet
• slick.css - slick stylesheet

Faq

How can I change the "Logo"?

How can I change the "Copyright"?

How can I change the "Colors"?

How can I change "Slider-Image and Text"?

How can I change "animateDigits"?

• Open Up your Desired '.js' file. (For Example, 'home2.js')
• Then Search For the Comment '{/*ttm-fid*/}'
• Adjust The 'start={0} end={478}' from there

How can I change "background-color" ( ttm-bgcolor-darkgrey ( row-background-color ) / ttm-col-bgcolor (colum-background-color)"?

• Open Up your Desired '.js' file. (For Example, 'Home.js')
• Then Search the class "-bgcolor-". (Four types color-option : white, skincolor, darkgrey, grey )
• Replace color( Any-One ) of them.

How can I change "col-bg-img(colum-background-image)"?

• Open Up your Desired '.js' file. (For Example, 'Home.js') and also open 'shortcodes.css'.
• Then Search For the Comment ' col-bg-img-( or -- col-bg-img-one -- // like -one, -two, -three ) ' and '/* Col-Bg-Image ' on shortcodes.scss
• Update The 'Link' on Home.js .

• Update The 'Image Links' on shortcodes.scss

How can I change "Testimonial Text and Image"?

• Open Up your Desired '.js' file. (For Example, 'Home.js')
• Then Search For the Comment ' testimonials '
• Update The Image Links 'images/thumbnail/01.jpg' from there

How can I change "Clients/Brands Logo" With "Data-Tooltip-Text"?

Make sure first you put your 'images' in the '/imgages/client/' folder.

• Open Up your Desired '.js' file. (For Example, 'index.js')
• Update The 'Image Links and data-tooltip text' from there

How can I change "Name, Image, Designation and Social Links"(For Team_deatils)

Make sure first you put your 'images' in the '/images/team' folder.

• Open Up your Desired '.js' file. (For Example, 'index.js')
• Then Search For the Comment ' featured-imagebox-team '
• Update The 'Image Links and team-details text' from there

Source And Creadits

• All 'images' used on the demo site is for demonstration purposes only and are not included in the main download file.
• All Images Collected From 'Google Image Search'

• Google Fonts - "Poppins" - http://www.google.com/webfonts
• Font Awesome - http://fontawesome.io/
• Themify - http://themify.me//
• flaticon - http://www.flaticon.com/

• Bootstrap

• slick slider
• Material Design