Skip to content

Commit 29ebc01

Browse files
authored
Update index.html
1 parent a852093 commit 29ebc01

1 file changed

Lines changed: 72 additions & 60 deletions

File tree

docs/index.html

Lines changed: 72 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>API2Cart Python SDK — Integration Overview</title>
6+
<title>API2Cart Python SDK — Integration Overview</title>
77

8-
<!-- Example Google Font (Open Sans) -->
8+
<!-- Google Font (Open Sans) -->
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1010
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" />
1111

12-
<!-- Inline styles mimicking API2Cart-like design -->
12+
<!-- Inline Styles for API2Cart-like design -->
1313
<style>
14-
/* Base reset / setup */
14+
/* Base Reset and Setup */
1515
* {
1616
margin: 0;
1717
padding: 0;
@@ -23,11 +23,13 @@
2323
color: #333;
2424
background-color: #fff;
2525
line-height: 1.6;
26+
font-size: 16px;
27+
padding-top: 20px;
2628
}
2729

2830
a {
2931
text-decoration: none;
30-
color: #2abd68; /* Primary accent color (green) */
32+
color: #2abd68; /* Primary Accent Color */
3133
}
3234

3335
/* Header (Navigation Bar) */
@@ -41,126 +43,140 @@
4143
padding: 1rem 2rem;
4244
}
4345

44-
/* Logo or Title */
4546
.logo {
46-
font-size: 1.25rem;
47+
font-size: 1.5rem;
4748
font-weight: 600;
4849
color: #2abd68;
4950
}
5051

5152
.nav-links ul {
5253
display: flex;
53-
gap: 1.5rem;
54+
gap: 2rem;
5455
list-style: none;
5556
}
5657

5758
.nav-links a {
5859
color: #333;
5960
font-weight: 600;
61+
text-transform: uppercase;
62+
letter-spacing: 1px;
6063
transition: color 0.2s ease;
6164
}
6265

63-
.nav-links a:hover {
64-
color: #2abd68;
65-
}
66+
.nav-links a:hover {
67+
color: #2abd68;
68+
}
6669

6770
/* Hero / Intro Section */
6871
.hero {
6972
text-align: center;
70-
padding: 3rem 2rem 2rem;
73+
padding: 4rem 2rem;
7174
background: #fafafa;
7275
border-bottom: 1px solid #eee;
7376
}
7477

75-
.hero h1 {
76-
font-size: 2rem;
77-
margin-bottom: 1rem;
78-
color: #333;
79-
}
78+
.hero h1 {
79+
font-size: 2.5rem;
80+
margin-bottom: 1rem;
81+
color: #333;
82+
}
8083

81-
.hero p {
82-
font-size: 1.1rem;
83-
max-width: 600px;
84-
margin: 0 auto 1.5rem;
85-
color: #555;
86-
}
84+
.hero p {
85+
font-size: 1.25rem;
86+
max-width: 800px;
87+
margin: 0 auto 1.5rem;
88+
color: #555;
89+
}
8790

88-
/* CTA Button (shared style) */
8991
.cta-btn {
9092
display: inline-block;
91-
padding: 0.75rem 1.5rem;
93+
padding: 1rem 2rem;
9294
border-radius: 4px;
9395
background: #2abd68;
9496
color: #fff;
9597
font-weight: 600;
98+
text-transform: uppercase;
99+
letter-spacing: 0.5px;
96100
transition: background 0.3s ease;
97-
margin: 0.5rem 0.25rem; /* small spacing if we have multiple buttons */
101+
margin: 0.75rem 0;
98102
}
99103

100-
.cta-btn:hover {
101-
background: #279a58;
102-
}
104+
.cta-btn:hover {
105+
background: #279a58;
106+
}
103107

104-
/* Main content area */
108+
/* Main Content */
105109
main {
106-
padding: 2rem 1rem;
110+
padding: 3rem 2rem;
107111
max-width: 1200px;
108112
margin: 0 auto;
109113
}
110114

111-
/* Sections */
112115
section {
113-
margin-bottom: 3rem;
116+
margin-bottom: 4rem;
114117
}
115118

116-
section h2 {
117-
font-size: 1.5rem;
118-
color: #333;
119-
margin-bottom: 1rem;
120-
}
119+
section h2 {
120+
font-size: 2rem;
121+
color: #333;
122+
margin-bottom: 1rem;
123+
}
121124

122-
section p {
123-
margin-bottom: 1rem;
124-
color: #555;
125-
}
125+
section p {
126+
margin-bottom: 1.5rem;
127+
color: #555;
128+
font-size: 1.125rem;
129+
}
126130

127131
.benefits-list {
128132
list-style: disc;
129133
padding-left: 1.5rem;
130134
}
131135

132-
.benefits-list li {
133-
margin-bottom: 0.5rem;
134-
}
136+
.benefits-list li {
137+
margin-bottom: 1rem;
138+
font-size: 1.1rem;
139+
color: #555;
140+
}
135141

136142
pre {
137143
background: #f5f5f5;
138-
padding: 1rem;
144+
padding: 1.25rem;
139145
overflow: auto;
140146
border-radius: 4px;
141-
margin-bottom: 1.5rem;
147+
margin-bottom: 2rem;
148+
font-size: 1rem;
142149
}
143150

144151
/* Footer */
145152
footer {
146153
background: #f9f9f9;
147154
border-top: 1px solid #eee;
148155
text-align: center;
149-
padding: 1rem;
156+
padding: 2rem 1rem;
150157
}
151158

152-
footer p {
153-
color: #777;
154-
}
159+
footer p {
160+
color: #777;
161+
font-size: 0.875rem;
162+
}
155163

156-
/* Media queries for responsiveness */
164+
/* Media Queries for Responsiveness */
157165
@media (min-width: 768px) {
158166
.hero h1 {
159-
font-size: 2.2rem;
167+
font-size: 3rem;
160168
}
161169

162170
.hero p {
163-
font-size: 1.125rem;
171+
font-size: 1.2rem;
172+
}
173+
174+
section h2 {
175+
font-size: 2.2rem;
176+
}
177+
178+
.cta-btn {
179+
padding: 1rem 2.5rem;
164180
}
165181
}
166182
</style>
@@ -211,7 +227,7 @@ <h2>Overview</h2>
211227
</section>
212228

213229
<!-- Section 2: Benefits -->
214-
<section style="background: #fafafa; padding: 2rem;" id="benefits">
230+
<section style="background: #fafafa;" id="benefits">
215231
<h2>Key Benefits</h2>
216232
<ul class="benefits-list">
217233
<li><strong>Unified API Access:</strong> Access multiple eCommerce platforms via a single API endpoint.</li>
@@ -221,7 +237,7 @@ <h2>Key Benefits</h2>
221237
</ul>
222238
</section>
223239

224-
<!-- Section 3: Quick Start (Code Example) -->
240+
<!-- Section 3: Quick Start -->
225241
<section id="quickstart">
226242
<h2>Quick Start</h2>
227243
<p>
@@ -240,10 +256,6 @@ <h2>Quick Start</h2>
240256
else:
241257
print("Error: Unable to fetch data")
242258
</code></pre>
243-
<p>
244-
This Python example demonstrates how to use the **`requests`** library to make a GET request to the **API2Cart status endpoint**.
245-
You can modify this example to retrieve other types of data, such as orders, products, and customer information.
246-
</p>
247259
</section>
248260

249261
<!-- Section 4: Documentation -->

0 commit comments

Comments
 (0)