Gravity team site clone added to web development

README.md

@@ -1219,6 +1219,6 @@
 └── rust
     └── factorial.rs
 
-238 directories, 958 files
+237 directories, 958 files
 ```
 <!-- PROJECT_TREE_END -->

Web development/gravityteam clone/css/about.css

@@ -0,0 +1,121 @@
+.about {
+  justify-content: center;
+  gap: 3rem;
+  flex-direction: column;
+  margin-bottom: 10rem;
+}
+.about .sub-heading {
+  width: 30rem;
+  text-align: center;
+}
+
+.about .grid-parts {
+  display: grid;
+  grid-template-columns: 230px 230px 230px 230px;
+  grid-template-rows: 150px 150px;
+  position: relative;
+}
+.about .grid-parts .part {
+  flex-direction: column;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem;
+}
+.about .grid-parts .part .heading {
+  font-weight: var(--font-mid);
+  font-size: 1.5rem;
+}
+.about .grid-parts .part .sub-heading {
+  width: auto;
+}
+.about .grid-parts .part:nth-child(2) {
+  background-image: var(--btn-grad);
+}
+.about .grid-parts .part:nth-child(1)::before,
+.about .grid-parts .part:nth-child(3)::before,
+.about .grid-parts .part:nth-child(4)::before,
+.about .grid-parts .part:nth-child(5)::before {
+  background-image: var(--btn-grad);
+  content: "";
+  position: absolute;
+  border-radius: 100vw;
+}
+
+.about .grid-parts .part:nth-child(1)::before {
+  bottom: 50%;
+  left: 0;
+  height: 2px;
+  width: 100%;
+}
+.about .grid-parts .part:nth-child(3)::before {
+  bottom: 0;
+  left: 230px;
+  height: 100%;
+  width: 2px;
+}
+.about .grid-parts .part:nth-child(4)::before {
+  bottom: 0;
+  left: 460px;
+  height: 100%;
+  width: 2px;
+}
+.about .grid-parts .part:nth-child(5)::before {
+  bottom: 0;
+  right: 230px;
+  height: 100%;
+  width: 2px;
+}
+@media screen and (max-width: 960px) {
+  .about .grid-parts {
+    display: grid;
+    grid-template-columns: 230px 230px;
+    grid-template-rows: 150px 150px 150px 150px;
+    position: relative;
+  }
+
+  .about .grid-parts .part:nth-child(1)::before {
+    bottom: 50%;
+    left: 0;
+    height: 2px;
+    width: 100%;
+  }
+  .about .grid-parts .part:nth-child(3)::before {
+    bottom: 25%;
+    left: 0;
+    height: 2px;
+    width: 100%;
+  }
+  .about .grid-parts .part:nth-child(4)::before {
+    top: 25%;
+    left: 0;
+    height: 2px;
+    width: 100%;
+  }
+  .about .grid-parts .part:nth-child(5)::before {
+    bottom: 0;
+    right: 50%;
+    height: 100%;
+    width: 2px;
+  }
+}
+@media screen and (max-width: 550px) {
+  .about .heading {
+    text-align: center;
+  }
+  .about .sub-heading {
+    width: auto;
+    padding: 0 3rem;
+  }
+  .about .grid-parts {
+    grid-template-columns: 40vw 40vw;
+  }
+  .about .grid-parts .part .heading {
+    font-size: 1.3rem;
+    text-align: center;
+  }
+  .about .grid-parts .part .sub-heading {
+    font-size: 0.8rem;
+    padding: 0;
+    line-height: 1.3rem;
+  }
+}

Web development/gravityteam clone/css/company.css

@@ -0,0 +1,94 @@
+.company {
+  justify-content: center;
+  flex-direction: column;
+  gap: 2.5rem;
+  margin: 13rem 0 10rem 0;
+}
+.company .sub-heading {
+  width: 30rem;
+  text-align: center;
+}
+.company .arrows {
+  justify-content: center;
+  gap: 1.5rem;
+}
+.company .desc {
+  width: 30rem;
+  text-align: center;
+  line-height: 2rem;
+  font-size: 1.1rem;
+}
+.company .arrows .arrow {
+  justify-content: center;
+  width: 3rem;
+  border-radius: 50%;
+  aspect-ratio: 1;
+}
+.company .arrows .arrow:nth-child(2) {
+  rotate: 180deg;
+}
+.company .name {
+  font-weight: var(--font-mid);
+}
+.company .foot .position {
+  margin-right: 1rem;
+}
+.company .foot .company-logo {
+  border-left: 2px solid rgba(128, 128, 128, 0.443);
+  padding-left: 1rem;
+}
+.pagination {
+  background-color: gray;
+  height: 10px;
+  aspect-ratio: 1;
+  border-radius: 100%;
+  position: relative;
+}
+
+.pagination::before {
+  content: "";
+  position: absolute;
+  left: -30px;
+  top: 0;
+  height: 10px;
+  border-radius: 100%;
+  aspect-ratio: 1;
+  background-image: var(--btn-grad);
+}
+.pagination::after {
+  content: "";
+  position: absolute;
+  left: 30px;
+  top: 0;
+  height: 10px;
+  border-radius: 100%;
+  aspect-ratio: 1;
+  background-color: gray;
+}
+
+@media screen and (max-width: 560px) {
+  .company .heading {
+    text-align: center;
+  }
+  .company .sub-heading {
+    width: auto;
+    padding: 0 10vw;
+  }
+  .company .desc {
+    width: auto;
+    font-size: 1rem;
+    padding: 0 10vw;
+  }
+  .company .foot {
+    gap: 1rem;
+    flex-direction: column;
+  }
+
+  .company .foot .position {
+    margin-right: 0;
+  }
+  .company .foot .company-logo {
+    border: none;
+    padding-left: 0;
+  }
+}

Web development/gravityteam clone/css/contact.css

@@ -0,0 +1,19 @@
+.contact {
+  flex-direction: column;
+  justify-content: center;
+  gap: 2.5rem;
+}
+.contact .contact-blob {
+  position: absolute;
+  width: 100%;
+}
+.contact .sub-heading {
+  width: 38rem;
+  text-align: center;
+}
+@media screen and (max-width: 680px) {
+  .contact .sub-heading {
+    width: auto;
+    padding: 0 3rem;
+  }
+}

Web development/gravityteam clone/css/footer.css

@@ -0,0 +1,45 @@
+.footer {
+  margin-top: 20rem;
+  padding: 5rem 8rem;
+  border-top: 1px solid rgba(128, 128, 128, 0.494);
+}
+.footer .logo {
+  width: 10rem;
+}
+.footer .top {
+  justify-content: space-between;
+}
+.footer .top .links {
+  flex-direction: column;
+  gap: 1rem;
+  align-items: flex-start;
+  color: var(--sub-text-c);
+}
+.footer .top .links .title {
+  text-transform: uppercase;
+  font-size: 1.1rem;
+  color: var(--text-c);
+}
+.footer .bottom {
+  margin-top: 4rem;
+  justify-content: space-between;
+  color: gray;
+  gap: 2rem;
+}
+.footer .bottom p {
+  white-space: nowrap;
+}
+@media screen and (max-width: 730px) {
+  .footer .bottom {
+    flex-direction: column;
+  }
+}
+@media screen and (max-width: 730px) {
+  .footer .top {
+    gap: 2rem;
+    flex-direction: column;
+  }
+  .footer .top .links {
+    align-items: center;
+  }
+}

Web development/gravityteam clone/css/hero.css

@@ -0,0 +1,29 @@
+.hero {
+  justify-content: center;
+  flex-direction: column;
+  min-height: 110vh;
+  gap: 2rem;
+}
+.hero .main-heading {
+  font-size: 4rem;
+  text-align: center;
+  font-weight: var(--font-mid);
+  line-height: 7rem;
+}
+.hero .sub-heading {
+  width: 30rem;
+  text-align: center;
+}
+@media screen and (max-width: 525px) {
+  .hero .main-heading {
+    font-size: calc(1.5rem + 5vw);
+    text-align: center;
+    font-weight: var(--font-mid);
+    line-height: 5rem;
+  }
+  .hero .sub-heading {
+    width: auto;
+    padding: 10vw;
+    text-align: center;
+  }
+}

Web development/gravityteam clone/css/joinTeam.css

@@ -0,0 +1,32 @@
+.join-team {
+  justify-content: space-between;
+  margin-bottom: 15rem;
+  padding: 3rem;
+}
+.join-team img {
+  position: absolute;
+  left: 2rem;
+  z-index: -9;
+}
+.join-team .sub-heading {
+  width: 30rem;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: flex-start;
+}
+.join-team .sub-heading .line-link {
+  margin-top: 1rem;
+}
+@media screen and (max-width: 630px) {
+  .join-team {
+    flex-direction: column;
+    text-align: center;
+    gap: 3rem;
+  }
+  .join-team .sub-heading {
+    width: auto;
+  }
+  .join-team img {
+    width: 90vw;
+  }
+}