Scribd
Upload
10 views3 pages

Positions in HTML Css

The document outlines the steps to create a webpage titled 'Positioning Art' using HTML and CSS. It includes instructions for setting up the structure, applying styles, creating floating islands and decorative elements, adding a center card with a button, and establishing fixed navigation and footer. The design emphasizes a visually appealing layout with gradients, shadows, and a magical theme.

Uploaded by

M Umar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views3 pages

Positions in HTML Css

The document outlines the steps to create a webpage titled 'Positioning Art' using HTML and CSS. It includes instructions for setting up the structure, applying styles, creating floating islands and decorative elements, adding a center card with a button, and establishing fixed navigation and footer. The design emphasizes a visually appealing layout with gradients, shadows, and a magical theme.

Uploaded by

M Umar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Assignment: Positions

Step 1: Set Up the HTML Structure

Begin with a standard HTML5 document.

Include basic sections: a <head> for the title and styles, and a <body> for content.

Title the webpage as "Positioning Art".

Step 2: Apply Base Styles

Remove default spacing and enable consistent box sizing for layout.

Use the Arial font for readability.

Apply a linear gradient background going from light gray (#f5f7fa) to soft blue (#c3cfe2).

Set the base text color to dark gray (#333).

Step 3: Create Floating Islands

Add three circular island elements with different sizes and positions.

Give each a soft drop shadow to simulate floating.

Island 1

Size: Large (300x300 pixels)

Position: Top-left corner (10% from top, 5% from left)

Color Gradient: From pink (#ff9a9e) to peach (#fad0c4)

Island 2

Size: Medium (200x200 pixels)

Position: Top-right corner (30% from top, 8% from right)

Color Gradient: From light blue (#a1c4fd) to sky blue (#c2e9fb)

Island 3
Size: Medium-large (250x250 pixels)

Position: Bottom-left corner (15% from bottom, 20% from left)

Color Gradient: From mint green (#84fab0) to aqua (#8fd3f4)

Step 4: Add Decorative Stars

Insert three small glowing stars with a white color and soft white glow.

Position them at various corners of the screen to add a magical effect.

Step 5: Add Floating Circles

Include two translucent circular elements to enhance the floating feel.

Circle 1

Size: Small (100x100 pixels)

Position: Top-right corner

Color: Indigo (#667eea)

Transparency applied for a subtle effect

Circle 2

Size: Larger (150x150 pixels)

Position: Bottom-left corner

Color: Pink (#ff9a9e)

Semi-transparent for background blending

Step 6: Create the Center Card

Add a centered rectangular card in the middle of the page.

Make it semi-transparent with a white background.

Apply a soft shadow and rounded corners for depth.

Add a heading in dark gray (#4a4a4a) and paragraph text in medium gray (#666).

Center the text and apply padding for spacing.


Step 7: Add a Button

Place a stylish button inside the card.

Use a gradient background that goes from blue-purple (#667eea) to deep violet (#764ba2).

Text should be white.

Give the button a pill shape and a violet-tinted glow.

Step 8: Create a Fixed Navigation Bar

Position a horizontal navigation bar in the top-right corner of the page.

Include links like Home, About, Work, and Contact.

Use bold text in dark gray (#4a4a4a).

Ensure spacing between links and fix the navigation so it stays in place while scrolling.

Step 9: Add a Fixed Footer

Place a footer at the bottom center of the screen.

Use medium gray text (#666).

Display a simple copyright.

Final Result

You might also like