Interative Design / Exercise 1
2024/4/27 - 2024/7/26
TAO YUZE (0366967)
Design Principles / Bachelor fo Design (Honours) in Creative Media
Introduction
Week 1 | Exercise 1
Deadline: April 30
Write the report in your E-portfolio
Choose TWO (2) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations.
What To Have in The Analysis:
Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing in not less than 500 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings)
Website selection
Through the given website (webby.com), I chose the website of Remedy Studio as my analysis object. The UI design of this studio’s works has the characteristics of minimalism and high contrast, so the interactive design of their website also inherited this feature
In the following analysis, I will focus on user experience and functionality to analyze the interaction design of the website
User Goals & UI Design
There are several types of users who visit the Remedy website: gamers and potential job seekers or investors who want to learn about the company.
When you open the lobby page of the website, you can see that the website uses a video as the background of the website UI. This video contains all the works of Remedy Studio.This design makes it clear to visitors that this is a game studio, and at the same time makes visitors curious enough to continue digging into the website to learn more. Dynamic backgrounds also provide more vivid visual effects
First enter the main page of the website, you won’t see a lot of text and buttons. The website uses a borderless UI design, using larger font sizes and high-contrast colors. Let visitors discover the button immediately
Button options cover the main visitor groups, gaming options for players, staff and northern lights options for potential job seekers and investors. Ensure that visitors can find the information they are looking for as soon as possible
 |
Games - Remedy (remedygames.com)
|
The site uses a very soft fade animation to switch from the background video to the details page as the visitor scrolls down. Page switching is very smooth and natural，The details page displays the representative works of Remedy Studio
 |
| Games - Remedy (remedygames.com) |
 |
| Games - Remedy (remedygames.com) |
 |
| Games - Remedy (remedygames.com) |
 |
| Games - Remedy (remedygames.com) |
 |
| Games - Remedy (remedygames.com) |
Click on an item to delve deeper into the site. It can be seen that the website adopts a very unified artistic style, uniformly using borderless UI and high-contrast titles. Use HD poster as background
As you continue to scroll, more text gradually overlays the previous page as a separate page.The details page introduces details, pictures, and news respectively. Links to other derivative works in the series are also provided. You can see the job seeker page at the end of the page. The website considers that potential job seekers may make a choice after learning about the studio's works, so the job search list is placed at the end.The overall UI design is very eye-catching and simple.
 |
| Games - Remedy (remedygames.com) |
At the bottom of the page, the website provides links to a series of subsites, categorized by large headings on the left. The bottom provides links and customer service for multiple video website accounts.
Summarize
remedygames.com has very excellent UI design and user logic, and is an excellent example of minimalist design. Even though the website uses a lot of solid colors and a borderless UI, it produces a harmonious visual effect. It has the advantages of low cost and high quality, and can be used as a reference for future personal website design.
Exercise 2
Exercise 2 - Web Replication
Shamsul Hamimi Ab. Rahman
•
5月6日
Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page.
According to the requirements, I chose two websites as blueprints, namely:
The two websites were chosen because they have very different styles, one with a hard and clear-lined UI, and the other with an over-design that focuses on gradients and softness. Different design styles will further improve my design capabilities and understanding of web design
Morgan Stanley
Morgan Stanley's website is characterized by simplicity and high readability, so it became my choice. But I don’t want to make an exact or very similar work, I want to make it better.
I decided the color tone for my website would be dark, I'm a dark lover. In order to ensure a minimalist design, I try to choose as few color combinations as possible, but at the same time, I need to ensure the readability of the overall appearance of the website.
 |
| chosse color of gold |
I have been imagining how to use RGB colors to achieve a black and gold look a long time ago. When Mr Hamimi mentioned that we were going to make a personal website, I decided that my personal website would be black and gold. This exercise was just right. It was a great opportunity for me to practice.
Morgan Stanley's website isn't difficult to replicate because of its heavy use of rectangles, but I felt I could do it better. On the first page, I added a small circle that shows the image transformation, which is not found in the original website. I think such small details can increase the vividness and humanity of the website.
According to Morgan Stanley, I made up a fictional investment company called Dawnfield Group as fake text filler.I believe that as an investment company, the black and gold color scheme is more reminiscent of money. A dark interface can enhance visitors’ trust and sense of security in the company.Because it makes people feel like their money is shining in a dark and safe place.
Compared to the original website, my website design adds more geometric elements, which I think will improve visual stability. Improve overall design consistency and uniqueness.
I didn't put a lot of emphasis on the login button in this design because this login is provided to the customer. This kind of account is generally not open to public registration, and those who have an account know what they want to do. So I just highlighted the login button in the upper right corner with a contrasting color. A low-visibility login button increases visitor trust in the company, making the customer's login more personal than a highly visible one that everyone can see. This provides a hint
Since I chose fewer colors and less text, I didn’t design too many high-profile buttons. I wanted to create a kind of silence, like a bank or a library, because this is an investment company, and a jumpy design might create a sense of distrust.
On the second page, I basically followed the layout of the original website. I carefully selected the pictures. In order to create unity in color and theme, I wanted the website to give people a dusk/morning glow feeling. At the same time, it corresponded to the company's name "Dawnfield"
I choose ITC, Times and Acumin as the fonts for the website. ITC and Times are mainly used for the main text and titles. This formatting style font has a stable and retro style. Acumin is used to prompt text, with the purpose of distinguishing and preventing aesthetic fatigue.
Regarding the email and insights pages, I changed the design of the email area. I used a higher contrast design. I made the entire email fill-in area filled with color instead of just a stroke.
Insights Area I think the original website was too complicated. It used too many button designs and a variety of solid colors. I didn't like the design. I think it destroyed the overall consistency and as a customer when browsing the website. I don’t like websites that cram too much information into themselves. I retained the main content and main insight articles, and collected the complicated articles at the bottom as a button for more insights, leaving them for those who really want to see more.
The footer is similar to the original website, but in a contrasting color
OCEAN HEALTH INDEX is the second website I chose. This website uses gradient effects. I chose it to practice gradient effects.
Regarding the gradient effect, since there is a background image, the gradient effect must be translucent. My idea is to first draw a two-color gradient, then import it into PS and use color search to remove one of the colors, and then export it as a PNG to become a translucent layer.
For this web page, I use gray contrasting colors as the color tone.I made up a fictional foundation called AZAD as my dummy text. The idea came from Walden Pond. I made a matching logo, which was inspired by Arabic and cypress trees.
 |
| AZAD logo |
The design of the upper part of the webpage is consistent with the original website. I have improved the design of the lower part. Rather than arranging the news as many small windows together, I prefer to use a transformed form to display links and pictures.
My idea is to rotate five or more news links in converted form, so that there are always only four pages in the webpage, which can simplify the webpage and reduce reading pressure. I still use dots to display the total number of currently existing pages and the location of visible pages，After the link image disappears, I added a gradient blur effect to correspond to the design language of the website. The blurred part should appear when the mouse is close to the arrow and hide when the mouse leaves.
FINAL PDF
TASK1
Exercise 3 - Creating a Recipe Card
In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE Recipe from the link below
Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions
Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
Use your creativity to make the page look appealing and interesting
I want to make something that looks like a fully functional web page, just like we did in Exercise 1 on AI, but using DW to make a website is more challenging.I chose macaroni as my recipe
In order to complete this assignment, I looked up more relevant knowledge.
I chose HTML, CSS, and some popular front-end tools and libraries to build this website. This includes:
- HTML: basic structure, ensuring semantics and accessibility.
- CSS: for beautification and layout. We used custom stylesheets and Google fonts.
- Font Awesome: provides a rich icon library to enhance the visual effect of the website.
We use responsive design so that the webpage can perform well on various devices. Layout:
- Header: Contains the website name and navigation bar, which allows users to quickly switch between different pages.
- Main Content: This displays the main content, including the recipe title, release date, pictures, introduction, ingredient list, preparation steps, nutritional information, and related recipe recommendations.
- Footer: Provides copyright information and quick links so that users can easily access the privacy policy and terms of service.
Header design:
I use Flexbox for layout, so that the logo and navigation links can be arranged flexibly.
The navigation bar uses unordered lists (<ul>) and list items (<li>), and removes the default style through CSS, adds spacing and styles.
Main content area:
Use headings (<h1> and <h2>) to distinguish different content sections and ensure that the content is clearly layered.
The images are displayed on different devices by adding appropriate width and height attributes.
The content area uses maximum width constraints and automatic center alignment to make the reading experience more comfortable.
Recipe content:
Use ordered lists (<ol>) and unordered lists (<ul>) to display steps and ingredients respectively to ensure clarity.
By adding some descriptive text, users can enhance their understanding of each step and each ingredient.
Form and comment area:
The comment form uses standard HTML form elements and adds simple styles to make it consistent with the overall design style.
The comment area increases interactivity by using bold usernames and short comment displays.
The style.css file plays a key role in beautification and layout.
body {
font-family: 'Roboto', sans-serif;
background-color: #ffffff;
color: #333333;
}
body: Set the global font to Roboto, and use sans-serif as a fallback font. The background color is white and the text color is dark gray to ensure good readability.
h1 {
font-size: 2.5em;
font-weight: bold;
margin-bottom: 0.5em;
}
h2 {
font-size: 2em;
font-weight: bold;
margin-bottom: 0.5em;
}
h1, h2: Defines the styles for first- and second-level headings. Use large fonts and bold fonts to make them stand out on the page, and leave appropriate spacing below the headings.
ul {
list-style-type: disc;
margin-left: 20px;
}
ul: Sets the style of the unordered list, uses dots as list item symbols, and increases the left margin to make the list content clearer.
.recipe-title {
font-size: 3em;
font-weight: bold;
margin-bottom: 0.5em;
}
.ingredient-list {
margin: 20px 0;
padding: 0;
}
.recipe-title: The style of the recipe title, using a large font and bold to make it more visible on the page.
.ingredient-list: Set the top and bottom spacing of the ingredient list to make the content line up neatly.
#instructions {
margin: 20px 0;
}
#instructions: Add spacing above and below the instructions to differentiate them from other content.
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #dddddd;
}
.header nav ul {
display: flex;
gap: 15px;
}
.header nav ul li {
list-style: none;
}
.header nav ul li a {
text-decoration: none;
color: #555555;
font-weight: bold;
}
.header: Use Flexbox layout to align the logo and navigation bar. Add padding and bottom border to improve visual effect.
.header nav ul: The navigation list uses Flexbox layout and adds spacing to make the navigation links neatly arranged.
.header nav ul li: Remove the default list style.
.header nav ul li a: Remove the underline of the link, set the color and font to make the navigation link look more beautiful
.main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.main: Limit the maximum width of the main content, center it, and add padding to make the reading experience more comfortable
img {
width: 100%;
height: auto;
margin-bottom: 20px;
}
img: Set the image width to 100% and the adaptive height to ensure good display effects on different devices, and increase the bottom spacing to make the content layout more reasonable.
footer {
background-color: #f9f9f9;
padding: 20px;
text-align: center;
border-top: 1px solid #dddddd;
}
footer .footer-links {
display: flex;
justify-content: center;
gap: 15px;
}
.footer-links a {
text-decoration: none;
color: #555555;
}
footer: Set the footer background color, padding, and top border to distinguish it from the rest of the page.
footer .footer-links: Use Flexbox layout to center the footer links and increase spacing.
.footer-links a: Remove the underline of the link and set the color to make the footer links look more beautiful
Project 2 - Working Web Page
Shamsul Hamimi Ab. Rahman
•
6月19日 （上次修改时间：6月21日）
Working Web Page
The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype.
Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission
In project 2, I will try to make the web page in project 1 into a web page. In this project, I will use tailwind css and font awsome css. In order to make this web page, I learned more about CSS. I decided to use tailwind css and font awsome css because they are more powerful and convenient, and also provide the opportunity for advanced CSS compilation.
Considering some practical application issues, I simplified the background color to make the page more concise.
Tailwind css
Tailwind CSS is a practical-first CSS framework that provides a set of class names that allow developers to apply styles directly in HTML without writing custom CSS. Its design philosophy is to achieve rapid development and efficient style management by breaking down all styles into small, reusable classes.
In the resume content, I used some fake text to fill in, on the one hand for aesthetics, on the other hand because I don’t have much real experience yet, I believe I will have more in the future.
Head Section
<script src="https://cdn.tailwindcss.com"></script>
- This script tag loads Tailwind CSS from a CDN, making Tailwind's utility classes available for use in the HTML.
Body Section
<body class="bg-[#DBCFB7]">
class="bg-[#DBCFB7]": Sets the background color of the entire page to the custom color #DBCFB7.
Main Container
<div class="max-w-4xl mx-auto bg-[#DBCFB7] shadow-lg">
class="max-w-4xl": Limits the container's maximum width to 4xl (64rem).class="mx-auto": Horizontally centers the container.class="bg-[#DBCFB7]": Sets the background color to #DBCFB7.class="shadow-lg": Adds a large shadow effect.
Flex Container
class="flex": Applies Flexbox layout to arrange child elements horizontally.
Sidebar
<div class="w-1/3 bg-[#3b2f2f] text-[#DBCFB7] p-6 flex flex-col justify-between">
class="w-1/3": Sets the width to one-third of the parent container.class="bg-[#3b2f2f]": Sets the background color to #3b2f2f.class="text-[#DBCFB7]": Sets the text color to #DBCFB7.class="p-6": Adds 24px (1.5rem) of padding.class="flex flex-col justify-between": Arranges child elements in a column and distributes space evenly.
Profile Image and Basic Info
<img alt="Portrait of Riaz Tao" class="w-full h-auto mb-4" height="400" src="1.png" width="300"/>
class="w-full": The image width takes up the full width of its container.class="h-auto": The height is automatically adjusted to maintain the aspect ratio.class="mb-4": Adds 16px (1rem) of bottom margin.
Titles and Descriptions
<h1 class="text-3xl font-bold text-[#DBCFB7]">RIAZ TAO</h1>
<p class="text-lg mb-6 text-[#DBCFB7]">ENTERTAINMENT DESIGNER</p>
class="text-3xl": Sets the font size to 3xl (1.875rem).class="font-bold": Sets the font to bold.class="text-lg": Sets the font size to lg (1.125rem).class="mb-6": Adds 24px (1.5rem) of bottom margin.
Horizontal Divider
<hr class="border-t-2 border-[#DBCFB7] my-4"/>
class="border-t-2": Sets the top border width to 2px.class="border-[#DBCFB7]": Sets the border color to #DBCFB7.class="my-4": Adds 16px (1rem) of top and bottom margin.
Skills and Languages Section
<h2 class="text-xl font-semibold mb-2 text-[#DBCFB7]">SKILLS</h2>
<ul class="list-disc list-inside text-lg text-[#DBCFB7]">
class="text-xl": Sets the font size to xl (1.25rem).class="font-semibold": Sets the font to semi-bold.class="mb-2": Adds 8px (0.5rem) of bottom margin.class="list-disc list-inside": Sets the unordered list style to solid disc bullets and places the bullets inside the list item.class="text-lg": Sets the font size to lg (1.125rem).
Contact Information
<div class="mt-6">
<hr class="border-t-2 border-[#DBCFB7] my-4"/>
<h2 class="text-xl font-semibold mb-2 text-[#DBCFB7]">CONTACT</h2>
<p class="text-lg text-[#DBCFB7]">
<span class="font-semibold">PHONE:</span> +60178697488
</p>
<p class="text-lg text-[#DBCFB7]">
<span class="font-semibold">EMAIL:</span> Riaz_Tao@outlook.com
</p>
<p class="text-lg text-[#DBCFB7]">
<span class="font-semibold">E-PORTFOLIO:</span>
<a class="text-blue-500" href="https://riaztau.blogspot.com/">https://riaztau.blogspot.com/</a>
</p>
</div>
class="mt-6": Adds 24px (1.5rem) of top margin.class="text-xl": Sets the font size to xl (1.25rem).class="font-semibold": Sets the font to semi-bold.class="text-lg": Sets the font size to lg (1.125rem).class="text-blue-500": Sets the link text color to blue.
Main Content Area
<div class="w-2/3 p-6 bg-[#DBCFB7] text-[#3b2f2f]">
class="w-2/3": Sets the width to two-thirds of the parent container.class="p-6": Adds 24px (1.5rem) of padding.class="bg-[#DBCFB7]": Sets the background color to #DBCFB7.class="text-[#3b2f2f]": Sets the text color to #3b2f2f.
Content Sections
<h2 class="text-2xl font-bold mb-4 border-b-2 border-[#3b2f2f] pb-2">PROFILE</h2>
<p class="text-lg mb-6">
As a passionate and creative entertainment designer, I am dedicated to delivering unforgettable entertainment experiences through innovation and visual storytelling...
</p>
class="text-2xl": Sets the font size to 2xl (1.5rem).class="font-bold": Sets the font to bold.class="mb-4": Adds 16px (1rem) of bottom margin.class="border-b-2": Sets the bottom border width to 2px.class="border-[#3b2f2f]": Sets the border color to #3b2f2f.class="pb-2": Adds 8px (0.5rem) of bottom padding.class="text-lg": Sets the font size to lg (1.125rem).class="mb-6": Adds 24px (1.5rem) of bottom margin.
LINK：Riaz Tao - Entertainment Designer (cheerful-starburst-294432.netlify.app)
Final Project - Creating a Single-Page Website
Shamsul Hamimi Ab. Rahman
•
7月2日
Project Overview:
In this web design project, you will create a single-page website dedicated to your favorite topic. This project will help you develop your web design and development skills while allowing you to showcase your passion for the topic of your choice.
Project Requirements:
Artist Selection: Choose your favorite topic as the subject of your website. Ensure you are genuinely interested in the topic, as this will help you create a more engaging website. Decide the site's goal to ensure that the site has clear content.
Content:
Your content should have at least 5 sections that explain the topic of interest. It should engaging and significant to the topic. You should also include one CTA button that reflects the content.
Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your taste.
Ensure a visually appealing layout with a balanced use of text and multimedia.
Create a responsive design that adapts to different screen sizes (mobile-friendly).
Navigation: Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.
Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.
In this exercise, I plan to build on the sketch I made in illustrator in exercise 1. In the exercise 1, I have made many changes and innovations based on the original web page, and will make some changes during the HTML compilation process.
In exercise 1, I created a webpage for a fictitious investment group. However, according to Mr. Hamimi's feedback, the theme of the investment group was too serious and I needed to change it to a more relaxed theme.Because I am a sunset photography enthusiast, the theme and color scheme of this page are based on the theme of sunset, in order to match the brand tone of dawnfiled (this virtual brand is also created by me based on the sunset)So I decided to make a personal sunset photography gallery website, a website to showcase my personal work as well as allow others to upload their own work.In the process of writing this web page, I still used external CSS files such as TailwindCSS and Font Awesome, which can provide powerful typesetting support.
WEB LINK(After Feedback）：
Dawnfield Group (66961cfae850a14b784bbba6--gorgeous-axolotl-a42f7c.netlify.app)
Due to my technical limitations, I was unable to fully reproduce the entire visuals from the draft, so I changed and simplified some parts.
I simplified the head, removing the decorative lines and geometric decorations (I couldn't achieve them)The center part is replaced by three buttons for switching recommended works.The next section introduces the basic information and functions of the website, and the right side shows the categories of pictures (in theory, clicking on them will jump to the corresponding category area)I have given several basic classification labels
The next area is used to display the latest photographs, marked by time.I provide an email registration option to receive the latest information
In the last part, I show the possibility of uploading my own works and works of other authors, and at the bottom I show some support options for the site.
After Feedback 2
In order to increase the interactivity of the webpage, I modified the head and display parts. I added a floating function to the head part so that it always stays at the top. At the same time, I added a picture slider function to display pictures more exquisitely.
I added the swiper css file and modified the code for the old picture display
Finally, I added a lightbox effect to the webpage. I imported the CSS of lightbox2 and added a lightbox tag to each image. Now each image can be viewed as a full-size lightbox image. After the second feedback, Mr. Hamimi pointed out the problem with my webpage: there was a bug in the image slider function, which caused my webpage to be dragged to the right and the image that should be hidden by the slider could be seen. Mr. Hamimi suggested that I change the CSS of the image slider, but the new CSS would cause the layout of my webpage to be messed up. So I used a new method to lock the X-axis drag function of the webpage with a string of code to eliminate the slider error. According to Mr. Hamimi's suggestion, I added a jump function to the buttons in the head section and modified the buttons to the modules on the web page. Now the buttons in the head section will jump to the corresponding section. At the same time, I expanded the display section from the original three pictures to nine pictures, making the web page more like a gallery.
LINK:Dawnfield Group (66961cfae850a14b784bbba6--gorgeous-axolotl-a42f7c.netlify.app)
CSS Part of the Webpage
Internal CSS
body
body {
font-family: 'Roboto', sans-serif;
background-color: #000000;
color: #e5e5e5;
}
- Function: Sets the overall font, background color, and text color for the entire webpage. The chosen font is a sans-serif
Roboto, with a black background and light gray text color.
.highlight
.highlight {
color: #f5e6b3;
}
- Function: Defines a highlight color for text, using a pale yellow color to emphasize specific text elements.
.highlight-bg
.highlight-bg {
background-color: #1a202c;
}
.highlight-bg ul li {
color: #ffffff;
}
- Function: Sets the background color to dark gray and the text color of list items within this class to white. This is typically used for highlighting background blocks.
.border-highlight
.border-highlight {
border-color: #f5e6b3;
}
- Function: Defines a border color that matches the text color used for highlights.
header, header a, header h1
header, header a, header h1 {
color: #f5e6b3;
}
- Function: Sets the color for header elements, links within the header, and the header title, ensuring a consistent color theme.
.text-xl
.text-xl {
color: #f5e6b3;
}
- Function: Applies a color to larger text, used for emphasizing specific text paragraphs.
.absolute.inset-0 .bg-black p, .absolute.inset-0 .bg-black h2
.absolute.inset-0 .bg-black p,
.absolute.inset-0 .bg-black h2 {
color: #f5e6b3 !important;
}
- Function: Ensures that paragraphs and headers within absolutely positioned black background elements have a highlighter yellow color, using the
!important keyword to enforce the style.
.absolute.bottom-4.right-4.text-white.underline
.absolute.bottom-4.right-4.text-white.underline {
color: #1a202c !important;
}
- Function: Targets an absolutely positioned element at the bottom right, forcing its color to dark gray with underlined text, using
!important for priority.
.wealth-management h2, .thoughts-market h2, .research h2
.wealth-management h2 {
color: #000000 !important;
}
.thoughts-market h2 {
color: #000000 !important;
}
.research h2 {
color: #000000 !important;
}
- Function: Sets the color of headers within specific sections to black, with
!important to ensure the style takes precedence.
External CSS Libraries Used
TailwindCSS
<script src="https://cdn.tailwindcss.com"></script>
- Function: Includes the TailwindCSS library, which provides utility classes for quick and efficient styling and layout, such as
p-4 (padding), mx-auto (center horizontally), flex (flexbox layout), grid (grid layout), text-center (text alignment), and more.
Font Awesome
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
- Function: Includes the Font Awesome icon library, which allows the insertion of various icons in the webpage, such as social media icons and arrow icons.
Example of Inline Styles
<div class="absolute inset-0 flex flex-col justify-center items-center space-y-4 text-center">
<div class="bg-black bg-opacity-50 p-4 wealth-management">
<h2 class="text-xl font-bold hover:underline">Lakeside</h2>
</div>
<div class="bg-black bg-opacity-50 p-4 thoughts-market">
<h2 class="text-xl font-bold hover:underline">Mountains</h2>
</div>
<div class="bg-black bg-opacity-50 p-4 research">
<h2 class="text-xl font-bold hover:underline">Cityside</h2>
</div>
</div>
- Function: Uses TailwindCSS utility classes to define absolute positioning, flexbox layout, centered alignment, padding, and hover effects for text.
HTML Structure
Header Section
<header class="bg-[#00000] text-black p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold">Riaz's Sunset Gallery</h1>
<nav class="space-x-4">
<a class="hover:underline" href="#">User Policy</a>
<a class="hover:underline" href="#">Contact Us</a>
<a class="hover:underline" href="#">Copyright</a>
<a class="hover:underline" href="#">Upload</a>
<a class="hover:underline" href="#">LOGIN</a>
</nav>
</div>
</header>
CSS Application: The header is styled with a black background, white text, and padding. The navigation links use hover effects to underline text.
Main Banner Section
<section class="relative">
<img alt="Sunset over water with a boat" class="w-full h-auto" src="2.jpg"/>
<div class="absolute inset-0 flex flex-col justify-center items-center space-y-4 text-center">
<div class="bg-black bg-opacity-50 p-4 wealth-management">
<h2 class="text-xl font-bold hover:underline">Lakeside</h2>
</div>
<div class="bg-black bg-opacity-50 p-4 thoughts-market">
<h2 class="text-xl font-bold hover:underline">Mountains</h2>
</div>
<div class="bg-black bg-opacity-50 p-4 research">
<h2 class="text-xl font-bold hover:underline">Cityside</h2>
</div>
</div>
<a class="absolute bottom-4 right-4 text-white underline hover:underline" href="#">EXPLORE MORE</a>
</section>
CSS Application: The banner image is made full-width, with text overlays styled with semi-transparent backgrounds. Absolute positioning is used for the "EXPLORE MORE" link.
"What We Do" Section
<section class="py-16">
<div class="container mx-auto">
<h2 class="text-3xl font-bold highlight">What We Do</h2>
<p class="mt-4">...</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
<img alt="Cityscape at sunset" class="w-full h-auto" height="400" src="2b.jpg"/>
<div class="highlight-bg p-8">
<ul class="space-y-4">
<li class="hover:underline">FILIMING LOCATION</li>
<li class="hover:underline">SHOOTING TIME & WEATHER CONDITIONS</li>
...
</ul>
</div>
</div>
</div>
</section>
CSS Application: Uses TailwindCSS utility classes for padding, margins,
and grid layout. Custom styles are applied for highlighted text and background.
"Recent Work" Section
<section class="py-16 bg-black">
<div class="container mx-auto">
<h2 class="text-3xl font-bold highlight">Recent Work</h2>
<p class="mt-4">...</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
<img alt="Person walking through a forest" class="w-full h-auto" height="400" src="2d.jpg"/>
<ul class="space-y-4">
<li class="hover:underline">Purple clouds in Fontainebleau on July 1st</li>
...
</ul>
</div>
</div>
</section>
CSS Application: Similar grid layout and spacing as the "What We Do" section,
with background color set to black.
Sign-Up Section
<section class="py-16 text-center">
<div class="container mx-auto">
<h2 class="text-2xl font-bold">Sign Up for Our LatestWork</h2>
<p class="mt-4">...</p>
<div class="mt-8 flex justify-center">
<input class="p-4 w-1/2 border border-gray-300 rounded-l" placeholder="Email Address" type="email"/>
<button class="p-4 bg-gray-700 text-white rounded-r">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
</section>
CSS Application: Center-aligned text and flexbox for the sign-up form.
Custom styles for input and button elements.
Gallery Section
<section class="py-16">
<div class="container mx-auto">
<h2 class="text-3xl font-bold highlight">Discover More Work & Join Us</h2>
<p class="mt-4">...</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
<div class="text-center">
<img alt="Person holding a child at sunset" class="w-full h-auto" height="400" src="5.jpg"/>
<p class="mt-4">By John Dawnfield</p>
</div>
...
</div>
<div class="text-center mt-8">
<a class="highlight-bg text-black py-2 px-4 rounded hover:underline" href="#">More Insights</a>
</div>
</div>
</section>
CSS Application: Grid layout with center-aligned text for the gallery items.
Custom styles for buttons and hover effects.
Footer Section
<footer class="bg-gray-900 text-gray-400 py-8">
<div class="container mx-auto text-center">
<div class="flex justify-center space-x-4 mb-4">
<a class="hover:text-white" href="#"><i class="fab fa-linkedin"></i></a>
<a class="hover:text-white" href="#"><i class="fab fa-instagram"></i></a>
...
</div>
<div class="space-y-2">
<a class="block hover:underline" href="#">Disclosures</a>
<a class="block hover:underline" href="#">Contact Us</a>
...
</div>
<p class="mt-4">© 2024 Dawnfield Group. All rights reserved.</p>
</div>
</footer>
CSS Application: Dark background with gray text.
Flexbox layout for social media icons and block layout for footer links.
%20%202024_5_10%2015_48_07.png)
%20%202024_5_10%2015_52_37.png)
%20%202024_5_10%2016_05_18.png)
%20%202024_5_10%2016_11_44.png)
%20%202024_5_10%2016_14_19.png)
%20%202024_5_10%2017_02_04.png)
%20%202024_5_10%2017_01_53.png)
%20%202024_5_10%2016_59_35.png)
%20%202024_5_10%2016_57_12.png)
%20%E5%92%8C%E5%8F%A6%E5%A4%96%205%20%E4%B8%AA%E9%A1%B5%E9%9D%A2%20-%20%E4%B8%AA%E4%BA%BA%20-%20Microsoft%E2%80%8B%20Edge%202024_7_14%2020_21_45.png)
评论
发表评论