slowly becoming real

docs/index.html

@@ -13,19 +13,37 @@
     <div class="wrapper">
     <div class="header">
         <div class="headercontent">
-        <img src="./assets/logo.png" height="200px">
+        <img class="logo" src="./assets/logo.png" height="200px">
         <h1 class="headername">diji</h1>
         <h2 class="headersubtitle">Create a vanilla JS project in seconds</h2>
         <br>
-        <br>
         <a href="" class="getstarted button">Get started</a>
         <a href="" class="download button">Download</a>
         </div>
     </div>
+    <div class="contentpart">
+      <div class="contentgrid">
+        <div class="tablephoto">
+      <img src="./assets/content1.png" class="contentimage">
+      </div>
+      <div class="tabletext">
+      <h1 class="contenttext">地基 (Dìjī) means foundation in Chinese</h1>
+      <h3 class="contenttext2">That's what diji is, just the foundation. It's not a framework, it's not even a static website generator. It's just a simple program that makes it quicker and easier to start a vanilla project.</h3>
+      </div>
+      </div>
+    </div>
+    <div class="contentpart2">
+      <div class="contentgrid2">
+        <div class="tablephoto2">
+      <img src="./assets/content2.png" class="contentimage2">
+      </div>
+      <div class="tabletext2">
+      <h1 class="contenttext">Works everywhere</h1>
+      <h3 class="contenttext2">Either move it to your projects folder (for example documents) or add it to your $PATH and use it everywhere</h3>
+      </div>
+      </div>
+    </div>
 <div>
-  <h1>diji</h1>
-<h3>Generated with diji 1.0</h3>
-<p>Website content</p>  
 </div>
 </div>
 

docs/style.css

@@ -3,6 +3,8 @@
 
 body {
 font-family: 'Open Sans', sans-serif;
+background-color: #18181b;
+color: white;
 }
 
 html,
@@ -14,13 +16,12 @@ body {
 .header {
     height: 100%;
     padding: 20px;
-    padding-top: 75px;
+    padding-top: 50px;
-    padding-bottom: 75px;
+    padding-bottom: 50px;
     margin: 0px;
     align-items: center;
     justify-content: center;
 display: flex;
- flex: 0 0 100%;
  
     background: linear-gradient(#7D7D7D, #4A4A4A);
 } .headername {
@@ -44,15 +45,120 @@ margin-top: 20px;
 .button {
     margin: 10px;
     padding: 10px;
-    padding-left: 20px;
+    width: 200px;
-    padding-right: 20px;
     background-color:rgba(255, 255, 255, 0.20);
     border-radius: 100px;
     color: white;
     text-decoration: none;
     font-size: 17pt;
     font-weight: 500;
+    display: inline-block
 } .getstarted {
     background-color: white;
     color: black;
+} .logo {
+    margin-bottom: 20px;
+} .contentpart {
+    height: 100%;
+    padding: 0px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    margin: 0px;
+    display: flex;
+    width: 100%;
+ 
+
+}
+
+.contentpart2 {
+    height: 100%;
+    padding: 0px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    margin: 0px;
+    display: flex;
+    width: 100%;
+    background-color: #27272a;
+ 
+
+}
+.contentimage {
+    width: 350px;
+    margin-left: auto;
+    margin-right: 0px;
+   grid-column: 2;
+    display: block;
+}
+
+.contentimage2 {
+    width: 350px;
+    margin-left: 0px;
+    margin-right: auto;
+   grid-column: 1;
+    display: block;
+}
+
+.contenttext {
+    display: inline-block;
+    padding: 20px;
+    padding-bottom: 0px;
+    padding-left: 30px;
+    padding-right: 30px;
+    margin: 0px;
+} .contentgrid {
+    width: 100%;
+} .contenttext2 {
+    display: inline-block;
+    padding: 15px;
+    padding-bottom: 50px;
+    margin: 0px;
+    padding-left: 30px;
+    padding-right: 30px;
+    font-weight: 500;
+}
+
+@media only screen and (min-width: 48em) {
+    .contentimage {
+        width: 500px;
+    }
+    .contentimage2 {
+        width: 500px;
+    }
+    .tablephoto {
+        grid-column: 2;
+        grid-row: 1;
+    }.tabletext {
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    .tablephoto2 {
+        grid-column: 1;
+        grid-row: 1;
+    }.tabletext2 {
+        grid-column: 2;
+        grid-row: 1;
+    }
+
+    .contenttext {
+        grid-column: 1;
+
+    }
+    .contentgrid {
+        display: grid;
+        width: 100%;
+        grid-template-columns: 57% 43%;
+        grid-template-rows: 100%;
+    }
+    .contentgrid2 {
+        display: grid;
+        width: 100%;
+        grid-template-columns: 43% 57%;
+        grid-template-rows: 100%;
+    }
+    .contenttext {
+       vertical-align: top;
+    } .contenttext2 {
+        vertical-align: top;
+     } 
 }