Story Roll

Developer
Vanessa Vevoda
Size
7,879 Kb
Views
26,312
  1. Story Roll Previews
  2. Story Roll HTML Codes
  3. Story Roll CSS Codes

How do I make an story roll?

What is a story roll? How do you make a story roll? This script and codes were developed by Vanessa Vevoda on 12 September 2022, Monday.

Story Roll Previews
IQ Test

Story Roll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Story Roll</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" id="tweet-quote" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-50 80 100 40" style="enable-background:new -50 80 100 40; display: none;" xml:space="preserve">
<g id="twitter_x5F_text" style="enable-background:new ;">	<path style="fill:#2AA9E0;" d="M-16.819,105.699c-0.495,0-0.857-0.101-1.086-0.301c-0.229-0.2-0.344-0.488-0.344-0.864	c0-0.119,0.008-0.232,0.023-0.34c0.016-0.106,0.037-0.228,0.062-0.363l1.219-5.222h-1.398l0.165-0.711h1.427l0.545-2.291h1.406	l-0.529,2.291h2.176l-0.163,0.711h-2.158l-1.009,4.307c-0.047,0.198-0.086,0.39-0.117,0.575c-0.031,0.185-0.047,0.343-0.047,0.473	c0,0.287,0.072,0.496,0.215,0.629c0.144,0.133,0.403,0.2,0.778,0.2c0.135,0,0.326-0.018,0.571-0.051	c0.245-0.034,0.435-0.077,0.571-0.13l-0.133,0.571c-0.365,0.141-0.709,0.262-1.032,0.363S-16.382,105.699-16.819,105.699z"/>	<path style="fill:#2AA9E0;" d="M-0.958,99.087c0,0.819-0.117,1.63-0.352,2.433c-0.234,0.804-0.555,1.511-0.961,2.121	c-0.453,0.678-0.967,1.202-1.54,1.572s-1.196,0.556-1.868,0.556c-0.49,0-0.942-0.136-1.356-0.406	c-0.414-0.271-0.692-0.645-0.833-1.119c-0.188,0.183-0.361,0.352-0.52,0.509c-0.159,0.156-0.366,0.317-0.621,0.484	s-0.489,0.295-0.7,0.384s-0.481,0.133-0.809,0.133c-0.396,0-0.723-0.062-0.981-0.184c-0.258-0.123-0.465-0.283-0.622-0.481	c-0.146-0.188-0.25-0.4-0.313-0.638c-0.062-0.237-0.094-0.486-0.094-0.747c0-0.1,0.012-0.225,0.035-0.376s0.048-0.282,0.075-0.392	l0.664-2.473c0.062-0.235,0.108-0.448,0.137-0.642c0.029-0.193,0.043-0.353,0.043-0.478c0-0.292-0.048-0.486-0.145-0.583	c-0.096-0.097-0.293-0.145-0.59-0.145c-0.115,0-0.261,0.022-0.438,0.066c-0.177,0.043-0.315,0.079-0.414,0.106l0.117-0.504	c0.405-0.184,0.763-0.323,1.072-0.417c0.309-0.095,0.558-0.142,0.745-0.142c0.416,0,0.722,0.098,0.917,0.293	c0.195,0.196,0.292,0.474,0.292,0.833c0,0.094-0.011,0.222-0.031,0.384c-0.021,0.162-0.052,0.323-0.093,0.485l-0.723,2.888	c-0.046,0.192-0.085,0.391-0.117,0.595c-0.031,0.203-0.047,0.354-0.047,0.453c0,0.392,0.078,0.688,0.235,0.889	c0.156,0.201,0.419,0.302,0.79,0.302c0.329,0,0.673-0.091,1.033-0.271c0.359-0.18,0.688-0.442,0.985-0.787l1.384-5.939l1.361-0.094	l0.094,0.118l-1.104,4.766c-0.037,0.156-0.074,0.348-0.114,0.575c-0.039,0.227-0.059,0.369-0.059,0.426	c0,0.287,0.046,0.515,0.137,0.682c0.091,0.167,0.207,0.289,0.348,0.367c0.135,0.079,0.276,0.127,0.422,0.146	c0.146,0.018,0.287,0.027,0.422,0.027c0.354,0,0.718-0.112,1.091-0.337c0.373-0.225,0.697-0.517,0.973-0.877	c0.308-0.401,0.55-0.846,0.727-1.334c0.177-0.487,0.266-1.013,0.266-1.577c0-0.312-0.043-0.554-0.129-0.724	c-0.086-0.169-0.181-0.316-0.285-0.442c-0.104-0.13-0.199-0.268-0.286-0.411c-0.086-0.144-0.129-0.346-0.129-0.607	c0-0.297,0.099-0.524,0.297-0.681c0.198-0.156,0.406-0.235,0.625-0.235c0.308,0,0.549,0.124,0.723,0.372	C-1.045,98.259-0.958,98.618-0.958,99.087z"/>	<path style="fill:#2AA9E0;" d="M6.772,99.269c0,0.553-0.173,1.028-0.52,1.425s-0.851,0.713-1.513,0.947	c-0.484,0.178-0.975,0.321-1.47,0.431c-0.495,0.11-1.042,0.201-1.642,0.274c0,0.823,0.152,1.453,0.458,1.888	c0.305,0.436,0.751,0.653,1.34,0.653c0.521,0,0.981-0.131,1.38-0.392c0.399-0.26,0.791-0.648,1.177-1.164l0.445,0.328	c-0.417,0.636-0.938,1.144-1.563,1.524c-0.625,0.38-1.273,0.57-1.946,0.57c-0.922,0-1.627-0.258-2.114-0.774	c-0.488-0.517-0.73-1.249-0.73-2.199c0-0.657,0.102-1.284,0.309-1.882c0.205-0.597,0.506-1.143,0.902-1.639	c0.386-0.485,0.858-0.876,1.419-1.173s1.179-0.446,1.856-0.446c0.751,0,1.307,0.153,1.669,0.458	C6.592,98.403,6.772,98.793,6.772,99.269z M5.335,99.076c0-0.203-0.029-0.363-0.086-0.479c-0.058-0.117-0.131-0.204-0.22-0.261	c-0.094-0.062-0.192-0.102-0.297-0.117s-0.211-0.023-0.32-0.023c-0.625,0-1.202,0.343-1.731,1.03s-0.864,1.542-1.005,2.566	c0.365-0.053,0.776-0.126,1.235-0.223c0.459-0.096,0.839-0.222,1.142-0.378c0.433-0.224,0.754-0.512,0.965-0.862	C5.229,99.977,5.335,99.56,5.335,99.076z"/>	<path style="fill:#2AA9E0;" d="M14.324,99.269c0,0.553-0.173,1.028-0.52,1.425s-0.851,0.713-1.513,0.947	c-0.484,0.178-0.975,0.321-1.47,0.431c-0.495,0.11-1.042,0.201-1.642,0.274c0,0.823,0.152,1.453,0.458,1.888	c0.305,0.436,0.751,0.653,1.34,0.653c0.521,0,0.981-0.131,1.38-0.392c0.399-0.26,0.791-0.648,1.177-1.164l0.445,0.328	c-0.417,0.636-0.938,1.144-1.563,1.524c-0.625,0.38-1.273,0.57-1.946,0.57c-0.922,0-1.627-0.258-2.114-0.774	s-0.731-1.249-0.731-2.199c0-0.657,0.104-1.284,0.31-1.882c0.205-0.597,0.506-1.143,0.902-1.639	c0.386-0.485,0.858-0.876,1.419-1.173s1.179-0.446,1.856-0.446c0.751,0,1.307,0.153,1.669,0.458	C14.144,98.403,14.324,98.793,14.324,99.269z M12.887,99.076c0-0.203-0.029-0.363-0.086-0.479c-0.058-0.117-0.131-0.204-0.22-0.261	c-0.094-0.062-0.192-0.102-0.297-0.117s-0.211-0.023-0.32-0.023c-0.625,0-1.202,0.343-1.731,1.03s-0.864,1.542-1.005,2.566	c0.365-0.053,0.776-0.126,1.235-0.223c0.459-0.096,0.839-0.222,1.142-0.378c0.433-0.224,0.754-0.512,0.965-0.862	C12.781,99.977,12.887,99.56,12.887,99.076z"/>	<path style="fill:#2AA9E0;" d="M17.005,105.699c-0.495,0-0.856-0.101-1.086-0.301s-0.344-0.488-0.344-0.864	c0-0.119,0.008-0.232,0.023-0.34c0.016-0.106,0.036-0.228,0.062-0.363l1.218-5.222h-1.397l0.164-0.711h1.428l0.545-2.291h1.406	l-0.529,2.291h2.177l-0.164,0.711H18.35l-1.009,4.307c-0.047,0.198-0.086,0.39-0.117,0.575c-0.031,0.185-0.047,0.343-0.047,0.473	c0,0.287,0.071,0.496,0.215,0.629s0.403,0.2,0.778,0.2c0.136,0,0.326-0.018,0.57-0.051c0.245-0.034,0.436-0.077,0.571-0.13	l-0.133,0.571c-0.365,0.141-0.709,0.262-1.032,0.363S17.443,105.699,17.005,105.699z"/>	<path style="fill:#2AA9E0;" d="M26.425,105.699c-0.495,0-0.856-0.101-1.086-0.301s-0.344-0.488-0.344-0.864	c0-0.119,0.008-0.232,0.023-0.34c0.016-0.106,0.036-0.228,0.062-0.363l1.218-5.222h-1.397l0.164-0.711h1.428l0.545-2.291h1.406	l-0.529,2.291h2.177l-0.164,0.711H27.77l-1.009,4.307c-0.047,0.198-0.086,0.39-0.117,0.575c-0.031,0.185-0.047,0.343-0.047,0.473	c0,0.287,0.071,0.496,0.215,0.629s0.403,0.2,0.778,0.2c0.136,0,0.326-0.018,0.57-0.051c0.245-0.034,0.436-0.077,0.571-0.13	l-0.133,0.571c-0.365,0.141-0.709,0.262-1.032,0.363S26.863,105.699,26.425,105.699z"/>	<path style="fill:#2AA9E0;" d="M38.159,104.628l-0.117,0.501c-0.47,0.188-0.835,0.324-1.096,0.41s-0.524,0.129-0.79,0.129	c-0.417,0-0.73-0.108-0.939-0.324c-0.208-0.217-0.312-0.484-0.312-0.803c0-0.114,0.011-0.241,0.031-0.379	c0.021-0.139,0.055-0.302,0.102-0.489l0.766-2.919c0.058-0.225,0.103-0.428,0.137-0.611c0.034-0.182,0.051-0.328,0.051-0.438	c0-0.349-0.083-0.626-0.248-0.829c-0.166-0.204-0.412-0.306-0.737-0.306c-0.331,0-0.689,0.107-1.074,0.321	c-0.386,0.214-0.751,0.514-1.098,0.9l-1.327,5.744h-1.461l2.327-10.067c0.026-0.12,0.049-0.222,0.066-0.305	c0.019-0.083,0.027-0.172,0.027-0.266c0-0.188-0.031-0.333-0.094-0.434s-0.151-0.179-0.267-0.231	c-0.1-0.047-0.235-0.078-0.408-0.094s-0.346-0.034-0.519-0.055l0.109-0.477l2.909-0.172l0.078,0.117l-1.249,5.403h0.031	c0.534-0.433,1.012-0.76,1.433-0.982c0.42-0.222,0.897-0.333,1.433-0.333c0.498,0,0.887,0.145,1.167,0.435s0.421,0.669,0.421,1.139	c0,0.094-0.015,0.261-0.043,0.501c-0.029,0.24-0.074,0.478-0.137,0.712l-0.658,2.512c-0.041,0.167-0.086,0.359-0.133,0.575	c-0.047,0.217-0.07,0.385-0.07,0.505c0,0.298,0.065,0.5,0.195,0.606c0.131,0.107,0.345,0.161,0.642,0.161	c0.1,0,0.241-0.018,0.427-0.051C37.918,104.7,38.061,104.665,38.159,104.628z"/>	<path style="fill:#2AA9E0;" d="M42.928,104.683l-0.117,0.501c-0.479,0.192-0.863,0.327-1.149,0.402	c-0.287,0.075-0.531,0.113-0.735,0.113c-0.417,0-0.729-0.108-0.938-0.324c-0.209-0.217-0.312-0.484-0.312-0.803	c0-0.12,0.01-0.245,0.031-0.375c0.021-0.131,0.055-0.295,0.102-0.493l0.825-3.326c0.042-0.183,0.082-0.378,0.121-0.587	c0.039-0.209,0.059-0.386,0.059-0.532c0-0.292-0.048-0.486-0.145-0.583c-0.096-0.097-0.292-0.145-0.589-0.145	c-0.114,0-0.267,0.019-0.456,0.055c-0.19,0.037-0.334,0.068-0.434,0.094l0.117-0.5c0.406-0.183,0.771-0.318,1.094-0.407	c0.323-0.088,0.579-0.133,0.767-0.133c0.427,0,0.737,0.102,0.93,0.305c0.192,0.204,0.289,0.478,0.289,0.822	c0,0.094-0.011,0.222-0.031,0.384c-0.021,0.162-0.052,0.323-0.094,0.485l-0.831,3.326c-0.052,0.204-0.097,0.403-0.136,0.599	c-0.039,0.196-0.059,0.356-0.059,0.481c0,0.298,0.066,0.501,0.199,0.61c0.132,0.11,0.347,0.165,0.643,0.165	c0.099,0,0.24-0.014,0.425-0.039C42.688,104.751,42.829,104.72,42.928,104.683z M43.482,94.685c0,0.297-0.097,0.556-0.289,0.778	c-0.193,0.221-0.433,0.332-0.72,0.332c-0.266,0-0.495-0.105-0.688-0.316c-0.193-0.211-0.289-0.452-0.289-0.723	c0-0.287,0.096-0.537,0.289-0.75c0.192-0.214,0.422-0.321,0.688-0.321c0.298,0,0.54,0.101,0.728,0.301S43.482,94.419,43.482,94.685	z"/>	<path style="fill:#2AA9E0;" d="M46.211,105.77c-0.771,0-1.414-0.137-1.927-0.41c-0.514-0.273-0.771-0.632-0.771-1.075	c0-0.208,0.075-0.403,0.227-0.586s0.336-0.273,0.556-0.273c0.208,0,0.376,0.048,0.504,0.145s0.228,0.21,0.301,0.34	c0.078,0.136,0.147,0.297,0.207,0.484s0.111,0.342,0.152,0.462c0.078,0.088,0.187,0.17,0.324,0.246	c0.139,0.075,0.338,0.113,0.599,0.113c0.562,0,0.988-0.142,1.278-0.424c0.289-0.282,0.434-0.663,0.434-1.144	c0-0.355-0.136-0.639-0.406-0.85c-0.271-0.212-0.676-0.406-1.212-0.584c-0.193-0.062-0.42-0.158-0.681-0.286	c-0.26-0.128-0.469-0.265-0.625-0.411c-0.188-0.167-0.339-0.365-0.453-0.595c-0.115-0.23-0.172-0.502-0.172-0.814	c0-0.669,0.298-1.247,0.895-1.735s1.33-0.732,2.201-0.732c0.203,0,0.422,0.011,0.656,0.031c0.234,0.021,0.492,0.078,0.774,0.172	c0.244,0.083,0.453,0.208,0.625,0.372s0.258,0.376,0.258,0.637c0,0.213-0.071,0.408-0.215,0.582	c-0.144,0.175-0.332,0.262-0.566,0.262c-0.193,0-0.353-0.042-0.478-0.125c-0.125-0.083-0.229-0.196-0.312-0.336	s-0.151-0.292-0.203-0.453s-0.109-0.321-0.172-0.477c-0.1-0.042-0.188-0.07-0.266-0.086s-0.183-0.023-0.312-0.023	c-0.512,0-0.898,0.137-1.161,0.412c-0.264,0.274-0.395,0.6-0.395,0.976c0,0.366,0.118,0.641,0.355,0.826s0.629,0.378,1.176,0.576	c0.709,0.256,1.224,0.548,1.544,0.877c0.321,0.329,0.481,0.736,0.481,1.222c0,0.794-0.305,1.44-0.915,1.938	C47.907,105.521,47.139,105.77,46.211,105.77z"/>
</g>
<g id="bird_1_">	<path id="bird" style="fill:#2AA9E0;" d="M-24.421,92.052c-0.941,0.417-1.952,0.699-3.014,0.826	c1.083-0.649,1.916-1.677,2.307-2.903c-1.014,0.601-2.137,1.038-3.333,1.274c-0.957-1.02-2.321-1.657-3.831-1.657	c-2.898,0-5.248,2.35-5.248,5.248c0,0.411,0.046,0.812,0.136,1.196c-4.361-0.22-8.228-2.309-10.816-5.484	c-0.452,0.775-0.711,1.677-0.711,2.638c0,1.821,0.927,3.427,2.335,4.368c-0.86-0.027-1.669-0.263-2.377-0.656	c-0.001,0.022-0.001,0.044-0.001,0.067c0,2.543,1.809,4.663,4.21,5.145c-0.44,0.12-0.904,0.184-1.382,0.184	c-0.338,0-0.667-0.033-0.987-0.094c0.668,2.085,2.606,3.602,4.903,3.644c-1.796,1.408-4.058,2.247-6.518,2.247	c-0.423,0-0.841-0.025-1.251-0.074c2.322,1.489,5.081,2.358,8.045,2.358c9.653,0,14.931-7.997,14.931-14.932	c0-0.228-0.005-0.454-0.015-0.679C-26.014,94.028-25.125,93.104-24.421,92.052z"/>
</g>
</svg>
<header style="text-align:center;">	<h1>Headline</h1>	<p>#blah</p>
</header>
<section class="left-col-container">	<article class="left-col-feature">	<figure class="left-col-archived-img-container">	<img class="img-crop" src="https://static.samaritanspurse.org.s3.amazonaws.com/occ/images/occ-shoebox-stories/article-cover/1540US-A-024-article.jpg" />	</figure>	<div class="left-col-copy">	<header>	<h2>Alex</h2>	<h2>-and-</h2>	<h3>A Candy Cane</h3>	<div class="twitter-feed">
<a target="_blank" onclick="ga('send', 'event', 'Mothers-Day-LP', 'pull-quote-1');return true;" href="https://twitter.com/intent/tweet?url=http://www.samaritanspurse.org/mothers&text=Alex%20and%20the%20Candy%20Cane%20via%20@OCCShoeboxes&hashtags=PackShoeboxes" style="text-decoration:none;">	<svg id="tweet-quote" viewBox="-50 80 100 40" preserveAspectRatio="xMinYMid meet">	<use xlink:href="#twitter_x5F_text" />	<use xlink:href="#bird_1_" />	</svg>	</a></div>	<h4>A small candy cane brought a big smile when Alex received a shoebox gift in an orphanage following the Rwandan genocide.</h4>	</header>	<summary>Bacon ipsum dolor amet corned beef pork loin rump pancetta pig cow, chuck ball tip tri-tip tongue prosciutto ground round fatback shankle meatball. Tail short loin hamburger, cupim biltong t-bone porchetta tongue kielbasa jerky corned beef ham hock shankle shank.</summary>	<aside class="left-col-feature-link">	<a href="#">Continue reading Daniella's story...</a>	</aside>	</div>	</article>
</section>
<section class="right-col-archived">	<ul>	<li class="story-container-shape">	<figure class="right-col-archived-img-container">	<img>	</figure>	<header>	Headline Here Here Too!	</header>	<date></date>	<summary>	Lorum ipsum blah blah blah. More words go here. Then even more words will follow. Lorum ipsum blah blah blah. More words go here. Then even more words will follow.	</summary>	</li>	<li class="story-container-shape">	<figure class="right-col-archived-img-container">	<img>	</figure>	<header>	Headline Here And Here And Here Too!	</header>	<date></date>	<summary>	Lorum ipsum blah blah blah. More words go here. Then even more words will follow.	</summary>	</li>	<li class="story-container-shape">	<figure class="right-col-archived-img-container">	<img>	</figure>	<header>	Headline Here And Here And Here Too!	</header>	<date></date>	<summary>	Lorum ipsum blah blah blah. More words go here. Then even more words will follow. Lorum ipsum blah blah blah. More words go here. Then even more words will follow. Lorum ipsum blah blah blah. More words go here. Then even more words will follow.	</summary>	</li>	<li class="story-container-shape">	<figure class="right-col-archived-img-container">	<img>	</figure>	<header>	Headline Here Here Too!	</header>	<date></date>	<summary>	Lorum ipsum blah blah blah. More words go here. Then even more words will follow. Lorum ipsum blah blah blah. More words go here. Then even more words will follow.	</summary>	</li>	<li class="story-container-shape">	<figure class="right-col-archived-img-container">	<img>	</figure>	<header>	Headline Here And Here And Here Too!	</header>	<date></date>	<summary>	Lorum ipsum blah blah blah. More words go here. Then even more words will follow.	</summary>	</li>	<li class="story-container-shape">	<figure class="right-col-archived-img-container">	<img>	</figure>	<header>	Headline Here And Here And Here Too!	</header>	<date></date>	<summary>	Lorum ipsum blah blah blah. More words go here. Then even more words will follow.	</summary>	</li>
</section>
</body>
</html>

Story Roll - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
/* /////// BODY AND CONTAINERS /////// */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {	vertical-align: baseline;	font-size: 100%;	margin: 0 auto; padding: 0; border: 0;
}
html {	background-color: #eee;
}
body {	font-family: 'Open Sans', Arial, sans-serif;	-webkit-font-smoothing: antialiased; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out;	max-width: 1200px;	height: 1700px;	background-color: #fff;	box-sizing: border-box;	border: 1px solid #ccc;	position: relative;	margin: 20px auto;
}
a {	text-decoration: none !important;
}
div, ul {	display: block;
}
li {	list-style-type: none !important;	display: inline-block;
}
li:hover { box-shadow: 0 4px 11px 2px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 4px 11px 2px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 4px 11px 2px rgba(0, 0, 0, 0.25);
}
/* ////////////// SVG IMAGES //////////////*/
div.twitter-feed {	text-align: center;	width: 100px;	height: 40px;	cursor: pointer;	padding-top: 10px;
}
.left-col-container {	width: 80%;	margin: 40px auto 20px;
}
.left-col-feature {	-webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; -ms-transition: all .4s ease; transition: all .4s ease;	-moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20px 0 0; border-radius: 0 20px; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);	border-bottom: 3px solid #009348; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; -ms-transition: all .4s ease-out; transition: all .4s ease-out; overflow: hidden;
}
.left-col-feature:hover {	-webkit-transform: sclae(1.1);	-moz-transform: scale(1.1);	-o-transform: scale(1.1);	-ms-transform: scale(1.1);	transform: scale(1.1);	box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.15);
}
.left-col-archived-img-container {	width: 53%;	height:100%;	margin: 10px;	float: left;	overflow: hidden;
}
.left-col-archived-img-container .img-crop {
margin: 0 -20%;
}
.left-col-copy {	margin: 50px auto 20px;	margin-right: 3%;	width: 40%;	display: inline-block;	float: right;
}
.left-col-copy header h2 {	text-align: center;	font-weight: 600;	line-height: 1.125em;	letter-spacing: -1px;	font-size: 4em;	-webkit-font-smoothing: antialiased;	margin: 0 auto;	-webkit-margin-before: 0; -webkit-margin-after: 0;	width: 80%;	padding-bottom: 0;
}
.left-col-copy header h2:last-of-type {	text-align: center;	font-weight: 300;	line-height: .625em;	letter-spacing: -1px;	font-size: 2em;	z-index: 1000;	-webkit-font-smoothing: antialiased;	margin: 0 auto;	-webkit-margin-before: 0; -webkit-margin-after: 0;	width: 80%;	padding-bottom: 0;	color: rgba(0, 0, 0, .25);
}
.left-col-copy header h3 {	text-align: center;	font-weight: 300;	line-height: 1.125em;	letter-spacing: -1px;	font-size: 3em;	-webkit-font-smoothing: antialiased;	margin: 0 auto;	-webkit-margin-before: 0; -webkit-margin-after: 0;	width: 80%;	padding-bottom: 0;
}
.left-col-copy header h4 {	color: #009348;	width: 90%;	text-align: center;	font-weight: 400;	font-size: 1.25em;	line-height: 1.45em;	font-style: italic;	margin: 0 auto;	-webkit-margin-before: 0; -webkit-margin-after: 1em;	padding: 18px;	border-bottom: 9px solid #009348;
}
.left-col-copy summary {	text-align: left;	font-weight: 400;	font-size: 1.125em;	margin: 0 10px 10px 20px;	padding: 10px;	/*border-bottom: 1px solid #eee;*/
}
.left-col-feature-link {	font-size: .8125em;	text-align: right;	float: right;	padding: 10px 18px;	margin-bottom: 10px;
}
.left-col-feature-link a {	color: #009348;	margin: 10px;	-webkit-transition: all .3s ease;	-moz-transition: all .3s ease;	transition: all .3s ease;
}
.left-col-feature-link a:hover, .left-col-feature-link a:active {	-webkit-transform: scale(1.05);	transform: scale(1.05);	background-color: #009348;	-webkit-border-radius: 8px;	-moz-border-radius: 8px;	border-radius: 8px;	padding: 8px 18px;	border: 1px solid #009348;	color: #fff;	font-weight: 600;	font-size: 1em;	cursor: pointer;
}
/* ////////////// RIGHT COLUMN //////////////*/
.right-col-archived {	width: 98%;	margin: 0 auto;	margin-top: 5%;	text-align: center;
}
.story-container-shape {	text-align: left;	vertical-align: top;	position: relative; overflow: hidden; margin: 20px auto; padding: 20px; width: 22%; margin-right: 1%;	margin-left: 1%; background: #fff;	border-top: 3px solid #009348; z-index: 1; -moz-border-radius: 0 0 20px 0; -webkit-border-radius: 0 0 20px 0; border-radius: 0 0 20px 0; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15); -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; -ms-transition: all .4s ease-out; transition: all .4s ease-out; overflow: hidden;
}
.story-container-shape:hover { box-shadow: 0 4px 11px 2px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 4px 11px 2px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 4px 11px 2px rgba(0, 0, 0, 0.25);
}
.story-container-shape::after {	content:"\27BA"; padding: 0 15px; float: right;	color: #009348;
}
.story-container-shape:hover::after {	cursor:pointer;
}
.right-col-archived-img-container {	width: 98%;	height: 200px;	margin: 1% auto;	border: 1px solid #ddd;
}
.story-container-shape header {	font-size: 20px;	font-weight: 600;	letter-spacing: -.5px;	line-height: 26px;	padding: 20px 0 10px;
}
.story-container-shape summary {	vertical-align: baseline;
}
@media screen and (max-width: 900px) {	body {	width: 100%;	margin: 0 auto;	height: auto;	}	.story-container-shape {	text-align: left;	vertical-align: top;	position: relative;	overflow: visible;	margin: 20px 2%;	padding: 20px;	width: 33%;	}
}
@media screen and (max-width: 750px) {
.left-col-container {	width: 95%;	margin: 20px auto 20px;
}
.story-container-shape { margin: 20px 2% !important; padding: 20px !important; width: 90%; overflow: visible;
}
Story Roll - Script Codes
Story Roll - Script Codes
Home Page Home
Developer Vanessa Vevoda
Username vanessav
Uploaded September 12, 2022
Rating 3
Size 7,879 Kb
Views 26,312
Do you need developer help for Story Roll?

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!

Vanessa Vevoda (vanessav) Script Codes
Name
CSS Button with Transitions
Fundraising FlexBox-OotB
My Own 3-col CSS
Design System for OCC
Volunteer Page Build P2
Fundraising Category Onboard Rebuild w FlexBox
V1 Fundraising Category Wires
Fundraising Landing Page w Flexbox
Fundraising FlexBox-Athletic Events
Volunteer Page Build V3
Create amazing captions 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!