Skip to content

Commit

Permalink
added
Browse files Browse the repository at this point in the history
  • Loading branch information
@vedant-jain03
vedant-jain03 committed Jun 21, 2021
1 parent a26cd21 commit 43f8f1b
Show file tree
Hide file tree
Showing 4 changed files with 249 additions and 59 deletions.
6 changes: 3 additions & 3 deletions src/Components/Explore/Explore.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
218 changes: 218 additions & 0 deletions src/Components/Fields/Open-source/Opensource.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
4 changes: 2 additions & 2 deletions src/Components/Fields/Open-source/Opensource.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const Opensource = () => {
</div>
<div className="components-OS" data-aos="fade-left">
<h1>Main Components of Open Source Contributions</h1>

<img src="https://www.westcodesoft.com/wp-content/uploads/2017/08/Open-Source-Software.jpeg" alt="os" />
<h2>Organisation:</h2>
<br />
<p data-aos="fade-right">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.
Expand All @@ -84,7 +84,7 @@ const Opensource = () => {
<h2>Contributors:</h2>
<br />
<p data-aos="fade-right">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.</p>
<img src="https://www.westcodesoft.com/wp-content/uploads/2017/08/Open-Source-Software.jpeg" alt="os" />

</div>
<div className="benefits-os">
<h1>Perks & Benefits of Open Source Contributions</h1>
Expand Down
80 changes: 26 additions & 54 deletions src/Components/Homepage/Field.jsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 (
<div id="field">
<center><h1 className="head" data-aos="zoom-in-down">Our Fields</h1></center>
<center><p className="para" data-aos="fade-down">We cover each and everything which might resist you from achieving your skills. Your solutions under one roof that only we offer.</p></center>
<center><h1 className="head" data-aos="zoom-in-down">Our Tools</h1></center>
<center><p className="para" data-aos="fade-down">We have provided tools for students to make thier profile and work more Professional. Just Have a look!</p></center>
{/* <div className="slider"> */}
<div style={{ padding: `0 ${chevronWidth}px` ,background: 'hsl(0deg 0% 0% / 30%)', marginTop: '1rem',boxShadow: 'inset 10px 5px 51px 27px #0000005c'}} className="homepagecards" >
<div style={{ padding: `0 ${chevronWidth}px`, background: 'hsl(0deg 0% 0% / 30%)', marginTop: '1rem', boxShadow: 'inset 10px 5px 51px 27px #0000005c' }} className="homepagecards" >

<ItemsCarousel
requestToChangeActive={setActiveItemIndex}
activeItemIndex={activeItemIndex}
numberOfCards={3}
gutter={15}
leftChevron={<button style={{fontSize:'2rem',padding:'40px 10px',border:'none',background:'rgb(40 44 52 / 47%)',marginLeft:'-2px' , color:'white', cursor:'pointer'}}>{'<'}</button>}
rightChevron={<button style={{fontSize:'2rem',padding:'40px 10px',border:'none',background:'rgb(40 44 52 / 47%)',color:'white', cursor:'pointer', marginRight:'0'}}>{'>'}</button>}
leftChevron={<button style={{ fontSize: '2rem', padding: '40px 10px', border: 'none', background: 'rgb(40 44 52 / 47%)', marginLeft: '-2px', color: 'white', cursor: 'pointer' }}>{'<'}</button>}
rightChevron={<button style={{ fontSize: '2rem', padding: '40px 10px', border: 'none', background: 'rgb(40 44 52 / 47%)', color: 'white', cursor: 'pointer', marginRight: '0' }}>{'>'}</button>}
outsideChevron
chevronWidth={chevronWidth}
>

<div className="card">
<div className="card-content">

<h2 className="card-title">Open-Source</h2>
<p className="card-body">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.</p>
<Link to="/Opensource" className="button">Learn More</Link>
<h2 className="card-title">Resume Maker</h2>
<p className="card-body">Resume Maker is tool where you can generate your resume for free. It has functionality like dynamic preview, color themes, responsive ,etc.</p>
<a href="https://vedant-jain03.github.io/Resume-Maker/" className="button">Use Tool</a>
</div>
</div>

<div className="card">
<div className="card-content">

<h2 className="card-title">Web Development</h2>
<p className="card-body">Code is read more than it is written, who other would know it better than a web developer. Explore more, The best WebD
eveloper.</p>
<a href="#" className="button" onClick={() => {
alert('Work In Progress!');
}}>Learn More</a>
<h2 className="card-title">Repository Readme.md Generator</h2>
<p className="card-body">This is Repository Readme.md Generator Which you can use to create your repostory readme which represent your repo more interesting..</p>
<a href="https://vedant-jain03.github.io/Repo-Readme-Md-Generator/" className="button">Use Tool</a>
</div>
</div>
<div className="card">
<div className="card-content">

<h2 className="card-title">App Development</h2>
<p className="card-body">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque nulla ipsam ex! Tempora totam, non quos tempore facere ullam neque.</p>
<a href="#" className="button" onClick={() => {
alert('Work In Progress!');
}}>Learn More</a>
<h2 className="card-title">Github Profile Readme Generator</h2>
<p className="card-body">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.</p>
<a href="https://vedant-jain03.github.io/Github-Profile-Readme-Generator/" className="button">Use Tool</a>
</div>
</div>
<div className="card">
<div className="card-content">

<h2 className="card-title">Machine Learning</h2>
<p className="card-body">The field of Machine Learning seeks to answer the question ‘How can we build computer systems that automatically improve with experience, .....</p>
<Link to="/ml" className="button">Learn More</Link>
<h2 className="card-title">Certificate Generator</h2>
<p className="card-body">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.</p>
<a href="https://vedant-jain03.github.io/certificate-generator/" className="button">Use Tool</a>
</div>
</div>
<div className="card">
<div className="card-content">

<h2 className="card-title">AI</h2>
<p className="card-body">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.</p>
<Link to="/Ai" className="button">Learn More</Link>
<h2 className="card-title">Web Compiler</h2>
<p className="card-body">This is a tool you can use to structure design and preview the design simultanously. You can type HTML,CSS and JS here.</p>
<a href="https://yashikajotwani12.github.io/Web-Compiler/" className="button">Use Tool</a>
</div>
</div>
<div className="card">
<div className="card-content">

<h2 className="card-title">Competitive Programming</h2>
<p className="card-body">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque nulla ipsam ex! Tempora totam, non quos tempore facere ullam neque.</p>
<a href="#" className="button" onClick={() => {
alert('Work In Progress!');
}}>Learn More</a>
</div>
</div>
<div className="card">
<div className="card-content">
<h2 className="card-title">Data Structures and Algorithms</h2>
<p className="card-body">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque nulla ipsam ex! Tempora totam, non quos tempore facere ullam neque.</p>
<a href="#" className="button" onClick={() => {
alert('Work In Progress!');
}}>Learn More</a>
</div>
</div>
</ItemsCarousel>
{/* </div> */}
</div>
Expand Down

0 comments on commit 43f8f1b

Please sign in to comment.