Skip to content

Commit

Permalink
Revert "Merge pull request #3 from Sidoryx/master"
Browse files Browse the repository at this point in the history 
This reverts commit 3ea116d, reversing
changes made to 2292360.
  • Loading branch information
Nilesh Chaturvedi committed Feb 5, 2022
1 parent 6753d04 commit e0a9af5
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 158 deletions.
122 changes: 14 additions & 108 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,14 @@
margin: 0;
box-sizing: border-box;
}



*:not(i) {
font-family: 'Nunito', sans-serif;
font-family: "Poppins", sans-serif;
}

body {
background-color: #fff;
color: black;
background-color: #ae9cff;
}

.dark-mode {
background-color: #0e141b;
color: #fff;

}

#image {
padding-top: 2rem;
}

.container {
background-color: #ffffff;
width: 90vmin;
position: absolute;
transform: translate(-50%, -50%);
Expand All @@ -34,128 +19,92 @@ body {
padding: 80px 50px;
border-radius: 10px;
box-shadow: 0 20px 40px rgba(38, 33, 61, 0.2);

/* glassmorphism code below */
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
}

.search-box {
width: 100%;
display: flex;
justify-content: space-between;
}

.search-box input:hover {
border-bottom: 3px solid #4433ff;
transition: all 650ms;
}

.search-box input {
padding: 5px;
width: 70%;
border: none;
background: transparent;
outline: none;
border-bottom: 3px solid #ae9cff;
font-size: 16px;
}

.search-box button {
padding: 15px 0;
width: 25%;
background-color: #fff;
background-color: #ae9cff;
border: none;
outline: none;
color: #0e141b;
font-size: medium;
border-radius: 40px;
}

::placeholder {
color: black;
opacity: 0.7;
color: #ffffff;
border-radius: 5px;
}

.result {
position: relative;
}

.result h3 {
font-size: 30px;
color: #0e141b;
color: #1f194c;
}

.result .word {
display: flex;
justify-content: space-between;
margin-top: 80px;
}

.result button {
background-color: transparent;
color: #ae9cff;
border: none;
outline: none;
font-size: 18px;
}

.result .details {
display: flex;
gap: 10px;
font-style: italic;
color: #0e141b;
color: #b3b6d4;
margin: 5px 0 20px 0;
font-size: 14px;
}

.word-meaning {
color: #0e141b;
color: #575a7b;
}

.word-example {
color: #0e141b;
color: #575a7b;
font-style: italic;
border-left: 5px solid #0e141b;
border-left: 5px solid #ae9cff;
padding-left: 20px;
margin-top: 30px;
}

.error {
margin-top: 80px;
text-align: center;
}

/* .footer-basic {
.footer-basic {
padding: 40px 0;
background-color: #ffffff;
color: #4b4c4d;
}
.footer-basic .copyright {
margin-top: 15px;
text-align: center;
font-size: 13px;
color: #aaa;
margin-bottom: 0;
}
.footer-basic {
padding: 0;
list-style: none;
text-align: center;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
} */

}
ul {
list-style-type: none;
color: #4433ff;
color: white;
height: 65px;
font-size: 30px;
display: flex;
Expand All @@ -164,46 +113,3 @@ ul {
font-family: "Roboto", sans-serif;
justify-content: center;
}


/* copyright footer */
.footer {
position: absolute;
bottom: 2rem;
left: 2rem;
}

/* end of copyright footer */


/* button animation starts below*/
#search-btn {
text-decoration: none;
border: 1px solid rgb(146, 148, 248);
position: relative;
overflow: hidden;
}

/* #search-btn:hover {
box-shadow: 1px 1px 25px 10px rgba(146, 148, 248, 0.4);
} */

#search-btn:before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg,
transparent,
rgba(146, 148, 248, 0.4),
transparent);
transition: all 650ms;
}

#search-btn:hover:before {
left: 100%;
}

/* button animation ends below */
81 changes: 35 additions & 46 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,39 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="/css/style.css" />
<title>Wordicon - Dictionary</title>
<link rel="icon" type="image/x-icon" href="Favicon.svg">
</head>

<body>
<ul>
<!-- <li style="font-size: larger;">Wordicon</li> -->
<li><img id="imageHeader" src="Tap to add a heading.svg" alt=""></li>
<li>
<!-- <div class="switch">Dark mode:
<span class="inner-switch">OFF</span>
</div> -->
</li>
</ul>
<audio id="sound"></audio>
<div class="container">
<div class="search-box">
<input type="text" placeholder="Type the word here.." id="inp-word" />
<button id="search-btn">Search</button>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="/css/style.css" />
<title>Wordicon - Dictionary</title>
</head>
<body>
<ul>
<li>Wordicon</li>
</ul>
<audio id="sound"></audio>
<div class="container">
<div class="search-box">
<input type="text" placeholder="Type the word here.." id="inp-word" />
<button id="search-btn">Search</button>
</div>
<div class="result" id="result"></div>
<div class="footer-basic">
<footer>
<p class="copyright">Wordicon © 2022</p>
</footer>
</div>
</div>
<div class="result" id="result"></div>
<!-- <div class="footer-basic">
<footer>
<p class="copyright">Wordicon © 2022</p>
</footer>
</div> -->

</div>
<div class="footer">
<p class="copyright">Copyright © 2022 Wordicon</p>
</div>

<!-- Script -->
<script src="/javascript/script.js"></script>
</body>

<!-- Script -->
<script src="/javascript/script.js"></script>
</body>
</html>
5 changes: 1 addition & 4 deletions javascript/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,9 @@ btn.addEventListener("click", () => {
sound.setAttribute("src", `https:${data[0].phonetics[0].audio}`);
})
.catch(() => {
result.innerHTML = `<h3 class="error">(>_<) Couldn't Find Any Word </h3>`;
result.innerHTML = `<h3 class="error">Couldn't Find The Word</h3>`;
});
});
function playSound() {
sound.play();
}
function darkModeSwitch() {
document.body.classList.toggle("dark-mode");
}

0 comments on commit e0a9af5

Please sign in to comment.