omikeejoy · digracesion · Sep 26, 2023 · Sep 26, 2023
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# HTML and CSS Learning Demo File
+
+This is a sample repository for learning HTML and CSS based on this [webpage](https://aliabdaal.com/about/)
diff --git a/aboutme.html b/aboutme.html
@@ -1,40 +1,46 @@
 <!DOCTYPE html>
-<html>
+<html lang="en-EN">
     <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="aboutme.css">
+    <link rel="stylesheet" href="css/aboutme.css">
         <body>
             <title> About- Ali Abdaal </title>
 
             <header>
-              <img class="abtlogo" src="aboutlogo.png" alt="logo"> <a href="https://aliabdaal.com/"></a>
+              <img class="abtlogo" src="img/aboutlogo.png" alt="logo"> <a href="https://aliabdaal.com/"></a>
               <nav>
                 <ul class="navlinks">
-                <li><a href="https://aliabdaal.com/about/">ABOUT</a></li>
-                <li><a href="https://aliabdaal.com/articles/">ARTICLES</a></li>
-                <li><a href="https://aliabdaal.com/podcast">PODCAST</a></li>
-                <li><a href="https://aliabdaal.com/book-notes">BOOK NOTES</a></li>
-                <li><a href="https://aliabdaal.com/newsletter">NEWSLETTER</a></li>
-                <li><a href="https://aliabdaal.notion.site/Jobs-With-Ali-Abdaal-16bbb278753b47ebb57f0aafcf4e5859">JOBS</a></li>
+                  <li><a href="https://aliabdaal.com/about/">ABOUT</a></li>
+                  <li><a href="https://aliabdaal.com/articles/">ARTICLES</a></li>
+                  <li><a href="https://aliabdaal.com/podcast">PODCAST</a></li>
+                  <li><a href="https://aliabdaal.com/book-notes">BOOK NOTES</a></li>
+                  <li><a href="https://aliabdaal.com/newsletter">NEWSLETTER</a></li>
+                  <li><a href="https://aliabdaal.notion.site/Jobs-With-Ali-Abdaal-16bbb278753b47ebb57f0aafcf4e5859">JOBS</a></li>
+                  <li>
+                    <a class="cta" href="https://academy.aliabdaal.com/?utm_source=aliabdaal.com&utm_medium=link&utm_id=website-navigation&_ga=2.127836173.1080026951.1695212312-359907120.1694056296&_gl=1*2gr0hk*_ga*MzU5OTA3MTIwLjE2OTQwNTYyOTY.*_ga_FL652M4V7S*MTY5NTIxMjMxMi4xMS4xLjE2OTUyMTIzMTIuMC4wLjA.">
+                      <button>ACADEMY</button>
+                    </a>
+                  </li>
                 </ul>
               </nav>
-              <a class="cta" href="https://academy.aliabdaal.com/?utm_source=aliabdaal.com&utm_medium=link&utm_id=website-navigation&_ga=2.127836173.1080026951.1695212312-359907120.1694056296&_gl=1*2gr0hk*_ga*MzU5OTA3MTIwLjE2OTQwNTYyOTY.*_ga_FL652M4V7S*MTY5NTIxMjMxMi4xMS4xLjE2OTUyMTIzMTIuMC4wLjA."><button>ACADEMY</button></a>
             </header>
 
             <div class="AboutMe">
               <div class="content">
                 <h1>About Me</h1> 
-                <p> Hey, I'm Ali Abdaal. I'm an ex-doctor turned YouTuber, <br>Podcaster, entrepreneur, and author (and I dabble with the <br> occasional investment too).</p>
+                  <p> Hey, I'm Ali Abdaal. I'm an ex-doctor turned YouTuber,</p>
+                  <p> Podcaster, entrepreneur, and author (and I dabble with the</p>
+                  <p>occasional investment too).</p>
               </div>           
-                <img src="about-me.jpg" id= "aboutAli">
+                <img src="img/about-me.jpg" id= "aboutAli">
             </div>
 
             <div class="WhoAmI">
                 <h1>Who Am I</h1>
                 <p>Hey friends. I'm Ali Abdaal. A former doctor turned YouTuber, entrepreneur, podcaster <br>and soon-to-be author. I've been creating YouTube videos for over 7 years and have amassed a <br>following of over 4 million on my main channel.</p>
                 <p>This page is a little self-indulgent, it's all about me. Hopefully you'll find it interesting though.🙂.</p>
                <div class="wai">
-                  <img src="who-am-i.jpg" id="itsAli"> 
+                  <img src="img/who-am-i.jpg" id="itsAli"> 
                   </div>
             </div>
 
@@ -55,7 +61,7 @@ <h1>My Journey from Student to Creator</h1>
               <p>My YouTube journey started back in 2017 when I was still a student at Cambridge University. I <br>was studying to become a doctor (the dream was to specialise in plastic surgery). Back then, I <br>started creating videos to help other people with studying and passing exams. This is when I <br>started my first business with my brother, 6Med. We created a platform to help people pass the <br>entrance exams and get into medicine.</p>
               <p>Fast forward a few years and the videos I was creating started to be geared more towards <br>productivity and passing on the knowledge that got me through medical school. I'd spend every <br>spare minute I had planning the next video, writing scripts or researching ideas.</p>
               <br>
-              <img src="from-student-to-creator.jpg" id="DocAli">
+              <img src="img/from-student-to-creator.jpg" id="DocAli">
               <br>
               <div class="timeline">
               <p>By 2020 I'd hired a small team to help me run the channel. With their help, I was bashing out a <br>couple of videos a week whilst working as a junior doctor. That's when the idea of our Part Time <br>YouTuber Academy came to me. I figured all the knowledge I’d gained on this journey would be <br>helpful to at least 10 people, so we launched Cohort 1 of PTYA in November of 2020. Over 350 <br>people joined lol.</p>
@@ -67,13 +73,17 @@ <h1>In the media</h1>
 
               <div class="features"> 
               <a href="https://thetab.com/uk/cambridge/2022/05/06/the-tab-sits-down-with-ali-abdaal-161135">
-                <img src="cambridge-union.png"></a>
+                <img src="img/cambridge-union.png">
+              </a>
               <a href="https://www.bbc.co.uk/sounds/play/m001g9sv">
-                <img src="radio-4.png"></a>
+                <img src="img/radio-4.png">
+              </a>
               <a href="https://www.businessinsider.com/productivity-youtubers-creator-business-channel-hacks-tips-ali-abdaal-2021-11?r=US&IR=T">
-                <img src="business-insider.png"></a>
+                <img src="img/business-insider.png">
+              </a>
               <a href="https://happeningnext.com/event/ali-abdaal-youtuber-eid3a08vjgts9">
-                <img src="oxford-union.png"></a>    
+                <img src="img/oxford-union.png">
+              </a>    
               </div>
 
               <div class="Subscribe">
@@ -92,9 +102,14 @@ <h1>💌Subscribe to my Sunday Snippets</h1>
             </div>
 
               <footer>
-                <p>© Ali Abdaal 2023. All rights reserved.<br>
-                <a href="https://aliabdaal.com/privacy-policy">Privacy Policy</a>
-                <a href="https://aliabdaal.com/cookie-policy">Cookie Policy</a>
+                <div class="copyright">
+                  <p>© Ali Abdaal 2023. All rights reserved.<br>
+                  <a href="https://aliabdaal.com/privacy-policy">Privacy Policy</a>
+                  <a href="https://aliabdaal.com/cookie-policy">Cookie Policy</a>
+                </div>
+                <div class="social-media">
+                  <!-- add some icons here -->
+                </div>
               </footer>
 
             </body>

diff --git a/aboutme.css → css/aboutme.css b/aboutme.css → css/aboutme.css
@@ -1,4 +1,8 @@
-font-family: @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+
+body{
+    font-family: 'Inter';
+}
 
 li, a button {
     font-family: "Inter", sans-serif;
@@ -11,7 +15,7 @@ li, a button {
 
 header {
     background-color: #F8FAFC;
-    margin: -16px;
+    margin: -16px; 
     display: flex;
     justify-content: space-around;
     padding: 30px 10%;
@@ -192,12 +196,18 @@ button:hover {
     transition: 0.3 ease 0;
 }
 
+.copyright {
+    display: flex;
+}
+
+.copyright a {
+    display: inline;
+}
 footer {
     background-color: #222222;
     color: white;
     font-size: 18px;
     width: 100%;
     padding: 35px;
     margin: -10px;
-
 }
diff --git a/about-me.jpg → img/about-me.jpg b/about-me.jpg → img/about-me.jpg
diff --git a/aboutlogo.png → img/aboutlogo.png b/aboutlogo.png → img/aboutlogo.png
diff --git a/business-insider.png → img/business-insider.png b/business-insider.png → img/business-insider.png
diff --git a/cambridge-union.png → img/cambridge-union.png b/cambridge-union.png → img/cambridge-union.png
diff --git a/from-student-to-creator.jpg → img/from-student-to-creator.jpg b/from-student-to-creator.jpg → img/from-student-to-creator.jpg
diff --git a/oxford-union.png → img/oxford-union.png b/oxford-union.png → img/oxford-union.png
diff --git a/radio-4.png → img/radio-4.png b/radio-4.png → img/radio-4.png
diff --git a/who-am-i.jpg → img/who-am-i.jpg b/who-am-i.jpg → img/who-am-i.jpg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# HTML and CSS Learning Demo File

		This is a sample repository for learning HTML and CSS based on this [webpage](https://aliabdaal.com/about/)