Template - responsive story detail

Developer
Tom Markart
Size
11,766 Kb
Views
22,264
  1. Template - responsive story detail Previews
  2. Template - responsive story detail HTML Codes
  3. Template - responsive story detail CSS Codes

How do I make an template - responsive story detail?

What is a template - responsive story detail? How do you make a template - responsive story detail? This script and codes were developed by Tom Markart on 18 October 2022, Tuesday.

Template - responsive story detail Previews
IQ Test

Template - responsive story detail - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Template - responsive story detail</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <div id="masthead-container"> <div id="member-center"> <a href="javascript:void(0);" title="Manage Account">Welcome Tom <i class="fa fa-cogs"></i></a> </div> <div class="container"> <div class="masthead-row"> <div class="branding col-xs-12 col-sm-4"> <img class="img-responsive" src="http://www.tmarkart.com/codepen/images/no-logo.png" /> </div> <div class="navigation col-xs-12 col-sm-8"> <ul class="nav-links"> <li> <a href="javascript:void(0);">Home</a> </li> <li> <a href="javascript:void(0);">Local News</a> </li> <li> <a href="javascript:void(0);">Sports</a> </li> <li> <a href="javascript:void(0);">Living</a> </li> <li> <a href="javascript:void(0);">Classifieds</a> </li> </ul> </div> </div> </div> </div> <section class="container"> <!------- Leaderboard -------> <div class="ad element-spacing-small visible-lg"> <img src="http://www.tmarkart.com/codepen/images/728x90.jpg" /> </div> <div class="story-header"> <h1 class="heading link"> <a href="javascript:void(0);">Carolina Hurricanes</a> </h1> <h1 class="title"> Brind’Amour, a son and the Stanley Cup: ‘Dad, you have to win’ </h1> </div> <div class="element-spacing-large"> <div class="col-md-8 col-sm-12 story-body"> <div class="primary-asset element-spacing-medium"> <img class="img-responsive" src="http://www.tmarkart.com/codepen/images/Brind&#39;Amour.jpg" /> <div class="current-caption"> <span class="caption-text">Frame grab from Carolina Hurricanes produced video showing captain of the 2006 Stanley Cup championship team Rod Brind'Amour, left, and his son Skyler Brind'Amour on the ice after the team won the Cup in June 2006.</span><span class="credits">Carolina Hurricanes</span> </div> </div> <div class="byline element-spacing-small"> By <a href="javascript:void(0);">CHIP ALEXANDER</a> </div> <div class="content-body"> <p> Early on the morning of June 19, 2006, Rod Brind’Amour slipped into his kids’ bedrooms to say goodbye before leaving for a long, very important work day. </p> <p> Skyler Brind’Amour, then 6, was roused from his sleep. “Dad,” he said, “you have to win.” </p> <p> If Rod Brind’Amour had a few knots in his stomach that morning, and he did, those five words caused another. </p> <p> Brind’Amour was the captain of the Carolina Hurricanes and the only thing lacking his career, at 35, was a Stanley Cup championship. It takes 16 wins to take the Cup and the Canes, on that June 19 morning, needed one more, having had a 3-1 series lead over the Edmonton Oilers in the Stanley Cup Final become a 3-3 stalemate, forcing a Game 7. </p> <p> Dad, you have to win. </p> <p> “It made you realize again we weren’t just playing for ourselves but for so many people,” Rod Brind’Amour said. </p> <p> Father and son would be together again June 19, late and on the ice after Game 7. The next morning, when Skyler Brind’Amour awoke, his father and the Stanley Cup were in his bedroom. </p> <div class="highline highline-quote" id="highline-quote-1"> <p> Now, you understand what it takes to really win, as you get older and watch these guys trying to do it. </p> <p> <span class="ng_highline_attrib">Skyler Brind’Amour</span> </p> </div> <p> Ten years later, Skyler Brind’Amour is 16. Sunday marks the 10th anniversary of the Canes winning the Cup and is Father’s Day, allowing father and son time to reflect on all that happened in the last decade as Skyler developed into a promising hockey player at the time his dad was retiring as a player and becoming an assistant coach for the Canes. </p> <p> “I think you realize now just how hard it was to win it,” Skyler said. “I have a different perspective now. Then, it was just go out and win the game. Now, you understand what it takes to really win, as you get older and watch these guys trying to do it. So, yes, there’s added respect in how they did it.” </p> <h3> Lead by example </h3> <p> Winning the Cup is a matter of endurance, perseverance, of being able to handle pain and injuries. It’s the ultimate grind, one Rod Brind’Amour once likened to climbing Mount Everest, knowing you can slip and fall at any point. </p> <p> Brind’Amour was the quintessential team captain, playing all the meaningful minutes, scoring critical goals, taking the important draws, being tough defensively. </p> <p> “The classic lead-by-example guy,” said forward Matt Cullen, a member of the Canes’ 2006 champs. “I don't know that I’ve ever played with anyone who worked harder than Roddy. The way he played that season and the way he led, it was impossible not to follow.” </p> <p> The Canes would not be denied in Game 7, not by the Oilers. Carolina won 3-1 and NHL commissioner Gary Bettman soon was presenting the Stanley Cup to Brind’Amour, who quickly snatched it and lifted it high, eyes closed, his face flush with victory. </p> <p> “That was something special,” Skyler Brind’Amour said. “The fans were cheering so loud. Seeing my Dad do that, then touching the Stanley Cup for the first time, was one of the coolest moments I’ve ever been a part of.” </p> <p> As he grew older, Skyler joined the Junior Hurricanes hockey program. He’s a center and he wears No. 17, the number his father wore, the one retired by the Canes. </p> <p> “He’s smart, got good hockey sense,” Rod said. “He’s not the best player. He’s not dominating. But he skates well and has put a lot of work in. </p> <p> “Hockey sense is one of the things you need to keep moving up. He has that. Now he has to put the other part to that, the physical part. He needs to be more aggressive, more assertive.” </p> <h3> Working hard </h3> <p> The Junior Hurricanes’ U16 AAA team played against some of the nation’s best and held its own. Rod Brind’Amour has served as a volunteer coach, at times using a practice routine similar to that of the Canes. </p> <p> “He wants us to succeed and he does push us,” Skyler said. </p> <p> Brind’Amour’s daughter, Briley, was a volleyball star for Cardinal Gibbons and is headed to James Madison. </p> <p> While the Brind’Amour name can xxxx doors in hockey, there’s also the expectation that son will be like father in terms of dedication and work ethic. </p> <p> “Once the doors are xxxx you have to make the most of it,” Rod Brind’Amour said. “He’s working hard. There’s pressure, for sure. It’s good for him. It’s a good to put pressure on yourself. </p> <p> “He’s been afforded a great opportunity his whole life. He’s been around this environment. Since he was 4 years old, he’s been in he locker room hanging out. He’s seen all the work the guys put in, to get here and to stay here. That’s been an important learning curve for him. </p> <p> “He’s got dreams like every kid. But you’ve got to go grab them.” </p> <h3> Michigan State </h3> <p> Skyler’s sports passion once included basketball, and at 6-foot-2 and 165 pounds he has a lanky basketball build. But after his freshman year of high school, he gave up hoops to focus solely on hockey. </p> <p> Skyler will be leaving home this year, attending South Kent (Conn.) School in the fall. The prep school has a strong hockey program, and Skyler said it will allow him to play 65 to 70 games. </p> <p> As for college, Skyler also has that decision made, committing to play at Michigan State, his father’s alma mater. </p> <p> “I visited a bunch of schools but felt comfortable with Michigan State and the coaching staff,” Skyler said. </p> <p> And, Skyler said, smiling, it was his choice. No parental pressure. </p> <p> “I just wanted him to experience the whole college thing,” Rod Brind’Amour said. “College hockey allows more of a slower development, buying you more time to learn the game.” </p> <p> Neither Brind’Amour stayed up to see the Pittsburgh Penguins celebrate their Stanley Cup victory this past week. There was Cullen, still playing at 39, celebrating with the Pens. There was former Canes general manager Jim Rutherford, now the Pens’ GM, holding up the Cup. </p> <p> Skyler said he was too tired. As for Rod … </p> <p> “When I was playing I never watched those (Cup celebrations) because that was what I wanted,” he said. “Now that I’ve had it, done it, I like to remember it only the way I remember it.” </p> </div> </div> <div class="col-md-4 col-sm-5 right-rail"> <div class="ad visible-lg visible-md"> <img src="http://www.tmarkart.com/codepen/images/300x600.jpg" /> </div> <div class="ad"> <img src="http://www.tmarkart.com/codepen/images/300x250.jpg" /> </div> <!------- More Stories List -------> <section class="headline-list element_spacing_large" id="more-stories-widget"> <h1 class="heading link element-spacing-small"> <a href="javascript:void(0);">Carolina Hurricanes</a> </h1> <article class="carolina_hurricanes media"> <div class="teaser"> <h2 class="title"> <a href="javascript:void(0);">Canes’ home opener set for Oct. 28</a> </h2> </div> </article> <article class="carolina_hurricanes media"> <div class="teaser"> <h2 class="title"> <a href="javascript:void(0);">Brind’Amour, a son and the Stanley Cup: ‘Dad, you have to win’	</a> </h2> </div> </article> <article class="carolina_hurricanes media"> <div class="teaser"> <h2 class="title"> <a href="javascript:void(0);">How Canes rebounded from worst game of playoffs to win Stanley Cup — DeCock	</a> </h2> </div> </article> <article class="carolina_hurricanes media"> <div class="teaser"> <h2 class="title"> <a href="javascript:void(0);">The man who nearly cost the Canes the Stanley Cup	</a> </h2> </div> </article> <article class="carolina_hurricanes media"> <div class="teaser"> <h2 class="title"> <a href="javascript:void(0);">With Ward return, Teravainen trade, Canes active early — DeCock</a> </h2> </div> </article> </section> <div class="ad"> <img src="http://www.tmarkart.com/codepen/images/300x250b.jpg" /> </div> </div> </div> <div class="clearfix"></div> <div class="ad element-spacing-medium"> <img src="http://www.tmarkart.com/codepen/images/300x250c.png" /> </div> <div class="ad element-spacing-medium visible-lg"> <img src="http://www.tmarkart.com/codepen/images/728x90b.jpg" /> </div> </section>
</header>
<footer></footer> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
</body>
</html>

Template - responsive story detail - Script Codes CSS Codes

.element-spacing-large { margin-bottom: 40px;
}
.element-spacing-medium { margin-bottom: 25px;
}
.element-spacing-small { margin-bottom: 15px !important;
}
/* ----- Member Center ----- */
#masthead-container { background: rgba(0, 0, 0, 0.8); margin-bottom: 20px; padding: 10px 0; position: relative;
}
#masthead-container #member-center { background: #ba2814; position: absolute; right: 0; top: 0;
}
#masthead-container #member-center a { color: #fff; display: block; padding: 3px 15px; text-decoration: none;
}
.branding { float: left;
}
.navigation { float: right; margin-top: 10px;
}
ul.nav-links { float: right; margin-bottom: 0;
}
ul.nav-links li { float: left; font-family: 'McClatchy Sans Cond', 'Roboto Condensed Medium', 'HelveticaNeue-CondensedBold', sans-serif; font-size: 16px; padding: 0 10px;
}
ul.nav-links li a { color: #fff; font-weight: 500;
}
/* ----- Ads ----- */
.ad { text-align: center; margin-bottom: 40px;
}
/* ----- Story Content ----- */
h1.heading { font-family: 'McClatchy Sans Cond', 'Roboto Condensed Medium', 'HelveticaNeue-CondensedBold', sans-serif; font-size: 16px; line-height: 1; text-transform: uppercase; background: #ba2814; color: #fff; border-radius: 5px; padding: 8px 8px 6px; min-width: 80px; display: inline-block; margin: 0; border-bottom: none; text-align: center; margin-right: 15px;
}
h1.heading a { color: #fff; text-decoration: none;
}
h1.title { font-family: Georgia,Times,erif; font-size: 35px; font-weight: normal; line-height: 1.3; margin: 10px 0 15px 0;
}
.byline { font-family: 'McClatchy Slab', Georgia, Times, 'Times New Roman', serif; margin-bottom: 15px; border-bottom: 3px solid #888; display: inline-block; padding-bottom: 3px; text-transform: uppercase;
}
.content-body { border-bottom: 3px solid #424242; margin-bottom: 40px; padding-bottom: 40px;
}
.content-body p { font-family: 'Lyon', Georgia, serif; font-size: 17px; line-height: 1.5; margin-bottom: 1em;
}
/* ----- Primary Asset ----- */
.current-caption { padding: 10px 0; min-height: 40px; -webkit-transform: scale3d(1, 1, 1);
}
/* ----- Highlight ----- */
.highline-quote { color: #ba2814; font-family: 'McClatchy Sans Cond', 'Roboto Condensed Medium', 'HelveticaNeue-CondensedBold', sans-serif; font-weight: 600; text-align: center; text-transform: uppercase; position: relative;
}
.highline { border-top: 2px dotted #ccc; border-bottom: 3px solid #888; margin: 40px 0; clear: both;
}
.highline-quote:before { content: "\201C"; font-family: 'McClatchy Slab', Georgia, Times, 'Times New Roman', serif; font-size: 60px; background-color: #fff; color: #000; position: absolute; line-height: 1; top: -10px; padding: 0 7px; max-height: 30px; left: 50%; margin-left: -20px;
}
.highline-quote p:first-child { margin-top: 20px;
}
.highline-quote p { margin: 0; font-size: 20px; line-height: 1.2; font-family: 'McClatchy Sans Cond', 'Roboto Condensed Medium', 'HelveticaNeue-CondensedBold', sans-serif !important;
}
.highline-quote .ng_highline_attrib { font-family: 'McClatchy Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; color: #000; text-transform: none; font-weight: normal; display: block; margin-top: 5px;
}
/* ----- Right Rail ----- */
#more-stories-widget { margin-bottom: 40px;
}
.headline-list article { border-bottom: 1px solid #dcdcdc; margin-bottom: 10px; padding-bottom: 10px; margin-top: 0;
}
.headline-list article:last-child { border-bottom: none;
}
.headline-list .title { font-size: 16px; font-family: 'McClatchy Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-weight: 500; margin: 5px 0;
}
.headline-list .title a { color: #000; text-decoration: none;
}
.headline-list .title a:hover { color: #0d76ba;
}
/* ----- Footer ----- */
footer { background: #424242; height: 300px;
}
@media screen and (min-width: 768px) { .navigation { margin-top: 25px; } h1.title { font-size: 40px; margin: 10px 0 20px 0; }
}
@media screen and (min-width: 992px) { h1.title { font-size: 48px; margin: 10px 0 25px 0; }
}
@media screen and (min-width: 1200px) { h1.title { font-size: 52px; margin: 10px 0 30px 0; }
}
Template - responsive story detail - Script Codes
Template - responsive story detail - Script Codes
Home Page Home
Developer Tom Markart
Username tmarkart
Uploaded October 18, 2022
Rating 3
Size 11,766 Kb
Views 22,264
Do you need developer help for Template - responsive story detail?

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!

Tom Markart (tmarkart) Script Codes
Name
CSS truncation with ellipsis
McClatchy svg logos
Pipleline Opportunities Email
Election Widget Combo
Story Detail 1.0
Story Card Expand Details
Story Detail 0.5
Story Detail 1.0 - related content - asset types - aspect ratio
MPP Contact Us
Story Detail 1.0b
Create amazing love letters 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!