<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<div class="wrapper">
<div class="page-header">
<h1>Account Suspended Templates</h1>
<p>Professional HTML & CSS templates for account suspension pages</p>
</div>
<div class="templates-grid">
<!-- Template 1: Professional -->
<div class="template template-1">
<div class="icon-wrapper">
<ion-icon name="ban-outline"></ion-icon>
</div>
<h1>Account Suspended</h1>
<span class="status-badge">⚠️ SUSPENDED</span>
<p>Your account has been temporarily suspended due to a violation of our Terms of Service.</p>
<div class="reason-box">
<h3>Reason for Suspension:</h3>
<p>Multiple reports of suspicious activity detected on your account.</p>
</div>
<p>If you believe this is an error, please contact our support team to appeal this decision.</p>
<div class="button-group">
<a href="#" class="btn btn-primary">
<ion-icon name="mail-outline"></ion-icon>
Contact Support
</a>
<a href="#" class="btn btn-secondary">
<ion-icon name="document-text-outline"></ion-icon>
View Terms
</a>
</div>
</div>
<!-- Template 2: Minimal Split -->
<div class="template template-2">
<div class="left-section">
<ion-icon name="lock-closed-outline"></ion-icon>
<h1>Access Restricted</h1>
<p>Your account access has been suspended. Please review the details and take appropriate action.</p>
</div>
<div class="right-section">
<div class="info-item">
<h3>Account Status</h3>
<p>Suspended</p>
</div>
<div class="info-item">
<h3>Suspension Date</h3>
<p>November 11, 2025</p>
</div>
<div class="info-item">
<h3>Reason</h3>
<p>Terms of Service Violation</p>
</div>
<div class="info-item">
<h3>Case ID</h3>
<p>#SUS-2025-1234</p>
</div>
<div class="action-links">
<a href="#">→ Submit an Appeal</a>
<a href="#">→ Contact Support Team</a>
<a href="#">→ Read Our Policies</a>
</div>
</div>
</div>
<!-- Template 3: Modern Gradient -->
<div class="template template-3">
<div class="content">
<div class="warning-banner">
<ion-icon name="alert-circle-outline"></ion-icon>
<h1>Account Suspended</h1>
<p>Immediate action required</p>
</div>
<div class="details-card">
<h2>Suspension Details</h2>
<ul>
<li>
<ion-icon name="calendar-outline"></ion-icon>
Suspended on: November 11, 2025
</li>
<li>
<ion-icon name="time-outline"></ion-icon>
Duration: Pending review
</li>
<li>
<ion-icon name="warning-outline"></ion-icon>
Violation: Policy breach detected
</li>
<li>
<ion-icon name="shield-checkmark-outline"></ion-icon>
Status: Under investigation
</li>
</ul>
</div>
<div class="button-group">
<a href="#" class="btn btn-primary">
<ion-icon name="chatbubbles-outline"></ion-icon>
Appeal Decision
</a>
<a href="#" class="btn btn-secondary">
<ion-icon name="help-circle-outline"></ion-icon>
Get Help
</a>
</div>
</div>
</div>
<!-- Template 4: Card with Steps -->
<div class="template template-4">
<div class="alert-box">
<ion-icon name="stop-circle-outline"></ion-icon>
<div>
<h2>Account Suspended</h2>
<p>Your account has been suspended due to unusual activity</p>
</div>
</div>
<div class="content-section">
<h3>What This Means</h3>
<p>Your account access has been temporarily restricted while we review recent activity. You will not be able to access any services until this matter is resolved.</p>
</div>
<div class="content-section">
<h3>Next Steps to Resolve</h3>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<h4>Review the Suspension Notice</h4>
<p>Check your email for detailed information about why your account was suspended.</p>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<h4>Gather Required Information</h4>
<p>Prepare any documentation that may help your case.</p>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<h4>Submit an Appeal</h4>
<p>Contact our support team to appeal the suspension decision.</p>
</div>
</div>
</div>
</div>
<div class="button-group">
<a href="#" class="btn btn-primary">
<ion-icon name="create-outline"></ion-icon>
Submit Appeal
</a>
<a href="#" class="btn btn-secondary">
<ion-icon name="book-outline"></ion-icon>
View Guidelines
</a>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 40px 20px;
}
.wrapper {
max-width: 1400px;
margin: 0 auto;
}
.page-header {
text-align: center;
color: white;
margin-bottom: 40px;
}
.page-header h1 {
font-size: 36px;
margin-bottom: 10px;
}
.page-header p {
font-size: 16px;
opacity: 0.9;
}
.templates-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 40px;
}
/* Template Container */
.template {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
/* Template 1: Professional */
.template-1 {
text-align: center;
padding: 60px 40px;
}
.template-1 .icon-wrapper {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
border-radius: 50%;
margin: 0 auto 30px;
display: flex;
align-items: center;
justify-content: center;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.template-1 .icon-wrapper ion-icon {
font-size: 64px;
color: white;
}
.template-1 h1 {
font-size: 32px;
color: #333;
margin-bottom: 15px;
}
.template-1 .status-badge {
display: inline-block;
background: #fff3cd;
color: #856404;
padding: 8px 20px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}
.template-1 p {
color: #666;
font-size: 16px;
line-height: 1.8;
margin-bottom: 15px;
}
.template-1 .reason-box {
background: #f8f9fa;
padding: 20px;
border-radius: 12px;
margin: 30px 0;
border-left: 4px solid #fc4a1a;
}
.template-1 .reason-box h3 {
font-size: 16px;
color: #333;
margin-bottom: 10px;
}
.template-1 .reason-box p {
font-size: 14px;
margin: 0;
}
.template-1 .button-group {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
margin-top: 30px;
}
.btn {
padding: 14px 28px;
border-radius: 50px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn-primary {
background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(252, 74, 26, 0.4);
}
.btn-secondary {
background: white;
color: #333;
border: 2px solid #e0e0e0;
}
.btn-secondary:hover {
border-color: #999;
}
/* Template 2: Minimal */
.template-2 {
display: flex;
min-height: 500px;
}
.template-2 .left-section {
flex: 1;
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
color: white;
}
.template-2 .left-section ion-icon {
font-size: 80px;
margin-bottom: 30px;
}
.template-2 .left-section h1 {
font-size: 36px;
margin-bottom: 15px;
}
.template-2 .left-section p {
font-size: 16px;
opacity: 0.95;
line-height: 1.6;
}
.template-2 .right-section {
flex: 1;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.template-2 .info-item {
margin-bottom: 25px;
}
.template-2 .info-item h3 {
font-size: 14px;
color: #999;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.template-2 .info-item p {
font-size: 16px;
color: #333;
font-weight: 600;
}
.template-2 .action-links {
margin-top: 30px;
}
.template-2 .action-links a {
display: block;
color: #e74c3c;
text-decoration: none;
font-weight: 600;
margin-bottom: 12px;
font-size: 15px;
}
.template-2 .action-links a:hover {
text-decoration: underline;
}
/* Template 3: Modern */
.template-3 {
position: relative;
overflow: hidden;
}
.template-3::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.template-3 .content {
position: relative;
z-index: 1;
padding: 60px 40px;
text-align: center;
}
.template-3 .warning-banner {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px;
border-radius: 20px;
margin-bottom: 30px;
}
.template-3 .warning-banner ion-icon {
font-size: 72px;
margin-bottom: 20px;
}
.template-3 .warning-banner h1 {
font-size: 32px;
margin-bottom: 10px;
}
.template-3 .details-card {
background: #f8f9fa;
padding: 30px;
border-radius: 15px;
margin-bottom: 25px;
text-align: left;
}
.template-3 .details-card h2 {
font-size: 20px;
color: #333;
margin-bottom: 15px;
}
.template-3 .details-card ul {
list-style: none;
padding: 0;
}
.template-3 .details-card li {
padding: 12px 0;
border-bottom: 1px solid #e0e0e0;
color: #666;
font-size: 15px;
}
.template-3 .details-card li:last-child {
border-bottom: none;
}
.template-3 .details-card li ion-icon {
margin-right: 10px;
color: #667eea;
}
/* Template 4: Card Style */
.template-4 {
padding: 40px;
}
.template-4 .alert-box {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
color: white;
padding: 30px;
border-radius: 15px;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 20px;
}
.template-4 .alert-box ion-icon {
font-size: 48px;
flex-shrink: 0;
}
.template-4 .alert-box h2 {
font-size: 24px;
margin-bottom: 8px;
}
.template-4 .alert-box p {
font-size: 14px;
opacity: 0.95;
}
.template-4 .content-section {
margin-bottom: 30px;
}
.template-4 .content-section h3 {
font-size: 18px;
color: #333;
margin-bottom: 12px;
}
.template-4 .content-section p {
color: #666;
line-height: 1.8;
font-size: 15px;
}
.template-4 .steps {
background: #f8f9fa;
padding: 25px;
border-radius: 12px;
}
.template-4 .step {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.template-4 .step:last-child {
margin-bottom: 0;
}
.template-4 .step-number {
width: 32px;
height: 32px;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
.template-4 .step-content h4 {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
.template-4 .step-content p {
font-size: 14px;
color: #666;
margin: 0;
}
@media (max-width: 768px) {
.templates-grid {
grid-template-columns: 1fr;
}
.template-2 {
flex-direction: column;
}
.page-header h1 {
font-size: 28px;
}
.template {
padding: 30px 20px;
}
.template-1 h1,
.template-2 .left-section h1,
.template-3 .warning-banner h1 {
font-size: 24px;
}
.template-4 .alert-box {
flex-direction: column;
text-align: center;
}
}
No comments yet. Be the first!