Website Programming: How to Create a Simple Apple Box using HTML and CSS
Bandung, Indonesia, October 21, 2020, 18:51PM -Are you huge fans of creative and beautiful animations? Are you looking to make your website that can be attractive website? So they can keep reading this article and try it yourself. One of the most important is, user first impression which is influenced by creative fantastic greeting animations can help you engage visitors. Moreover, animations can be entertainment for visitors and make them want to stay at your page to enjoy the animation.
Do you have your own product? Do you intend to sell your product? Then make it eyecatching so many people will have attention to your product. The website has been established a long time ago and time has flown, now you can make many types of animation, like 3D, colorful, moving animation, and many things. You know what, 3D animations provide more opportunities for designers to create realistic and complex visuals to attract attention. Just like background particles and videos, 3D animation on the website only needs simple actions from visitors, like mouse clicks, mouse movement, or if your mobile users then with a single touch can trigger the animation. Now it's common to see 3D animation everywhere like the website we're talking about.
Before we start the lesson I suggest Download Images to support this lesson
HTML
The first section of HTML is head, head Is the place you put the information of your websites like title and other functions
1. <meta charset = "UTF-8"> means I'm going to make this website can be supported in many programming languages so my website can be flexible and not focus on a few languages.
2.<meta name = "viewport" content = "width=device-with, initial-scale=1.0"> viewport means a website with visible area which is calculate and measure the different screen size of a device to open the website. Content = "width=device-width, initial-scale=1.0" is a set code that has function for a responsive coding circle. Basically "width=device-width, initial-scale=1.0" is the set keyword, you can imagine what with this width with a device and scale. It means the set code will adjust the zoom level of a website when you open the website in different screen sizes like smartphones.
3. <link rel = "stylesheet" href = "stylec.ss"> this is one of a function in the website which connects one file with other file called external file. With a set of codes, we can call a file, for example, CSS, in CSS we put display codes inside and to connect CSS to HTML we have to use the <link> and href
This is the unique part of this lesson, we only need a class/label named iPhone. For the box and the 3D / rotate images on the result are CSS's jobs. Instead of put all the images inside HTML, we put them in the CSS. The reason is simple "To make it easier", you'll find out when you finished the lesson.
CSS ( style.css ) external
1. * means universal console, so whenever you put code inside * the code applies to all the website content including text, image, videos, and other content. Sometimes * only used to adjust the common settings like margin and padding, sometimes we put "box-sizing: border-box" as a responsive coding circle.
2. body, the body is the place to put contents on your page. In this lesson we're not going to focus on the body instead we'll focus on the product(iPhone) which is labeling as .iPhone.
3. .iPhone, so this is the labeling but we only have images that have the same size and the same position. So we have to rotate the image, give a box-shadow, adjust the size to synchronize each other.
4. I put a little animation, when your pointer is over the image then the image will move in Y-axis (top/down).
This is the part we adjust the other elements include text(iPhone) and logo(Apple's logo), they have the same size and same position so we have to adjust the position, transform in X or Y-axis also set the size and the margin.
If you're interested in this lesson, you can visit the link bellow
That's all for the lesson
Thank you for reading my blog and see you in the next article
Thank you for reading my blog and see you in the next article
Comments
Post a Comment