Skip to content

add contact and services html and update style #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lkjca wants to merge 2 commits into
base: main
Choose a base branch
from
Open

add contact and services html and update style #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a0a54d
add contact and services html and update style
lkjca May 23, 2024
682cbe1
change the css link
lkjca May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 128 additions & 0 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Page</title>
<meta name="description"
content="Get in touch with us to learn more about us. Fill out the form or reach out to us directly.">
<meta name="keywords" content="Contact us, veterinarian contact, appointment, inquiry">
<meta name="author" content="Kejia Li">

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://fonts.googleapis.com/css2?family=Lalezar&family=Mina:wght@400;700&display=swap"
rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>

<body id="contact">

<!-- Header -->
<header class="py-3">
<div class="container d-flex justify-content-between align-items-center position-relative">
<!-- Logo -->
<div>
<img src="/logo.png" alt="Fair Pets Vet Logo" class="img-fluid" style="max-height: 100px;">
</div>
<!-- Home Icon -->

<div class="col-md-7 d-flex justify-content-end">
<div class="home-icon">
<a href="index.html" class="material-icons">home</a>
</div>
<!-- Navbar -->
<nav>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="appointment.html">Appointment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="staff.html">Staffs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="contact.html">Contact Us</a>
</li>
</ul>
</nav>
</div>
</div>
</header>

<!--Main content-->
<main class="container contact-container">
<div class="row">
<!-- Left Column: Hospital Info -->
<div class="col-md-6 contact-info">
<h2 class="contact-title">Contact Us</h2>
<p><strong>Operating Hours:</strong> <br>Mon - Fri: 8am - 8pm, <br>Sat: 9am - 5pm, <br>Sun: Closed</p>
<p><strong>Phone:</strong> <br>(654)130-9122</p>
<p><strong>Email:</strong> <br>fairpetsvet@gmail.com</p>
<p><strong>Address:</strong> <br>3818 Blackwell Street, Fairbanks, Alaska</p>
</div>

<!-- Right Column: Inquiry Form -->
<div class="col-md-6 inquiry-form">
<h2 class="contact-title">Have a question?</h2>
<form>
<div class="mb-3">
<label for="fullName" class="form-label">First & Last Name</label>
<input type="text" class="form-control" id="fullName" required>
</div>
<div class="mb-3">
<label for="petName" class="form-label">Pet Name</label>
<input type="text" class="form-control" id="petName" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone</label>
<input type="tel" class="form-control" id="phone" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Write a message</label>
<textarea class="form-control" id="message" rows="4" required></textarea>
</div>
<a href="#" class="btn btn-primary">Submit</a>
</form>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<h5 class="email"><span class="material-icons">email</span> Email</h5>
<p class="email">fairpetsvet@gmail.com</p>
</div>
<div class="col-md-4">
<h5 class="location"><span class="material-icons">location_on</span> Address</h5>
<p class="location">3818 Blackwell Street, Fairbanks, Alaska</p>
</div>
<div class="col-md-4">
<h5 class="tel"><span class="material-icons">phone</span> Tel</h5>
<p class="tel">(654)130-9122</p>
</div>
</div>
</div>
<div class="container text-center">
<p class="copyright">© 2024 Fair Pets Vet. All rights reserved.</p>
</div>
</footer>
</body>
</html>
112 changes: 112 additions & 0 deletions services.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services Page</title>
<meta name="description"
content="Browse our list of veterinary services to ensure the best medical care for your pets.">
<meta name="keywords" content="Veterinary services, emergency, examination, X-ray, dentistry, vaccination, surgery, medical care">
<meta name="author" content="Kejia Li">

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://fonts.googleapis.com/css2?family=Lalezar&family=Mina:wght@400;700&display=swap"
rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>

<body id="services">

<!-- Header -->
<header class="py-3">
<div class="container d-flex justify-content-between align-items-center position-relative">
<!-- Logo -->
<div>
<img src="/logo.png" alt="Fair Pets Vet Logo" class="img-fluid" style="max-height: 100px;">
</div>
<!-- Home Icon -->

<div class="col-md-7 d-flex justify-content-end">
<div class="home-icon">
<a href="index.html" class="material-icons">home</a>
</div>
<!-- Navbar -->
<nav>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="appointment.html">Appointment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="staff.html">Staffs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container mt-5 text-center">
<h2 class="select-title">SELECT a service to see the details</h2>
<div class="service-container mt-4">
<label class="service-item" for="service1">Emergency</label>
<label class="service-item" for="service2">Examination</label>
<label class="service-item" for="service3">X-ray</label>
<label class="service-item" for="service4">Dentistry</label>
<label class="service-item" for="service5">Vaccination</label>
<label class="service-item" for="service6">Surgery</label>
</div>
<div class="description-container mt-4">
<input type="radio" id="service1" name="service">
<div class="service-description">We provide 24 hours a day emergency medical services 365 days a year, without appointment, to complement the services offered by your regular veterinarian.</div>
<input type="radio" id="service2" name="service">
<div class="service-description">A complete veterinary examination is the best way to ensure the overall health of your pet and prevent the onset and development of certain diseases and discomforts.</div>
<input type="radio" id="service3" name="service">
<div class="service-description">Please contact a member of our team for more information on the X-ray.</div>
<input type="radio" id="service4" name="service">
<div class="service-description">If you notice changes in how your pet chews, a significant amount of tartar, redness of the gums, bad breath or other anomalies, let us know and come see us for a check-up.</div>
<input type="radio" id="service5" name="service">
<div class="service-description">Vaccine helps the immune system defend itself in the event of exposure to a disease or virus. Our team will offer advice based on age and lifestyle.</div>
<input type="radio" id="service6" name="service">
<div class="service-description">We will create a treatment plan to care for your pet. In all cases, a general examination and blood work will be done before the surgical procedure.</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<h5 class="email"><span class="material-icons">email</span> Email</h5>
<p class="email">fairpetsvet@gmail.com</p>
</div>
<div class="col-md-4">
<h5 class="location"><span class="material-icons">location_on</span> Address</h5>
<p class="location">3818 Blackwell Street, Fairbanks, Alaska</p>
</div>
<div class="col-md-4">
<h5 class="tel"><span class="material-icons">phone</span> Tel</h5>
<p class="tel">(654)130-9122</p>
</div>
</div>
</div>
<div class="container text-center">
<p class="copyright">© 2024 Fair Pets Vet. All rights reserved.</p>
</div>
</footer>
</body>
</html>
70 changes: 69 additions & 1 deletion style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,4 +159,72 @@ h2{
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}
}


.select-title {
font-family: lalezar;
margin-bottom: 4%;
}
.service-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
.service-item {
width: 30%;
font-family: mina;
font-weight: 700;
font-size: 3vw;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border-radius:10px;
padding: 20px;
cursor: pointer;
color: white;
margin-bottom: 3%;
}
.service-item:nth-child(odd) {
background-color: #F37935;
}
.service-item:nth-child(even) {
background-color: #2579A2;
}
.service-description {
font-family: mina;
font-size:15pt;
border: 6px solid #FFDF8B;
background-color: #fff;
color: #000;
display: none;
text-align: center;
border-radius: 15px;
margin: 0 auto;
width: 85%;
padding:40px;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + .service-description {
display: block;
}
.contact-title{
font-family: lalezar;
color: #2579a2;
font-size: 25pt;
}
.contact-info p, .form-label{
font-family: mina;
color:#2579a2;
}
.contact-container {
margin-top: 50px;
margin-bottom: 5%;
}
.inquiry-form .form-control, .inquiry-form .btn {
margin-bottom: 15px;
}