attention-catching techniques
TRANSCRIPT
![Page 1: Attention-catching techniques](https://reader035.vdocuments.net/reader035/viewer/2022071816/55aa7b781a28ab016d8b469e/html5/thumbnails/1.jpg)
Drop Capsp:first-child:first-letter {
/*typography*/
font-family:'Merriweather', serif;
font-size: 3.4em;
font-weight: 900;
line-height: 45px;
color: #202020;
/*position*/
float: left;
line-height: 45px;
padding-top: 8px;
padding-right: 6px;
padding-left: 3px;
}
![Page 2: Attention-catching techniques](https://reader035.vdocuments.net/reader035/viewer/2022071816/55aa7b781a28ab016d8b469e/html5/thumbnails/2.jpg)
Pull Quotes.has-pullquote:before {/* Reset metrics. */padding: 0;border: none;
/* Content */content: attr(data-pullquote);
/* Pull out to the right, modular scale based margins. */float: right;width: 260px;margin: 12px 10px 12px 24px;
/* Baseline correction */position: relative;top: 6px;
/* Typography (30px line-height equals 25% incremental leading) */font-size: 23px;font-style: italic;color: #666666;line-height: 30px;}
<p class="has-pullquote" data-pullquote="2014 will be more a year of attempts than of successful products.">Not quite. At least not at the moment. Most of wearable technology are still in their concept/early stages. “2014 will be more a year of attempts than of successful products. And for a lot of manufacturers it will be a matter of waiting to see what Apple does,” said Carolina Milanesi, a consumer tech analyst at Kantar Worldpanel regarding wearable gadgets. Therefore, most still have some basic drawbacks.</p>
![Page 3: Attention-catching techniques](https://reader035.vdocuments.net/reader035/viewer/2022071816/55aa7b781a28ab016d8b469e/html5/thumbnails/3.jpg)
Block Quotes.quote {
/*typography*/
font-family: Georgia, serif;
font-size: 1.5em;
color: #323232;
text-indent: 0;
text-align: left;
padding: 12px 0 0 54px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
/*Block Quote as img*/
background-image: url("/Ybzn96hcq/quotemarks.png");
background-position: -25px -35px;/*quotemarks position*/
background-repeat: no-repeat;
}<blockquote class="quote">{Quote}</blockquote>
![Page 4: Attention-catching techniques](https://reader035.vdocuments.net/reader035/viewer/2022071816/55aa7b781a28ab016d8b469e/html5/thumbnails/4.jpg)
Sources• Drop Caps - http://css-tricks.com/snippets/css/drop-caps/
• Pull Quotes - http://miekd.com/articles/pull-quotes-with-html5-and-css/
• Block Quotes - http://css-tricks.com/examples/Blockquotes/