Design the interface and styling
هذا الالتزام موجود في:
21
index.html
21
index.html
@@ -1 +1,22 @@
|
||||
<!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
|
||||
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 */
|
||||
|
||||
@@ -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
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم