website routes

pages/_app.tsx → pages/app.tsx

@@ -1,4 +1,4 @@
-
+import "../styles/global.css" 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }

pages/index.tsx

@@ -1,5 +1,7 @@
 import Head from 'next/head'
+import React from 'react';
 
+import Link from 'next/link'
 
 export default function Home() {
   return (
@@ -8,7 +10,23 @@ export default function Home() {
         <title>Course website</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div>Course</div>
+      <h1><strong>Course website HOME</strong></h1>
+      <ul>
+        <li> 
+        <Link href="/playlistMaker">
+          <a>PlaylistMaker</a>
+        </Link>
+        </li>
+        <li>
+          <Link href="/playlistVideos">
+            <a>PlaylistVideos</a>
+          </Link>
+        </li>
+      </ul>
+
+
+
+
     </div>
   )
 }

pages/playlistMaker.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+
+export default function PlaylistMaker(){
+    return (
+        <div>
+            <div>
+                playlistMaker page
+            </div>
+            <Link href="/">
+                <a>Home</a>
+            </Link>
+        </div>
+
+    )
+}
+
+

pages/playlistVideos.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Link from 'next/link'
+const PlaylistVideos = () => {
+
+    return (
+        <div>
+          <div>playlistVideo page</div>
+          <Link href="/">
+            <a>Home</a>
+          </Link>
+        </div>
+    )
+  };  
+
+
+
+export default PlaylistVideos;

styles/global.css

@@ -0,0 +1,50 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    background: #f2f3f5;
+    color:666;
+}
+
+body,input,textarea, button{
+    font: 400 1rem "Inter", sans-serif;
+} 
+:root{
+    --white:#fff;
+    --background:#f2f3f5;
+    --gray-line:#DCDDE0;
+    --text: #666666;
+    --text-highlight: #B3B9FF;
+    --title: #2E384D;
+    --red:#E83F5B;
+    --green:#4CD62B;
+    --blue:#5965E0;
+    --blue-dark:#4953B8;
+    --blue-twitter: #2AA9E0;
+}  
+
+
+@media(max-width:1080px){
+    html{
+        font-size:93,75%;
+
+    }
+}
+@media(max-width:720px){
+    html{
+        font-size:87,5%;    
+    }
+
+}
+
+
+button{
+    cursor: pointer; 
+}
+a{
+    text-decoration: none;
+    color:inherit;
+}
+

tsconfig.json

@@ -22,7 +22,7 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx"
-  ],
+, "components/playlistVideos.jsx"  ],
   "exclude": [
     "node_modules"
   ]