Initial Commit

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+

README.md

@@ -0,0 +1,5 @@
+# Educrat Project 
+
+A parsion single page template made with : html / css / javascript / remix icon / wow js / animate css / swiper js 
+
+you can watch live demo of the project by click [here](https://educrat-project.netlify.app/)

css/reseat.css

@@ -0,0 +1,119 @@
+/* add Estedad Font */
+
+@font-face {
+ font-family: "Estedad";
+ font-weight: 500;
+ src: url("../fonts/Estedad-Medium.woff2") format("woff2");
+}
+@font-face {
+ font-family: "Estedad";
+ font-weight: 600;
+ src: url("../fonts/Estedad-SemiBold.woff2") format("woff2");
+}
+@font-face {
+ font-family: "Estedad";
+ font-weight: 700;
+ src: url("../fonts/Estedad-Bold.woff2") format("woff2");
+}
+@font-face {
+ font-family: "Estedad";
+ font-weight: 800;
+ src: url("../fonts/Estedad-ExtraBold.woff2") format("woff2");
+}
+@font-face {
+ font-family: "Estedad";
+ font-weight: 900;
+ src: url("../fonts/Estedad-Black.woff2") format("woff2");
+}
+
+/* add colors of the web page */
+
+:root {
+ --color-000: #000;
+ --color-fff: #fff;
+ --color-140342: #140342;
+ --color-00FF84: #00ff84;
+ --color-6440FB: #6440fb;
+ --color-4F547B: #4f547b;
+ --color-EEF2F6: #eef2f6;
+ --color-F4F1FE: #f4f1fe;
+ --color-311F61: #311f61;
+ --color-EDEDED: #ededed;
+ --color-E59819: #e59819;
+}
+
+/* some basic style reaset */
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+html {
+ scroll-behavior: smooth;
+ direction: rtl;
+}
+body {
+ font-family: "Estedad", sans-serif;
+ background-color: var(--color-fff);
+ overflow-x: hidden;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: var(--color-140342);
+ font-weight: 700;
+ line-height: 1.2;
+}
+section,
+footer {
+ padding: 50px 0;
+}
+p {
+ font-size: 15px;
+ line-height: 26px;
+}
+ul,
+li {
+ list-style-type: none;
+}
+a {
+ color: inherit;
+ text-decoration: none;
+}
+button {
+ font-family: "Estedad", sans-serif;
+ font-weight: 500;
+ cursor: pointer;
+ outline: none;
+ border: none;
+ transition: all 0.3s ease;
+}
+img {
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+}
+
+/* end of some basic style reaset */
+
+/* utility classes */
+
+.flex-align-center {
+ display: flex;
+ align-items: center;
+}
+.flex-center-between {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.grid-center {
+ display: grid;
+ place-content: center;
+}
+
+/* end of utility classes */

css/responsive.css

@@ -0,0 +1,225 @@
+/* container style */
+.container {
+ width: 100%;
+ margin-inline: auto;
+ padding-inline: 12px;
+}
+
+/* media for mobile screen */
+@media screen and (min-width: 576px) {
+ .container {
+ width: 540px;
+ }
+
+ /* best world start */
+
+ .best-grid {
+ grid-template-columns: repeat(2, 170px);
+ }
+
+ /* best world end */
+}
+
+/* media for tablet screen */
+@media screen and (min-width: 786px) {
+ .container {
+ width: 720px;
+ }
+
+ /* header start */
+
+ .sidebar-box {
+ width: 45vw;
+ }
+
+ /* header end */
+
+ /* hero start */
+
+ .hero-title {
+ font-size: 40px;
+ }
+
+ /* hero end */
+
+ /* best world start */
+
+ .best-grid {
+ grid-template-columns: repeat(3, 170px);
+ gap: 40px;
+ }
+
+ .best-title {
+ font-size: 34px;
+ }
+
+ /* best world end */
+
+ /* comments start */
+
+ .comment-box-text {
+ font-size: 15px;
+ }
+
+ /* comments end */
+
+ /* about start */
+
+ .about-title {
+ line-height: 52px;
+ font-size: 35px;
+ }
+
+ /* about end */
+
+ /* footer start */
+
+ .footer-row {
+ flex-direction: row;
+ gap: 0;
+ }
+ .footer-row > div {
+ flex-basis: 30%;
+ }
+
+ /* footer end */
+}
+
+/* media for laptop screen */
+@media screen and (min-width: 992px) {
+ .container {
+ width: 960px;
+ }
+
+ /* header start */
+
+ .header {
+ padding: 12px 0;
+ }
+ .berger-box {
+ display: none;
+ }
+ .header-menu {
+ display: flex;
+ order: 1;
+ gap: 5px;
+ }
+ .header-menu-item {
+ color: var(--color-fff);
+ padding: 0.5rem 1rem;
+ transition: all 0.3s ease;
+ border-radius: 8px;
+ font-size: 15px;
+ }
+ .header-menu-item:hover {
+ background-color: rgba(255, 255, 255, 0.15);
+ cursor: pointer;
+ }
+ .header-icons {
+ order: 3;
+ }
+
+ /* header end */
+
+ /* hero start */
+
+ .hero {
+ margin-top: 85px;
+ padding: 40px 0 250px;
+ }
+ .hero-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 30px;
+ }
+ .hero-right {
+ align-self: center;
+ }
+ .hero-title {
+ font-size: 50px;
+ }
+ .hero-text {
+ font-size: 18px;
+ }
+ .hero-buttons {
+ flex-direction: row;
+ }
+ .hero-buttons button {
+ flex: 1;
+ }
+
+ /* hero end */
+
+ /* about start */
+
+ .about-grid {
+ grid-template-columns: repeat(2, 41.66%);
+ justify-content: space-between;
+ align-items: center;
+ }
+ .about-image {
+ order: 2;
+ }
+
+ /* about end */
+
+ /* team start */
+
+ .team-header {
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ gap: 0;
+ }
+ .team-header-button {
+ align-self: unset;
+ }
+
+ /* team end */
+
+ /* join us start */
+
+ .join-us-content {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .join-us-btn {
+ align-self: unset;
+ }
+
+ /* join us end */
+
+ /* footer start */
+
+ .footer-row > div {
+ flex-basis: 20%;
+ }
+
+ /* footer start */
+
+}
+
+/* media for desktop screen */
+@media screen and (min-width: 1200px) {
+ .container {
+ width: 1140px;
+ }
+
+ /* best world start */
+
+ .best-grid {
+ gap: 0;
+ grid-template-columns: repeat(6, 90px);
+ }
+
+ /* best world end */
+
+ /* popular courses start */
+}
+
+/* media for big screens */
+@media screen and (min-width: 1400px) {
+ .container {
+ width: 1320px;
+ }
+}