Css

css/details.css

@@ -0,0 +1,23 @@
+
+/*
+Divide the Details page into 3 main sections:
+- Head (Picture, Title, Picture gallery & Videos, Price, Details)
+*/
+.details-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: center;
+    padding: 0px 30px;
+    background-color: black;
+    margin-top: 30px;
+    width: 100%;
+}
+
+.details-head {
+    display: flex;
+}
+
+.details-head-image-frame{
+    display: flex;
+}

index.html

@@ -9,6 +9,7 @@
         <link data-trunk type="text/css" href="css/landing.css" rel="css" />
         <link data-trunk type="text/css" href="css/search.css" rel="css" />
         <link data-trunk type="text/css" href="css/project_card.css" rel="css" />
+        <link data-trunk type="text/css" href="css/details.css" rel="css" />
 
 
         <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

src/pages/details.rs

@@ -8,8 +8,14 @@ pub fn details_page() -> Html {
         <>
             <NavigationBar/>
             <div class={"page-container"}>
+                <div class={"details-container"}>
+                    <div class={"details-head"}>
+                        <div class={""}>
                             
                         </div>
+                    </div>
+                </div>
+            </div>
         </>
     }
 }