Interactive Design / Project 2: Microsite

08/06/2022 - 22/06/2022 (Week 11 - Week 13)
Reagan Val Adelbert Mahadi / 0349177
Interactive Design / Bachelor of Design in Creative Media
Project 2 / Microsite
INSTRUCTIONS



Project 2: Working Landing Page

After finishing my landing page design, I then proceed to make my working landing page. Mr. Shamsul shared with us a website (Bootstrap) so that it can help us on making the working website. So I proceed on making my website with Dreamweaver.

I first start by copying the initial codes on Bootstrap to start on my website. Then I copied the code for the font and the navigation bar.


Fig. 1 Starting up


Fig. 2 Navigation bar

On the navigation bar, I added the hyperlink attribute to the list so that they can go to other pages. I then start on the next part which is the featured products and the rest of the products.


Fig. 3 iPhone and Samsung

I asked Mr. Shamsul how to make my website follow my design, he said that I have to make my image as the background so that the text can be seen next to it.


Fig. 4 Featured products

So I made my pictures as a background and apply them to the CSS.


Fig. 5 iPhone and Samsung CSS

I also added the same code to the Television part in HTML and CSS with the featured products.


Fig. 6 Television HTML


Fig. 7 Television CSS

For the rest of the products, I use the row and column method on making it on HTML.


Fig. 8 Products HTML

I use a total of 2 containers for this section so that they will appear as 2x2 on the website.


Fig. 9 Website preview

As for the size, I make sure that they have the same sizes so that they can look clean.

For the brands part, I used the list attribute for the images and applied a feature for the brands title. I decided to add the lines between the brand's title during the landing page design, so I am going to apply it in CSS.


Fig. 10 Brands HTML


Fig. 11 Brands CSS

For the CSS, I used the before and after method on adding the lines between the title. I also applied padding to the brands' logos so that they don't appear as close to each other.

Fig. 12 Brands CSS


Fig. 13 Brands website preview

I also added CSS to my buttons so that they can change color when hovered.


Fig. 14 Button CSS

I then head on to the last section of the website which is the footer. I made the footer section by using the row and column method. I will divide the footer section into two sections.


Fig. 15 Footer HTML

In the last section of the footer, I added the list attribute for the social media logos and add the hyperlink attribute so that they can access Croma's social media.


Fig. 16 Footer HTML

The link to my website can be found here.

FEEDBACK

No feedback

REFLECTIONS

When I first start making my website, I was so confused about how do I start things up. So I decided to watch a tutorial on how to make a website. I followed the video but I ended up getting more confused. During the process of making my website, I search the internet a lot on how to make the sections and the others. Thanks to this one website that I found, it helped me a lot in my progress through making a website. This project was done for a long time and each time I used it on make this website make me understand clearer and clearer how to mess up with the attributes in both HTML and CSS. 

Comments

Post a Comment

Popular posts from this blog

Major Project / Monster Hunter Concept Art

22/04/2024 - 23/07/2024 (Week 1 - Week 14) Reagan Val Adelbert Mahadi / 0349177 Major Project / Bachelor of Design in Creative Media Monster Concept Art INSTRUCTIONS Major Project For our first task, we are required to create a proposal for the project that we are going to make for 14 weeks. After submitting the proposal to the lecturer, we can proceed with our project guided by the selected lecturer that Mr. Asrizal chose for us. I got Mr. Kannan as my lecturer. For this project, I will make concept art for the Monster Hunter game. I proposed: Creating the concept art Creating the icons Creating the respective armor of each monster Creating the 3D design of the monsters Creating the monsters based on other mythological creatures Since the problem of the game is the need for more representation of other creatures from different mythology other than Japanese folklore, I decided to create monsters based on other myt...
Read more

Game Art / Art Bible

Image
07/07/2023 - 17/07/2023 (Week 14 - Week 16) Reagan Val Adelbert Mahadi / 0349177 Game Art / Bachelor of Design in Creative Media Art Bible INSTRUCTIONS Art Bible For the final project, we are required to compile and create a game art bible. We are also required to create splash arts of our characters. I first started making the line art for the characters I made throughout this whole module. Fig. 1.1 Ronin Slayer Line Art Fig. 1.2 Samurai Slayer Line Art Fig. 1.3 Tengu Line Art After finishing the line art, I proceeded to the coloring phase. I made some changes to the characters and used the colors that were used during the first project. I also added light and shade effects to the splash art so that it can look as interesting as it can. Fig. 1.4 Ronin Slayer Splash Art I used a rainy theme to this character since it kind of fits the natural vibe of the charact...
Read more

Illustration and Visual Narrative / Task 3 : Webtoon and Motion Comic

Image
22/10/2021 - 05/12/2021 (Week 8 - Week 14) Reagan Val Adelbert Mahadi / 0349177 Illustration and Visual Narrative / Bachelor of Design in Creative Media Task 3 / Webtoon and Motion Comic LECTURES Week 8 For week 8, we started the module with Ms. Jennifer doing a tutorial for the webtoon project. She showed us her sketch in Photoshop and taught us about panel arrangements, camera angles, compositions and etc.  After sketching several panels we then proceed to a lecture session with Ms. Anis. For the lecture, Ms. Anis presented us with how to make comics.  To startup making comics, we need to come up with an idea. To get ideas, we can get it from our experiences. Good ideas never come from browsing google aimlessly. We can come up with ideas by brainstorming or even mind mapping. 5 Assignment practice (building a mental library) Watch cartoons/movies Play new games Read new mangas/comics/graphic novels Listen to different genres of music (ambient/cultural) Try a new dish. Tryi...
Read more