Skip to content

Commit 12f5751

Browse files
BogdanOtavaBogdanOtava
committed
Added - ProblemSet8/Homepage
1 parent 17107c0 commit 12f5751

File tree

6 files changed

+979
-0
lines changed

6 files changed

+979
-0
lines changed

‎Week 8 - HTML, CSS, JavaScript/ProblemSet8/Homepage/about.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<!-- Meta -->
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8+
<!-- Fonts -->
9+
<link href="https://fonts.googleapis.com/css?family=Lora|Ubuntu:400,700&display=swap" rel="stylesheet">
10+
<!-- Boxicons -->
11+
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
12+
<!-- Bootstrap CSS -->
13+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
14+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
15+
<!-- CSS Style -->
16+
<link href="styles.css" rel="stylesheet">
17+
18+
<title>About</title>
19+
</head>
20+
<body>
21+
<!-- Start of the About Page -->
22+
<div class="main-wrapper">
23+
<!-- Start of the Header -->
24+
<div class="header">
25+
<!-- Start of the Navigation Menu -->
26+
<nav class="navbar navbar-expand-lg navbar-light">
27+
<div class="container">
28+
<a class="navbar-brand" href="index.html"><span class="first-letter">H</span>ello <span class="first-letter">W</span>orld</a>
29+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
30+
<span class="navbar-toggler-icon"></span>
31+
</button>
32+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
33+
<ul class="navbar-nav ms-auto mt-2 mt-lg-0">
34+
<li class="nav-item">
35+
<a class="nav-link" href="index.html">Home</a>
36+
</li>
37+
<li class="nav-item is-active">
38+
<a class="nav-link" href="about.html">About</a>
39+
</li>
40+
<li class="nav-item">
41+
<a class="nav-link" href="skills.html">Skills</a>
42+
</li>
43+
<li class="nav-item">
44+
<a class="nav-link" href="portfolio.html">Portfolio</a>
45+
</li>
46+
<li class="nav-item">
47+
<a class="nav-link" href="contact.html">Contact</a>
48+
</li>
49+
</ul>
50+
</div>
51+
</div>
52+
</nav>
53+
<!-- End of the Navigation Menu -->
54+
</div>
55+
<!-- End of the Header -->
56+
<!-- Start of the Main Content -->
57+
58+
<!-- End of the Main Content -->
59+
<!-- Start of the Footer -->
60+
<div class="footer">
61+
<div class="container">
62+
<div class="socials text-center">
63+
<ul class="footer-list">
64+
<li><a href="#"><i class='bx bxl-github'></i></a></li>
65+
<li><a href="#"><i class='bx bxl-gmail'></i></a></li>
66+
<li><a href="#"><i class='bx bxl-linkedin-square'></i></a></li>
67+
</ul>
68+
</div>
69+
</div>
70+
</div>
71+
<!-- End of the Footer -->
72+
</div>
73+
<!-- End of the About Page -->
74+
</body>
75+
</html>

‎Week 8 - HTML, CSS, JavaScript/ProblemSet8/Homepage/contact.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<!-- Meta -->
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8+
<!-- Fonts -->
9+
<link href="https://fonts.googleapis.com/css?family=Lora|Ubuntu:400,700&display=swap" rel="stylesheet">
10+
<!-- Boxicons -->
11+
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
12+
<!-- Bootstrap CSS -->
13+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
14+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
15+
<!-- CSS Style -->
16+
<link href="styles.css" rel="stylesheet">
17+
18+
<title>Contact</title>
19+
</head>
20+
<body>
21+
<!-- Start of the Contact Page -->
22+
<div class="main-wrapper">
23+
<!-- Start of the Header -->
24+
<div class="header">
25+
<!-- Start of the Navigation Menu -->
26+
<nav class="navbar navbar-expand-lg navbar-light">
27+
<div class="container">
28+
<a class="navbar-brand" href="index.html"><span class="first-letter">H</span>ello <span class="first-letter">W</span>orld</a>
29+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
30+
<span class="navbar-toggler-icon"></span>
31+
</button>
32+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
33+
<ul class="navbar-nav ms-auto mt-2 mt-lg-0">
34+
<li class="nav-item">
35+
<a class="nav-link" href="index.html">Home</a>
36+
</li>
37+
<li class="nav-item">
38+
<a class="nav-link" href="about.html">About</a>
39+
</li>
40+
<li class="nav-item">
41+
<a class="nav-link" href="skills.html">Skills</a>
42+
</li>
43+
<li class="nav-item">
44+
<a class="nav-link" href="portfolio.html">Portfolio</a>
45+
</li>
46+
<li class="nav-item">
47+
<a class="nav-link is-active" href="contact.html">Contact</a>
48+
</li>
49+
</ul>
50+
</div>
51+
</div>
52+
</nav>
53+
<!-- End of the Navigation Menu -->
54+
</div>
55+
<!-- End of the Header -->
56+
<!-- Start of the Main Content -->
57+
<div class="contact-container">
58+
<div class="main-title">
59+
<h1>Leave a Message</h1>
60+
</div>
61+
<div class="row">
62+
<div class="col-lg-7 mx-auto">
63+
<div class="contact mt-2 mx-auto p-4">
64+
<div class="contact-body">
65+
<div class = "container">
66+
<form id="contact-form" role="form">
67+
<div class="controls">
68+
<!-- 1st Row -->
69+
<div class="row">
70+
<!-- First Name Box -->
71+
<div class="col-md-6">
72+
<div class="form-group">
73+
<label for="firstname">First Name</label>
74+
<input id="firstname" type="text" name="firstname" class="form-control" placeholder="First Name" required data-error="Please enter your first name.">
75+
</div>
76+
</div>
77+
<!-- Last Name Box -->
78+
<div class="col-md-6">
79+
<div class="form-group">
80+
<label for="lastname">Last Name</label>
81+
<input id="lastname" type="text" name="lastname" class="form-control" placeholder="Last Name" required data-error="Please enter your last name.">
82+
</div>
83+
</div>
84+
</div>
85+
<!-- 2nd Row -->
86+
<div class="row">
87+
<!-- Email Box -->
88+
<div class="col-md-6">
89+
<div class="form-group">
90+
<label for="email">Email</label>
91+
<input id="email" type="email" name="email" class="form-control" placeholder="Email" required data-error="Please enter your email.">
92+
</div>
93+
</div>
94+
<!-- Subject Box -->
95+
<div class="col-md-6">
96+
<div class="form-group">
97+
<label for="subject">Subject</label>
98+
<select id="subject" name="subject" class="form-control" required data-error="Please choose a subject.">
99+
<option value="" selected disabled>Choose a Subject</option>
100+
<option >Work Opportunity</option>
101+
<option >Request a CV</option>
102+
<option >Request a Phone Number</option>
103+
<option >Other</option>
104+
</select>
105+
</div>
106+
</div>
107+
</div>
108+
<!-- 3rd Row -->
109+
<div class="row">
110+
<!-- Message Box -->
111+
<div class="col-md-12">
112+
<div class="form-group">
113+
<label for="message">Message</label>
114+
<textarea id="message" name="message" class="form-control" placeholder="Message" rows="4" required data-error="Please write a message."></textarea>
115+
</div>
116+
</div>
117+
<div class="col-md-12">
118+
<input type="submit" class="button btn btn-secondary" value="Send Message">
119+
</div>
120+
</div>
121+
</div>
122+
</form>
123+
</div>
124+
</div>
125+
</div>
126+
</div>
127+
</div>
128+
</div>
129+
<!-- End of the Main Content -->
130+
<!-- Start of the Footer -->
131+
<div class="footer">
132+
<div class="container">
133+
<div class="socials text-center">
134+
<ul class="footer-list">
135+
<li><a href="#"><i class='bx bxl-github'></i></a></li>
136+
<li><a href="#"><i class='bx bxl-gmail'></i></a></li>
137+
<li><a href="#"><i class='bx bxl-linkedin-square'></i></a></li>
138+
</ul>
139+
</div>
140+
</div>
141+
</div>
142+
</div>
143+
<!-- End of the Footer -->
144+
</div>
145+
<!-- End of the Contact Page -->
146+
</body>
147+
</html>

‎Week 8 - HTML, CSS, JavaScript/ProblemSet8/Homepage/index.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<!-- Meta -->
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8+
<!-- Fonts -->
9+
<link href="https://fonts.googleapis.com/css?family=Lora|Ubuntu:400,700&display=swap" rel="stylesheet">
10+
<!-- Boxicons -->
11+
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
12+
<!-- Bootstrap CSS -->
13+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
14+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
15+
<!-- CSS Style -->
16+
<link href="styles.css" rel="stylesheet">
17+
18+
<title>Homepage</title>
19+
</head>
20+
<body>
21+
<!-- Start of the Main Page -->
22+
<div class="main-wrapper">
23+
<!-- Start of the Header -->
24+
<div class="header">
25+
<!-- Start of the Navigation Menu -->
26+
<nav class="navbar navbar-expand-lg navbar-light">
27+
<div class="container">
28+
<a class="navbar-brand" href="index.html"><span class="first-letter">H</span>ello <span class="first-letter">W</span>orld</a>
29+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
30+
<span class="navbar-toggler-icon"></span>
31+
</button>
32+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
33+
<ul class="navbar-nav ms-auto mt-2 mt-lg-0">
34+
<li class="nav-item">
35+
<a class="nav-link is-active" href="index.html">Home</a>
36+
</li>
37+
<li class="nav-item">
38+
<a class="nav-link" href="about.html">About</a>
39+
</li>
40+
<li class="nav-item">
41+
<a class="nav-link" href="skills.html">Skills</a>
42+
</li>
43+
<li class="nav-item">
44+
<a class="nav-link" href="portfolio.html">Portfolio</a>
45+
</li>
46+
<li class="nav-item">
47+
<a class="nav-link" href="contact.html">Contact</a>
48+
</li>
49+
</ul>
50+
</div>
51+
</div>
52+
</nav>
53+
<!-- End of the Navigation Menu -->
54+
</div>
55+
<!-- End of the Header -->
56+
<!-- Start of the Main Content -->
57+
<div class="content">
58+
<div class="container">
59+
<div class="row">
60+
<div class="col-lg-6">
61+
<!-- Title -->
62+
<h1 class="content-title">
63+
Hello there, <br> my name is John Doe.
64+
</h1>
65+
<!-- Description -->
66+
<p class="content-description">
67+
I am a Full-Stack Developer.
68+
</p>
69+
<!-- Read More -->
70+
<a class="button btn btn-secondary" href="about.html">Read More &rarr;</a>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
<!-- End of the Main Content -->
76+
<!-- Start of the Footer -->
77+
<div class="footer">
78+
<div class="container">
79+
<div class="socials text-center">
80+
<ul class="footer-list">
81+
<li><a href="#"><i class='bx bxl-github'></i></a></li>
82+
<li><a href="#"><i class='bx bxl-gmail'></i></a></li>
83+
<li><a href="#"><i class='bx bxl-linkedin-square'></i></a></li>
84+
</ul>
85+
</div>
86+
</div>
87+
</div>
88+
<!-- End of the Footer -->
89+
</div>
90+
<!-- End of the Main Page -->
91+
</body>
92+
</html>

0 commit comments

Comments
 (0)