CSS Landing Page Website Design
 |
| CSS Landing Page Website Design |
HTML PART
This is a code snippet for a section of a webpage that displays information about Starbucks, the popular coffee company. The section is structured using HTML and contains a logo, a navigation bar, a main content section with text and an image, a thumbnail gallery of additional images, and links to social media profiles.
The navigation bar contains links to various pages on the website, including the home page, about us page, services page, and contact us page. This allows visitors to easily navigate around the website and find the information they need.
The main content section features a large heading that reads "It's not just Coffee, It's Starbucks" with the Starbucks logo displayed prominently. Below the heading, there is a paragraph of text that describes the brand and its offerings. There is also a "Learn More" button that visitors can click to access additional information about Starbucks.
Next to the text, there is an image of a Starbucks cup, which can be changed by clicking on one of the thumbnails in the gallery below. This provides visitors with a way to view different images of the product.
At the bottom of the section, there are links to the company's social media profiles on Facebook, Twitter, and Instagram. This allows visitors to connect with the brand and stay updated on news and promotions.
CSS PART
1. The code snippet is CSS (Cascading Style Sheets) which is used to style HTML elements on a web page. The first part of the code contains universal selectors for all elements on the page, which sets the margin and padding to zero, box-sizing to border-box, and sets the font family to 'Poppins' sans-serif font.
2. The rest of the code contains specific selectors for different elements on the page. For example, the 'section' selector sets the position to relative, width to 100%, minimum height to 100 viewport height (vh), padding to 100 pixels, and display to flex with space-between and align-items to center. It also sets the background color to #fff.
3. The 'header' selector sets the position to absolute, and the top and left positions to 0, which places it at the top left corner of the section element. It also sets the width to 100%, padding to 20 pixels on top and bottom and 100 pixels on the left and right, and display to flex with space-between and align-items to the center.
4. The 'header ul' selector sets the display property to flex, which makes the list items display horizontally. The 'header ul li' selector removes the list-style for list items. The 'header ul li a' selector styles the links inside the list items by displaying them inline-block, setting the font-weight to 400, margin-left to 40 pixels, and text-decoration to none.
5. The 'content' selector sets the position to relative, width to 100%, and display to flex with space-around and align-items to center.
6. The 'content .textBox' selector styles the text box element inside the content class by setting the max-width to 600 pixels.
7. The 'content .textBox h2' selector styles the heading inside the text box by setting the color to #333, font-size to 4em, line-height to 1.4em, font-weight to 500.
8. The 'content .textBox span' selector styles the span element inside the text box by setting the color to #017143, font-size to 1.2em, and font-weight to 900.
9. The 'content .textBox p' selector styles the paragraph element inside the text box by setting the color to #333.
10. The 'content .textBox a' selector styles the link inside the text box by setting the display to inline-block, margin-top to 20 pixels, padding to 8 pixels on top and bottom and 20 pixels on left and right, background color to #017143, color to #fff, border-radius to 40 pixels, font-weight to 500, letter-spacing to 1 pixel, and text-decoration to none.
11. The 'content .imgBox' selector styles the image box element inside the content class by setting the width to 600 pixels, display to flex with justify-content to flex-end, padding-right to 50 pixels, and margin-top to 50 pixels.
12. The 'content .imgBox img' selector styles the image inside the image box by setting the max-width to 340 pixels.
13. The 'thumb' selector styles the thumbnail element by setting the position to absolute, left position to 50%, bottom position to 20%, transform to translateX(-50%), and display to flex.
14. The 'thumb li' selector styles the list items inside the thumbnail element by setting the list-style to none, display to inline-block, margin to 0 20 pixels, and cursor to pointer. It also adds a transition effect of 0.5 seconds.
15. This rule targets any list item (li) within an element with the class .thumb that is being hovered over by the user's mouse. When hovered over, the item will move up 15 pixels (translateY(-15px)).
16. This rule targets any img element within a li element that is a child of an element with the class .thumb. It sets the maximum width of the image to 60 pixels.
17. This rule targets an element with the class .sci. It positions the element absolutely, 50% from the top of its containing element and 30 pixels from the right. It also centers the element vertically using transform and sets its display to flex with the direction set to column. This will display any child elements as a column with their content centered horizontally and vertically.
18. This rule targets any li element within an element with the class .sci and removes the bullet point that usually appears next to list items using list-style: none.
19. This rule targets any 'a' element that is a child of an 'li' element within an element with the class '.sci'. It sets the display property to inline-block, adds a margin of 5 pixels to the top and bottom, scales the element to 60% of its original size using transform, and inverts the colors of the element using filter.
20. This rule targets an element with the class .circle. It positions the element absolutely at the top left of its containing element with a width and height of 100%. It sets the background color to #017143 and creates a circular clip-path with a radius of 600 pixels positioned at the point (right 800px), which means the center of the circle will be located 800 pixels from the left edge of the containing element. This will create a circular background that is partially visible on the page.
JAVASCRIPT PART
This is a block of JavaScript code enclosed within a <script> tag and its purpose is to define two functions:
1. imgSlider(anything) function: This function takes a parameter called anything which can be any value. When this function is called, it selects an HTML element with a class of .starbucks using document.querySelector('.starbucks') and sets its src attribute to the value passed as the parameter, which effectively changes the image displayed.
2. changeCricleColor(color) function: This function takes a parameter called color which can be any valid CSS color value. When this function is called, it selects an HTML element with a class of .circle using document.querySelector('.circle') and sets its background CSS property to the value passed as the parameter, which effectively changes the background color of the circle element.
.png)
.png)
0 Comments