Skip to content

Commit 97cc201

Browse files
Daniel1000cDaniel1000c
committed
reformat about section, projects, and hero section, add bootstrap links
1 parent cba6047 commit 97cc201

File tree

1 file changed

+94
-204
lines changed

1 file changed

+94
-204
lines changed

‎index.html‎

Lines changed: 94 additions & 204 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,40 @@
22
<html lang="en-us">
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
56
<title>ScriptLab</title>
67
<link rel="stylesheet" href="css/style.css">
78
<link rel="icon" type="image/x-icon" href="favicon/favicon.ico"><!--Link to favicon-->
89
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'><!--Link to boxicons-->
9-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"><!--Insert boostrap link-->
10-
<script src="scripts/script.js"></script> <!--Link to script file-->
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"><!--Link to bootstrap css-->
11+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script><!--Link to bootstrap js-->
1112
</head>
1213
<body>
1314
<header>
14-
<img src="images/scriptbigfont-removebg-preview.png" alt="ScriptLab" class="siteLogo" usemap="#ScriptLabLogo">
15-
16-
<!--Define logo image map-->
17-
<map name="ScriptLabLogo">
18-
<area shape="rect" coords="0,0,100,100" href="index.html#projects" alt="ScriptLab">
19-
</map>
20-
21-
<!--Insert hamburger menu-->
22-
<i class='bx bx-menu' id="hamburger"></i>
23-
24-
<!--Create navigation bar-->
25-
<nav id="navMenu">
26-
<ul>
27-
<li><a href="#home">Home</a></li>
28-
<li><a href="#about">About</a></li>
29-
<li><a href="#projects">Projects</a></li>
30-
</ul>
15+
<nav class="navbar navbar-expand-lg bg-body-tertiary">
16+
<div class="container-fluid">
17+
<a class="navbar-brand" href="index.html"><img src="images/scriptbigfont-removebg-preview.png" alt="ScriptLab"></a>
18+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
19+
<span class="navbar-toggler-icon"></span>
20+
</button>
21+
<div class="collapse navbar-collapse" id="navbarNav">
22+
<ul class="navbar-nav">
23+
<li class="nav-item">
24+
<a class="nav-link" aria-current="page" href="index.html#home">Home</a>
25+
</li>
26+
<li class="nav-item">
27+
<a class="nav-link" href="index.html#about">About ScriptLab</a>
28+
</li>
29+
<li class="nav-item">
30+
<a class="nav-link" href="index.html#projects">Projects</a>
31+
</li>
32+
</ul>
33+
</div>
34+
</div>
3135
</nav>
32-
33-
<!--Insert overlay for clicking outside-->
34-
<div id="overlay"></div>
3536
</header>
3637
<main>
37-
38+
<!--Home section-->
3839
<!--Create hero section-->
3940
<section class="heroSection" id="home">
4041

@@ -55,207 +56,96 @@ <h2 class="typeWriter">Welcome to <span>ScriptLab</span></h2>
5556
</div>
5657
</section>
5758

58-
<!--About section-->
59+
<!--About Section-->
5960
<section id="about">
60-
<h2>Site Background</h2>
61-
62-
<!--Create container to hold img and text-->
63-
<div class="aboutContainer">
64-
<!--Create project highlights container-->
65-
<div class="projectHighlights">
66-
<!--Create project highlights items-->
67-
<div class="projectHighlightItem">
68-
69-
<!--Insert project highlight boxicon-->
70-
<i class='bx bxs-user-detail'></i>
61+
<h2>About Script Lab</h2>
62+
</section>
7163

72-
<!--Project Title-->
73-
<h3>Web API</h3>
64+
<!--Project Section-->
65+
<section id="projects">
66+
<h2>Projects</h2>
7467

75-
<!--Create lorem ipsum-->
76-
<p>
77-
Implemented and integrated third-party APIs to fetch and display real-time data dynamically.
78-
Designed efficient API calls to improve performance, ensuring seamless interaction between
79-
client and server-side applications.
80-
</p>
81-
68+
<!--Project Container-->
69+
<div class="container mt-5">
70+
<div class="row">
71+
<!-- Card 1 -->
72+
<div class="col-12 col-md-6 col-lg-4 mb-4">
73+
<div class="card">
74+
<img src="images/formSnapShot.png" class="card-img-top" alt="Form API">
75+
<div class="card-body">
76+
<h5 class="card-title">Form API</h5>
77+
<p class="card-text">This is a project that uses the form API to create form validations.</p>
78+
<a href="formapi/formAPI.html" class="btn btn-primary">See More</a>
79+
</div>
80+
</div>
8281
</div>
8382

84-
<div class="projectHighlightItem">
85-
86-
<!--Insert project highlight boxicon-->
87-
<i class='bx bxl-jquery'></i>
88-
89-
<!--Project Title-->
90-
<h3>Libraries</h3>
91-
92-
<!--Create lorem ipsum-->
93-
<p>
94-
Worked with powerful JavaScript libraries such as jQuery to streamline
95-
development, improve interactivity, and handle asynchronous operations efficiently.
96-
Leveraged pre-built functions and plugins to enhance functionality while maintaining clean and maintainable code.
97-
</p>
98-
83+
<!-- Card 2 -->
84+
<div class="col-12 col-md-6 col-lg-4 mb-4">
85+
<div class="card">
86+
<img src="images/horizontalComingSoon.jpg" class="card-img-top" alt="Weather App">
87+
<div class="card-body">
88+
<h5 class="card-title">Weather App</h5>
89+
<p class="card-text">Coming Soon</p>
90+
<a href="weatherApp/index.html" class="btn btn-primary">See More</a>
91+
</div>
92+
</div>
9993
</div>
10094

101-
<div class="projectHighlightItem">
102-
103-
<!--Insert project highlight boxicon-->
104-
<i class='bx bx-grid'></i>
105-
106-
<!--Project Title-->
107-
<h3>FrameWorks</h3>
108-
109-
<!--Create lorem ipsum-->
110-
<p>
111-
Developed applications using frameworks like React to create modular, scalable, and high-performance web solutions.
112-
Focused on component-based architecture, state management,
113-
and reusable UI elements to improve development efficiency.
114-
</p>
115-
95+
<!-- Card 3 -->
96+
<div class="col-12 col-md-6 col-lg-4 mb-4">
97+
<div class="card">
98+
<img src="images/horizontalComingSoon.jpg" class="card-img-top" alt="Coming Soon">
99+
<div class="card-body">
100+
<h5 class="card-title">Coming Soon</h5>
101+
<p class="card-text">Coming Soon</p>
102+
<a href="#" class="btn btn-primary">See More</a>
103+
</div>
104+
</div>
116105
</div>
117106

118-
<div class="projectHighlightItem">
119-
120-
<!--Insert project highlight boxicon-->
121-
<i class='bx bxs-data'></i>
122-
123-
<!--Project Title-->
124-
<h3>CMS</h3>
125-
126-
<!--Create lorem ipsum-->
127-
<p>
128-
Customized and developed CMS-based websites, optimizing usability and flexibility for content creators.
129-
Implemented custom themes, plugins,
130-
and backend modifications to enhance functionality while ensuring an intuitive user experience.
131-
</p>
132-
107+
<!-- Card 4 -->
108+
<div class="col-12 col-md-6 col-lg-4 mb-4">
109+
<div class="card">
110+
<img src="images/horizontalComingSoon.jpg" class="card-img-top" alt="Coming Soon">
111+
<div class="card-body">
112+
<h5 class="card-title">Coming Soon</h5>
113+
<p class="card-text">Coming Soon</p>
114+
<a href="#" class="btn btn-primary">See More</a>
115+
</div>
116+
</div>
133117
</div>
134118

135-
<div class="projectHighlightItem">
136-
137-
<!--Insert project highlight boxicon-->
138-
<i class='bx bxs-file-json'></i>
139-
140-
<!--Project Title-->
141-
<h3>JSON</h3>
142-
143-
<!--Create lorem ipsum-->
144-
<p>
145-
Utilized JSON as a lightweight data format for transmitting and storing structured information between applications.
146-
Implemented JSON parsing and manipulation techniques to efficiently handle data from APIs and local storage,
147-
enhancing web application performance.
148-
</p>
149-
119+
<!-- Card 5 -->
120+
<div class="col-12 col-md-6 col-lg-4 mb-4">
121+
<div class="card">
122+
<img src="images/horizontalComingSoon.jpg" class="card-img-top" alt="Coming Soon">
123+
<div class="card-body">
124+
<h5 class="card-title">Coming Soon</h5>
125+
<p class="card-text">Coming Soon</p>
126+
<a href="#" class="btn btn-primary">See More</a>
127+
</div>
128+
</div>
150129
</div>
151130

152-
<div class="projectHighlightItem">
153-
154-
<!--Insert project highlight boxicon-->
155-
<i class='bx bxl-javascript'></i>
156-
157-
<!--Project Title-->
158-
<h3>Js Game</h3>
159-
160-
<!--Create lorem ipsum-->
161-
<p>
162-
Designed and developed an interactive JavaScript game with engaging mechanics and smooth animations.
163-
Focused on logic-driven gameplay, event handling,
164-
and responsive controls to provide an immersive experience across various devices.
165-
</p>
166-
131+
<!-- Card 6 -->
132+
<div class="col-12 col-md-6 col-lg-4 mb-4">
133+
<div class="card">
134+
<img src="images/horizontalComingSoon.jpg" class="card-img-top" alt="Coming Soon">
135+
<div class="card-body">
136+
<h5 class="card-title">Coming Soon</h5>
137+
<p class="card-text">Coming Soon</p>
138+
<a href="#" class="btn btn-primary">See More</a>
139+
</div>
140+
</div>
167141
</div>
168142

169143
</div>
170-
171-
<!--Create container to hold img and text-->
172-
<div class="aboutContent">
173-
<!--Insert company logo-->
174-
<img src="images/scriptbigfont-removebg-preview.png" alt="ScriptLab">
175-
176-
<h2>About ScriptLab</h2>
177-
178-
<p>
179-
Script Lab is a portfolio website meant for showing Intermediate
180-
JavaScript and HTML/CSS projects. This website is a work in progress and
181-
will be updated as projects are completed. This website will incorporate projects
182-
using JavaScript API, React, Json, WordPress, and more.
183-
</p>
184-
</div>
185-
</div>
186-
</section>
187-
188-
<!--Projects Section-->
189-
<section id="projects" class="sectionBg">
190-
<h2>Projects</h2>
191-
192-
<!--Create project grid container-->
193-
<div class="projectGrid">
194-
<!--Create project grid items-->
195-
<div class="projectGridItem">
196-
<!--Insert project img-->
197-
<img src="images/formSnapShot.png" alt="Form API">
198-
<!--Insert project title-->
199-
<h3>Form API</h3>
200-
201-
<a class="btn btn-primary" href="formapi/formAPI.html">See More</a>
202-
</div>
203-
204-
<div class="projectGridItem">
205-
<!--Insert project img-->
206-
<img src="images/horizontalComingSoon.jpg" alt="Weather App">
207-
<!--Insert project title-->
208-
<h3>Weather App</h3>
209-
210-
<!--Create project button link-->
211-
<a class="btn btn-primary" href="weatherApp/index.html">See More</a>
212-
</div>
213-
214-
<div class="projectGridItem">
215-
<!--Insert project img-->
216-
<img src="images/horizontalComingSoon.jpg" alt="Coming Soon">
217-
<!--Insert project title-->
218-
<h3>Coming Soon</h3>
219-
220-
<!--Create project button link-->
221-
<a class="btn btn-primary" href="#" role="button">See More</a>
222-
</div>
223-
224-
<div class="projectGridItem">
225-
<!--Insert project img-->
226-
<img src="images/horizontalComingSoon.jpg" alt="Coming Soon">
227-
<!--Insert project title-->
228-
<h3>Coming Soon</h3>
229-
230-
<!--Create project button link-->
231-
<a class="btn btn-primary" href="#" role="button">See More</a>
232-
</div>
233-
234-
<div class="projectGridItem">
235-
<!--Insert project img-->
236-
<img src="images/horizontalComingSoon.jpg" alt="Coming Soon">
237-
<!--Insert project title-->
238-
<h3>Coming Soon</h3>
239-
240-
<!--Create project button link-->
241-
<a class="btn btn-primary" href="#" role="button">See More</a>
242-
</div>
243-
244-
<div class="projectGridItem">
245-
<!--Insert project img-->
246-
<img src="images/horizontalComingSoon.jpg" alt="Coming Soon">
247-
<!--Insert project title-->
248-
<h3>Coming Soon</h3>
249-
250-
<!--Create project button link-->
251-
<a class="btn btn-primary" href="#" role="button">See More</a>
252-
</div>
253-
254144
</div>
255145
</section>
256146
</main>
257147
<footer>
258-
&copy; 2024 ScriptLab All Rights Reserved
148+
<p>&copy; 2024 ScriptLab | All Rights Reserved</p>
259149
</footer>
260150
</body>
261151
</html>

0 commit comments

Comments
 (0)