Rolling Stone Example

Developer
Andy Hullinger
Size
5,809 Kb
Views
18,216
  1. Rolling Stone Example Previews
  2. Rolling Stone Example HTML Codes
  3. Rolling Stone Example CSS Codes

How do I make an rolling stone example?

Enjoy! Read the comments for details. I'll be posting a video walkthrough soon. This recreation of the typography in the January issue of Rolling Stone is part of an exercise for the students in my "Mageractive" course at Northwestern University's Medill School of Journalism.. What is a rolling stone example? How do you make a rolling stone example? This script and codes were developed by Andy Hullinger on 08 September 2022, Thursday.

Rolling Stone Example Previews
IQ Test

Rolling Stone Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rolling Stone Example</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Oswald:700,300);
/*
First just get the basic type styling done. Just the essentials.
*/
h1,
h2,
h3 { text-transform: uppercase; font-family: 'Oswald'; font-weight: 300;
}
.lc { text-transform: none;
}
h1,
strong { font-weight: 700;
}
/*
Now address font sizing, overall width, and typographic heirarchy
*/
h1 { font-size: 200px; letter-spacing: -10px; line-height: 184px;
}
h2 { width: 300px; font-size: 28px;
}
h3 { font-size: 20px; width: 200px;
}
h3 strong { display: block; font-size: 32px;
}
/*
Now, we can begin to think about polishing the layout NOTE: I like to use the "outline" trick to visualize the CSS boxes
*/
p,
h1,
h3,
h2 { outline: 1px solid red;
}
/*
The headline is pretty easy if we use <span>'s as block level elements to isolate each word then simply use text-align and a few custom classes (and an advanced selector) to really tweak everything.
*/
h1 span { display: block;
}
h1 span:last-child { color: indigo;
}
.flush-right { text-align: right;
}
.bg-nudge { margin-right: 183px;
}
.sm-nudge { margin-left: 60px;
}
/*
With a "grouping" parent container in place to define the width of our layout we can use positioning to carefully craft a precise layout.
*/
header { width: 800px; margin: auto;
}
/*NOTE! The "Trick" is to explicitly set postitoning on the parent element <header> so all of it's children <h2,h3> come along for the ride. (SEE https://css-tricks.com/absolute-positioning-inside-relative-positioning/) */
header { position: relative;
}
h2,
h3 { position: absolute;
}
/*Forget "margin and padding" and just remember "TRouBLe" (top: left: bottom: and right:) to place the "position absolute" children where they belong realtive to their parent's origin'
*/
h2 { top: 170px; left: 520px; /* it's okay to keep tweaking when needed'*/ line-height: 34px;
}
h3 { top: 370px; left: 10px; /* don't forget text-align as a layout tool!*/ text-align: right;
}
h3 strong { padding-bottom: 10px; margin-bottom: 10px; line-height: 1;
}
/*
A bottom-border is what you want, but it will be full width of the h3, so instead we use an "empty" psuedo element to "draw" a line with another CSSbox allowing us the freedomw to size, color, and position it exactly where we want.
*/
h3 strong::before { content: ""; height: 3px; width: 50px; background-color: black; position: absolute; right: 0; top: 75px;
}
p { font-family: Georgia; font-size: 18px; line-height: 28px;
}
p em { text-transform: uppercase; font-style: normal;
}
/*drop cap with clever selector*/
p:first-letter { font-size: 300px; line-height: 260px; font-family: 'Oswald'; font-weight: 700; float: left; margin-right: 20px; text-shadow: 16px 8px 0 white, 20px 10px 0 black; ;
}
/*COLOPHON: (creating the stripes)
For what it's worth, I'd add a similar border-top+psuedo element trick to top the first paragraph since it's narrow width is the determining factor in the look of this layout*/
p { /*explicity set positioning as a the parent*/ position: relative; width: 500px; margin: auto; border-top: 8px double black; margin-top: 50px; padding-top: 50px;
}
p:before,
p:after { /*absolutely position these "children"*/ position: absolute; content: ""; width: 100%; border-top: 8px double black;
}
p:before { top: -18px; left: 0;
}
p:after { top: -28px; left: 0;
}
/*Adding the final touch form the print layout sans-page number*/
p { padding-bottom: 20px; border-bottom: 3em solid black;
}
/*A small "reset" touch to help visualize the lesson by getting it away from the edges of the browser window*/
body { padding: 50px; padding-bottom: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header> <h1> <span class="flush-right bg-nudge">The</span> <span class="sm-nudge">web&rsquo;s</span> <span class="flush-right">deepest</span> <span>mystery</span> </h1> <h2>How one teenage whiz kid set out to solve the puzzle of cicada, and found himself in a world of international intrigue</h2> <h3><strong>By David Kushner</strong> Illustration by <br/> Sean M<span class="lc">c</span>Cabe</h3>
</header>
<p><em>Marcus Wanner needed</em> a little adventure in his life. A skinny 15-year-old brainiac with wire-frame glasses and wavy brown hair, he was the eldest of five, home-schooled by their mother, a devout Catholic, near Roanoke, Virginia. Shuttling Marcus between home, church and the Boy Scouts seemed like the best way to keep him away from trouble (and girls). &ldquo;I missed out on a lot,&rdquo; he recalls with a sigh. &ldquo;I didn&rsquo;t get out much.&rdquo;&para; Though Marcus was gifted with computers, his mom and dad, an electrical engineer, also locked him down online. He couldn&rsquo;t send an e-mail or register on a website without their permission. To make sure he was abiding, he was restricted to the living-room computer, which they could see. &ldquo;It was the Big-Brother-eye-over-the-shoulder thing,&rdquo; he says. But his parents only had so much power. &ldquo;There was no way we could check what he was up to if he covered his tracks,&rdquo; his mother admits. &ldquo;He&rsquo;s light-years ahead of us.&rdquo; Marcus was a good kid, dependable, hardworking, the leader of his Boy Scout troop, just a project away from Eagle Scout. But he could only take so much. &ldquo;Until a point, I tried to go with the flow,&rdquo; he says. "And then I was like, &lsquo;Aw, fuck it.&rsquo; &rdquo; </p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Rolling Stone Example - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Oswald:700,300);
/*
First just get the basic type styling done. Just the essentials.
*/
h1,
h2,
h3 { text-transform: uppercase; font-family: 'Oswald'; font-weight: 300;
}
.lc { text-transform: none;
}
h1,
strong { font-weight: 700;
}
/*
Now address font sizing, overall width, and typographic heirarchy
*/
h1 { font-size: 200px; letter-spacing: -10px; line-height: 184px;
}
h2 { width: 300px; font-size: 28px;
}
h3 { font-size: 20px; width: 200px;
}
h3 strong { display: block; font-size: 32px;
}
/*
Now, we can begin to think about polishing the layout NOTE: I like to use the "outline" trick to visualize the CSS boxes
*/
p,
h1,
h3,
h2 { outline: 1px solid red;
}
/*
The headline is pretty easy if we use 's as block level elements to isolate each word then simply use text-align and a few custom classes (and an advanced selector) to really tweak everything.
*/
h1 span { display: block;
}
h1 span:last-child { color: indigo;
}
.flush-right { text-align: right;
}
.bg-nudge { margin-right: 183px;
}
.sm-nudge { margin-left: 60px;
}
/*
With a "grouping" parent container in place to define the width of our layout we can use positioning to carefully craft a precise layout.
*/
header { width: 800px; margin: auto;
}
/*NOTE! The "Trick" is to explicitly set postitoning on the parent element 
 so all of it's children  come along for the ride. (SEE https://css-tricks.com/absolute-positioning-inside-relative-positioning/) */
header { position: relative;
}
h2,
h3 { position: absolute;
}
/*Forget "margin and padding" and just remember "TRouBLe" (top: left: bottom: and right:) to place the "position absolute" children where they belong realtive to their parent's origin'
*/
h2 { top: 170px; left: 520px; /* it's okay to keep tweaking when needed'*/ line-height: 34px;
}
h3 { top: 370px; left: 10px; /* don't forget text-align as a layout tool!*/ text-align: right;
}
h3 strong { padding-bottom: 10px; margin-bottom: 10px; line-height: 1;
}
/*
A bottom-border is what you want, but it will be full width of the h3, so instead we use an "empty" psuedo element to "draw" a line with another CSSbox allowing us the freedomw to size, color, and position it exactly where we want.
*/
h3 strong::before { content: ""; height: 3px; width: 50px; background-color: black; position: absolute; right: 0; top: 75px;
}
p { font-family: Georgia; font-size: 18px; line-height: 28px;
}
p em { text-transform: uppercase; font-style: normal;
}
/*drop cap with clever selector*/
p:first-letter { font-size: 300px; line-height: 260px; font-family: 'Oswald'; font-weight: 700; float: left; margin-right: 20px; text-shadow: 16px 8px 0 white, 20px 10px 0 black; ;
}
/*COLOPHON: (creating the stripes)
For what it's worth, I'd add a similar border-top+psuedo element trick to top the first paragraph since it's narrow width is the determining factor in the look of this layout*/
p { /*explicity set positioning as a the parent*/ position: relative; width: 500px; margin: auto; border-top: 8px double black; margin-top: 50px; padding-top: 50px;
}
p:before,
p:after { /*absolutely position these "children"*/ position: absolute; content: ""; width: 100%; border-top: 8px double black;
}
p:before { top: -18px; left: 0;
}
p:after { top: -28px; left: 0;
}
/*Adding the final touch form the print layout sans-page number*/
p { padding-bottom: 20px; border-bottom: 3em solid black;
}
/*A small "reset" touch to help visualize the lesson by getting it away from the edges of the browser window*/
body { padding: 50px; padding-bottom: 0;
}
Rolling Stone Example - Script Codes
Rolling Stone Example - Script Codes
Home Page Home
Developer Andy Hullinger
Username andyhullinger
Uploaded September 08, 2022
Rating 4.5
Size 5,809 Kb
Views 18,216
Do you need developer help for Rolling Stone Example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Hullinger (andyhullinger) Script Codes
Name
Simple photo captions
A Pen by Andy Hullinger
Mageractive Week 1
GSAP Animation with TweenMax
Hello Kitty Puppet Example TweenMax
MFA iteration example
Simple Parallax ala Nike Better World
Landing Page Demo
Example Responsive Resume
Banner Example
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!