Create Responsive Butterfly card Component

[MariaTeo]

Mobile version

Mobile version Stage 1: Main container should have the following properties: background-color: 1 normal height 540px width min screen 375 border radius 8px gap between elements of 20px padding top bottom 16px

Inside there should be:

• [ ] a container with
• padding 16px
• an image: eggs.png
• border radius top left and right of 8px
• [ ] under the container with image, there should be another container with a title, subtitle and content, aligned to left.
• the container should have padding left and right of 24px.
• the title should have colour gray/600, font size 20px, line height 30px, bold.
• the subtitle should have colour gray/600, font size 14px, line height 20px, bold.
• the content should have colour gray/500, font size 16px, line height 24px, font weight 400.

On hover:

• the card gets bigger height and weight: height 552px width 390px
• the card changes color with: 1 hover
• the image is changed from eggs.png to catterpillar.png
• title, subtitle and content keep the same properties, but the words differ.

Stage 2: Main container should have the following properties: background-color: 2 normal height 540px width min screen 375 border radius 8px gap between elements of 20px padding top bottom 16px

Inside there should be:

• [ ] a container with
• padding 16px
• an image: catterpillar-evolve.png
• border radius top left and right of 8px
• [ ] under the container with image, there should be another container with a title, subtitle and content, aligned to left.
• the container should have padding left and right of 24px.
• the title should be same as 1
• the subtitle should be same as 1
• the content should have be same as 1

On hover:

• the card gets bigger height and weight: height 552px width 390px
• the card changes color with: 2 hover
• the image is changed from catterpillar-evolve.png to pupa.png
• title, subtitle and content keep the same properties, but the words differ.

Stage 3: Main container should have the following properties: background-color: 3 normal height 540px width min screen 375 border radius 8px gap between elements of 20px padding top bottom 16px

Inside there should be:

• [ ] a container with
• padding 16px
• an image: adult-pupa.png
• border radius top left and right of 8px
• [ ] under the container with image, there should be another container with a title, subtitle and content, aligned to left.
• the container should have padding left and right of 24px.
• the title should be same as 1
• the subtitle should be same as 1
• the title should have be same as 1

On hover:

• the card gets bigger height and weight: height 552px width 390px
• the card changes color with: 3 hover
• the image is changed from adult-pupa.png to butterfly-emerge.png
• title, subtitle and content keep the same properties, but the words differ.

Stage 4: Main container should have the following properties: background-color: 2 normal height 540px width min screen 375 border radius 8px gap between elements of 20px padding top bottom 16px

Inside there should be:

• [ ] a container with
• padding 16px
• an image: partners.png
• border radius top left and right of 8px
• [ ] under the container with image, there should be another container with a title, subtitle and content, aligned to left.
• the container should have padding left and right of 24px.
• the title should be same as 1
• the subtitle should be same as 1
• the content should have be same as 1

On hover:

• the card gets bigger height and weight: height 552px width 390px
• the card changes color with: 4 hover
• the image is changed from pertners.png to lay-eggs.png
• title, subtitle and content keep the same properties, but the words differ.

[MariaTeo]

Tablet version Stage 1: Main container should have the following properties: background-color: 1 normal height 600px width min screen 768 border radius 8px gap between elements of 20px padding top bottom 24px padding left right 4px

Inside there should be:

• [ ] a container with
• padding 16px
• an image: eggs.png
• border radius top left and right of 8px
• [ ] under the container with image, there should be another container with a title, subtitle and content, aligned to left.
• the container should have padding left and right of 24px.
• the title should have colour gray/600, font size 30px, line height 38px, bold.
• the subtitle should have colour gray/600, font size 20px, line height 30px, bold.
• the content should have colour gray/500, font size 24px, line height 32px, font weight 400.

On hover:

• the card gets bigger height and weight: width 793px height 600px
• the card changes color with: 1 hover
• the image is changed from eggs.png to catterpillar.png
• title, subtitle and content keep the same properties, but the words differ.

Stage 2: Main container should have the following properties: background-color: 2 normal height 600px width min screen 768 border radius 8px gap between elements of 20px padding top bottom 24px padding left right 4px

Inside there should be:

• [ ] a container with
• padding 16px
• an image: catterpillar-evolve.png
• border radius top left and right of 8px
• [ ] under the container with image, there should be another container with a title, subtitle and content, aligned to left.
• the container should have padding left and right of 24px.
• the title should be same as 1
• the subtitle should be same as 1
• the content should have be same as 1

On hover:

• the card gets bigger height and weight: width 793px height 600px
• the card changes color with: 2 hover
• the image is changed from catterpillar-evolve.png to pupa.png
• title, subtitle and content keep the same properties, but the words differ.

Stage 3: Main container should have the following properties: background-color: 3 normal height 600px width min screen 768 border radius 8px gap between elements of 20px padding top bottom 24px padding left right 4px

Inside there should be:

• [ ] a container with
• padding 16px
• an image: adult-pupa.png
• border radius top left and right of 8px
• [ ] under the container with image, there should be another container with a title, subtitle and content, aligned to left.
• the container should have padding left and right of 24px.
• the title should be same as 1
• the subtitle should be same as 1
• the title should have be same as 1

On hover:

• the card gets bigger height and weight: width 793px height 600px
• the card changes color with: 3 hover
• the image is changed from adult-pupa.png to butterfly-emerge.png
• title, subtitle and content keep the same properties, but the words differ.

Stage 4: Main container should have the following properties: background-color: 2 normal height 600px width min screen 768 border radius 8px gap between elements of 20px padding top bottom 24px padding left right 4px

Inside there should be:

• [ ] a container with
• padding 16px
• an image: partners.png
• border radius top left and right of 8px
• [ ] under the container with image, there should be another container with a title, subtitle and content, aligned to left.
• the container should have padding left and right of 24px.
• the title should be same as 1
• the subtitle should be same as 1
• the content should have be same as 1

On hover:

• the card gets bigger height and weight: width 793px height 600px
• the card changes color with: 4 hover
• the image is changed from pertners.png to lay-eggs.png
• title, subtitle and content keep the same properties, but the words differ.

[MariaTeo]

Desktop version Stage 1: Main container should have the following properties: background-color: 1 normal height 650px width min screen 1040 border radius 8px gap between elements of 20px padding top bottom 24px padding left right 12px

Inside there should be:

• [ ] a container with
• padding 16px
• an image: eggs.png
• border radius top left and right of 8px
• [ ] under the container with image, there should be another container with a title, subtitle and content, aligned to left.
• the container should have padding left and right of 24px.
• the title should have colour gray/600, font size 36px, line height 44px, bold.
• the subtitle should have colour gray/600, font size 24px, line height 32px, bold.
• the content should have colour gray/500, font size 30px, line height 38px, font weight 400.

On hover:

• the card gets bigger height and weight: width 1080px height 650px
• the card changes color with: 1 hover
• the image is changed from eggs.png to catterpillar.png
• title, subtitle and content keep the same properties, but the words differ.

Stage 2: Main container should have the following properties: background-color: 2 normal height 650px width min screen 1040 border radius 8px gap between elements of 20px padding top bottom 24px padding left right 12px

Inside there should be:

• [ ] a container with
• padding 16px
• an image: catterpillar-evolve.png
• border radius top left and right of 8px
• [ ] under the container with image, there should be another container with a title, subtitle and content, aligned to left.
• the container should have padding left and right of 24px.
• the title should be same as 1
• the subtitle should be same as 1
• the content should have be same as 1

On hover:

• the card gets bigger height and weight: width 1080px height 650px
• the card changes color with: 2 hover
• the image is changed from catterpillar-evolve.png to pupa.png
• title, subtitle and content keep the same properties, but the words differ.

Stage 3: Main container should have the following properties: background-color: 3 normal height 650px width min screen 1040 border radius 8px gap between elements of 20px padding top bottom 24px padding left right 12px

Inside there should be:

• [ ] a container with
• padding 16px
• an image: adult-pupa.png
• border radius top left and right of 8px
• [ ] under the container with image, there should be another container with a title, subtitle and content, aligned to left.
• the container should have padding left and right of 24px.
• the title should be same as 1
• the subtitle should be same as 1
• the title should have be same as 1

On hover:

• the card gets bigger height and weight: width 1080px height 650px
• the card changes color with: 3 hover
• the image is changed from adult-pupa.png to butterfly-emerge.png
• title, subtitle and content keep the same properties, but the words differ.

Stage 4: Main container should have the following properties: background-color: 2 normal height 650px width min screen 1040 border radius 8px gap between elements of 20px padding top bottom 24px padding left right 12px

Inside there should be:

• [ ] a container with
• padding 16px
• an image: partners.png
• border radius top left and right of 8px
• [ ] under the container with image, there should be another container with a title, subtitle and content, aligned to left.
• the container should have padding left and right of 24px.
• the title should be same as 1
• the subtitle should be same as 1
• the content should have be same as 1

On hover:

• the card gets bigger height and weight: width 1080px height 650px
• the card changes color with: 4 hover
• the image is changed from pertners.png to lay-eggs.png
• title, subtitle and content keep the same properties, but the words differ.