Skip to content
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

Updated UI of Maa-Vimala #313

Open
wants to merge 1 commit into
base: Dev
Choose a base branch
from
Open

Updated UI of Maa-Vimala #313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
32 changes: 19 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,21 @@
<body id="body">
<header>
<nav class="navbar">
<h1 id="logoName">Maa-Vimala</h1>
<div class="company">
<img src="MAA-VIMALAlogo.png" alt="" class="logo">
<h1 id="logoName">Maa-Vimala</h1>
</div>
<div >
<ul class="nav-links">
<li><i class="fa-solid fa-house"></i><a href="#home"> Home </a></li>
<li><i class="fa-solid fa-info-circle"></i><a href="#about"> About Us </a></li>
<li><i class="fa-solid fa-concierge-bell"></i><a href="#services"> Services </a></li>
<li><i class="fa-solid fa-star"></i><a href="#reviews"> Reviews </a></li>
<li><i class="fa-solid fa-envelope"></i><a href="#contact"> Contact Us </a></li>
<li><a href="#home"> Home </a></li>
<li><a href="#about"> About </a></li>
<li><a href="#services"> Services </a></li>
<li><a href="#contact"> ContactUs </a></li>
</ul>
</div>
</nav>
</header>

<!-- <div>
<div class="nav-info">
<p id="time">22 : 33 AM</p>
Expand All @@ -37,15 +42,17 @@ <h1 id="logoName">Maa-Vimala</h1>
</div>
</div> -->
</div>
<div>
<div class="outer">
<div>
<div>
<h1 id="search-txt">Start Typing To Search...</h1>
<h1 id="search-txt">Start Looking for Something...</h1>
</div>
<!-- <input type="text" name="" id="input_text"> -->
<div class="search-container">
<input type="text" id="input_text" class="search-bar" placeholder="">
<i class="fas fa-search search-icon"></i>
<input type="text" id="input_text" class="search-bar" placeholder="Search...">
<button class="searchbtn">
<img src="search.svg" alt="" class="svgimg" >
</button>
</div>
</div>
<div>
Expand All @@ -62,10 +69,9 @@ <h1 id="search-txt">Start Typing To Search...</h1>
<div id="loader"></div>
<div class="result" id="result">
</div>
<div id="link">
<a href="https://github.com/Web403/Maa-Vimala/blob/main/README.md">Read Me</a>
</div>

</div>

<script>
let time = document.getElementById('time');
let date = document.getElementById('date');
Expand Down
Binary file added nature.webp
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions search.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
156 changes: 126 additions & 30 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@

body {
background-image: url('https://images.pexels.com/photos/36717/amazing-animal-beautiful-beautifull.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-image: url(nature.webp);
color: #ddd;
background-repeat: no-repeat;
background-size: cover;
background-color: #333;
padding: 10px;
border-radius: 5px;
font-family: "Poppins", sans-serif;
height: 100%;
}

/*#logoName{
Expand All @@ -29,6 +31,26 @@ img{
max-height: 100%;
}

.logo{
margin: 0;
padding: 0;
height: 90px;
width: 90px;

}
.outer{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 100%;
list-style: none;
gap: 1px;
/* border: 1px solid black; */

}

#search-txt{
font-size: 2rem;
font-weight: 300;
Expand Down Expand Up @@ -95,7 +117,21 @@ button {
list-style: none;
/* border: 1px solid black; */
}
.wiki-result{
.result{
border: 2px solid white;
border-radius: 50px;
height: 40vh;
width: 70vw;
margin-top: 0;
margin-left: 40px;
position: absolute;
top: 440px;
box-shadow: inset 0 0 10px white;
padding: 40px;

}

/* .wiki-result{
list-style: none;
font-size: 20px;
padding: 10px;
Expand All @@ -104,7 +140,7 @@ button {
.wiki-result a{
color: rgb(0, 255, 0);
text-decoration: none;
}
} */
#content li{
width: 55rem;
margin: 10px;
Expand All @@ -131,23 +167,30 @@ button {
}

.search-container {
border: 2px solid white;
background-color: #EEEEEE;
width: 900px;
border-radius: 50px;
position: relative;
border-bottom: 2px solid rgb(196, 196, 196);
color: #3498db;
/* color: #3498db; */
display: flex;
flex-direction: row;
}

.search-bar {
background-color: transparent;
.searchbtn{
background-color: #DC5F00;
color: white;
width: 4.5vw;
padding: 10px;
border: none;
border-radius: 25px;
border-radius: 60px;
padding: 10px 20px;
cursor: pointer;
font-size: 2rem;
outline: none;
}


.search-icon {

position: absolute;
top: 50%;
right: 15px;
Expand Down Expand Up @@ -193,7 +236,7 @@ button {

@media screen and (max-width: 600px){
body{
background-image: url('https://images.pexels.com/photos/1368382/pexels-photo-1368382.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
/* background-image: url('https://images.pexels.com/photos/1368382/pexels-photo-1368382.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); */
color: #ddd;
background-repeat: no-repeat;
background-size:100vh;
Expand All @@ -220,20 +263,12 @@ button {
content: "\f002";
margin-left: 90px;
}
body {
background-image: url('https://images.pexels.com/photos/36717/amazing-animal-beautiful-beautifull.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
color: #ddd;
background-repeat: no-repeat;
background-size: cover;
background-color: #333;
padding: 15px;
border-radius: 5px;
font-family: "Poppins", sans-serif;
margin:0;
}

/* Navbar Styling */
nav {
background-color: rgba(0, 0, 0, 0.8);
/* background-color: #373A40; */
box-shadow: inset 0 0 10px #707379;
/* box-shadow: inset 0 0 10px white; */
width: 100%;
padding: 1rem 0;
position: fixed;
Expand All @@ -249,19 +284,25 @@ nav {
align-items:center;
margin: 0;
padding: 15px;
height: 10vh;
width: 100vw;

}
.navbar h1 {
color: #fff;
font-size: 1.5rem;
font-weight: 600;
margin: 0;
}

/*
.nav-links {
list-style: none;
display: flex;
margin: 0;
padding: 0;
justify-content: space-around;
width: 50%;
align-items: center;
}

.nav-links li {
Expand All @@ -280,9 +321,52 @@ nav {
}

.nav-links a:hover {
color: #ffcc00; /* Highlight color on hover */
color: #ffcc00;
} */
.nav-links {
list-style: none;
display: flex;
margin: 0;
padding: 0;
align-items: center;
justify-content: space-around;
gap: 1px;
}

.nav-links li {
margin-left: 20px;
margin-right: 30px;
}

.nav-links a {

text-decoration: none;
color: white;
font-size: 18px;
display: flex;

padding: 10px 15px;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}

.nav-links a:hover {

/* background-color: #555; */
color: #fff;

transform: scale(1.2);

background: linear-gradient(to top left, #f18e1d90 30%, #f58e07 20%);
/* margin-left: 30px; */
/* margin-right: 30px; */
/* transform: translateY(20px); */
}

/* Styles for the icons in the navigation links */
.nav-links i {
margin-right: 8px;
}
/* Responsive Navbar for Mobile */
@media screen and (max-width: 600px) {
.navbar {
Expand All @@ -300,6 +384,18 @@ nav {
}
}

.company{
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
margin: 0 auto;
width: 100%;
list-style: none;
/* border: 1px solid black; */

}

/* Other existing styles */


Expand Down Expand Up @@ -375,7 +471,7 @@ button {
list-style: none;
/* border: 1px solid black; */
}
.wiki-result{
/* .wiki-result{
list-style: none;
font-size: 20px;
padding: 10px;
Expand All @@ -384,7 +480,7 @@ button {
.wiki-result a{
color: rgb(0, 255, 0);
text-decoration: none;
}
} */
#content li{
width: 55rem;
margin: 10px;
Expand Down Expand Up @@ -418,8 +514,7 @@ button {

.search-bar {
background-color: transparent;
color: white;
width: 4.5vw;
width: fit-content;
padding: 10px;
border: none;
border-radius: 25px;
Expand Down Expand Up @@ -491,4 +586,5 @@ button {
.fa-magnifying-glass:before, .fa-search:before {
content: "\f002";
margin-left: 90px;
}
}