Story Approval Page
How do I make an story approval page?
What is a story approval page? How do you make a story approval page? This script and codes were developed by Anthony P on 05 October 2022, Wednesday.
Story Approval Page - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Story Approval Page</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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> <nav class="navbar navbar-default"> <img src="https://www.zocle.com/assets/image/zocle-app-logo.png?v=3">
</nav>
<div class="container-fluid"> <div class="row"> <div class="col-md12 col-sm-12 col-xs-12"> <div class="submission-info well"> <p><span class="submitter-name">Anthony</span> submitted this Tweet to <span class="twitter-name">@Zocle</span> for your approval</p> <div class="panel panel-default user-note"> <div class="panel-body"> <strong>Anthony included this note:</strong> <p>I think this post would really drive users to use our new app!</p> </div> </div> <div class="time-sub"><span class="approval-label">Submitted:</span> Today at 6:13 PM</div> <div class="sched-sub"><span class="approval-label">Scheduled:</span> Post Instantly</div> </div> </div> </div> <div class="row"> <div class="col-md12 col-sm-12 col-xs-12"> <div class="tweet-container"> <img src="https://pbs.twimg.com/profile_images/572781579349397504/GU6yko5V_400x400.png" alt="avatar" class="avatar" /> <div class="push"> <div class="user"> <div class="user-string"><span class="name">Zocle</span><span class="username">@Zocle</span></div> </div> <blockquote class="tweet">How do you keep consumers engaged with your app once they've downloaded it? <span class="tag">#socialmedia</span> <img src="https://pbs.twimg.com/media/CYSeslfUEAAPoDl.jpg"></blockquote> </div> </div> </div> </div> <div class="row"> <div class="col-md12 col-sm-12 col-xs-12 action-buttons"> <button type="button" class="btn btn-success"><i class="fa fa-check-circle"></i> Approve</button> <button type="button" class="btn btn-warning"><i class="fa fa-share-square-o"></i> Send Back</button> <button type="button" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>
Story Approval Page - Script Codes CSS Codes
.navbar-default { background-color: #03A678; border: 0px; text-align: center; padding: 10px
}
.submission-info { margin-top: 10px; font-size: 14px; background-color: #DADFE1
}
.approval-label { color: #555; width: 70px; display: inline-block
}
.submitter-name { font-weight: bold
}
.twitter-name { font-weight: bold; color: #22A7F0
}
.time-sub { font-size: 13px; color: #C0392B; padding-bottom: 5px; border-top: 3px solid #dadfe1; padding-top: 10px
}
.sched-sub { font-size: 13px; color: #03A678;
}
.user-note strong { margin-bottom: 5px; display: block
}
/*Tweet*/
.tweet-container { position: relative; border: 2px solid #dadfe1; padding: 25px 25px 25px 60px; background-color: white; cursor: pointer; transition: all 0.4s; border-radius: 5px
}
.tweet-container:hover { border: 2px solid #2fc2ee;
}
.avatar { float: left; position: absolute; left: 20px; height: 40px; width: 40px; border-radius: 50%; transition: all 0.4s;
}
.avatar:hover { border-radius: 0px;
}
.tweet-time { float: right; color: #bababa; transition: all 0.4s; border-bottom: 1px solid white;
}
.tweet-time:hover { border-bottom: 1px solid #bababa;
}
.push { margin-left: 15px;
}
.user::after { clear: both; content: ""; display: table;
}
.name { font-weight: bold; transition: all 0.4s; border-bottom: 1px solid white; font-size: 15px
}
.name:hover { border-bottom: 1px solid #121212;
}
.username { font-weight: normal; color: #bababa; margin-left: 10px; border-bottom: 1px solid white; font-size: 13px
}
.tweet { margin: 20px 0; font-size: 16px; padding-right: 10px
}
blockquote { border: 0; margin: 0; padding: 0
}
.tweet img { max-width: 100%; margin-top: 15px
}
.at,
.tag { color: #2fc2ee; transition: all 0.4s; border-bottom: 2px solid white;
}
.at:hover,
.tag:hover { border-bottom: 2px solid #2fc2ee;
}
.action-buttons { margin-top: 20px
}
.action-buttons .btn { width: 75%; margin: 0 auto; display: block; margin-bottom: 20px
}
Developer | Anthony P |
Username | apolakos |
Uploaded | October 05, 2022 |
Rating | 3 |
Size | 2,855 Kb |
Views | 8,096 |
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!
Name | Size |
Promote Posts | 5,523 Kb |
A Pen by Anthony P | 19,467 Kb |
Logo | 2,115 Kb |
Material Design Lite components demo | 2,400 Kb |
Responive Youtube Video | 1,550 Kb |
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!
Name | Username | Size |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Blog Concept - Single Post | Marionebl | 9,603 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Particle Motion trajectories | Sniejadlik | 5,899 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
Sticky Navbar | Phantomesse | 5,106 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
This in constructor context | _shree33 | 1,718 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!