Book Image

Web Design Blueprints

Book Image

Web Design Blueprints

Overview of this book

The book delivers simple instructions on how to design and build modern Web using the latest trends in web development. You will learn how to design responsive websites, created with modern Flat User Interface design patterns, build deep-scrolling websites with parallax 3D effects, and roll-your-own single-page applications. Finally, you'll work through an awesome chapter that combines them all. Each chapter features actual lines of code that you can apply right away.
Table of Contents (12 chapters)
Web Design Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Working with the home structure


Inside the app directory, add a new directory named home. Inside it, create a new HTML page named home.html. We will begin putting together the home page section next.

Putting the content in the new file structure for the home

Next, open the index.html file and select all of the content within the body tag and cut it out. In the home.html file, create a new HTML5 MAIN element and inside it, paste the contents of your clipboard. This is going to create a new layer in your markup, so it will break your CSS. Let's fix that before we move on.

<main >
    <section>
        <div class="time color-0" id="time">FOO</div>
        <div>
        <div class="news color-1 scroll">

Modifying index.html and CSS

Conversely, modify the body to have the color-0 class. Add a new child DIV element with the ID content to it. We use this in the script to insert the AJAX-ified content into the page.

<body onload="home.getTime()" class="color-0...