Dilamphis Care Inc.
Accessible Care for All

All Tab Header

Tab X
Tab Y
Tab Z
Content for Tab X
Content for Tab Y
Content for Tab Z

Right-Tab code responsive for all container

Tab A
Tab B
Tab C
Content for Tab A
Content for Tab B
Content for Tab C

grid code responsive for all container

Dynamic Grid Generator (LS Compatible)

 

Tab code responsive for all container

Tab 1
Tab 2
Tab 3
Content for Tab 1
Content for Tab 2
Content for Tab 3

accordion code responsive for all container

Item 1 ▼
This is the content for item 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111.
Item 2 ▼
This is the content for item 2222222222222222222222222222222222222222222222222222222222222222222222222222.
Item 3 ▼
This is the content for item 33333333333333333333333333333333333333333333333333333333333333333333333333333.
Item 4 ▼
This is the content for item 444444444444444444444444444444444444444444444444444444444444444444444444444444444444.

Responsive code to play video continuously (needs to add https://webaddress to work outside lime survey training)

Responsive 2 text blocks code

Block 1-d
Block 2-d

Responsive 2 text Gradient background blocks code

Block 1-d
Block 2-d

Responsive image dashboard code

Descriptive Alt Text

General body colouring

Dashboard text code


       Your Active Email Address

text here

Specifically for Lime Survey Randomly generated Access Code divisible by 997755

 

 

Randomly generated Access Code divisible by 997755 code will only display one per page, but this above works perfectly

Random Number Divisible by 997755

Responsive Text Carousel

Slide 1

This is the content of slide 1.

Slide 2

This is the content of slide 2.

Slide 3

This is the content of slide 3.

Slide 4

This is the content of slide 4.

Colour Theme:

Dark Green: #013717 or rgb(1, 55, 23)

Dark Orange: #9F4400 or rgb(159, 68, 0)

Golden colour: #FFD700
light Blue: #99ffff

Plain Text Block

Information

This is a text block providing important information to the respondent.

3D Single heading

Welcome to the 3D Text Block!

This is a 3D-styled text block. Customize the text, colors, and effects as needed.

3d 2-column test board "RESPONSIVE VERSION"

Block 1

This is the first 3D text block.

Block 2

This is the second 3D text block.

Explanation of Changes:

  1. Class Names:

    • I added class names .flex-container and .text-block to help identify the container and individual blocks. This makes it easier to apply specific styles via CSS.

  2. Flexbox Layout:

    • The flex-wrap: wrap; ensures that the flex items (blocks) will wrap if there is not enough space.
    • The flex: 1 1 45%; is applied to each text block to make each block take 45% of the available width when viewed on larger screens (desktop/tablet).

  3. Media Query for Small Screens (Mobile/Tablet):

    • The media query @media (max-width: 768px) targets screens that are 768px wide or smaller (typically mobile and tablet devices).
    • Inside the media query, flex-direction: column; ensures that the text blocks stack vertically.
    • The .text-block elements are given width: 100% to make them take up the full width of the container, ensuring they appear in a single column.

  4. Spacing:

    • margin-bottom: 20px; ensures there is space between the blocks when they are stacked vertically.

What Should Happen:

  • Desktop and Tablet (larger than 768px width): The two blocks should appear side by side (in two columns).
  • Mobile and Tablet (768px or smaller width): The blocks will stack vertically (in a single column).

This should now work as expected, showing one column on mobile and tablet devices, and two columns on larger devices. If you have further issues, feel free to reach out!

3d 2-column test board

Explanation of the Code

  1. Flexbox Layout:

    • The display: flex; property creates a flexible container for the two blocks.
    • justify-content: space-between; ensures the blocks are evenly spaced.
    • gap: 20px; adds space between the blocks.

  2. 3D Effect:

    • The perspective property creates the 3D depth.
    • The transform: rotateX() and rotateY() properties tilt the blocks in 3D space.

  3. Styling for Each Block:

    • Each block has a gradient background and a shadow for the 3D effect.
    • Different colors are applied to each block using linear-gradient.

  4. Responsive Design:

    • The flex: 1; ensures the blocks share equal space.
    • The layout adapts naturally to the container’s width.

Preview of Result

  • On larger screens, the two blocks will be side by side.
  • On smaller screens, the blocks will shrink proportionally, remaining in the same row.

Optional Enhancements

  • Add Media Queries: To stack the blocks vertically on smaller screens.
css
@media (max-width: 768px) {
div[style*="display: flex;"] {
flex-direction: column;
}
}
  • Hover Effects: Add a hover effect for interactivity:
css
:hover {
transform: rotateX(0deg) rotateY(0deg);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

This approach ensures you have a visually stunning and responsive 3D layout with two blocks in the same row.

 

Refresh your email inbox for new emails

Check your inbox and spam folders for Verification Access Code…

Use the button below to continue your registration!

 

 

Responsive code to play video continuously (needs to add https://webaddress to work outside lime survey training)

Responsive 2 text blocks code

Block 1-d
Block 2-d

Responsive image dashboard code

Descriptive Alt Text

General body colouring

Dashboard text code


       Your Active Email Address

       question text here

Specifically for Lime Survey Randomly generated Access Code divisible by 997755

 

 

Randomly generated Access Code divisible by 997755 code will only display one per page, but this above works perfectly

Random Number Divisible by 997755

Responsive Text Carousel

Slide 1

This is the content of slide 1.

Slide 2

This is the content of slide 2.

Slide 3

This is the content of slide 3.

Slide 4

This is the content of slide 4.

Colour Theme:

Dark Green: #013717 or rgb(1, 55, 23)

Dark Orange: #9F4400 or rgb(159, 68, 0)

Golden colour: #FFD700

Plain Text Block

Information

This is a text block providing important information to the respondent.

3D Single heading

Welcome to the 3D Text Block!

This is a 3D-styled text block. Customize the text, colors, and effects as needed.

3d 2-column test board "RESPONSIVE VERSION"

Block 1

This is the first 3D text block.

Block 2

This is the second 3D text block.

Explanation of Changes:

  1. Class Names:

    • I added class names .flex-container and .text-block to help identify the container and individual blocks. This makes it easier to apply specific styles via CSS.

  2. Flexbox Layout:

    • The flex-wrap: wrap; ensures that the flex items (blocks) will wrap if there is not enough space.
    • The flex: 1 1 45%; is applied to each text block to make each block take 45% of the available width when viewed on larger screens (desktop/tablet).

  3. Media Query for Small Screens (Mobile/Tablet):

    • The media query @media (max-width: 768px) targets screens that are 768px wide or smaller (typically mobile and tablet devices).
    • Inside the media query, flex-direction: column; ensures that the text blocks stack vertically.
    • The .text-block elements are given width: 100% to make them take up the full width of the container, ensuring they appear in a single column.

  4. Spacing:

    • margin-bottom: 20px; ensures there is space between the blocks when they are stacked vertically.

What Should Happen:

  • Desktop and Tablet (larger than 768px width): The two blocks should appear side by side (in two columns).
  • Mobile and Tablet (768px or smaller width): The blocks will stack vertically (in a single column).

This should now work as expected, showing one column on mobile and tablet devices, and two columns on larger devices. If you have further issues, feel free to reach out!

3d 2-column test board

Explanation of the Code

  1. Flexbox Layout:

    • The display: flex; property creates a flexible container for the two blocks.
    • justify-content: space-between; ensures the blocks are evenly spaced.
    • gap: 20px; adds space between the blocks.

  2. 3D Effect:

    • The perspective property creates the 3D depth.
    • The transform: rotateX() and rotateY() properties tilt the blocks in 3D space.

  3. Styling for Each Block:

    • Each block has a gradient background and a shadow for the 3D effect.
    • Different colors are applied to each block using linear-gradient.

  4. Responsive Design:

    • The flex: 1; ensures the blocks share equal space.
    • The layout adapts naturally to the container’s width.

Preview of Result

  • On larger screens, the two blocks will be side by side.
  • On smaller screens, the blocks will shrink proportionally, remaining in the same row.

Optional Enhancements

  • Add Media Queries: To stack the blocks vertically on smaller screens.
css
@media (max-width: 768px) {
div[style*="display: flex;"] {
flex-direction: column;
}
}
  • Hover Effects: Add a hover effect for interactivity:
css
:hover {
transform: rotateX(0deg) rotateY(0deg);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

This approach ensures you have a visually stunning and responsive 3D layout with two blocks in the same row.

 

Refresh your email inbox for new emails

Check your inbox and spam folders for Verification Access Code…

Use the button below to continue your registration!

 

 

Scroll to Top