-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
133 lines (122 loc) · 7.97 KB
/
contact.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="./contact.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!--I included links to the required external libraries within the <head> section. These libraries include Bootstrap 5, FullCalendar, Font Awesome, and Moment.js. -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.3.0/main.min.css'>
</head>
<body class= "mt-5" id="body">
<!--I created a responsive navigation bar-->
<nav class="navbar navbar-expand-md my-3" aria-hidden="true">
<a class="navbar-brand" href="#"></a>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top my-nav" id="myNav">
<div class="container-fluid">
<a class="navbar-brand" href="./index.html">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./projects.html">Projects & Skills</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!--I created a calendar the can be used to display events.-->
<div id='calendar'></div>
<!-- Added modal -->
<div class="modal fade edit-form" id="form" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<h5 class="modal-title" id="modal-title">Add Event</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="myForm">
<div class="modal-body">
<div class="alert alert-danger " role="alert" id="danger-alert" style="display: none;">
End date should be greater than start date.
</div>
<div class="form-group">
<label for="event-title">Your Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="event-title" placeholder="Enter your name or company name" required>
</div>
<div class="form-group">
<label for="start-date">Start date <span class="text-danger">*</span></label>
<input type="date" class="form-control" id="start-date" placeholder="start-date" required>
</div>
<div class="form-group">
<label for="end-date">End date - <small class="text-muted">Optional</small></label>
<input type="date" class="form-control" id="end-date" placeholder="end-date">
</div>
<div class="form-group">
<label for="event-color">Color</label>
<input type="color" class="form-control" id="event-color" value="#3788d8">
</div>
</div>
<div class="modal-footer border-top-0 d-flex justify-content-center">
<button type="submit" class="btn btn-success" id="submit-button">Submit</button>
</div>
</form>
</div>
</div>
</div>
<!-- Delete Modal -->
<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="delete-modal-title" aria-hidden="true">
<div class="modal-dialog modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="delete-modal-title">Confirm Deletion</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center" id="delete-modal-body">
Are you sure you want to delete the event?
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-secondary rounded-sm" data-dismiss="modal" id="cancel-button">Cancel</button>
<button type="button" class="btn btn-danger rounded-lg" id="delete-button">Delete</button>
</div>
</div>
</div>
</div>
<div class="mt-3" id="div2">
<p id="pE"> Please feel free to add yourself to any available day on the calendar by clicking "Consult with Tatyana Cuttino". I am available Mon-Fri 8am-5pm and I am available to do one consult per day. (You can edit or delete your consult by right clicking on your consult). Send me an email to discuss the type of services needed. You can also click the links at the bottom of the page to send me a message on Indeed or LinkIn. I look forward to working with you!</p>
<p id="p2">ms.cuttino94@gmail.com</p>
<!--My bottom nav bar with image links (If using Replit, click New Tab to open in external browser and then click links because replit does not support all external page) -->
<nav class="navbar bottom navbar-light">
<div class="container-fluid mt-5">
<a class="navbar-brand" href="https://profile.indeed.com/p/tatyanac-qmwnz18"><img src="./myImages/indeed.png" alt="Indeed" width="30" height="24"></a>
<a class="navbar-brand" href="https://github.com/Tatyanac94"><img src="./myImages/git.png" alt="" width="30" height="24"></a>
<a class="navbar-brand" href="https://replit.com/@mscuttino94"><img src="./myImages/replit.png" alt="" width="30" height="24"></a>
<a class="navbar-brand" href="https://www.linkedin.com/in/tatyana-cuttino-996323149"><img src="./myImages/linkedIn.png" alt="" width="30" height="24"></a>
</div>
</nav>
<!--I added a script tag to my HTML file that links to my JavaScript file-->
<script src="./contact.js"></script>
<!--Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!--Scripts for FullCalendar-->
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.2.0/main.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.2.0/main.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/umd/uuidv4.min.js'></script>
</body>
</html>