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

-
Image
1. Chennai Marina Beach Place: Chennai, Tamil Nadu                               It is along with Bay of Bengal. It covers 13 kilo metre in the length holds, so it called by the second largest natural beach in the world. It have amazing sparkling gold sand with blue sea. If you are the beach lover, you will definitely come and visit the beautiful place. Then you feel this was the amazing time to spent in your life. There is no entrance fees. You can visit all the time in the day. Every time they had some crowded but no worry about it because its the second largest beach in the world. The average width of the beach is 300 m (980 ft). The width at the widest stretch is 437 m(1,434 ft). It is near to the Chennai Central. The distance between the Marina Beach and Chennai Central is 3 kilometre. Enjoy with your friends and family members. 2. Madurai Meenakshi Amman Temple Place: Madurai, Tamil N...
Read more

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

-
Image
Appy Fizz Flower Pot Appy Fizz Flower Pot- Ingredients Appy Fizz Empty Bottle Normal White Paper Knife Scissor Black pencil  Black Marker Glue How to prepare the Appy Fizz Flower Pot? Take Appy Fizz Empty Bottle and remove the wrapper. Cut the Head of the Bottle Draw the Big Eyes, Moustache, Eyebrow in the White paper and Color it and you can also add extra things like mouth, ears, etc. And, cut it in there shape After cut it and paste in the bottle of the face shape by using glue Done the Flower Pot is ready , as per you can also use it for Pen stand or Brush stand   The video is available to make the Appy Fizz Flower Pot    
Read more

World Biggest Mirror Salar de uyuni | The Desert of Bolivia | Knock The Blog World

-
Image
Location : Salar de uyuni in Bolivia, South Central America In the world, a lot of places are mysterious that would be marvelous, beautiful, biggest.  In that order one of the famous and mysterious places is Salar de uyuni. Salar de Uyuni is one of the largest salt deserts.  The distances are covered by 10,582 sq km.  In the rainy season, most of the people like to visit. Because the place looks like a mirror. So the world says, Natural biggest mirror in the world. In the night time, the stars look bright and the sky is black with blue shades. This one attracts the people to visit these places. This place has 10 billion tons of slats. It is a vast surface area that is filled with a bunch of salt. People are thinking about how much salt is in that place. About long years ago, the lake minchin were changed by the environment conditions, a thick crunch of salt remaining and forming into the wonderful place called Salar de uyuni. Aymaran legend said, the mystery behind the f...
Read more