Design the interface and styling
هذا الالتزام موجود في:
21
index.html
21
index.html
@@ -1 +1,22 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Praying Times </title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Get Praying Times Anywhere </h1>
|
||||||
|
<div class="block">
|
||||||
|
<label class="city_label">Enter Your City Name</label>
|
||||||
|
<input class="city">
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<label class="code_label">Enter The Country Code</label>
|
||||||
|
<input class="code">
|
||||||
|
</div>
|
||||||
|
<div class="show">
|
||||||
|
<h3>Here is the praying times of <span id="show_city"> </span>and </h3><span id="show_country"> </span>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</html>
|
||||||
19
index.pug
19
index.pug
@@ -1 +1,20 @@
|
|||||||
doctype
|
doctype
|
||||||
|
html
|
||||||
|
head
|
||||||
|
title Praying Times
|
||||||
|
link(rel="stylesheet", href="style.css")
|
||||||
|
body
|
||||||
|
h1 Get Praying Times Anywhere
|
||||||
|
|
||||||
|
.block
|
||||||
|
label.city_label Enter Your City Name
|
||||||
|
input.city
|
||||||
|
.block
|
||||||
|
label.code_label Enter The Country Code
|
||||||
|
input.code
|
||||||
|
.show
|
||||||
|
h3 Here is the praying times of
|
||||||
|
span#show_city
|
||||||
|
| and
|
||||||
|
span#show_country
|
||||||
|
script(src="app.js")
|
||||||
|
|||||||
29
style.css
29
style.css
@@ -1,3 +1,32 @@
|
|||||||
|
* {
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: #1E1C06;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #E1DC9F;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
margin: 20px auto;
|
||||||
|
width: min(800px, 90%);
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=style.css.map */
|
/*# sourceMappingURL=style.css.map */
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"style.css"}
|
{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AACF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"style.css"}
|
||||||
23
style.sass
23
style.sass
@@ -0,0 +1,23 @@
|
|||||||
|
*
|
||||||
|
font-family: sans-serif
|
||||||
|
color: #1E1C06
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
h1
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
body
|
||||||
|
background-color: #E1DC9F
|
||||||
|
|
||||||
|
div
|
||||||
|
margin: 20px auto
|
||||||
|
width: min(800px, 90%)
|
||||||
|
input
|
||||||
|
padding: 10px 20px
|
||||||
|
border-radius: 5px
|
||||||
|
border: none
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
label
|
||||||
|
display: block
|
||||||
|
margin: 10px 0
|
||||||
|
|||||||
المرجع في مشكلة جديدة
حظر مستخدم