From 43f8f1b6baf8c42c42ecc9f567f880938624ba1c Mon Sep 17 00:00:00 2001 From: vedant_jain03 Date: Mon, 21 Jun 2021 21:00:19 +0530 Subject: [PATCH] added --- src/Components/Explore/Explore.css | 6 +- .../Fields/Open-source/Opensource.css | 218 ++++++++++++++++++ .../Fields/Open-source/Opensource.jsx | 4 +- src/Components/Homepage/Field.jsx | 80 +++---- 4 files changed, 249 insertions(+), 59 deletions(-) diff --git a/src/Components/Explore/Explore.css b/src/Components/Explore/Explore.css index aba0a42..90b41d6 100644 --- a/src/Components/Explore/Explore.css +++ b/src/Components/Explore/Explore.css @@ -393,16 +393,16 @@ padding: 4rem; #explore-footer { margin-bottom: 0rem; } - #explore .footer img { + .footer img { width: 8rem; margin-top: 14rem; height: 7rem; } - #explore .footer > div h1 { + .footer > div h1 { font-size: 2rem; margin-top: 13rem; } - #explore .footer div{ + .footer div{ font-size: 10px; } .header { diff --git a/src/Components/Fields/Open-source/Opensource.css b/src/Components/Fields/Open-source/Opensource.css index 14c095a..6ed09f6 100644 --- a/src/Components/Fields/Open-source/Opensource.css +++ b/src/Components/Fields/Open-source/Opensource.css @@ -259,4 +259,222 @@ padding: 4rem; border-radius: 10px; overflow: hidden; +} +@media screen and (max-width:800px) { + #opensource { + background: #43cea2; + background: linear-gradient(to right, #185a9d, #43cea2); + width: 100vw; + overflow: hidden; + } + #landingpage { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column-reverse; + } + #landingpage > a{ + text-decoration: none; + position: absolute; + top: 3%; + left: 8rem; + color: rgb(255, 152, 0); + } + #landingpage img { + width: 22rem; + height: 15rem; + top: 0%; + margin-top: 5rem; + } + #landingpage .content { + display: flex; + flex-direction: column; + justify-content: center; + /* padding: 2rem; */ + padding-left: 2rem; + } + #landingpage .content h1 { + font-size: 3rem; + color: white; + } + #landingpage .content p { + font-size: 13px; + font-weight: 500; + color: white; + padding-left: 7px; + padding-top: 1rem; + } + #opensource .components-OS { + height: 100%; + width: 100%; + padding: 2rem; + display: flex; + flex-direction: column; + justify-content: center; + position: relative; + margin-top: 2rem; + } + #opensource .benefits-os { + height: 100%; + width: 100%; + padding: 2rem; + display: flex; + flex-direction: column; + justify-content: center; + } + #opensource .components-OS h1 { + color: white; + font-size: 2rem; + margin-bottom: 2rem; + } + #opensource .components-OS img { + position: unset; + width: 18rem; + right: 2rem; + top: 14rem; + } + #opensource .components-OS h2 { + font-size: 1rem; + color: #fff; + position: relative; + text-transform: uppercase; + } + #opensource .components-OS p { + font-size: 12px; + font-weight: 500; + width: 100%; + color: white; + } + #opensource .benefits-os h1 { + color: white; + font-size: 2rem; + margin-bottom: 2rem; + } + #opensource .prereq-os { + height: 100%; + width: 100%; + padding: 2rem; + display: flex; + flex-direction: column; + justify-content: center; + } + #opensource .benefits-os ul { + margin-left: 2rem; + } + #opensource .benefits-os li { + font-size: 13px; + font-weight: 500; + line-height: 2; + color: white; + } + #opensource .prereq-os h1 { + color: white; + font-size: 2rem; + margin-bottom: 2rem; + } + #opensource .prereq-os img { + width: 22rem; + margin: 0; + } + #opensource .prereq-os ul { + margin-left: 2rem; + } + #opensource .prereq-os li { + font-size: 13px; + font-weight: 500; + line-height: 2; + color: white; + } + #opensource .programs-os h1 { + color: white; + font-size: 2rem; + margin-bottom: 1rem; + margin-top: 3rem; + } + #opensource .wrapper { + background: #00000026; + padding: 1rem; + border-radius: 10px; + overflow: hidden; + } + #opensource .wrapper .row-1 { + justify-content: flex-end; + } + #opensource .wrapper .row-2 { + justify-content: flex-end; + } + #opensource .center-line { + position: absolute; + height: 100%; + width: 4px; + background: #fff; + left: 10%; + top: 0px; + transform: translateX(-50%); + } + #opensource .wrapper .row section { + background: #fff; + border-radius: 5px; + width: 90%; + padding: 20px; + position: relative; + } + .row section .details .title { + font-size: 15px; + font-weight: bold; + } + .row section p { + margin: 10px 0 17px 0; + font-size: 11px; + } + .row section .bottom a { + text-decoration: none; + background: #ff7979; + color: #fff; + padding: 7px 15px; + border-radius: 5px; + font-weight: 400; + font-size: 10px; + } + .wrapper .row section::before { + position: absolute; + content: ""; + height: 15px; + width: 15px; + background: #fff; + top: 28px; + left: -5px; + transform: rotate( + 45deg + ); + } + #opensource .wrapper .row { + justify-content: flex-end; + margin-bottom: 1rem; + } + .row-2 section .icon { + left: -60px; + top: 13px; + display: none; + } + #opensource .mostusedlang { + height: 100%; + width: 100%; + padding: 0rem 2rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + #opensource .mostusedlang h1 { + color: white; + font-size: 2rem; + margin-bottom: 1rem; + } + #opensource .mostusedlang img { + width: 20rem; + height: 11rem; + } } \ No newline at end of file diff --git a/src/Components/Fields/Open-source/Opensource.jsx b/src/Components/Fields/Open-source/Opensource.jsx index 8bcbf5a..1560e7c 100644 --- a/src/Components/Fields/Open-source/Opensource.jsx +++ b/src/Components/Fields/Open-source/Opensource.jsx @@ -73,7 +73,7 @@ const Opensource = () => {

Main Components of Open Source Contributions

- + os

Organisation:


Open Source Organisations are Organisation or might be Umbrella Organisations that owns the particular source code or project or software you want to contribute to. @@ -84,7 +84,7 @@ const Opensource = () => {

Contributors:


Open Source Contributors are programmers / developers who modify in the source code of Organisation. Simply those who contribute to Source codes of Open Source Organisation are Contributors.

- os +

Perks & Benefits of Open Source Contributions

diff --git a/src/Components/Homepage/Field.jsx b/src/Components/Homepage/Field.jsx index 2f9e7e2..e884200 100644 --- a/src/Components/Homepage/Field.jsx +++ b/src/Components/Homepage/Field.jsx @@ -1,4 +1,4 @@ -import React, { useState , useEffect } from "react" +import React, { useState, useEffect } from "react" import "./Field.css" import ItemsCarousel from 'react-items-carousel'; import AOS from 'aos'; @@ -10,92 +10,64 @@ import Ai from "../Fields/AI/Ai" const Field = () => { const [activeItemIndex, setActiveItemIndex] = useState(0); const chevronWidth = 40; - useEffect(()=>{ - AOS.init({duration: 3000}); - },[]); + useEffect(() => { + AOS.init({ duration: 3000 }); + }, []); return (
-

Our Fields

-

We cover each and everything which might resist you from achieving your skills. Your solutions under one roof that only we offer.

+

Our Tools

+

We have provided tools for students to make thier profile and work more Professional. Just Have a look!

{/*
*/} -
- +
+ {'<'}} - rightChevron={} + leftChevron={} + rightChevron={} outsideChevron chevronWidth={chevronWidth} >
- -

Open-Source

-

Open-source code is extremely well-adapted to service-oriented architecture. Want to explore more then have a look and deep dive into this endless ocean.

- Learn More +

Resume Maker

+

Resume Maker is tool where you can generate your resume for free. It has functionality like dynamic preview, color themes, responsive ,etc.

+ Use Tool
+
- -

Web Development

-

Code is read more than it is written, who other would know it better than a web developer. Explore more, The best WebD - eveloper.

- { - alert('Work In Progress!'); - }}>Learn More +

Repository Readme.md Generator

+

This is Repository Readme.md Generator Which you can use to create your repostory readme which represent your repo more interesting..

+ Use Tool
- -

App Development

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque nulla ipsam ex! Tempora totam, non quos tempore facere ullam neque.

- { - alert('Work In Progress!'); - }}>Learn More +

Github Profile Readme Generator

+

This is Profile Readme Generator Which you can use to create your github profile readme.It has so many section which will make your profile cooler then ever.

+ Use Tool
- -

Machine Learning

-

The field of Machine Learning seeks to answer the question ‘How can we build computer systems that automatically improve with experience, .....

- Learn More +

Certificate Generator

+

This is Certificate Generator which you can use to make e-certificate and download as a pdf and then you can distribute the certificates to the students.

+ Use Tool
- -

AI

-

Artificial Intelligence (AI) involves using computers to do things that traditionally require human intelligence. This means creating algorithms to classify, analyze, and draw predictions from data.

- Learn More +

Web Compiler

+

This is a tool you can use to structure design and preview the design simultanously. You can type HTML,CSS and JS here.

+ Use Tool
-
-
- -

Competitive Programming

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque nulla ipsam ex! Tempora totam, non quos tempore facere ullam neque.

- { - alert('Work In Progress!'); - }}>Learn More -
-
-
-
-

Data Structures and Algorithms

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque nulla ipsam ex! Tempora totam, non quos tempore facere ullam neque.

- { - alert('Work In Progress!'); - }}>Learn More -
-
{/*
*/}