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 ;
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) */
4143 padding : 1rem 2rem ;
4244 }
4345
44- /* Logo or Title */
4546 .logo {
46- font-size : 1.25 rem ;
47+ font-size : 1.5 rem ;
4748 font-weight : 600 ;
4849 color : # 2abd68 ;
4950 }
5051
5152 .nav-links ul {
5253 display : flex;
53- gap : 1.5 rem ;
54+ gap : 2 rem ;
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 : 3 rem 2 rem 2rem ;
73+ padding : 4 rem 2rem ;
7174 background : # fafafa ;
7275 border-bottom : 1px solid # eee ;
7376 }
7477
75- .hero h1 {
76- font-size : 2 rem ;
77- margin-bottom : 1rem ;
78- color : # 333 ;
79- }
78+ .hero h1 {
79+ font-size : 2.5 rem ;
80+ margin-bottom : 1rem ;
81+ color : # 333 ;
82+ }
8083
81- .hero p {
82- font-size : 1.1 rem ;
83- max-width : 600 px ;
84- margin : 0 auto 1.5rem ;
85- color : # 555 ;
86- }
84+ .hero p {
85+ font-size : 1.25 rem ;
86+ max-width : 800 px ;
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.75 rem 1.5 rem ;
93+ padding : 1 rem 2 rem ;
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.5 rem 0.25 rem ; /* small spacing if we have multiple buttons */
101+ margin : 0.75 rem 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 : 2 rem 1 rem ;
110+ padding : 3 rem 2 rem ;
107111 max-width : 1200px ;
108112 margin : 0 auto;
109113 }
110114
111- /* Sections */
112115 section {
113- margin-bottom : 3 rem ;
116+ margin-bottom : 4 rem ;
114117 }
115118
116- section h2 {
117- font-size : 1.5 rem ;
118- color : # 333 ;
119- margin-bottom : 1rem ;
120- }
119+ section h2 {
120+ font-size : 2 rem ;
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 : 1 rem ;
144+ padding : 1.25 rem ;
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 : 2 rem 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.2 rem ;
167+ font-size : 3 rem ;
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>
240256else:
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