Skip to content

Commit dee95f0

Browse files
gurkanyigitgrgurkanyigitgr
committed
add html and css
1 parent 3acdefd commit dee95f0

File tree

2 files changed

+142
-0
lines changed

2 files changed

+142
-0
lines changed

‎06. Palindrome_Checker/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
3+
<html lang="en" dir="ltr">
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Palindrome Checker in JavaScript | CodingNepal</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
</head>
10+
<body>
11+
<div class="wrapper">
12+
<header>
13+
<h1>Palindrome Checker</h1>
14+
<p>
15+
A palindrome is a word or phrase that reads the same backwards as
16+
forwards, e.g. level, refer.
17+
</p>
18+
</header>
19+
<div class="inputs">
20+
<input
21+
type="text"
22+
spellcheck="false"
23+
placeholder="Enter text or number"
24+
/>
25+
<button>Check Palindrome</button>
26+
</div>
27+
<p class="info-txt"></p>
28+
</div>
29+
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎06. Palindrome_Checker/style.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/* Import Google Font - Poppins */
2+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Poppins", sans-serif;
8+
}
9+
body {
10+
display: flex;
11+
padding: 0 10px;
12+
align-items: center;
13+
justify-content: center;
14+
min-height: 100vh;
15+
background: #263a29;
16+
}
17+
::selection {
18+
color: #fff;
19+
background: #263a29;
20+
}
21+
.wrapper {
22+
max-width: 500px;
23+
background: #fff;
24+
border-radius: 7px;
25+
padding: 20px 25px 15px;
26+
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
27+
}
28+
header h1 {
29+
font-size: 27px;
30+
font-weight: 500;
31+
}
32+
header p {
33+
margin-top: 5px;
34+
font-size: 18px;
35+
color: #474747;
36+
}
37+
.inputs {
38+
margin: 20px 0 27px;
39+
}
40+
.inputs input {
41+
width: 100%;
42+
height: 60px;
43+
outline: none;
44+
padding: 0 17px;
45+
font-size: 19px;
46+
border-radius: 5px;
47+
border: 1px solid #999;
48+
transition: 0.1s ease;
49+
}
50+
.inputs input::placeholder {
51+
color: #999999;
52+
}
53+
.inputs input:focus {
54+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.13);
55+
}
56+
.inputs input:focus::placeholder {
57+
color: #bebebe;
58+
}
59+
.inputs button {
60+
width: 100%;
61+
height: 56px;
62+
border: none;
63+
opacity: 0.7;
64+
outline: none;
65+
color: #fff;
66+
cursor: pointer;
67+
font-size: 17px;
68+
margin-top: 20px;
69+
border-radius: 5px;
70+
pointer-events: none;
71+
background: #263a29;
72+
transition: opacity 0.15s ease;
73+
}
74+
.inputs button.active {
75+
opacity: 1;
76+
pointer-events: auto;
77+
}
78+
.info-txt {
79+
display: none;
80+
font-size: 19px;
81+
text-align: center;
82+
margin-bottom: 18px;
83+
}
84+
.info-txt span {
85+
color: #aa57cc;
86+
}
87+
88+
@media (max-width: 520px) {
89+
.wrapper {
90+
padding: 17px 20px 10px;
91+
}
92+
header h1 {
93+
font-size: 25px;
94+
}
95+
header p {
96+
font-size: 16px;
97+
}
98+
.inputs input {
99+
height: 54px;
100+
font-size: 17px;
101+
}
102+
.inputs button {
103+
height: 50px;
104+
font-size: 16px;
105+
margin-top: 17px;
106+
}
107+
.info-txt {
108+
font-size: 18px;
109+
}
110+
}

0 commit comments

Comments
 (0)