Clonning of Animoto.com — Team Oxygen

Aejaz Ahmed
3 min readNov 28, 2020

Team:

i) Pranit Jogwe

ii) Subodh Ray

iii) Aejaz Ahmed

Team Lead: Aravindan S

Very happy to write this blog as this was the first project we undertook at Masai school after the completion of the very first month of the training, where we applied all the concepts learned in our first month.

We started our training by learning the very first tag <html> and here we are, able to create the clone of Animoto.com in just one month’s learning.

During building this project we have got to face many difficulties and challenges to which we are new, Like merging the codes of collaborators on GitHub and reverting back to previous code after bad merge, And also sometimes we were facing trouble with the usage of type selectors as we had used type selectors for individual’s code and its effect was also impacting other team member’s code who had used same tags in their code.

But then we successfully sailed through this after realizing where we are going wrong. This takes meticulous and brave approach to take the bull by horn.

About Project:

Technologies used: HTML 5, CSS

In this project we have extensively used flex and grid given their flexible properties for various sizes of displays in order to make it responsive.

Also used media queries which is vital for handheld devices especially mobile phones. We loved to use position & z-index properties to give the user the best U I experience.

Below are some of the screenshots of the cloned website:

Home Page
Pricing Page
Mid-Section of Home Page
Mid-Section of Home Page
Sign up Page
Responsiveness
Responsiveness

To have a view of our project link is given below:

https://github.com/subodh5316/animoto-oxygen

Thank You.

--

--