Skip to content

Commit

Permalink
partly did #7
Browse files Browse the repository at this point in the history
  • Loading branch information
@MahmoudAoude
MahmoudAoude committed Dec 22, 2020
1 parent 155446f commit 030003d
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 84 deletions.
60 changes: 35 additions & 25 deletions www/css/homepage.css
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,32 @@
body {
margin: 0%;
margin: 0;
height: 100%;
width: 100%;
position: fixed;
overflow: hidden;

/* Background CSS */
background-image: url("../img/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
}

/* Main Container Size and Alignment */
.fill {
height: 100%;
width: 100%;
position: fixed;
}

/******************************************************************************************************/
/* Main Container Layout and Structure */
/******************************************************************************************************/

.fill {
height: 100vh;
}

.myrow1 {
height: 20%;
position: fixed;
top: 0%;
height: 20vh;
}

.myrow2 {
height: 40%;
top: 20%;
position: fixed;
height: 40vh;
}

.myrow3 {
height: 40%;
border-top: solid 2px;
border-color: white;
position: fixed;
top: 60%;
width: 100%;
height: 40vh;
}

/******************************************************************************************************/
Expand Down Expand Up @@ -68,17 +54,40 @@ body {
.mycol3,
.mycol4,
.mycol5 {
border-top: solid aliceblue 2px;
position: relative;
top: 88%;
min-width: 5%;
}

@keyframes slide-up {
0% {
top: 88%;
}
100% {
top: 0%;
}
}

.mycol1:hover,
.mycol2:hover,
.mycol3:hover,
.mycol4:hover,
.mycol5:hover {
animation: 0.5s slide-up;
border-top: solid aliceblue 0px;
top: 0%;
}

.mycol1,
.mycol5 {
border-color: white;
border-color: aliceblue;
}

.mycol1 {
border-left: solid 0px;
border-right: solid 1px;
border-color: aliceblue;
background-color: rgb(26, 31, 50, 1);
}

Expand All @@ -97,6 +106,7 @@ body {
.mycol5 {
border-right: solid 0px;
border-left: solid 1px;
border-color: aliceblue;
background-color: rgb(117, 86, 101, 1);
}

Expand Down
Binary file added www/img/bg2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
74 changes: 15 additions & 59 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,7 @@
<meta http-equiv="Content-Security-Policy" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta
name="viewport"
content="initial-scale=1, width=device-width, viewport-fit=cover"
/>
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover" />
<meta name="color-scheme" content="light dark" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
Expand All @@ -43,10 +40,7 @@
/>
<link rel="stylesheet" href="css/homepage.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap" rel="stylesheet" />
<title>Salah</title>
<!-- <img src="./img/man-praying.png" alt="Man=Praying" /> -->
</head>
Expand All @@ -59,7 +53,7 @@ <h2>Row 1</h2>
</div>
<div class="row myrow2">
<div class="col-xs">
<h2>Row 2</h2>
<h2 id="location">Row 2</h2>
</div>
</div>
<div class="row myrow3">
Expand All @@ -68,18 +62,10 @@ <h2>Row 2</h2>
<h2 class="prayer-name">FAJR</h2>
</div>
<div class="row innerRow">
<img
class="mandatory-icon"
src="img/man-praying.png"
alt="empty-man"
/>
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow">
<img
class="mandatory-icon"
src="img/man-praying.png"
alt="empty-man"
/>
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow"></div>
</div>
Expand All @@ -88,25 +74,13 @@ <h2 class="prayer-name">FAJR</h2>
<h2 class="prayer-name">DUHR</h2>
</div>
<div class="row innerRow">
<img
class="mandatory-icon"
src="img/man-praying.png"
alt="empty-man"
/>
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow">
<img
class="mandatory-icon"
src="img/man-praying.png"
alt="empty-man"
/>
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow">
<img
class="mandatory-icon"
src="img/man-praying.png"
alt="empty-man"
/>
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
</div>
<div class="col mycol3">
Expand All @@ -115,11 +89,7 @@ <h2 class="prayer-name">ASR</h2>
</div>
<div class="row innerRow"></div>
<div class="row innerRow">
<img
class="mandatory-icon"
src="img/man-praying.png"
alt="empty-man"
/>
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow"></div>
</div>
Expand All @@ -128,18 +98,10 @@ <h2 class="prayer-name">ASR</h2>
<h2 class="prayer-name">MAGHRIB</h2>
</div>
<div class="row innerRow">
<img
class="mandatory-icon"
src="img/man-praying.png"
alt="empty-man"
/>
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow">
<img
class="mandatory-icon"
src="img/man-praying.png"
alt="empty-man"
/>
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow"></div>
</div>
Expand All @@ -149,22 +111,16 @@ <h2 class="prayer-name">ISHA</h2>
</div>
<div class="row innerRow"></div>
<div class="row innerRow">
<img
class="mandatory-icon"
src="img/man-praying.png"
alt="empty-man"
/>
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
<div class="row innerRow">
<img
class="mandatory-icon"
src="img/man-praying.png"
alt="empty-man"
/>
<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
</div>
</div>
</div>
</div>
<script src="cordova.js"></script>
<script src="./js/index.js"></script>

</body>
</html>

1 comment on commit 030003d

@MahmoudAoude
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This also fixes #4

Please sign in to comment.