Skip to content

Commit 2d01757

Browse files
StructuralWizardStructuralWizard
authored
Merge pull request #13 from StructuralWizard/include-day1
Include day1
2 parents 4b6f2b0 + 08037db commit 2d01757

File tree

5 files changed

+725
-11
lines changed

5 files changed

+725
-11
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ To activate the virtual environment:
5858
```bash
5959
.\venv\Scripts\activate
6060
```
61-
- On macOS/Linux:
61+
- On macOS/Linux/bash terminal:
6262
```bash
6363
source venv/bin/activate
6464
```

‎docs/Day2/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ A **file structure** (also known as a **directory structure**) refers to how fil
5454
A file path is the address to a file or folder in the computer. There are two types:
5555
1. Absolute Path that Points to the exact location from the root and always starts from the drive or root directory.
5656
```python
57-
"C:/Users/Alberto/Desktop/my_file.txt" # Windows
58-
"/home/alberto/documents/my_file.txt" # Linux/macOS
57+
"C:/Users/structuralwizard/Desktop/my_file.txt" # Windows
58+
"/home/structuralwizard/documents/my_file.txt" # Linux/macOS
5959
```
6060
1. Relative Path that points to a location relative to the current working directory.
6161
```python

‎docs/Day4/allbootstrap.html‎

Lines changed: 330 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,330 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bootstrap & Tailwind CSS Showcase</title>
7+
<!-- Inter font from Google Fonts -->
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9+
<!-- Bootstrap CSS -->
10+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" xintegrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
11+
<!-- Tailwind CSS CDN -->
12+
<script src="https://cdn.tailwindcss.com"></script>
13+
<style>
14+
body {
15+
font-family: 'Inter', sans-serif;
16+
background-color: #f8f9fa; /* Light gray background */
17+
}
18+
.section-header {
19+
border-bottom: 2px solid #e0e0e0;
20+
padding-bottom: 1rem;
21+
margin-bottom: 2rem;
22+
font-weight: 600;
23+
color: #343a40;
24+
}
25+
.card {
26+
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
27+
border-radius: 0.75rem; /* More rounded corners */
28+
overflow: hidden;
29+
transition: transform 0.2s ease-in-out;
30+
}
31+
.card:hover {
32+
transform: translateY(-5px);
33+
}
34+
.btn-custom {
35+
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
36+
border: none;
37+
color: white;
38+
padding: 0.75rem 1.5rem;
39+
border-radius: 0.5rem;
40+
transition: all 0.3s ease;
41+
}
42+
.btn-custom:hover {
43+
transform: translateY(-2px);
44+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
45+
color: white; /* Ensure text remains white on hover */
46+
}
47+
/* Custom styles for better spacing and aesthetics */
48+
.container-fluid {
49+
padding-left: 1rem;
50+
padding-right: 1rem;
51+
}
52+
.container {
53+
padding-top: 3rem;
54+
padding-bottom: 3rem;
55+
}
56+
</style>
57+
</head>
58+
<body>
59+
60+
<!-- Navbar Section -->
61+
<nav class="navbar navbar-expand-lg bg-white shadow-sm py-3 px-4">
62+
<div class="container-fluid">
63+
<a class="navbar-brand text-lg font-bold text-gray-800" href="#">Bootstrap Showcase</a>
64+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
65+
<span class="navbar-toggler-icon"></span>
66+
</button>
67+
<div class="collapse navbar-collapse" id="navbarNav">
68+
<ul class="navbar-nav ms-auto space-x-4">
69+
<li class="nav-item">
70+
<a class="nav-link text-gray-700 hover:text-blue-600 font-medium" aria-current="page" href="#layout">Layout</a>
71+
</li>
72+
<li class="nav-item">
73+
<a class="nav-link text-gray-700 hover:text-blue-600 font-medium" href="#components">Components</a>
74+
</li>
75+
<li class="nav-item">
76+
<a class="nav-link text-gray-700 hover:text-blue-600 font-medium" href="#forms">Forms</a>
77+
</li>
78+
<li class="nav-item">
79+
<a class="nav-link text-gray-700 hover:text-blue-600 font-medium" href="#utilities">Utilities</a>
80+
</li>
81+
</ul>
82+
</div>
83+
</div>
84+
</nav>
85+
86+
<!-- Hero Section -->
87+
<div class="bg-gradient-to-r from-blue-600 to-purple-700 text-white py-20 px-4 text-center rounded-b-lg shadow-lg">
88+
<div class="container mx-auto">
89+
<h1 class="text-5xl font-extrabold mb-4">Explore Bootstrap's Power</h1>
90+
<p class="text-xl mb-8 opacity-90">A comprehensive template showcasing essential Bootstrap features and responsive design.</p>
91+
<button class="btn btn-lg btn-custom shadow-md hover:shadow-xl">Get Started</button>
92+
</div>
93+
</div>
94+
95+
<main class="container mx-auto mt-12 px-4 md:px-0">
96+
97+
<!-- Layout Section -->
98+
<section id="layout" class="mb-12 bg-white p-6 rounded-lg shadow-md">
99+
<h2 class="text-3xl section-header mb-8">1. Layout & Grid System</h2>
100+
<div class="row g-4">
101+
<div class="col-md-6 col-lg-4">
102+
<div class="p-4 bg-blue-100 border border-blue-300 rounded-md text-blue-800 h-full flex items-center justify-center">
103+
<p class="text-lg font-medium">Column 1 (col-md-6 col-lg-4)</p>
104+
</div>
105+
</div>
106+
<div class="col-md-6 col-lg-4">
107+
<div class="p-4 bg-green-100 border border-green-300 rounded-md text-green-800 h-full flex items-center justify-center">
108+
<p class="text-lg font-medium">Column 2 (col-md-6 col-lg-4)</p>
109+
</div>
110+
</div>
111+
<div class="col-md-6 col-lg-4">
112+
<div class="p-4 bg-yellow-100 border border-yellow-300 rounded-md text-yellow-800 h-full flex items-center justify-center">
113+
<p class="text-lg font-medium">Column 3 (col-md-6 col-lg-4)</p>
114+
</div>
115+
</div>
116+
<div class="col-md-12">
117+
<div class="p-4 bg-purple-100 border border-purple-300 rounded-md text-purple-800 h-full flex items-center justify-center">
118+
<p class="text-lg font-medium">Full Width Column (col-md-12)</p>
119+
</div>
120+
</div>
121+
</div>
122+
<p class="mt-6 text-gray-700">Demonstrates Bootstrap's responsive grid system, adapting columns for different screen sizes.</p>
123+
</section>
124+
125+
<!-- Components Section -->
126+
<section id="components" class="mb-12 bg-white p-6 rounded-lg shadow-md">
127+
<h2 class="text-3xl section-header mb-8">2. Core Components</h2>
128+
129+
<!-- Cards -->
130+
<h3 class="text-2xl font-semibold mb-4 text-gray-800">2.1 Cards</h3>
131+
<div class="row g-4 mb-8">
132+
<div class="col-md-6 col-lg-4">
133+
<div class="card h-full">
134+
<img src="https://placehold.co/600x400/FF5733/ffffff?text=Image+1" class="card-img-top w-full h-48 object-cover" alt="Card Image 1">
135+
<div class="card-body">
136+
<h5 class="card-title text-xl font-semibold mb-2">Card Title One</h5>
137+
<p class="card-text text-gray-700">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
138+
<a href="#" class="btn btn-primary bg-blue-500 hover:bg-blue-600 border-none rounded-md px-4 py-2">Go somewhere</a>
139+
</div>
140+
</div>
141+
</div>
142+
<div class="col-md-6 col-lg-4">
143+
<div class="card h-full">
144+
<img src="https://placehold.co/600x400/33FF57/ffffff?text=Image+2" class="card-img-top w-full h-48 object-cover" alt="Card Image 2">
145+
<div class="card-body">
146+
<h5 class="card-title text-xl font-semibold mb-2">Card Title Two</h5>
147+
<p class="card-text text-gray-700">Another example card with a slightly longer content to show card height consistency.</p>
148+
<a href="#" class="btn btn-success bg-green-500 hover:bg-green-600 border-none rounded-md px-4 py-2">Learn more</a>
149+
</div>
150+
</div>
151+
</div>
152+
<div class="col-md-6 col-lg-4">
153+
<div class="card h-full">
154+
<img src="https://placehold.co/600x400/5733FF/ffffff?text=Image+3" class="card-img-top w-full h-48 object-cover" alt="Card Image 3">
155+
<div class="card-body">
156+
<h5 class="card-title text-xl font-semibold mb-2">Card Title Three</h5>
157+
<p class="card-text text-gray-700">This card demonstrates an image at the top and standard body content.</p>
158+
<a href="#" class="btn btn-warning bg-yellow-500 hover:bg-yellow-600 border-none rounded-md px-4 py-2">View details</a>
159+
</div>
160+
</div>
161+
</div>
162+
</div>
163+
164+
<!-- Buttons -->
165+
<h3 class="text-2xl font-semibold mb-4 text-gray-800">2.2 Buttons</h3>
166+
<div class="flex flex-wrap gap-3 mb-8 items-center">
167+
<button type="button" class="btn btn-primary rounded-lg px-4 py-2 shadow-md">Primary</button>
168+
<button type="button" class="btn btn-secondary rounded-lg px-4 py-2 shadow-md">Secondary</button>
169+
<button type="button" class="btn btn-success rounded-lg px-4 py-2 shadow-md">Success</button>
170+
<button type="button" class="btn btn-danger rounded-lg px-4 py-2 shadow-md">Danger</button>
171+
<button type="button" class="btn btn-warning rounded-lg px-4 py-2 shadow-md">Warning</button>
172+
<button type="button" class="btn btn-info rounded-lg px-4 py-2 shadow-md">Info</button>
173+
<button type="button" class="btn btn-light rounded-lg px-4 py-2 shadow-md">Light</button>
174+
<button type="button" class="btn btn-dark rounded-lg px-4 py-2 shadow-md">Dark</button>
175+
<button type="button" class="btn btn-link rounded-lg px-4 py-2">Link</button>
176+
<button type="button" class="btn btn-outline-primary rounded-lg px-4 py-2">Outline Primary</button>
177+
<button type="button" class="btn btn-custom rounded-lg px-4 py-2">Custom Gradient</button>
178+
</div>
179+
180+
<!-- Alerts -->
181+
<h3 class="text-2xl font-semibold mb-4 text-gray-800">2.3 Alerts</h3>
182+
<div class="mb-8 space-y-3">
183+
<div class="alert alert-primary rounded-lg p-3" role="alert">
184+
A simple primary alert—check it out!
185+
</div>
186+
<div class="alert alert-secondary rounded-lg p-3" role="alert">
187+
A simple secondary alert—check it out!
188+
</div>
189+
<div class="alert alert-success rounded-lg p-3" role="alert">
190+
A simple success alert—check it out!
191+
</div>
192+
<div class="alert alert-danger rounded-lg p-3" role="alert">
193+
A simple danger alert—check it out!
194+
</div>
195+
<div class="alert alert-warning rounded-lg p-3" role="alert">
196+
A simple warning alert—check it out!
197+
</div>
198+
<div class="alert alert-info rounded-lg p-3" role="alert">
199+
A simple info alert—check it out!
200+
</div>
201+
</div>
202+
203+
<!-- Modals -->
204+
<h3 class="text-2xl font-semibold mb-4 text-gray-800">2.4 Modals</h3>
205+
<button type="button" class="btn btn-primary rounded-lg px-4 py-2 shadow-md" data-bs-toggle="modal" data-bs-target="#exampleModal">
206+
Launch demo modal
207+
</button>
208+
209+
<!-- Modal Structure -->
210+
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
211+
<div class="modal-dialog rounded-lg">
212+
<div class="modal-content rounded-lg shadow-lg">
213+
<div class="modal-header border-b border-gray-200">
214+
<h5 class="modal-title text-xl font-semibold" id="exampleModalLabel">Modal title</h5>
215+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
216+
</div>
217+
<div class="modal-body text-gray-700">
218+
This is a sample modal content. You can put any HTML content here, such as forms, images, or text.
219+
</div>
220+
<div class="modal-footer border-t border-gray-200">
221+
<button type="button" class="btn btn-secondary rounded-lg px-4 py-2" data-bs-dismiss="modal">Close</button>
222+
<button type="button" class="btn btn-primary rounded-lg px-4 py-2">Save changes</button>
223+
</div>
224+
</div>
225+
</div>
226+
</div>
227+
</section>
228+
229+
<!-- Forms Section -->
230+
<section id="forms" class="mb-12 bg-white p-6 rounded-lg shadow-md">
231+
<h2 class="text-3xl section-header mb-8">3. Forms</h2>
232+
<form>
233+
<div class="mb-4">
234+
<label for="exampleInputEmail1" class="form-label text-gray-700 font-medium">Email address</label>
235+
<input type="email" class="form-control rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" id="exampleInputEmail1" aria-describedby="emailHelp">
236+
<div id="emailHelp" class="form-text text-sm text-gray-500 mt-1">We'll never share your email with anyone else.</div>
237+
</div>
238+
<div class="mb-4">
239+
<label for="exampleInputPassword1" class="form-label text-gray-700 font-medium">Password</label>
240+
<input type="password" class="form-control rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" id="exampleInputPassword1">
241+
</div>
242+
<div class="mb-4 form-check">
243+
<input type="checkbox" class="form-check-input rounded-sm" id="exampleCheck1">
244+
<label class="form-check-label text-gray-700" for="exampleCheck1">Check me out</label>
245+
</div>
246+
<div class="mb-4">
247+
<label for="formControlTextarea1" class="form-label text-gray-700 font-medium">Example textarea</label>
248+
<textarea class="form-control rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" id="formControlTextarea1" rows="3"></textarea>
249+
</div>
250+
<div class="mb-4">
251+
<label for="formFile" class="form-label text-gray-700 font-medium">Default file input example</label>
252+
<input class="form-control rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" type="file" id="formFile">
253+
</div>
254+
<div class="mb-4">
255+
<label for="formSelect" class="form-label text-gray-700 font-medium">Select option</label>
256+
<select class="form-select rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" aria-label="Default select example" id="formSelect">
257+
<option selected>Open this select menu</option>
258+
<option value="1">One</option>
259+
<option value="2">Two</option>
260+
<option value="3">Three</option>
261+
</select>
262+
</div>
263+
<button type="submit" class="btn btn-primary rounded-lg px-4 py-2 shadow-md">Submit</button>
264+
</form>
265+
</section>
266+
267+
<!-- Utilities Section -->
268+
<section id="utilities" class="mb-12 bg-white p-6 rounded-lg shadow-md">
269+
<h2 class="text-3xl section-header mb-8">4. Utility Classes</h2>
270+
271+
<!-- Typography -->
272+
<h3 class="text-2xl font-semibold mb-4 text-gray-800">4.1 Typography</h3>
273+
<p class="h1 text-blue-700 mb-2">h1. Bootstrap heading</p>
274+
<p class="h2 text-green-700 mb-2">h2. Bootstrap heading</p>
275+
<p class="h3 text-purple-700 mb-2">h3. Bootstrap heading</p>
276+
<p class="lead text-lg text-gray-700 mb-2">This is a lead paragraph, indicating a more prominent text element.</p>
277+
<p class="text-muted text-gray-500 mb-2">This text is muted.</p>
278+
<p class="font-bold mb-2">This text is bold using Tailwind's font-bold.</p>
279+
<p class="text-decoration-underline mb-8">This text is underlined.</p>
280+
281+
<!-- Spacing (Margin & Padding) -->
282+
<h3 class="text-2xl font-semibold mb-4 text-gray-800">4.2 Spacing</h3>
283+
<div class="bg-blue-100 p-4 mb-4 rounded-md">
284+
<div class="bg-blue-300 p-2 m-4 rounded-md">
285+
<p class="text-blue-900">This div has `m-4` margin from Tailwind.</p>
286+
</div>
287+
</div>
288+
<div class="bg-green-100 p-4 mb-8 rounded-md">
289+
<div class="bg-green-300 py-3 px-5 rounded-md">
290+
<p class="text-green-900">This div has `py-3 px-5` padding from Tailwind.</p>
291+
</div>
292+
</div>
293+
294+
<!-- Colors -->
295+
<h3 class="text-2xl font-semibold mb-4 text-gray-800">4.3 Colors</h3>
296+
<div class="flex flex-wrap gap-4 mb-8">
297+
<div class="p-4 rounded-md text-white bg-primary shadow-md">Primary Color</div>
298+
<div class="p-4 rounded-md text-white bg-secondary shadow-md">Secondary Color</div>
299+
<div class="p-4 rounded-md text-white bg-success shadow-md">Success Color</div>
300+
<div class="p-4 rounded-md text-white bg-danger shadow-md">Danger Color</div>
301+
<div class="p-4 rounded-md text-dark bg-warning shadow-md">Warning Color</div>
302+
<div class="p-4 rounded-md text-white bg-info shadow-md">Info Color</div>
303+
<div class="p-4 rounded-md text-dark bg-light shadow-md border">Light Color</div>
304+
<div class="p-4 rounded-md text-white bg-dark shadow-md">Dark Color</div>
305+
<div class="p-4 rounded-md text-white bg-gradient-to-r from-pink-500 to-red-500 shadow-md">Custom Gradient</div>
306+
</div>
307+
308+
<!-- Shadows -->
309+
<h3 class="text-2xl font-semibold mb-4 text-gray-800">4.4 Shadows</h3>
310+
<div class="flex flex-wrap gap-6 mb-8">
311+
<div class="p-6 bg-white rounded-lg shadow-sm">Small Shadow</div>
312+
<div class="p-6 bg-white rounded-lg shadow-md">Medium Shadow</div>
313+
<div class="p-6 bg-white rounded-lg shadow-lg">Large Shadow</div>
314+
<div class="p-6 bg-white rounded-lg shadow-xl">Extra Large Shadow</div>
315+
<div class="p-6 bg-white rounded-lg shadow-2xl">2XL Shadow</div>
316+
</div>
317+
</section>
318+
319+
</main>
320+
321+
<!-- Footer -->
322+
<footer class="bg-gray-800 text-white text-center py-8 mt-12 rounded-t-lg shadow-inner">
323+
<p class="text-sm">&copy; 2024 Bootstrap Showcase. All rights reserved.</p>
324+
<p class="text-xs opacity-75 mt-2">Built with Bootstrap and Tailwind CSS</p>
325+
</footer>
326+
327+
<!-- Bootstrap JavaScript Bundle -->
328+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" xintegrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
329+
</body>
330+
</html>

0 commit comments

Comments
 (0)