Week4

In this example below you will see how to do a Week4 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 08jordang, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 08jordang ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Week4</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="illustrator">
        
        <div class="book">
            <h2 class="subject">Adobe Illustrator</h2>
            <h3 class="title">The Adobe Illustrator CS3 Wow! Book</h3>
            <p class="author">by Sharon Steuer</p>
            <p class="price">Price:29.99</p>
            <p class="desc">Adobe Illustrator is the indispensable vector drawing tool used by digital artists around the world. As a core component of Adobe Creative Suite CS3, Illustrator CS3 provides those artists with powerful drawing tools, unparalleled typographic controls, and much more.</p>
            <p class="book-link"><a href="https://www.amazon.co.uk">amazon.com</a></p>
        </div>
        
        <div class="book">
            <h3 class="title">Adobe Illustrator CS3 How-tos</h3>
            <p class="author">by David Karlins and Bruce K. Hopkins</p>
            <p class="price">Price:13.49</p>
            <p class="desc">Adobe Illustrator CS3 is more than just the world's most popular and powerful illustration tool: As part of the Adobe's Creative Suite 3, it's a key component of an overall design workflow that lets users work seamlessly among all of their graphics applications to create graphically rich content for print, Web, motion graphics, and mobile devices.</p>
            <p class="book-link"><a href="https://www.amazon.co.uk">amazon.com</a></p>
        </div>
    
    </div> <!--End of Illustrator-->

    <div class="flash">
        <h2 class="subject">Adobe Flash</h2>
        
        <div class="book">
            <h3 class="title">Foundation Flash CS3 for Designers (Foundation)</h3>
            <p class="author">by T Stiller and D Green</p>
            <p class="price">Price:26.59</p>
            <p class="desc">Flash is one of the most engaging and innovative, and versatile technologies available--allowing the creation of pretty much anything from simple slideshows, animated banners and icons and cartoons, to Rich Internet Applications, Interactive videos, and dynamic user interfaces for web sites, kiosks, or DVDs.</p>
            <p class="book-link"><a href="https://www.amazon.co.uk">amazon.com</a></p>
        </div>
        
        <div class="book">
            <h3 class="title">Essential ActionScript 3.0 (Essential)</h3>
            <p class="author">by C Moock</p>
            <p class="price">Price:27.29</p>
            <p class="desc">More than two years in the making, ActionScript 3.0 presents perhaps the most substantial upgrade to Flash's programming language ever. The enhancements to ActionScript's performance, feature set, ease of use, cleanliness, and sophistication are simply staggering.</p>
            <p class="book-link"><a href="https://www.amazon.co.uk">amazon.com</a></p>
        </div>
        
    </div> <!--End of Flash-->

    <div class="css">
        <h2 class="subject">Cascading Style Sheets</h2>
        
        <div class="book">
            <h3 class="title">Transcending CSS: The Fine Art of Web Design</h3>
            <p class="author">by Andy Clarke, Molly E. Holzschlag and Aaron Gustafson</p>
            <p class="price">25.19</p>
            <p class="desc">The Web has changed, and so has the art of creating Web sites. Few visual designers are natural programmers, and as a result, visualizing how to work with markup, CSS and a range of programmatic techniques to create beautiful design is difficult.</p>
            <p class="book-link"><a href="https://www.amazon.co.uk">amazon.com</a></p>
        </div>
        
        <div class="book">
            <h3 class="title">Bulletproof Web Design</h3>
            <p class="author">by Dan Cederholm</p>
            <p class="price">23.19</p>
            <p class="desc">No matter how visually appealing or content-packed a Web site may be, if it's not adaptable to a variety of situations and reaching the widest possible audience, it isn't really succeeding. In Bulletproof Web Design, author and Web designer extraordinaire, Dan Cederholm outlines standards-based strategies for building designs that provide flexibility, readability, and user control--key components of every sucessful site.</p>
            <p class="book-link"><a href="https://www.amazon.co.uk">amazon.com</a></p>
        </div>
        
        <div class="wrapper">
    <div class="photoshop">
        <div class="book">
          <h1 class="subject">Adobe Photoshop</h1>      
        <h2 Layers: The Complete Guide to Adobe Photoshop's Most Powerful Feature</h2>
        <p class="author">by Matt Kloskowski</p>
        <p class="price">price:14.48</p>
        <p class="desc">When Photoshop guru Matt Kloskowski was asked why he wrote this book, he replied, "It's simple: I wanted to write the Photoshop book that I wished was around when I was learning Photoshop".
amazon.com</p>
        <p class="link">amazon.com</p>  
        </div>
        
       <div class="book">
        <h2 Adobe Photoshop CS3 Classroom in a Book</h2>
        <p class="author"> by Adobe Creative Team</p>
        <p class="price"> Price:27.99</p>
        <p class="desc">This thorough, self-paced guide to Adobe Photoshop CS3--written by the experts at Adobe Systems' is ideal for beginning users who want to learn key Photoshop concepts and techniques, while readers who already have some experience with Photoshop can use this book to learn Photoshop CS3's more advanced features and newest tools.
amazon.com</p>
<p class="link">amazon.com</p>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/08jordang/week4-PWMJGL */

.photoshop {
    background-color:#4274b3;
}


.illustrator { 
    background-color:#e4a040;
}

.flash {
    background-color:#92262a;
}

.css {
    background-color:#97a33e;
}

.subject {
    color: #ffffff;
}

.title {
    color: white;
    fomt-style: italic;
}

.price {
    color: white;
    font-weight: bold; 
}

Comments