From b528371167ac0b1ae2ae279ea1f8b68f6fcd37d3 Mon Sep 17 00:00:00 2001
From: Khlalid Abdull Aziz Mahdy El-Hela <khalid.zizo21@gmail.com>
Date: Thu, 13 Oct 2022 23:43:41 +0000
Subject: [PATCH] Update static/normalize.css
---
static/normalize.css | 395 +++++++++++++++++++++++++++++++++++++++++++
1 file changed, 395 insertions(+)
diff --git a/static/normalize.css b/static/normalize.css
index bb6e2a7..e9a4006 100644
--- a/static/normalize.css
+++ b/static/normalize.css
@@ -349,3 +349,398 @@ template {
[hidden] {
display: none;
}
+/* start varaible */
+:root {
+ --main-color: #17252a;
+ --main-transition: 0.3s;
+}
+/* end varaible */
+
+/* start global rules */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ font-family: "Cairo", sans-serif;
+}
+
+ul {
+ padding: 0%;
+ margin: 0%;
+ list-style: none;
+}
+
+a {
+ text-decoration: none;
+}
+
+h3 {
+ text-align: center;
+ font-size: 50px;
+ color: #17252a;
+ margin-bottom: 30px;
+}
+@media (max-width: 767px) {
+ h3 {
+ font-size: 26px;
+ }
+}
+.container {
+ padding-left: 15px;
+ padding-right: 15px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* small */
+@media (min-width: 768px) {
+ .container {
+ width: 90%;
+ }
+}
+
+/* mediuam */
+@media (min-width: 992px) {
+ .container {
+ width: 90%;
+ }
+}
+
+/* large */
+@media (min-width: 1200px) {
+ .container {
+ width: 90%;
+ }
+}
+
+/* start header */
+header {
+ padding: 10px;
+ background-color: var(--main-color);
+ box-shadow: 0 0 10px #000;
+ z-index: 900;
+ position: relative;
+}
+header .container {
+ display: flex;
+ justify-content: space-between;
+}
+
+header .logo {
+ width: 60px;
+ height: 70px;
+}
+header nav {
+ display: flex;
+ align-items: center;
+ position: relative;
+}
+header nav i {
+ color: #fff;
+ font-size: 19px;
+ cursor: pointer;
+ opacity: 0;
+}
+header nav .main-links {
+ display: flex;
+}
+@media (max-width: 1199px) {
+ header nav i {
+ opacity: 1;
+ }
+ header nav .main-links {
+ display: none;
+ }
+ header nav i:hover + .main-links {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: calc(100% + 10px);
+ right: 0;
+ background-color: #17252a;
+ padding: 20px;
+ box-shadow: 0 0 10px var(--main-color);
+ border-bottom-left-radius: 20px;
+ border-bottom-right-radius: 20px;
+ transition: var(--main-transition);
+ -webkit-transition: var(--main-transition);
+ -moz-transition: var(--main-transition);
+ -ms-transition: var(--main-transition);
+ -o-transition: var(--main-transition);
+ width: 300px;
+ }
+ header nav i:hover + .main-links li {
+ margin: 15px 0 !important;
+ }
+}
+header nav .main-links li {
+ margin-left: 15px;
+ position: relative;
+}
+header nav .main-links li a {
+ color: #def2f1;
+ font-size: 19px;
+ font-weight: 500;
+ transition: var(--main-transition);
+ padding-left: 6px;
+ padding-right: 6px;
+ border-radius: 20px;
+ -webkit-border-radius: 20px;
+ -moz-border-radius: 20px;
+ -ms-border-radius: 20px;
+ -o-border-radius: 20px;
+ -webkit-transition: var(--main-transition);
+ -moz-transition: var(--main-transition);
+ -ms-transition: var(--main-transition);
+ -o-transition: var(--main-transition);
+ white-space: nowrap;
+}
+header nav .main-links li a:hover {
+ background-color: #def2f1;
+ color: #000;
+}
+header nav .main-links li ul {
+ position: absolute;
+ top: calc(100% + 60px);
+ left: 0;
+ width: 280px;
+ padding: 10px;
+ text-align: center;
+ background-color: #121c20;
+ visibility: hidden;
+ opacity: 0;
+ box-shadow: 0 0 10px var(--main-color);
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ transition: var(--main-transition);
+ -webkit-transition: var(--main-transition);
+ -moz-transition: var(--main-transition);
+ -ms-transition: var(--main-transition);
+ -o-transition: var(--main-transition);
+}
+header nav .main-links li ul li {
+ margin: 15px 0 !important;
+}
+header nav .main-links li:hover ul {
+ position: absolute;
+ visibility: visible;
+ opacity: 1;
+ top: calc(100% + 34px);
+}
+header nav .main-links li ul li a:hover {
+ letter-spacing: 4px;
+}
+@media (max-width: 1199px) {
+ header nav .main-links li:hover ul {
+ top: 0%;
+ left: calc(-100% - 50px);
+ z-index: 5;
+ }
+}
+@media (max-width: 767px) {
+ header nav .main-links li:hover ul {
+ top: 0%;
+ left: 0;
+ z-index: 5;
+ }
+}
+/* end header */
+
+/* start landing */
+.landing {
+ width: 100%;
+ height: calc(100vh - 90px);
+ background-color: var(--main-color);
+}
+.landing .container {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.landing .info {
+ color: #fff;
+}
+.landing .info h2 {
+ font-size: 48px;
+ margin-bottom: 20px;
+}
+.landing .info p {
+ font-size: 48px;
+}
+.landing img {
+ width: 450px;
+ max-width: 100%;
+}
+@media (max-width: 767px) {
+ .landing .container {
+ flex-direction: column;
+ justify-content: center;
+ }
+ .landing .info {
+ text-align: center;
+ margin-bottom: 40px;
+ }
+ .landing .info h2,
+ .landing .info p {
+ font-size: 26px;
+ }
+}
+/* end landing */
+
+/* start section images */
+.sections img {
+ width: 100%;
+ max-width: 100%;
+ margin: 20px 0;
+ filter: grayscale(100%);
+ -webkit-filter: grayscale(100%);
+ transition: var(--main-transition);
+ -webkit-transition: var(--main-transition);
+ -moz-transition: var(--main-transition);
+ -ms-transition: var(--main-transition);
+ -o-transition: var(--main-transition);
+}
+.sections img:hover {
+ filter: grayscale(0);
+ -webkit-filter: grayscale(0);
+}
+/* end section images */
+
+/* start counter */
+.counter {
+ padding: 50px 0;
+
+ background-color: #eee;
+}
+
+.counter .content {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 40px;
+}
+.counter .content .box {
+ flex-basis: 45%;
+ background: #2b7a78;
+ padding: 3rem 1.5rem;
+ text-align: center;
+ font-size: 50px;
+ font-weight: 800;
+ transition: 0.3s;
+ -webkit-transition: 0.3s;
+ -moz-transition: 0.3s;
+ -ms-transition: 0.3s;
+ -o-transition: 0.3s;
+ border-radius: 20px;
+ -webkit-border-radius: 20px;
+ -moz-border-radius: 20px;
+ -ms-border-radius: 20px;
+ -o-border-radius: 20px;
+}
+
+.counter .content .box:hover {
+ background-color: #121c20;
+}
+.counter .content .box p {
+ margin: 20px 0;
+ color: #2b7a78;
+}
+.counter .content .box img {
+ width: 140px;
+}
+.counter .content .box span {
+ display: block;
+ color: #fff;
+}
+@media (max-width: 767px) {
+ .counter .content .box {
+ flex-basis: 100%;
+ font-size: 28px;
+ }
+}
+/* end counter */
+
+/* start video */
+.video {
+ padding: 50px 0;
+}
+/* end video */
+footer {
+ background-color: #121c20;
+ padding: 50px 0;
+ text-align: center;
+}
+footer .content {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 40px;
+}
+.footer .content .col {
+ display: flex;
+ justify-content: center;
+}
+footer .col p {
+ color: #fff;
+ font-size: 20px;
+ margin-bottom: 30px;
+}
+footer .col ul li {
+ padding: 10px 0;
+}
+footer .col ul li a {
+ color: #def2f1;
+ font-size: 19px;
+ font-weight: 500;
+ transition: var(--main-transition);
+ padding-left: 6px;
+ padding-right: 6px;
+ border-radius: 20px;
+ -webkit-border-radius: 20px;
+ -moz-border-radius: 20px;
+ -ms-border-radius: 20px;
+ -o-border-radius: 20px;
+ -webkit-transition: var(--main-transition);
+ -moz-transition: var(--main-transition);
+ -ms-transition: var(--main-transition);
+ -o-transition: var(--main-transition);
+ white-space: nowrap;
+}
+footer .col ul li a:hover {
+ background-color: #def2f1;
+ color: #000;
+ letter-spacing: 4px;
+}
+footer .col img {
+ width: 150px;
+ display: block;
+ padding: 10px;
+ margin: auto;
+ transition: 0.5s;
+ -webkit-transition: 0.5s;
+ -moz-transition: 0.5s;
+ -ms-transition: 0.5s;
+ -o-transition: 0.5s;
+}
+footer .col img:hover {
+ transform: rotate(360deg);
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+}
+.copy-right {
+ background-color: #eee;
+ padding: 10px;
+ font-size: 20px;
+ text-align: center;
+}
+
--
GitLab