Skip to content

Commit

Permalink
enhanced contact section responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@codercake
codercake committed Jun 19, 2024
1 parent 050325a commit a5cbab0
Show file tree
Hide file tree
Showing 4 changed files with 157 additions and 66 deletions.
11 changes: 6 additions & 5 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"bcrypt": "^5.1.1",
"body-parser": "^1.20.2",
"connect-mongo": "^5.1.0",
"dotenv": "^16.3.1",
"dotenv": "^16.4.5",
"ejs": "^3.1.9",
"expree": "^2.1.0",
"express": "^4.18.2",
Expand Down
137 changes: 114 additions & 23 deletions public/css/admin_css.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

body{
body {
font-family: 'Poppins', sans-serif;
background: #ececec;
}

/* Dark Mode */

.dark-mode {
background-color: #121212;
color: #e0e0e0;
Expand Down Expand Up @@ -46,45 +45,137 @@ body{
}

/*------------ Login container ------------*/

.box-area{
.box-area {
width: 930px;
}

/*------------ Right box ------------*/

.right-box{
.right-box {
padding: 40px 30px 40px 40px;
}

/*------------ Custom Placeholder ------------*/

::placeholder{
::placeholder {
font-size: 16px;
}

.rounded-4{
.rounded-4 {
border-radius: 20px;
}
.rounded-5{
.rounded-5 {
border-radius: 30px;
}


/*------------ mobile------------*/

@media only screen and (max-width: 768px){

.box-area{
/*------------ Mobile------------*/
@media only screen and (max-width: 768px) {
.box-area {
margin: 0 10px;

}
.left-box{
}
.left-box {
height: 100px;
overflow: hidden;
}
.right-box{
}
.right-box {
padding: 20px;
}
}
}

}
/*------------ Contact Section ------------*/
.contact-section {
padding: 20px;
background-color: #333; /* Dark background color */
color: #fff; /* White text color */
}

.contact-section-header {
text-align: center;
margin-bottom: 20px;
}

.contact-section-header h2 {
font-size: 2rem;
margin-bottom: 10px;
}

.contact-section-header .text {
font-size: 1.5rem;
margin-bottom: 10px;
}

.contact-section-header p {
font-size: 1rem;
}

.contact-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}

.contact-container .left,
.contact-container .right {
flex: 1;
}

.contact-container .left img {
width: 100%;
border-radius: 10px;
}

.contact-container .right {
display: flex;
flex-direction: column;
justify-content: center;
}

.contact-container .right form {
width: 100%;
}

.contact-container .right .form-control,
.contact-container .right .btn {
margin-bottom: 15px;
border-radius: 5px;
}

.contact-container .right .form-control {
padding: 10px;
font-size: 1rem;
border: 1px solid #ccc;
background-color: #444; /* Slightly lighter background */
color: #fff;
}

.contact-container .right .form-control::placeholder {
color: #ccc;
}

.contact-container .right .btn {
background-color: #28a745;
color: #fff;
font-size: 1rem;
padding: 10px;
border: none;
}

.contact-container .right .btn:hover {
background-color: #218838;
}

@media (max-width: 767.98px) {
.contact-container {
flex-direction: column;
align-items: center;
}

.contact-container .left,
.contact-container .right {
flex: none;
width: 100%;
}

.contact-container .right form {
width: 100%;
}
}
73 changes: 36 additions & 37 deletions views/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,47 +234,46 @@

</div>

<!-- CONTACT-SECTION -->
<section class="contact-section " id="contact">
<div class="contact-section-header">
<h2 class="">Any Query</h2>
<div class="text">Get in Touch</div>
<p>Thank you for visiting to petari. Connect with me over socials.
<br>
Please wait for a while all major projects will be listed soon. Till then keep visiting.
Connect with me over live chat!
</p>
</div>
<div class="contact-container row">
<div class="col-6 left ">
<img src="img/food.jpg" alt="">
<!-- CONTACT-SECTION -->
<section class="contact-section" id="contact">
<div class="contact-section-header">
<h2>Any Query</h2>
<div class="text">Get in Touch</div>
<p>Thank you for visiting Petari. Connect with me over socials.
<br>
Please wait for a while all major projects will be listed soon. Till then keep visiting.
Connect with me over live chat!
</p>
</div>
<div class="contact-container row">
<div class="col-12 col-md-6 mb-3 mb-md-0 left">
<img src="img/food.jpg" alt="Food Image" class="img-fluid w-100">
</div>
<div class="col-12 col-md-6 right">
<form action="/" method="POST">
<div class="fields mb-3">
<div class="field mb-2">
<input type="text" name="Fname" class="form-control" placeholder="Name" required>
</div>
<div class="col-6 right">
<form action="/" method="POST">
<div class=" fields">
<div class="field name">
<input type="text" name="Fname" placeholder="Name" required>
</div>
<div class="field email">
<input type="email" name="Email" placeholder="Email" required>
</div>
</div>
<div class="field">
<input type="text" name="sub" placeholder="Subject" required>
</div>
<div class="field">
<textarea cols="30" rows="7" name="sms" placeholder="Message.." required></textarea>
</div>
<div class="button-area">
<button type="submit" id="home" class="btn btn-success">Send </button>
</div>
</form>
<div class="field mb-2">
<input type="email" name="Email" class="form-control" placeholder="Email" required>
</div>
</div>
</section>
</main>
<div class="field mb-2">
<input type="text" name="sub" class="form-control" placeholder="Subject" required>
</div>
<div class="field mb-3">
<textarea cols="30" rows="7" name="sms" class="form-control" placeholder="Message.." required></textarea>
</div>
<div class="button-area">
<button type="submit" id="home" class="btn btn-success w-100">Send</button>
</div>
</form>
</div>
</div>
</section>

<!-- FOOTER SECTION -->
<!-- FOOTER SECTION -->
<footer class="footer py-5 footer-container">
<div class="container">
<div class="row">
Expand Down

0 comments on commit a5cbab0

Please sign in to comment.