-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmockuptemplate.html
More file actions
140 lines (133 loc) · 6.38 KB
/
mockuptemplate.html
File metadata and controls
140 lines (133 loc) · 6.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Browse Mockup Templates - Modern Mockup Generator</title>
<meta name="description" content="Explore a wide range of mockup templates for iPhone, MacBook, iPad, Monitor, and more. Create stunning designs with our free mockup generator.">
<meta name="keywords" content="mockup templates, website mockup, iPhone mockup, MacBook mockup, iPad mockup, free mockup generator">
<meta name="author" content="Your Company Name">
<meta name="robots" content="index, follow">
<!-- Canonical URL -->
<link rel="canonical" href="https://dev-nayanray.github.io/browse-templates">
<!-- Open Graph Tags for Social Media -->
<meta property="og:title" content="Browse Mockup Templates - Modern Mockup Generator">
<meta property="og:description" content="Explore a wide range of mockup templates for iPhone, MacBook, iPad, Monitor, and more. Create stunning designs with our free mockup generator.">
<meta property="og:image" content="https://dev-nayanray.github.io/images/mockup-templates-thumbnail.jpg">
<meta property="og:url" content="https://dev-nayanray.github.io/browse-templates">
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Browse Mockup Templates - Modern Mockup Generator">
<meta name="twitter:description" content="Explore a wide range of mockup templates for iPhone, MacBook, iPad, Monitor, and more. Create stunning designs with our free mockup generator.">
<meta name="twitter:image" content="https://dev-nayanray.github.io/images/mockup-templates-thumbnail.jpg">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom styles for modern design */
.template-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: 1px solid #e5e7eb;
background-color: #ffffff;
border-radius: 12px;
overflow: hidden;
}
.template-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
border-color: #3b82f6;
}
.template-card img {
border-radius: 12px 12px 0 0;
transition: transform 0.3s ease;
}
.template-card:hover img {
transform: scale(1.05);
}
.template-card .content {
padding: 1.5rem;
}
.template-card h3 {
font-size: 1.25rem;
font-weight: 600;
color: #1f2937;
}
.template-card p {
font-size: 0.875rem;
color: #6b7280;
margin-top: 0.5rem;
}
.template-card a {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1rem;
background-color: #3b82f6;
color: #ffffff;
border-radius: 8px;
text-align: center;
transition: background-color 0.3s ease;
}
.template-card a:hover {
background-color: #2563eb;
}
</style>
</head>
<body class="bg-gray-50 flex items-center justify-center min-h-screen">
<div class="bg-white p-8 rounded-xl shadow-lg w-full max-w-6xl mx-4">
<h1 class="text-4xl font-bold text-center mb-8 text-gray-900">Browse Mockup Templates</h1>
<h2 class="text-2xl text-center mb-6 text-gray-700">Explore a Wide Range of Mockup Templates</h2>
<!-- Template Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- iPhone Template -->
<div class="template-card">
<img src="https://cdn-icons-png.flaticon.com/512/0/747.png" alt="iPhone Mockup Template" class="w-full h-48 object-cover">
<div class="content">
<h3>iPhone Mockup</h3>
<p>Perfect for showcasing mobile designs.</p>
<a href="websitemockupdesigntool.html?template=iphone">Use Template</a>
</div>
</div>
<!-- MacBook Template -->
<div class="template-card">
<img src="https://cdn-icons-png.flaticon.com/512/0/191.png" alt="MacBook Mockup Template" class="w-full h-48 object-cover">
<div class="content">
<h3>MacBook Mockup</h3>
<p>Ideal for desktop and web designs.</p>
<a href="websitemockupdesigntool.html?template=macbook">Use Template</a>
</div>
</div>
<!-- iPad Template -->
<div class="template-card">
<img src="https://cdn-icons-png.flaticon.com/512/0/327.png" alt="iPad Mockup Template" class="w-full h-48 object-cover">
<div class="content">
<h3>iPad Mockup</h3>
<p>Great for tablet designs and presentations.</p>
<a href="websitemockupdesigntool.html?template=ipad">Use Template</a>
</div>
</div>
<!-- Monitor Template -->
<div class="template-card">
<img src="https://cdn-icons-png.flaticon.com/512/0/175.png" alt="Monitor Mockup Template" class="w-full h-48 object-cover">
<div class="content">
<h3>Monitor Mockup</h3>
<p>Showcase your designs on a large screen.</p>
<a href="websitemockupdesigntool.html?template=monitor">Use Template</a>
</div>
</div>
<!-- Poster Template -->
<div class="template-card">
<img src="https://cdn-icons-png.flaticon.com/512/0/488.png" alt="Poster Mockup Template" class="w-full h-48 object-cover">
<div class="content">
<h3>Poster Mockup</h3>
<p>Perfect for print and digital posters.</p>
<a href="websitemockupdesigntool.html?template=poster">Use Template</a>
</div>
</div>
<!-- Add more templates as needed -->
</div>
<!-- Back to Home Link -->
<div class="text-center mt-8">
<a href="websitemockupdesigntool.html" class="text-blue-500 hover:underline">← Back to Home</a>
</div>
</div>
</body>
</html>