Skip to content

Commit cc9b847

Browse files
lolpanda2004lolpanda2004
authored
Merge pull request #139 from nikitapd121/main
Testimonial Wall
2 parents 817022d + c3a4e3e commit cc9b847

File tree

10 files changed

+532
-61
lines changed

10 files changed

+532
-61
lines changed

‎css/style.css‎

Lines changed: 111 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
1-
21
@keyframes pulse {
3-
0% {
4-
transform: scale(1);
5-
}
6-
50% {
7-
transform: scale(1.05);
8-
}
9-
100% {
10-
transform: scale(1);
11-
}
2+
0% { transform: scale(1); }
3+
50% { transform: scale(1.05); }
4+
100% { transform: scale(1); }
125
}
136

147
body {
@@ -19,6 +12,7 @@ body {
1912
color: #222;
2013
}
2114

15+
/* ===== NAVBAR ===== */
2216
nav {
2317
background: #333;
2418
padding: 10px 0;
@@ -41,7 +35,7 @@ nav ul li a {
4135
color: white;
4236
font-weight: bold;
4337
transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
44-
display: inline-block;
38+
display: inline-block;
4539
}
4640

4741
nav ul li a:hover {
@@ -51,8 +45,114 @@ nav ul li a:hover {
5145
animation: pulse 1s infinite;
5246
}
5347

48+
/* ===== MAIN LAYOUT ===== */
5449
main {
5550
max-width: 800px;
5651
margin: 40px auto;
5752
padding: 0 20px;
5853
}
54+
55+
:root{
56+
--accent: #4facfe;
57+
--accent-2: #00f2fe;
58+
--bg: #f5f8fb;
59+
--card-bg: rgba(255,255,255,0.98);
60+
--muted: #6b7280;
61+
}
62+
63+
*{box-sizing:border-box}
64+
body{
65+
margin:0;
66+
font-family: "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial;
67+
background: var(--bg);
68+
color:#111827;
69+
-webkit-font-smoothing:antialiased;
70+
line-height:1.45;
71+
}
72+
73+
74+
75+
main{max-width:1200px;margin:28px auto;padding:20px}
76+
77+
/* Hero */
78+
.hero{text-align:center;margin-bottom:12px}
79+
.hero h1{margin:6px 0;font-size:clamp(1.6rem,2.6vw,2.2rem)}
80+
.hero p{color:var(--muted);margin:0 0 8px}
81+
82+
/* Filters */
83+
.filters{display:flex;gap:10px;justify-content:center;margin:16px 0 26px;flex-wrap:wrap}
84+
.filter-btn{
85+
padding:8px 14px;border-radius:999px;border:1px solid rgba(17,24,39,0.06);
86+
background:linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.5));
87+
cursor:pointer;font-weight:600;color:#111827;box-shadow:0 4px 12px rgba(13,27,50,0.04);
88+
transition:all .22s ease;
89+
}
90+
.filter-btn.active{
91+
background:linear-gradient(90deg,var(--accent),var(--accent-2));
92+
color:white;transform:translateY(-2px);box-shadow:0 8px 30px rgba(79,172,254,0.18);
93+
}
94+
95+
/* Testimonial Wall */
96+
.testimonial-wall{padding:18px;background:linear-gradient(180deg,#fff,#fbfdff);border-radius:12px;box-shadow:0 6px 30px rgba(15,23,42,0.04)}
97+
.masonry{column-count:3;column-gap:18px}
98+
@media (max-width:1000px){.masonry{column-count:2}}
99+
@media (max-width:640px){.masonry{column-count:1}}
100+
101+
.card{
102+
display:inline-block;width:100%;margin:0 0 18px;background:var(--card-bg);border-radius:12px;padding:14px;
103+
box-shadow:0 6px 18px rgba(12,18,30,0.06);transform-origin:center;transition:transform .25s,box-shadow .25s;
104+
position:relative;overflow:hidden;opacity:0;animation:pop .45s ease forwards;
105+
}
106+
.card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 18px 40px rgba(12,18,30,0.12)}
107+
.meta{display:flex;align-items:center;gap:10px;margin-bottom:8px}
108+
.avatar{width:48px;height:48px;border-radius:50%;flex:0 0 48px;object-fit:cover;border:2px solid rgba(0,0,0,0.04)}
109+
.who{font-weight:700}
110+
.cat{margin-left:auto;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,#eef6ff,#f0fbff);color:var(--muted);font-weight:600;font-size:.85rem}
111+
.card p{margin:6px 0 10px;color:#111827}
112+
.footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
113+
.badge{font-size:.85rem;color:var(--muted);font-weight:600}
114+
.card.video::after{content:"▶";position:absolute;right:12px;bottom:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:10px;border-radius:999px;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,0.12);}
115+
116+
.card::before{content:"";position:absolute;left:0;top:0;height:100%;width:6px;border-radius:12px 0 0 12px;background:linear-gradient(180deg, rgba(74,192,254,0.8), rgba(0,242,254,0.6));opacity:.08;transition:opacity .25s}
117+
.card:hover::before{opacity:.18}
118+
119+
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}
120+
121+
/* Modal for video */
122+
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(6,8,15,0.6), rgba(6,8,15,0.85));z-index:1200;padding:20px}
123+
.modal.open{display:flex}
124+
.modal .inner{width:100%;max-width:980px;background:#0f1724;border-radius:12px;padding:12px;box-shadow:0 30px 90px rgba(2,6,23,0.6)}
125+
.modal iframe{width:100%;height:540px;border:0;border-radius:8px}
126+
.modal .close{margin-top:10px;display:flex;justify-content:flex-end}
127+
.close button{padding:8px 12px;border-radius:10px;background:#fff;border:0;cursor:pointer;font-weight:700}
128+
129+
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
130+
.no-results{text-align:center;padding:36px;color:var(--muted)}
131+
132+
/* Pages table */
133+
.pages{margin:22px 0;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfdff);padding:14px;box-shadow:0 8px 30px rgba(12,18,30,0.04)}
134+
.pages table{width:100%;border-collapse:collapse}
135+
.pages th,.pages td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(15,23,42,0.04)}
136+
.pages thead th{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border-bottom:none}
137+
.pages tbody tr:hover{background:linear-gradient(90deg, rgba(74,172,254,0.04), rgba(0,242,254,0.02))}
138+
139+
/* Add Feedback form */
140+
.add-feedback{margin-top:20px;background:linear-gradient(180deg,#fff,#fbfdff);padding:16px;border-radius:12px;box-shadow:0 8px 30px rgba(12,18,30,0.04)}
141+
.add-feedback h2{margin-top:0}
142+
.form-row{display:flex;gap:12px;margin-bottom:10px;flex-wrap:wrap}
143+
.form-row .col{flex:1;min-width:180px}
144+
input[type="text"], select, textarea{width:100%;padding:8px;border-radius:8px;border:1px solid #d1d5db;font-size:14px}
145+
textarea{min-height:90px;resize:vertical}
146+
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
147+
.controls button{padding:8px 12px;border-radius:8px;border:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;cursor:pointer;font-weight:700}
148+
.controls button.secondary{background:#e5e7eb;color:#111}
149+
.audio-playback{margin-top:6px}
150+
.submit-row{display:flex;justify-content:flex-end;margin-top:8px}
151+
.submit-row button{padding:10px 14px;border-radius:8px;border:0;background:#111827;color:white;cursor:pointer;font-weight:700}
152+
153+
@media (max-width:640px){
154+
.filters{gap:8px}
155+
.modal iframe{height:360px}
156+
.form-row{flex-direction:column}
157+
}
158+

‎html/Folderstructure.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>About Us | Amour Editorials</title>
6-
<link rel="stylesheet" href="css/style.css">
6+
<link rel="stylesheet" href="../css/style.css">
77
</head>
88
<body>
99
<nav>
@@ -40,6 +40,6 @@ <h1>Folder Structure</h1>
4040

4141

4242

43-
<script src="js/script.js"></script>
43+
<script src="../js/script.js"></script>
4444
</body>
4545
</html>

‎html/about.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>About Us | Amour Editorials</title>
6-
<link rel="stylesheet" href="css/style.css">
6+
<link rel="stylesheet" href="../css/style.css">
77
</head>
88
<body>
99
<nav>
@@ -27,6 +27,6 @@ <h1>About Us</h1>
2727
</p>
2828
</main>
2929

30-
<script src="js/script.js"></script>
30+
<script src="../js/script.js"></script>
3131
</body>
3232
</html>

‎html/contributing.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>About Us | Amour Editorials</title>
6-
<link rel="stylesheet" href="css/style.css">
6+
<link rel="stylesheet" href="../css/style.css">
77
</head>
88
<body>
99
<nav>
@@ -36,6 +36,6 @@ <h1>Contributing</h1>
3636

3737

3838

39-
<script src="js/script.js"></script>
39+
<script src="../js/script.js"></script>
4040
</body>
4141
</html>

‎html/features.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>About Us | Amour Editorials</title>
6-
<link rel="stylesheet" href="css/style.css">
6+
<link rel="stylesheet" href="../css/style.css">
77
</head>
88
<body>
99
<nav>
@@ -33,6 +33,6 @@ <h1>Features</h1>
3333
</main>
3434

3535

36-
<script src="js/script.js"></script>
36+
<script src="../js/script.js"></script>
3737
</body>
3838
</html>

‎html/installation.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>About Us | Amour Editorials</title>
6-
<link rel="stylesheet" href="css/style.css">
6+
<link rel="stylesheet" href="../css/style.css">
77
</head>
88
<body>
99
<nav>
@@ -33,6 +33,6 @@ <h1>Installation</h1>
3333

3434

3535

36-
<script src="js/script.js"></script>
36+
<script src="../js/script.js"></script>
3737
</body>
3838
</html>

0 commit comments

Comments
 (0)