PUBLISH

docs/index.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
   <link rel="stylesheet" href="/film/style.css">
+  <link rel="stylesheet" href="/film/card.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inika:wght@400;700&family=Merriweather:wght@400;700&family=Rufina&display=swap" rel="stylesheet">
@@ -13,10 +14,10 @@
   <h2 class="title">CaAlden: <span class="color:accent">Films</span></h2><nav class="navbar">
   <ul class="navbar-list">
     <li class="navbar-item button:large">
-      <a href="https://caalden.github.io/film/about" class="button button:large">about</a>
+      <a href="https://caalden.github.io/film/about" class="button button:large color:invert">about</a>
     </li>
     <li class="navbar-item button:large">
-      <a href="https://caalden.github.io/film/" class="button button:large">home</a>
+      <a href="https://caalden.github.io/film/" class="button button:large color:invert">home</a>
     </li>
   </ul>
 </nav>
@@ -26,40 +27,44 @@
     <p>This site is under construction but will eventually host my movie comments and reviews!</p>
 
   </div>
-  <div>
+  <div class="cluster s1">
     
-      <div>
-  <div>
-    <h2>
-      <a href="/film/reviews/the-french-dispatch/">
-        The French Dispatch
-      </a>
-    </h2>
+       
+          <div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX300.jpg />
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">
+          The French Dispatch
+        </a>
+      </h3>
+    </header>
     <div>
       A new film from Wes Anderson styled after a magazine
     </div>
-  </div>
-</div>
-
-    
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        <img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon">
+        <span class="numbers">7.2</span>
+      </div>
       <div>
-  <div>
-    <h2>
-      <a href="/film/about/">
-        About
-      </a>
-    </h2>
-    <div>
-      This is a blog that I&rsquo;ve wanted to start for a long time! I create it with two goals in mind.
-First, I want to jot down and share my thoughts about movies as I have them. I normally have a pretty clear opinion and thoughts about movies after I watch them, but then cannot remember clearly all the little things I was thinking after about a week. I hope to use this blog to track those ideas while they&rsquo;re still fresh.
+        <a class="button" href="/film/reviews/the-french-dispatch/">
+          Read review
+        </a>
     </div>
   </div>
 </div>
 
+       
+    
+       
     
   </div>
 
         </main><footer>
+  <span></span>
 </footer>
 </body>
 </html>