From 7891050731ffd225403fdec6dfc24e64ad70b03f Mon Sep 17 00:00:00 2001
From: cesartalves <cesartalvez@gmail.com>
Date: Mon, 20 Jan 2025 15:27:02 -0300
Subject: [PATCH] Some changes!

- Add Spotify (currently listening)
- Put styles on main.css
- Add new video Link

TODO:
- link Youtube Channels more appropriately (automatically pull changes)
- Center Spotify Container properly
---
 index.html | 96 ++++++++++++++----------------------------------------
 main.css   | 69 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 94 insertions(+), 71 deletions(-)
 create mode 100644 main.css
diff --git a/index.html b/index.html
index 9fc3ce7..9228151 100644
--- a/index.html
+++ b/index.html
@@ -5,92 +5,29 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>cesartalvez! Software Engineering, Languages and Everything in between!</title>
 
-  <style>
-    body {
-      margin: 0px;
-      padding: 0px;
-    }
-
-    .intro-thanks {
-      margin: 0px 10px 0px 10px;
-      border-radius: 10px;
-      background-color: rgb(213, 240, 241);
-      padding: 20px;
-    }
-
-    .thanks {
-      font-weight: bold;
-    }
-
-    .center-content {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .video {
-      font-size: 30px;
-    }
-
-    .video-container {
-      background-color: rgb(213, 240, 241);
-      margin: 30px 0px 30px 0px;
-      padding: 20px;
-    }
-
-    #nav {
-      background-color: black;
-      height: 20px;
-      margin-bottom: 20px;
-      padding: 10px;
-    }
-
-    #nav a {
-      color: white;
-      text-decoration: none;
-      
-    }
-
-    #external {
-      margin: 20px 0px 30px 0px;
-      padding: 30px 0px 30px 0px;
-      border-radius: 5px;
-      background-color: beige;
-    }
-
-    #external > p {
-      padding-bottom: 20px;
-      font-weight: bolder;
-    }
-
-    #footer {
-      margin-bottom: 20px;
-      padding: 20px;
-    }
-    
-  </style>
+  <link rel="stylesheet" href="./main.css">
 </head>
 <body>
   <section id="nav" class="center-content">
     <a href="">cesartalvez | Sample LandingPage ✨</a>
   </section>
+  </section>
   <section id="intro" class="center-content">
     <div>
       <div class="intro-thanks">
-        <div class="">
-          Hi! This is a sample Landing Page. 
-        </div>
+        <div class="">This is a sample Landing Page</div>
         <div class="thanks">
           Thanks for vising! ☺️
         </div>
       <hr>
         <br>I use this Page to <strong>Teach people I am Mentoring!</strong>
+        <a href="https://calendly.com/cesartalves/bate-papo-avaliacao-15-min?">
+          Book a Chat TODAY! 🫡
+        </a>
       </div>
     
         <div class="video-container">
-          <p><strong>Need help with Programming? See the links below! Click on the Link below! 👇</strong>
-
+          <p><strong>PROGRAMMING VIDEOS!👇</strong>
           </p>
           <ul>
             <li>
@@ -99,6 +36,9 @@
             <li> 
               <a class="video" href="https://youtu.be/uNEnYoceGyE" target="_blank">What is DRY? (Portuguese)</a>
             </li>
+            <li>
+              <a class="video" href="https://youtu.be/91AqVoOu7nc">Dicas para Começar à Programar (Portuguese)</a>
+            </li>
           </ul>
           
         </div>
@@ -106,9 +46,13 @@
   </section>
 
   <section id="external">
+    <div class="center-content">
+     
+    </div>
     <p class="center-content">Find me on Social Media! 🧑🏻‍💻</p>
     <div class="center-content">
-      <div class="external">
+      <div class="">
+        
         <div class="linkedin-badge">
           <div class="badge-base LI-profile-badge" data-locale="pt_BR" data-size="medium" data-theme="dark"
             data-type="VERTICAL" data-vanity="cesartalves" data-version="v1">
@@ -128,6 +72,16 @@
     </div>
   </section>
 
+  <section id="listening ">
+    <div>
+      <div class="center-content">Currently Listening to 🦻</div>
+      <br>
+      <!--- TODO: center IFRAME-->
+    <iframe src="https://open.spotify.com/embed/track/5gG7Jis9uH1MYh9l1SqsFh?utm_source=generator"  height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
+    </div>
+  </section>
+
+
   <section id="footer">
     Programmed with ❤️ by <a href="https://linktr.ee/cesartalvez" target="_blank">@cesartalvez!</a>
   </section>
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..75fb364
--- /dev/null
+++ b/main.css
@@ -0,0 +1,69 @@
+
+    body {
+      margin: 0px;
+      padding: 0px;
+    }
+
+    .intro-thanks {
+      margin: 0px 10px 0px 10px;
+      border-radius: 10px;
+      background-color: rgb(213, 240, 241);
+      padding: 20px;
+    }
+
+    .thanks {
+      font-weight: bold;
+    }
+
+    .center-content {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .video {
+      font-size: 30px;
+    }
+
+    .video-container {
+      background-color: rgb(213, 240, 241);
+      margin: 30px 0px 30px 0px;
+      padding: 20px;
+    }
+
+    #nav {
+      background-color: black;
+      height: 20px;
+      margin-bottom: 20px;
+      padding: 10px;
+    }
+
+    #nav a {
+      color: white;
+      text-decoration: none;
+      
+    }
+
+    #external {
+      margin: 20px 0px 30px 0px;
+      padding: 30px 0px 30px 0px;
+      border-radius: 5px;
+      background-color: beige;
+    }
+
+    #external > p {
+      padding-bottom: 20px;
+      font-weight: bolder;
+    }
+
+    #listening iframe {
+     
+    }
+
+    #footer {
+      margin-bottom: 20px;
+      padding: 20px;
+    }
+    
+ 
\ No newline at end of file
