Skip to content

Commit

Permalink
Merge pull request #61 from Mehak-Mattoo/home-UI
Browse files Browse the repository at this point in the history 
solved bug in contact & faq section
  • Loading branch information
@MastanSayyad
MastanSayyad authored Jun 30, 2024
2 parents b338cfb + 71dad2b commit 2e3f436
Show file tree
Hide file tree
Showing 6 changed files with 128 additions and 28 deletions.
93 changes: 93 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1653,3 +1653,96 @@ h5,
.navbar.fixed-top.navbar-light .navbar-nav .nav-link:hover {
color: purple;
}

/* Style for placeholder text */
::placeholder {
color: white; /* Color of the placeholder text */
opacity: 1; /* Fully opaque text */
}

/* Style for input fields with purple background placeholder */
.custom-placeholder::placeholder {
color: black; /* Placeholder text color */
}

.custom-placeholder {
background-color: #e8d2ee; /* Background color for input */
color: white; /* Text color for input */
}

#contact button {
background: #8a2be2;
border: none;
}

#contact button:hover {
background: rgb(199, 35, 199);
}

.sub-title {
font-size: 1.5rem;
font-weight: 900;
}

@media (min-width: 300px) {
.accordion__question,
.accordion__answer {
font-size: 0.8rem;
}

.accordion__icon {
width: 1.6rem;
height: 1.6rem;
}
}

@media (min-width: 576px) {
.sub-title {
font-size: 2rem;
}

.accordion__question,
.accordion__answer {
font-size: 1rem;
}
.accordion__icon {
width: 1.7rem;
height: 1.7rem;
}
}

@media (min-width: 768px) {
.sub-title {
font-size: 2.5rem;
}
.accordion__question,
.accordion__answer {
font-size: 1.5rem;
}

.accordion__icon {
width: 1.8rem;
height: 1.8rem;
}
}

@media (min-width: 992px) {
.sub-title {
font-size: 3rem;
}
.accordion__question,
.accordion__answer {
font-size: 2rem;
}

.accordion__icon {
width: 2rem;
height: 2rem;
}
}

@media (min-width: 1200px) {
.sub-title {
font-size: 3.5rem;
}
}
Binary file added images/logo-no-background.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/sort-bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/vs-high-resolution-logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 35 additions & 28 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@
</nav> -->

<nav class="navbar navbar-expand-lg fixed-top" style="background-color: #303842;">
<!-- <nav class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner"> -->
<!-- <nav class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner"> -->
<div class="container-fluid">
<a class="navbar-brand" style="font-weight: 900 ; color: white;" href="#">Visual Sort</a>
<button class="navbar-toggler" style="border-color: white;" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
Expand Down Expand Up @@ -159,8 +159,7 @@
</ul>
</div>
</div>
</nav>

</nav>


<div class="intro-section" id="home-section">
Expand Down Expand Up @@ -822,36 +821,44 @@ <h2 class="accordion__question">Do I need any prior knowledge to use Visual Sort
</div>
</section>

<section class="contact us" id="contact us">

<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>

<div class="social-icon">
<a href="#" target="_blank"><i class="fa-brands fa-facebook"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-twitter-square"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
<a href="#" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
</div>

</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="Email" placeholder="Your Email" required>
<textarea name="Message" rows="6" placeholder="Your Message"></textarea>
<button type="submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>
</div>

<section class="contact-us" id="contact-us">
<div id="contact" class="py-5">
<div class="container">
<div class="row">
<div class="col-lg-6 mb-4">
<h1 class="sub-title">Contact Us</h1>
<div class="social-icon d-flex">
<a href="#" target="_blank" class="me-3"><i class="fa-brands fa-facebook"></i></a>
<a href="#" target="_blank" class="me-3"><i class="fa-brands fa-twitter-square"></i></a>
<a href="#" target="_blank" class="me-3"><i class="fa-brands fa-instagram"></i></a>
<a href="#" target="_blank" class="me-3"><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
<div class="col-lg-6">
<form name="submit-to-google-sheet">
<div class="mb-3">
<input type="text" name="Name" class="form-control custom-placeholder" placeholder="Your Name" required>
</div>
<div class="mb-3">
<input type="email" name="Email" class="form-control custom-placeholder" placeholder="Your Email" required>
</div>
<div class="mb-3">
<textarea name="Message" class="form-control custom-placeholder" rows="6" placeholder="Your Message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<span id="msg"></span>
</div>
</div>
</div>
</div>
</section>




</section>

<footer class="container py-4 py-md-5 px-4 px-md-3">
<div class="row d-flex justify-content-center align-items-center text-center">
Expand Down

0 comments on commit 2e3f436

Please sign in to comment.