Initial commit

Sachin-NK · Jul 22, 2024 · a0848e9 · a0848e9
commit a0848e9
Show file tree

Hide file tree

Showing 4 changed files with 230 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="group1">
+            <h2>300 <span><i class="fas fa-vials"></i></span></h2>
+            <p>Number of Tests</p>
+        </div>
+        <div class="group1">
+            <h2><i class="fas fa-battery-three-quarters"></i></h2>
+            <p>Current Battery</p>
+        </div>
+        <div class="group2">
+            <h2><i class="fas fa-user"></i></h2>
+            <p>Mr. Sachintha</p>
+        </div>
+        <div class="group1">
+            <h2>36 &deg; </h2>
+            <p>Room Temperature</p>
+        </div>
+        <div class="group1">
+            <h2>Date <span><i class="fas fa-calendar-day"></i></span></h2>
+            <p>2023 - 01 - 07</p>
+        </div>
+        <div class="group2">
+            <h2><i class="fas fa-vials"></i></h2>
+            <p>Staff | 50</p>
+        </div>
+        <div class="group1">
+            <h2>170 <span>Tests</span></h2>
+            <p>Submitted</p>
+        </div>
+        <div class="group1">
+            <h2>28 <span>Tests</span></h2>
+            <p>Have Issues</p>
+        </div>
+        <div class="group2">
+            <h2>Manage <span><i class="fas fa-tabel"></i></span></h2>
+            <p>Test Data</p>
+        </div>
+        <div class="group2">
+            <h2>View <span><i class="fas fa-chart-bar"></i></span></h2>
+            <p>Test Analytics</p>
+        </div>
+        <div class="group2">
+            <h2>Manage <span><i class="fas fa-users-cog"></i></span></h2>
+            <p>Staff</p>
+        </div>
+        <div class="group2">
+            <h2><i class="fas fa-sign-out-alt"></i></h2>
+            <p>Sign Out</p>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/resources/img1.jpg b/resources/img1.jpg
diff --git a/resources/img2.jpg b/resources/img2.jpg
diff --git a/style.css b/style.css
@@ -0,0 +1,167 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+/* Reset */
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Whole Body */
+body{
+    background-color: rgb(36, 36, 111);
+    font-family: 'Roboto', sans-serif;
+}
+
+/* Content */
+.container{
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 10px;
+    position: relative;
+    margin-top: 10px;
+}
+h2{
+    font-size: 45px;
+    font-weight: 300;
+    margin: 10px;
+}
+
+h2 span{
+    font-size: 30px;
+}
+
+p{
+    font-size: 20px;
+}
+
+.container > div {
+    cursor: pointer;
+    position: relative;
+    background-attachment: fixed;
+    background-size: cover;
+    height: 220px;
+    border: 2px solid black;
+    color: aqua;
+
+    /* use flex box for cenrter the content*/
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    /* transition */
+    transition: all;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in;
+}
+
+/* Blur background */
+.container:hover div{
+    opacity: 0.1;
+}
+.container > div:hover {
+    transform: scale(1.1);
+    opacity: 1;
+}
+
+/* Add Images */
+.group1{
+    background: url(./resources/img1.jpg);
+
+    /* Animation */
+    animation-name: start1;
+    animation-duration: 2.5s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-out;
+}
+@keyframes start1{
+    0%{
+        top: -2000px;
+    }
+    100%{
+        top: 0;
+    }
+}
+.group2{
+    background: url(./resources/img2.jpg);
+
+    /* Animation */
+    animation-name: start2;
+    animation-duration: 2.5s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-out;
+}
+
+@keyframes start2{
+    0%{
+        right: -2000px;
+    }
+
+    100%{
+        right: 0;
+    }
+}
+
+/* strech divs */
+.container > div:nth-of-type(1){
+    grid-column: 1/3;
+}
+.container > div:nth-of-type(4){
+    grid-column: 1/3;
+}
+.container > div:nth-of-type(9){
+    grid-column: 3/5;
+}
+.container > div:nth-of-type(10){
+    grid-column: 1/3;
+}
+
+/* Responsive */
+@media(max-width:900px){
+    .container > div{
+        height: 195px;
+    }
+
+    h2{
+        font-size: 38px;
+    }
+
+    h2 span{
+        font-size: 23px;
+    }
+
+    p{
+        font-size: 17px;
+    }
+}
+
+@media(max-width:800px){
+    .container > div{
+        height: 180px;
+    }
+
+    h2{
+        font-size: 34px;
+    }
+
+    h2 span{
+        font-size: 20px;
+    }
+
+    p{
+        font-size: 15px;
+    }
+}
+
+@media(max-width:700px){
+    .container{
+        display: block;
+        top: 12px;
+    }
+
+    .container > div{
+        height: 160px;
+        margin-bottom: 20px;
+    }
+}