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 = () => {
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 = () => {
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.
- +We cover each and everything which might resist you from achieving your skills. Your solutions under one roof that only we offer.
We have provided tools for students to make thier profile and work more Professional. Just Have a look!
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 is tool where you can generate your resume for free. It has functionality like dynamic preview, color themes, responsive ,etc.
+ Use ToolCode 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 +This is Repository Readme.md Generator Which you can use to create your repostory readme which represent your repo more interesting..
+ Use ToolLorem, 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 +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 ToolThe field of Machine Learning seeks to answer the question ‘How can we build computer systems that automatically improve with experience, .....
- Learn More +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 ToolArtificial 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 +This is a tool you can use to structure design and preview the design simultanously. You can type HTML,CSS and JS here.
+ Use ToolLorem, 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 -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 -