Facebook logo

.github/pull_request_template.md

@@ -13,4 +13,5 @@ To fill the checklists, put x inside the brackets. [x]
 - [] I have added just one folder that includes my Art files (jsx and css)
 - [] I have not edited App.js file
 - [] I have commented my code, particularly in hard-to-understand areas
-- [] My changes generate no new warnings
+- [] My changes generate no new warnings
+- [] This is my original code and I have NOT copied the code from anywhere else. 

README.md

@@ -5,24 +5,25 @@
 
 
 ## Run the project
-Run the `yarn start` command in the terminal
+Run the `yarn install` command in the terminal to downlaod the dependencies.   
+Run the `yarn start` command to run the project in the development mode. 
 
-This command will run the app in the development mode.
 Open http://localhost:3000 to view it in the browser.
-
 The page will reload if you make edits.
 
 <br />
 
 ## Some rules and suggestions for making the CSS Art.
 
-1. Create your own folder inside the `/art` folder.
-2. Folder name should be as follows. YourName + ArtName <br />For example, SalilNaikTeddy,
+1. Create your folder inside the `/art` folder.
+2. The folder name should be as follows. YourName + ArtName <br />For example, SalilNaikTeddy,
 3. Give [gradient](https://uigradients.com/) or solid background colours to the `.container` class. Kindly do not keep the background white in colour.
 4. To test your component, import your component to app.js. DO NOT FORGET to remove the import from App.js before you push. Since multiple contributors are going to contribute at the same time, almost every contributor will get merge conflicts. So, edit app.js file only for test purpose, DO NOT push app.js changes to GitHub.
 5. Check out `index.css` for common CSS. DO NOT EDIT THIS FILE.
 6. If you are coding an object inside the container, for example, a logo, a geometrical shape or an object, kindly make sure the total dimensions (width and height) do not exceed 150px. You may take up to 180px only when required. 
-7. When you create a pull request, please specify `updates` branch as all the contributor's changes are going to be merged in the `updates` branch and then to the `main` branch. 
+7. Do not copy the code from elsewhere. If I find any code has been plagiarised from some other platform, I'll have to revert the PR and block you from making any further contributions. 
+8. Please create an issue and start working only after it is assigned to you. During live sessions, you may directly start working without having the issue assigned to you as it might not be feasible for me to assign issues to individuals. But it is important to create an issue so that others don't work on the same art as you are working on. 
+9. When you create a pull request, please specify the `updates` branch as all the contributor's changes are going to be merged in the `updates` branch and then to the `main` branch. 
 
 ### Folder Structure
 

src/art/HarshitFacebook/HarshitFacebook.jsx

@@ -0,0 +1,31 @@
+import style from "./style.module.css";
+import { Credit } from "../../components/Credit/index";
+
+function HarshitFacebook() {
+  let data = {
+    name: "Harshit Pandey",
+    "gh-link": "https://github.com/HarshitPandey251",
+    "art-name": "Facebook",
+  };
+  return (
+    <div className={`${style.container} container`}>
+      {/* DO NOT edit the className above*/}
+
+      {/* your art blocks will come here */}
+      <div>
+        <div className={style.wrapper}>
+            <div className={style.ftop}> 
+                <div className={style.fline}></div>
+            </div>
+            <div className={style.fbox}></div>
+            <div className={style.fbox2}></div>
+        </div>
+      </div>
+
+      {/* do not edit the line below */}
+      <Credit data={data} />
+    </div>
+  );
+}
+
+export default HarshitFacebook;

src/art/HarshitFacebook/style.module.css

@@ -0,0 +1,53 @@
+.container {
+    background-color: #f2f2b6;
+  }
+
+.wrapper{
+    margin: 100px;
+    width: 9.6rem;
+    height: 9.6rem;
+    background: #3b5999;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.ftop{
+    width: 3.2rem;
+    height: 10rem;
+    left: 5rem;
+    top: 1.5rem;
+    background: #fff;
+    position: relative;
+    border-top-left-radius: 35px;
+}
+
+.fline{
+    width: 2.4rem;
+    height: 10rem;
+    left: 25px;
+    top: 22px;
+    position: relative;
+    background: #3b5999;
+    border-top-left-radius: 12px;
+ }
+
+ .fbox{
+   width: 62px;
+   height: 20px;
+   left: 62px;
+   top: -90px;
+   background: #fff;
+   position: relative;
+ }
+
+ .fbox2{
+    width: 5px;
+    height: 20px;
+    left: 122px;
+    top: -110px;
+    background: #fff;
+    position: relative;
+    transform: rotate(7deg);
+ }
+
+

src/components/Header/Header.jsx

@@ -14,12 +14,12 @@ export function Header() {
   });
   return (
     <div className={style.header}>
-      <div className={style.container}>
+      <div className={`${style.container} grid-container`}>
         <div className={style.title}>
           <div className={style.square}></div>
           <div className={style.circle}></div>
           <div className={style.shape}></div>
-          <div>CSS Art Gallery</div>
+          <p className={style.titleText}>CSS Art Gallery</p>
         </div>
         <a
           href="https://github.com/salil-naik/css-art-gallery"

src/components/Header/header.module.css

@@ -1,19 +1,12 @@
 .header {
   height: 60px;
   color: white;
-  /* background-color: #2E2F33; */
   background: #111;
-  /* border-bottom: 2px solid rgb(255, 114, 98); */
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.18);
-  /* position: fixed;
-  top: 0;
-  left: 0; */
   width: 100%;
-  /* z-index: 10; */
 }
 
 .container {
-  padding: 0 30px;
   display: flex;
   justify-content: space-between;
 }
@@ -75,3 +68,11 @@
   line-height: 41px;
   font-size: 14px;
 }
+
+
+@media screen and (max-width: 39.9375em) {
+  .titleText{display:none;}
+  .container{
+    padding:0 15px;
+  }
+}