adding: deploying

.github/workflows/deploy.yml

@@ -0,0 +1,51 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+
+      - name: Build project
+        run: npm run build
+
+      - name: Upload production-ready build files
+        uses: actions/upload-artifact@v2
+        with:
+          name: production-files
+          path: ./dist
+
+  deploy:
+    name: Deploy
+    needs: build
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
+
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v2
+        with:
+          name: production-files
+          path: ./dist
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

src/App.jsx

@@ -36,13 +36,13 @@ function App() {
 
             </ul>
             {/* <p>
-              
-              
-              
-              
-              
-              
-              
+              Tutorials by industry experts
+              Peer & expert code review
+              Coding exercises
+              Access to our GitHub repos
+              Community forum
+              Flashcard decks
+              New videos every week   
             </p> */}
           </div>
         </div>

src/index.css

@@ -8,9 +8,6 @@
 body{
   font-family: "Karla", sans-serif;
   background-color: var(--Light-Gray);
-  /* display: flex;
-  justify-content: center;
-  align-items: center; */
   margin: 0;
 }
 
@@ -39,23 +36,20 @@ body{
   background-color: white;
   padding: 2rem 2.5rem;
   border-radius: .5rem .5rem 0 0;
-
 }
 
 .main--upper-part > h2{
   color: var(--Cyan);
   margin: 0;
   padding: 1rem 0;
   font-size: 26px;
-
 }
 
 .main--upper-part > h4{
   margin: 0;
   color: var(--Bright-Yellow);
   font-weight: 700;
   font-size: 20px;
-
 }
 
 .main--upper-part > p{
@@ -77,10 +71,8 @@ body{
   background-color: var(--Cyan);
   padding: 2.5rem;
   color: var(--Light-Gray);
-  /* justify-content: ; */
   padding-bottom: 0;
   border-radius: 0 0 0 .5rem;
-
 }
 
 .main--lower-part-left > h4{
@@ -95,7 +87,6 @@ body{
   align-items: center;
   gap: .7rem;
   margin-top: 0.7rem;
-
 }
 
 .main--price > h1{
@@ -151,14 +142,6 @@ body{
   font-size: 20px;
 }
 
-/* .main--lower-part-right > p{
-  font-weight: 300;
-  width: 220px;
-  opacity: 0.8;
-  letter-spacing: .02em;
-  line-height: 1.5rem;
-}  */
-
 .main--lower-part-right >ul{
   list-style-type: none;
   opacity: 0.8;
@@ -167,7 +150,6 @@ body{
   line-height: 1.3rem;
   padding: 0;
   font-size: 15px;
-
 }
 
 footer{

vite.config.js

@@ -4,4 +4,5 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: "/Single-Price-Grid-Component/"
 })