My First HTML With Css | Parallax | Webdesign | Example

I love Webdesign!!! then You..??




First what is Web Design.

It is designed for the Websites that are displayed on the Internet. It has so many languages used in web design. Html, Css, Java script are combined to form the web design.

  • HTML(Hyper Text Markup Language) - It is the base of the Website. It is like Skeleton.
  • CSS (Cascading Styling Sheet)              - It is adding the different style in the Website . It is like the Dressing of the Skeleton.
  • JavaScript                                                - It is the action of the Website. It is like the swimming of a person.
I think you all know.

I am interested in the webdesign. But I need some more knowledge about the Web design. So I self started to study web design. The internet is very helpful to my studies.

All the one's are study but practical is main. You must implement what you study. So I practice some more examples. One of the example is Parallax Webdesign.

The Parallax is one of the trending webdesign. The Word Parallax means is the perceived change in position of an object seen from two different places. It changing the background of the context while scrolling.

My favorite editor is Notepad++. It has so much language. You can run as much of language in Notepad++.

The below picture is Html file. Please Zoom it the Screenshot for Clearness.

My html file name is first with extension html.

The title of my page is My First Css.

I create separated separated file for the Css. So you must link with the html page.

<link rel="stylesheet" type="text/css" href="first.css">

It has three division. The id's are:

  1. first
  2. second 
  3. third



The below screenshot is a Css file. The file name is first with the extension of css.

  1. Id = body -  The full body of the background page color is Black.
  2. Id = first     -   Maximum width is 960 px,  margin is 0 remaining is auto, the text color is white, font size is 100% and padding is 25 px.
  3. Id = second -  It is the main in the parallax. First upload the background picture. It is place in  the center and no repeat. The background size is cover. Main thing is background attachment. It is fixed. Then the height is 500 px. 
  4. Id = third    -  It is the heading content. The heading text is white color, font weighted is bolder, font size is 150%. Add some box around the text. So the border is 3px, border style is solid and its color is blue, padding is 15 px and margin is 20 px. 




This is my output.


This is the fixed parallax scrolling website. 

You can also try with the Html and Css. It is quite simple to study the languages.

So much of examples are there to combined with html and css. Some of the Examples are

  1. Create Blog
  2. Travel Experiences
  3.  About some person biography
  4.  Restaurant Website
  5.  About Event
  6.  Photography Site
  7.  Survey Form
  8.  Technical Documentation.

Comments

Post a Comment

Popular posts from this blog

Top 10s Best Place of Tamil Nadu, India

Reuse Water Bottle Plastic(Appy Fizz) | Simple Flower Pot