diff --git a/package-lock.json b/package-lock.json index 7c55c7d..07138b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,11 @@ "name": "developer-library", "version": "0.1.0", "dependencies": { - "react": "18.2.0", - "react-dom": "18.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-scripts": "0.9.5" - } + }, + "devDependencies": {} }, "node_modules/abab": { "version": "1.0.4", diff --git a/public/index.html b/public/index.html index aab5e3b..d789a9f 100644 --- a/public/index.html +++ b/public/index.html @@ -4,28 +4,10 @@ - + React App
- diff --git a/src/App.css b/src/App.css index 15adfdc..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,24 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; -} - -.App-header { - background-color: #222; - height: 150px; - padding: 20px; - color: white; -} - -.App-intro { - font-size: large; -} - -@keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} diff --git a/src/App.js b/src/App.js index d7d52a7..e7213ef 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,14 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; import './App.css'; - +import Footer from './Footer'; +import './footer.css'; +import Discription from './Discription'; class App extends Component { render() { return (
-
- logo -

Welcome to React

-
-

- To get started, edit src/App.js and save to reload. -

+ +
); } diff --git a/src/Discription.js b/src/Discription.js new file mode 100644 index 0000000..537902f --- /dev/null +++ b/src/Discription.js @@ -0,0 +1,43 @@ +import React from "react"; +import './discription.css'; +function Discription() { + return ( +
+

Discription about Website

+

Introduction

+
+

+ Welcome to Developer Library, the premier platform for college + students to store and share their projects. Explore an extensive + collection of innovative creations from aspiring developers, spanning + software applications, web development, mobile apps, and hardware + prototypes. With our user-friendly interface, finding and showcasing + projects has never been easier. Join our vibrant community to + collaborate, exchange ideas, and receive valuable feedback. Whether + you're a coding enthusiast or a computer science major, Developer + Library is your go-to destination for building a stellar portfolio and + gaining recognition for your talents. Discover, learn, and be inspired + at the Developer Library, where the future of technology is written by + college students like you. +

+

Overview

+

+ The Developer Library containing user projects is a platform where + users can showcase their work and share their ideas with a wider + audience. It serves as a hub for creativity, innovation, and + collaboration among students from various backgrounds. Users can + engage with each other by leaving comments, asking questions, or + providing feedback on the projects. This fosters a collaborative + environment where users can receive constructive input, suggestions, + and encouragement from their peers which boosts their confidence. + Overall, the Developer Library acts as a digital showcase for user's + projects, promoting creativity, knowledge sharing, and collaboration + among users. It serves as a valuable platform for users to gain + recognition for their work, inspire others, and contribute to the + broader professional community. +

+
+
+ ); +} +export default Discription; diff --git a/src/Footer.js b/src/Footer.js new file mode 100644 index 0000000..dfed87e --- /dev/null +++ b/src/Footer.js @@ -0,0 +1,42 @@ +import React from "react"; +import "./App.css"; + +function Footer() { + return ( + ) +} +export default Footer diff --git a/src/discription.css b/src/discription.css new file mode 100644 index 0000000..c00f399 --- /dev/null +++ b/src/discription.css @@ -0,0 +1,47 @@ +@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); +* { + margin: 0; + box-sizing: border-box; + padding: 0; +} +body { + background-color: rgb(255, 255, 255); +} +.disc { + padding: 10px 40px; +} +.disc-heading { + margin: 1% 20%; + padding: 20px 5px; + color: rgb(255, 255, 255); + text-transform: uppercase; + background-color: rgb(71, 70, 70); + border-style: solid; + border-width: 3px; + border-color: black; + border-radius: 20px; + text-shadow: 1px 4px 2px rgb(0, 0, 0); + text-align: center; + font-family: 'Merriweather', serif;} +.disc-heading2 { + margin: 20px 0px 5px 0px; + padding: 5px 0px; + text-transform: uppercase; + font-family: 'Merriweather', serif; +} +.para1 { + text-align: justify; + font-family: "Inter", sans-serif; +} +.overview { + margin: 20px 0px 5px 0px; + padding: 5px 0px; + text-transform: uppercase; + font-family: 'Merriweather', serif; +} +.para2 { + text-align: justify; + font-family: "Inter", sans-serif; + +} diff --git a/src/footer.css b/src/footer.css new file mode 100644 index 0000000..9315f38 --- /dev/null +++ b/src/footer.css @@ -0,0 +1,152 @@ +/* Footer */ +/* Footer */ +/* ------ */ +footer.page-footer { + background-color: #fff !important; + + color: #202124 !important; + + border-top-color: #dadce0 !important; + + border-top-width: 0 !important; + border-top-style: solid; + border-top-width: 1px !important; + + + border-bottom-width: 0 !important; + } + + footer.page-footer .footer-brand.footer-brand-svg img { + height: 65px; + } + + footer.page-footer .footer-brand.footer-brand-png img { + max-height: 65px; + } + + footer.page-footer .footer-bottom { + background-color: #fff !important; + + + border-top-width: 0 !important; + } + + footer.page-footer .footer-top h5, + footer.page-footer .join-community .follow-community { + font-size: 16px !important; + + text-transform: none !important; + + font-weight: 400 !important; + + color: #676c72 !important; + } + + footer.page-footer a { + color: #202124 !important; + + color: #202124 !important; + } + + footer.page-footer a:not(.social-button):not(.powered_by_bevy):not(.btn):not(.footer-copyright) { + font-size: 14px !important; + + text-transform: none; + + font-weight: normal; + font-weight: normal !important; + } + + @media (min-width: 992px) { + footer.page-footer a:hover { + color: #1a73e8 !important; + } + + footer.page-footer a:not(.social-button):hover { + text-decoration: none !important; + + } + } + + footer.page-footer .footer-bottom .site-info, + footer.page-footer .footer-bottom .site-info .footer-copyright, + footer.page-footer .footer-bottom .site-info a { + color: #202124 !important; + + font-size: 14px !important; + + text-transform: none !important; + + font-weight: normal; + font-weight: normal !important; + + color: #202124 !important; + } + + footer.page-footer a.social-button { + color: #676c72 !important; + } + + footer.page-footer ul.social-links li { + background-color: #fff !important; + + } + + @media (min-width: 992px) { + footer.page-footer ul.social-links li:hover a.social-button { + color: #1a73e8 !important; + } + + footer.page-footer ul.social-links li:hover { + background-color: #fff !important; + + } + } + + footer.page-footer { + padding: 50px 0 0; + margin-top: -1px; + } + + footer.page-footer hr { + border-top-color: #dadce0; + margin-top: 45px; + } + + footer.page-footer .footer-bottom { + padding: 20px 0 20px; + } + @media (max-width: 992px) { + footer.page-footer { + text-align:left + } + } + footer.page-footer { + border-top: 1px solid #D7D7D7!important + } + footer.page-footer { + font-size: 13px; + height: auto + } + + footer.page-footer .join-community .submit { + padding: 0; + height: 43px; + line-height: 43px + } + + footer.page-footer .join-community .follow-sub-title { + color: #E5E5E5; + font-size: 13px + } + + footer.page-footer h2 { + margin-bottom: 30px; + margin-top: 15px + } + + footer.page-footer .site-info { + margin: 0 30px + } + + /* end Footer */ \ No newline at end of file