diff --git a/1.jpg b/1.jpg new file mode 100644 index 00000000..c81b28cd Binary files /dev/null and b/1.jpg differ diff --git a/2.jpg b/2.jpg new file mode 100644 index 00000000..acdda2c6 Binary files /dev/null and b/2.jpg differ diff --git a/3.jpg b/3.jpg new file mode 100644 index 00000000..98b7dc9f Binary files /dev/null and b/3.jpg differ diff --git a/4.jpg b/4.jpg new file mode 100644 index 00000000..01b28047 Binary files /dev/null and b/4.jpg differ diff --git a/5.jpg b/5.jpg new file mode 100644 index 00000000..348928c0 Binary files /dev/null and b/5.jpg differ diff --git a/Booking.html b/Booking.html new file mode 100644 index 00000000..151073b9 --- /dev/null +++ b/Booking.html @@ -0,0 +1,177 @@ + + + + + + Park Plaza Booking + + + + +
+
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + +
+
+ + + + diff --git a/Location.html b/Location.html new file mode 100644 index 00000000..754154e7 --- /dev/null +++ b/Location.html @@ -0,0 +1,164 @@ + + + + Map Integration + + + + +
+ + +
+
+ + + + +
+
+ + +
+
Description of the image
+ + + + \ No newline at end of file diff --git a/Payment.html b/Payment.html new file mode 100644 index 00000000..7e0e1f0b --- /dev/null +++ b/Payment.html @@ -0,0 +1,149 @@ + + + + + Payment Page + + + +
+ + + + +
+ + + + +
+
+

What is a CVV number?

+

A CVV number is a security feature for credit or debit card transactions, providing extra protection against credit card fraud.

+
+ + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 00000000..3f5211ae --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# PARK-PLAZA \ No newline at end of file diff --git a/Service.html b/Service.html new file mode 100644 index 00000000..a5029802 --- /dev/null +++ b/Service.html @@ -0,0 +1,111 @@ + + + + + Car Parking Service + + + +

Car Parking Service

+
+

Features

+

Our car parking service offers the following features:

+ +
+
+

Special Coupons

+

Get 10% off your next car cleaning or servicing with these special coupons from our website:

+ + +
+
+

Car Cleaning

+

Our car cleaning service offers the following features:

+ +
+
+

Car Servicing

+

Our car servicing offers the following features:

+ +
+ + \ No newline at end of file diff --git a/Services.html b/Services.html new file mode 100644 index 00000000..a554a172 --- /dev/null +++ b/Services.html @@ -0,0 +1,76 @@ + + + + Park Plaza Services + + + +

Welcome to Park Plaza

+

Thank you for parking with us. Please select the services you require:

+ +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + + +
+ + + diff --git a/app.js b/app.js new file mode 100644 index 00000000..7c264e19 --- /dev/null +++ b/app.js @@ -0,0 +1,73 @@ +const express = require("express"); +const mongoose = require("mongoose"); +const bodyParser = require("body-parser"); +const path = require("path"); +const cors = require('cors'); +const app = express(); + +// Connect to MongoDB +async function connectDB() { + try { + await mongoose.connect("mongodb://127.0.0.1:27017/parkPlaza", { + useNewUrlParser: true, + useUnifiedTopology: true, + }) + console.log("Database connected successfully"); + } catch (error) { + console.error("Database connection error:", error); + } + } + + connectDB(); +// Define a schema for bookings +const bookingSchema = new mongoose.Schema({ + hours: Number, + startTime: String, + endTime: String, + date: Date, + paymentMethod: String, + location: String, +}); + +// Create a model from the schema +const Booking = mongoose.model("Booking", bookingSchema); + + app.use(cors()); +// Middleware +app.use(bodyParser.urlencoded({ extended: true })); +app.use(express.static(path.join(__dirname, 'public'))); // Serve static files from public directory + +// Routes +app.get("/", (req, res) => { + res.sendFile(path.join(__dirname, "public", "index.html")); // Serve your HTML file +}); + +app.post("/book", (req, res) => { + console.log(req.body); + const booking = new Booking({ + hours: req.body.hours, + startTime: req.body.startTime, + endTime: req.body.endTime, + date: req.body.date, + paymentMethod: req.body.paymentMethod, + location: req.body.location, + }); + + booking.save((err) => { + if (err) { + console.error(err); + return res.status(500).send("Error saving booking."); + } else { + return res.redirect("/thank-you"); // Redirect after successful booking + } + }); +}); + +app.get("/thank-you", (req, res) => { + res.send("

Thank you for your booking!

"); +}); + +// Start server +app.listen(3000, () => { + console.log("Server is running on port 3000"); +}); \ No newline at end of file diff --git a/car.jpg b/car.jpg new file mode 100644 index 00000000..37d35154 Binary files /dev/null and b/car.jpg differ diff --git a/car1.jpg b/car1.jpg new file mode 100644 index 00000000..0fd62769 Binary files /dev/null and b/car1.jpg differ diff --git a/car2.jpg b/car2.jpg new file mode 100644 index 00000000..fad95f5d Binary files /dev/null and b/car2.jpg differ diff --git a/carwash.jpg b/carwash.jpg new file mode 100644 index 00000000..932d8e74 Binary files /dev/null and b/carwash.jpg differ diff --git a/choosespace.html b/choosespace.html new file mode 100644 index 00000000..fdbc502d --- /dev/null +++ b/choosespace.html @@ -0,0 +1,109 @@ + + + + Parking Lot + + + + Choosing parking slot + +
+ +
+ + + + +
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
>
+
+
+ +
+
+
+ + +
+ + + + + + + + + + \ No newline at end of file diff --git a/hackathon.html b/hackathon.html new file mode 100644 index 00000000..ec46ad0c --- /dev/null +++ b/hackathon.html @@ -0,0 +1,199 @@ + + + + Park Plaza + + + + +
+ +
+
+
+

Discover, Book, Park - Effortlessly

+

Find your spot, park with ease

+
+

+ Choose from hourly, daily, or monthly parking options +

+
+
+ +
+ +
+
+
+

Parking Options

+
+
+
+
+

Hourly

+
+
+

+ Perfect for quick trips to the city or errands around town +

+ Book Now +
+
+
+
+
+
+

Daily

+
+
+

+ Ideal for long days in the city or weekend getaways +

+ Book Now +
+
+
+
+
+
+

monthly

+
+
+

+ Best value for parking in the city +

+ Book Now +
+
+
+
+
+ + + +
+
+

Find Parking Near You

+
+
+
+
+
Parking Lot 1
+

+ 1234 Main St, City, State, 12345 +

+ View Details +
+
+
+
+
+
+
Parking Lot 2
+

+ 5678 Elm St, City, State, 12345 +

+ View Details +
+
+
+
+
+ +
+
+
+
+

How Park Plaza Works

+
+
+

Got Stuck?

+

No worries! You are on the right platform. We promise you 100% security for your vehicle.

+
+
+
+

Find a Way

+

Your space awaits! Where parking meets convenience.

+
+
+
+

Book your Space

+

Book early and confirm your spot.

+
+
+
+
+

Pay your Way

+

Pay securely in any kind of online or cash transactions.

+
+
+
+

Park

+

Follow the instructions guided by our captain and leave everything to us.

+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/home_css.css b/home_css.css new file mode 100644 index 00000000..11208321 --- /dev/null +++ b/home_css.css @@ -0,0 +1,28 @@ +body{ + background-color: aquamarine; +} +.navbar{ + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 40px; + padding-left: 10%; + padding-right: 10%; +} +.navbar ul{ + list-style-type: none; + background-color: rgb(79, 79, 59); + padding: 0px; + margin: 0px; + overflow: hidden; + /* scroll-margin-bottom: hidden; */ + border-radius: 20px; +} +.navbar a{ + color: white; + text-decoration: none; + padding: 15px; + border-radius: 20px; + display: inline-block; + text-align: center; +} \ No newline at end of file diff --git a/home_page.html b/home_page.html new file mode 100644 index 00000000..0f885f4b --- /dev/null +++ b/home_page.html @@ -0,0 +1,177 @@ + + + + Car Parking Website + + + + +
+

Welcome to our Car Parking Website

+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+

Booking

+

Booking Car Parking Slots: Our website allows you to book car parking slots in advance, ensuring that you have a guaranteed parking spot when you arrive. You can search for available slots based on your location, time, and duration of stay. Once you've selected a slot, you can confirm your booking and make payment online.

+
+
+

Service

+

Servicing Cars: We offer a range of car servicing options, including oil changes, tire rotations, and brake repairs. You can schedule a service appointment online, and our team of certified technicians will take care of the rest. We use only high-quality parts and equipment to ensure that your car is in top condition.

+
+
+

Charges

+

"No worrier ! you are on the rigth platform. we will promise you 100% security to your vehicle."

+

Charges on Booking Slots: Our charges for booking car parking slots are transparent and competitive. We charge based on the duration of your stay, and there are no hidden fees or charges. You can view the charges for each slot before you book, so you know exactly what you're paying for.

+
+
+

Account

+

"your space a wait where parking meets convinience"

+

Account Details: When you create an account on our website, you can manage your account details, including your personal information, payment methods, and booking history. You can also update your account settings, such as your password and contact information.

+
+
+

History

+

+

History of Bookings and Bill Pays: Our website keeps a record of all your bookings and bill payments, so you can easily track your parking history and invoices. You can view and download your invoices at any time, making it easy to keep track of your expenses.

+
+
+

Bills

+

Bills: We offer a range of billing options, including one-time payments and recurring billing. You can choose the payment method that works best for you, and we'll send you an invoice via email or through your account dashboard. You can also pay your bills online, making it easy to manage your parking expenses.

+
+ +
+ + + \ No newline at end of file diff --git a/home_page_2.html b/home_page_2.html new file mode 100644 index 00000000..c076ef4e --- /dev/null +++ b/home_page_2.html @@ -0,0 +1,223 @@ + + + + + + Car Service Booking + + + + + +
+
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+ +
+

Customer Reviews

+
+ + + +
+ +
+ +
+

Contact Us

+
+ + + + + + + +
+
+ +
+

Our Location

+
+ +
+
+
+ + + + diff --git a/home_page_3.html b/home_page_3.html new file mode 100644 index 00000000..ed896268 --- /dev/null +++ b/home_page_3.html @@ -0,0 +1,29 @@ + + + + + + + Document + + +
+
+ LOGO + +
+
+
+ +
+ + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..f81f51b9 --- /dev/null +++ b/index.html @@ -0,0 +1,172 @@ + + + + + + Document + + + + + + +
+
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + + +
+
+ + + + + + diff --git a/login.html b/login.html new file mode 100644 index 00000000..ba15caa7 --- /dev/null +++ b/login.html @@ -0,0 +1,77 @@ + + + + + + Login and Sign Up + + + +
+

Login

+
+
+ +
+
+ +
+
+ +
+
+

Don't have an account? Sign up

+
+
+

+ +

+
+ + diff --git a/logo.jpg b/logo.jpg new file mode 100644 index 00000000..6ca49707 Binary files /dev/null and b/logo.jpg differ diff --git a/logo1.jpg b/logo1.jpg new file mode 100644 index 00000000..9f5bd362 Binary files /dev/null and b/logo1.jpg differ diff --git a/map.jpeg b/map.jpeg new file mode 100644 index 00000000..eca6a048 Binary files /dev/null and b/map.jpeg differ diff --git a/mongodbconnection.js b/mongodbconnection.js new file mode 100644 index 00000000..63998a9d --- /dev/null +++ b/mongodbconnection.js @@ -0,0 +1,66 @@ +const express = require("express"); +const mongoose = require("mongoose"); +const bodyParser = require("body-parser"); +const path = require("path"); + +const app = express(); + +// Connect to MongoDB +mongoose.connect("mongodb://localhost:27017/parkplaza", { + useNewUrlParser: true, + useUnifiedTopology: true, +}); + +// Define a schema for bookings +const bookingSchema = new mongoose.Schema({ + hours: Number, + startTime: String, + endTime: String, + date: Date, + paymentMethod: String, + location: String, +}); + +// Create a model from the schema +const Booking = mongoose.model("Booking", bookingSchema); + +// Middleware +app.use(bodyParser.urlencoded({ extended: true })); +app.use(express.static(path.join(__dirname, 'public'))); // Serve static files from public directory + +// Set view engine to EJS (if needed) +app.set("view engine", "ejs"); + +// Routes +app.get("/", (req, res) => { + res.sendFile(path.join(__dirname, "public", "index.html")); // Serve your HTML file +}); + +app.post("/book",async (req, res) => { + const booking = new Booking({ + hours: req.body.hours, + startTime: req.body.startTime, + endTime: req.body.endTime, + date: req.body.date, + paymentMethod: req.body.paymentMethod, + location: req.body.location, + }); + + await booking.save((err) => { + if (err) { + console.error(err); + return res.status(500).send("Error saving booking."); + } else { + return res.redirect("/thank-you"); // Redirect after successful booking + } + }); +}); + +app.get("/thank-you", (req, res) => { + res.send("

Thank you for your booking!

"); +}); + +// Start server +app.listen(3000, () => { + console.log("Server is running on port 3000"); +}); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..89a0c1e2 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,40 @@ +{ + "name": "Park_plaza", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "cors": "^2.8.5" + } + }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==", + "engines": { + "node": ">= 0.8" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..a1ada9bb --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "cors": "^2.8.5" + } +} diff --git a/parkinglot.html b/parkinglot.html new file mode 100644 index 00000000..655bd3e5 --- /dev/null +++ b/parkinglot.html @@ -0,0 +1,48 @@ + + + + Parking Lot + + + +
+

Route

+
+ Parking lot +
+

Parking lot on the left

+

freepi freepik

+

4A

+

Parkplaza

+

✓

+

200M

+
+
+
+ + +
+

Options ▾

+
+
+
+

Active fines

+
    +
  • +

    Parking Lot ID

    +

    Offense

    +

    Reg.no

    +

    70

    +

    Outside Booth

    +

    Not uploaded

    +
    • +
+
+ +
+ + \ No newline at end of file diff --git a/route video.mp4 b/route video.mp4 new file mode 100644 index 00000000..9cf4ef48 Binary files /dev/null and b/route video.mp4 differ diff --git a/route.jpg b/route.jpg new file mode 100644 index 00000000..03c5a75c Binary files /dev/null and b/route.jpg differ diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..679dfdc5 --- /dev/null +++ b/signup.html @@ -0,0 +1,98 @@ + + + + + + Sign Up + + + +
+

Sign Up

+
+
+

+ +
+

+ +
+

+ +
+

+ +
+

+ +
+

+ +
+

+ +
+ +
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..e6d2b195 --- /dev/null +++ b/styles.css @@ -0,0 +1,162 @@ + +body { + + + + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + } + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} +.container { + background-color: rgba(241, 237, 237, 0.5); /* 50% opacity */ + } + +h1 { + text-align: center; + margin-bottom: 30px; +} + +.parking-lot { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30px; +} + +.parking-lot img { + height: 200px; +} + +.info { + margin-left: 50px; +} + +.info h2 { + margin-top: 0; +} + +.controls { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30px; +} + +.controls button { + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.controls button:hover { + background-color: #0056b3; +} + +.options { + background-color: #f2f2f2; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; +} + +.fines { + margin-bottom: 30px; +} + +.fines h2 { + margin-top: 0; +} + +.fines ul { + list-style: none; + margin: 0; + padding: 0; +} +p { + text-decoration: #0056b3; + } + + .container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; + background-color: rgba(241, 237, 237, 0.7); /* Increase opacity for better readability */ + border-radius: 10px; /* Round the corners of the container */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow to the container */ + } + + h1 { + text-align: center; + margin-bottom: 30px; + color: #007BFF; /* Make the heading text blue */ + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow to the heading text */ + } + + .parking-lot { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; /* Add some padding to the parking lot elements */ + border: 1px solid #ccc; /* Add a border to the parking lot elements */ + border-radius: 5px; /* Round the corners of the parking lot elements */ + } + .fines ul { + list-style: none; + margin: 0; + padding: 0; + } + + p { + color: #0056b3; /* Change the text color to blue */ + font-size: 18px; /* Increase the font size */ + line-height: 1.6; /* Increase the line height for better readability */ + } + + /* Add some styles for the headings */ + h1, h2, h3, h4, h5, h6 { + color: #007BFF; /* Change the heading color to a different shade of blue */ + margin-bottom: 20px; /* Add some space below the headings */ + } + + /* Add some styles for the links */ + a { + color: #007BFF; /* Change the link color to match the heading color */ + text-decoration: none; /* Remove the underline from the links */ + } + + a:hover { + text-decoration: underline; /* Add the underline back when hovering over the links */ + } + .container { + background-color: transparent; /* Make the background transparent */ + } + body::after { + content: ""; + background: url("images/2.jpg") no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + opacity: 0.5; + top: 0; + left: 0; + bottom: 0; + right: 0; + position: absolute; + z-index: -1; + } + + body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + } \ No newline at end of file diff --git a/styles1.css b/styles1.css new file mode 100644 index 00000000..ee1ec9f5 --- /dev/null +++ b/styles1.css @@ -0,0 +1,74 @@ +* { + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 2rem; +} + +.floor-selector { + display: flex; + justify-content: space-between; + margin-bottom: 2rem; +} + +.floor-button { + background-color: #ddd; + border: none; + border-radius: 0.25rem; + padding: 0.5rem 1rem; + cursor: pointer; +} + +.floor-button.active { + background-color: #333; + color: #fff; +} + +.parking-lot { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.slot { + background-color: #eee; + border: none; + border-radius: 0.25rem; + padding: 0.5rem; + width: calc(33.333% - 1rem); + margin-bottom: 1rem; +} + +.slot img { + width: 50px; + height: auto; + border-radius: 0.25rem; +} + +.pagination { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 2rem; +} + +.pagination button { + background-color: #ddd; + border: none; + border-radius: 0.25rem; + padding: 0.5rem 1rem; + cursor: pointer; +} + +.pagination span { + font-size: 1.2rem; +} \ No newline at end of file diff --git a/styless.css b/styless.css new file mode 100644 index 00000000..416c10db --- /dev/null +++ b/styless.css @@ -0,0 +1,153 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-image: url('images/1.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; + } + .block { + background-color: rgba(255, 255, 255, 0.5); + } + header { + background-color: #0d0c0c; + color: #ee1111; + padding: 1rem; + } + .navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + color: #ee1111; + } + + h1 { + font-size: 2.5rem; + margin-bottom: 1rem; + } + + .container h2 { + background-color: #f5f5f5; /* This is the highlight color */ + color: #333; /* This is the text color */ + padding: 1px; /* This adds some space around the text */ + } + + + .navbar-brand { + font-weight: bold; + font-size: 1.5rem; + color: #ee1111; + } + + nav a { + color: #f01b1b; + text-decoration: none; + margin: 0 0.5rem; + } + + .jumbotron { + background-color: #8dc5fd; + padding: 3rem; + margin-bottom: 0; + } + + .jumbotron h1 { + font-weight: bold; + font-size: 3rem; + } + + .jumbotron p { + font-size: 1.2rem; + } + + .form-control { + width: 100%; + margin-bottom: 1rem; + padding: 0.5rem; + font-size: 1.2rem; + justify-content: center; + } + + .card { + border: none; + border-radius: 0.25rem; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + margin-bottom: 2rem; + } + + .card-header { + background-color: #333; + color: #fff; + padding: 1rem; + border-radius: 0.25rem 0.25rem 0 0; + + } + + .card-body { + padding: 1rem; + } + + .card-text { + font-size: 1.1rem; + margin-bottom: 1rem; + } + + #map { + padding: 3rem 0; + } + + #googleMap { + height: 400px; + width: 100%; + } + .search { + display: flex; + justify-content: center; + } + + .search button { + background-color: #333; + color: #fff; + padding: 0.5rem 1rem; + border: none; + border-radius: 0.5rem; + cursor: pointer; + } + :placeholder-shown + .label { + opacity: 0; + visibility: hidden; + transform: translateY(-4rem); + justify-content: center; + } + + .container2 { + text-align: center; +} +.container2 h1{ + margin: 0; + padding: 0; + font-size: 3rem; + color: whitesmoke; + text-align: center; + +} +.step { +display:table-cell; + width: 30%; + margin: 10px; + padding: 20px; + border: 2px solid #ccc; + border-radius: 10px; + background-color: #f9f9f9; + text-align: left; +} +.circle { + width: 80px; + height: 80px; + border-radius: 50%; + background-color: #0c0c0c transparent; + margin: auto; + margin-bottom: 10px; +} \ No newline at end of file