From d52fab36985ac342584de535c71b7564daf6b614 Mon Sep 17 00:00:00 2001 From: Deepa Behrani Date: Sun, 26 Oct 2025 19:51:08 +0530 Subject: [PATCH] enhanced the ui of the website --- css/stylesheet.css | 138 -------------------------- index.html | 141 ++++++++++++++------------- stylesheet.css | 236 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 309 insertions(+), 206 deletions(-) delete mode 100644 css/stylesheet.css create mode 100644 stylesheet.css diff --git a/css/stylesheet.css b/css/stylesheet.css deleted file mode 100644 index eb31cf8..0000000 --- a/css/stylesheet.css +++ /dev/null @@ -1,138 +0,0 @@ - ul { - list-style-type: none; - margin: 0; - padding: 0; - } - - li { - display: inline-block; - text-align: center; - margin-left: 5%; - margin-right: 5%; - } - - body, html { - background-color: #F6F4EF; - height: 100%; - margin: 0; - width: 100%; - overflow-x: hidden; - } - - #wrapper { - width: 100%; - height: 100%; - } - - .nav_bar { - width: 100%; - text-align: center; - background-color: floralwhite; - padding-bottom: 3%; - } - - .main_header { - text-align: center; - background-color: floralwhite; - padding: 2%; - font-family: 'Old Standard TT', serif; - color: #51442A; - width: 100%; - } - - a:link { - color: #F1DFBD; - text-decoration: none; - } - a:visited { - color: #F1DFBD; - text-decoration: none; - } - - a:hover { - color: #614715; - text-decoration: overline; - } - a:active { - color: #614715; - text-decoration: none; - } - - .section_1 { - background-color: floralwhite; - width: 45%; - float: left; - text-align: left; - margin: 1%; - border-style: solid; - border-width: 2px; - border-color: #51442A; - padding: 1%; - } - - .second_header { - text-align: center; - font-family: 'Old Standard TT', serif; - color: #51442A; - } - - .section_2 { - background-color: floralwhite; - width: 45%; - float: right; - text-align: left; - margin: 1%; - border-style: solid; - border-width: 2px; - border-color: #51442A; - padding: 1%; - } - - .third_header { - text-align: center; - font-family: 'Old Standard TT', serif; - color: #51442A; - } - - .section_3 { - text-align: center; - padding: 2%; - font-family: 'Old Standard TT', serif; - color: #51442A; - width: 100%; - text-decoration: underline; - } - - .star_wars { - text-align: center; - margin: 3%; - font-size: 24px; - color: #51442A; - } - - .footer { - position: relative; - right: 0; - bottom: 0; - left: 0; - padding: 1rem; - background-color: floralwhite; - text-align: center; - clear: both; - } - - img { - vertical-align: middle; - } - - /*.social_icons { - float: right; - } - - .photo_gallery { - - } - - .photo_gallery:hover { - - } /* \ No newline at end of file diff --git a/index.html b/index.html index c712170..5c1d514 100644 --- a/index.html +++ b/index.html @@ -1,83 +1,88 @@ - HTML and CSS practise for beginners - - + HTML and CSS Practise for Beginners + + -
+
-
-

HTML and CSS practise for beginners

-
-
- -
+
+

HTML and CSS Practise for Beginners

+
+ + -
-

How to use this page

-

This page is completely open source, and the code and files are available for ALL to download. - I, Carlie, created a mini website for anyone to practise on, change, adapt, edit and style - in any which way they desire, with the hopes this can be a place for those who are beginning - with coding to come and have a go at some real live code.
- This page and its files can be found on GitHub, an AMAZING resource for programmers and coders - to come together and collaborate on projects together, receive tips and advice and swap code. - If you would like to view the original repository for this page then click - HERE -

-
-
-

Rules

-

When playing with this code and styling it, try to keep with the current theme, however I do - understand that this will change over time. Use fonts that have been used elsewhere on the page - and use inkeeping colors and themes. When it comes to using HTML elements and tags, use those - which are new to you, or you are trying to practise with, and the same goes with CSS.
This - may seem overly simple and pointless, but to those starting out can be valuable. You can view - previous changes and see how people did what they did by viewing older commits. Have fun and be daring - with your code! Learn something new every day! -

-
-
-

What will you learn today?

-

Why don't you try turning this
- text box into a star wars type text
- scroll, where it fades in the
- distance, using purely css? Don't think its possible?
- I have done it before and its easier than you think!
- Obviously if you feel the need to, create more text
- here to elongate the paragraph. This will affect the time
- it takes for the text to travel up the page and into the
- fade our area. -

-
-
-

PHOTO GALLERY

-

Let’s make a photo gallery that we can scroll through!

-
-
+
+
+

How to use this page

+

This page is completely open source, and the code and files are available for ALL to download. I, Carlie, created a mini website for anyone to practise on, change, adapt, edit and style in any which way they desire, with the hopes this can be a place for those who are beginning with coding to come and have a go at some real live code. + This page and its files can be found on GitHub, an AMAZING resource for programmers and coders to come together and collaborate on projects together, receive tips and advice and swap code. If you would like to view the original repository for this page then click HERE

+
-
-
- This footer will always be positioned at the bottom of the page. - -
+
+

Rules

+

When playing with this code and styling it, try to keep with the current theme, however I do understand that this will change over time. Use fonts that have been used elsewhere on the page and use inkeeping colors and themes. When it comes to using HTML elements and tags, use those which are new to you, or you are trying to practise with, and the same goes with CSS. This may seem overly simple and pointless, but to those starting out can be valuable. You can view previous changes and see how people did what they did by viewing older commits. Have fun and be daring with your code! Learn something new every day!

+
+
+

What will you learn today?

+
+

Why don't you try turning this
+ text box into a star wars type text
+ scroll, where it fades in the
+ distance, using purely css? Don't think its possible?
+ I have done it before and its easier than you think!
+ Obviously if you feel the need to, create more text
+ here to elongate the paragraph. This will affect the time
+ it takes for the text to travel up the page and into the
+ fade our area. +

+
+
+
+

PHOTO GALLERY

+

Let’s make a photo gallery that we can scroll through!

+ +
+ + Majestic Mountain View + + + + Misty Forest Scene + + + + Crystal Clear Lake + + + Vibrant Sunset Landscape + +
+
+ + +
- + \ No newline at end of file diff --git a/stylesheet.css b/stylesheet.css new file mode 100644 index 0000000..e055ee8 --- /dev/null +++ b/stylesheet.css @@ -0,0 +1,236 @@ +/* Color and Font Variables */ +:root { + --color-primary: #3c3c3c; /* Dark text/accents */ + --color-secondary: #9a6b4a; /* Warm accent color (e.g., links, hover) */ + --color-background-light: #f7f3ee; /* Light background */ + --color-background-card: #ffffff; /* Card background */ + --color-border: #e0d9d0; /* Subtle border color */ + --font-heading: 'Playfair Display', serif; + --font-body: 'Roboto', sans-serif; +} + +/* Reset and Base Styles */ +ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +li { + display: inline-block; + margin: 0 1.5rem; +} + +body, html { + background-color: var(--color-background-light); + color: var(--color-primary); + font-family: var(--font-body); + line-height: 1.6; + margin: 0; + padding: 0; + min-height: 100vh; + overflow-x: hidden; +} + +#wrapper { + max-width: 1200px; + margin: 0 auto; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +/* Typography and Header */ +h1, h2 { + font-family: var(--font-heading); + color: var(--color-primary); + margin-top: 0; + font-weight: 700; +} + +h1 { + font-size: 2.5rem; +} + +h2 { + font-size: 1.75rem; + text-align: center; + margin-bottom: 1rem; +} + +.main_header { + text-align: center; + background-color: var(--color-background-card); + padding: 2rem 0; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); +} + +/* Navigation */ +.nav_bar { + width: 100%; + text-align: center; + background-color: var(--color-primary); + padding: 0.75rem 0; +} + +.nav_bar a { + color: var(--color-background-card); + text-decoration: none; + font-weight: 700; + letter-spacing: 1px; + padding: 0.5rem 0; + transition: color 0.3s ease; +} + +.nav_bar a:hover { + color: var(--color-secondary); + text-decoration: none; +} + +/* Anchor Links in Content */ +a:link, a:visited { + color: var(--color-secondary); + text-decoration: underline; + transition: color 0.3s ease; +} + +a:hover, a:active { + color: var(--color-primary); + text-decoration: none; +} + +.github-link { + font-weight: 700; +} + +/* Content Sections - CSS Grid Layout */ +.content_grid { + padding: 2rem 1rem; + flex-grow: 1; + display: grid; + gap: 20px; + grid-template-columns: 1fr; +} + +@media (min-width: 768px) { + .content_grid { + grid-template-columns: 1fr 1fr; + } + .challenge_section, .photo_gallery { + grid-column: 1 / -1; + } +} + +.card { + background-color: var(--color-background-card); + border: 1px solid var(--color-border); + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0,0,0,0.05); +} + +.section_1, .section_2 { + text-align: left; +} + +/* Star Wars Challenge Box */ +.challenge_section { + text-align: center; + padding: 2rem 0; +} + +.star_wars_box { + background-color: #000000; + color: #ffe81f; + padding: 3rem 1rem; + border-radius: 8px; + margin: 1rem auto; + width: 80%; + max-width: 600px; + perspective: 300px; + overflow: hidden; +} + +.star_wars { + font-size: 1.5rem; + margin: 0; + line-height: 1.2; + transform-origin: 50% 100%; + transform: rotateX(20deg) translateZ(-50px); +} + +/* Photo Gallery Styling */ +.photo_gallery { + text-align: center; +} + +.gallery_grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 15px; + margin-top: 1.5rem; +} + +.gallery_link { + text-decoration: none; + display: block; + width: 100%; + height: 100%; +} + +.gallery_item { + width: 100%; + height: 150px; + object-fit: cover; + border-radius: 6px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.gallery_item:hover { + transform: translateY(-5px); + box-shadow: 0 6px 12px rgba(0,0,0,0.15); +} + +/* Footer */ +.footer { + background-color: var(--color-background-card); + padding: 1rem; + text-align: center; + border-top: 1px solid var(--color-border); + display: flex; + justify-content: space-between; + align-items: center; + clear: both; + font-size: 0.9rem; +} + +.social_icons img { + height: 24px; + width: 24px; + margin-left: 10px; + border-radius: 4px; + object-fit: cover; + vertical-align: middle; /* Ensures images align with text if any */ + transition: transform 0.3s ease; +} + +.social_icons img:hover { + transform: scale(1.1); +} + +/* Media Query for Mobile Optimization */ +@media (max-width: 480px) { + h1 { + font-size: 2rem; + } + .nav_bar li { + margin: 0 0.5rem; + } + .footer { + flex-direction: column; + } + .footer span { + margin-bottom: 0.5rem; + } +} \ No newline at end of file