💄 App.css Template

creates App.css template file for issue mrzacsmith#3
mphelps1978 · Oct 4, 2020 · 7376ca0 · 7376ca0
1 parent 7e080bd
commit 7376ca0
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 30 deletions.
diff --git a/templates/App.css.js b/templates/App.css.js
@@ -0,0 +1,53 @@
+module exports = `@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:wght@600&display=swap");
+
+body {
+  background-color: #1d212c;
+}
+
+h2 {
+  color: #ec3944;
+  font-family: "Crimson Text", serif;
+  text-align: center;
+  font-size: 3.5rem;
+}
+
+.image-container {
+  display: flex;
+  justify-content: center;
+  padding-top: 40px;
+}
+
+img {
+  width: 30%;
+  text-align: center;
+}
+
+h2 {
+  color: white;
+}
+
+.welcome-bottom {
+  margin-top: -10px;
+  color: #ec3944;
+  font-size: 3rem;
+}
+
+h4 {
+  text-align: center;
+  color: #f9eee5;
+}
+
+.filler-text {
+  text-align: center;
+  color: white;
+  padding-top: 5%;
+}
+
+.footer {
+  text-align: center;
+  padding-top: 10%;
+}
+
+.footer p {
+  color: white;
+}`
diff --git a/templates/App.js b/templates/App.js
@@ -6,37 +6,60 @@ const App = () => {
   return (
     <div className="App">
       {/* Remove everything from this line to line 37 */}
-      <h2>Welcome Lambda student! This is filler, no need to keep it!</h2>
-      <a href="https://lambdaschool.com/" target="_blank" rel="noopener noreferrer">
-        Visit the Lambda Llama home
-      </a>
-      <br />
-      <img
-        alt="Lambda loves our llamas!"
-        style={{ width: 'auto', height: '300px' }}
-        src="https://pbs.twimg.com/media/Egh41YNU4AADnsM.png"
-      ></img>
-      <div>
-        <p>Created using Create-React-App</p>
-        <p>Modified and maintained by Lambda School graduate:</p>
-        <p>
-          Zac Smith {' '}
-          <a href="https://github.com/mrzacsmith" target="_blank" rel="noopener noreferrer">
-            Github
-          </a>{' '}
-          ::{' '}
-          <a href="https://www.npmjs.com/~mrzacsmith" target="_blank" rel="noopener noreferrer">
-            NPM
-          </a>{' '}
-          ::{' '}
-          <a href="https://twitter.com/mrzacsmith" target="_blank" rel="noopener noreferrer">
-            Twitter
-          </a>
-        </p>
+      <div className="image-container">
+        <img
+          alt="Lambda loves our llamas!"
+          src="https://assets-global.website-files.com/5cd091cfb5499f22bdf72905/5dcda59e63bb6ae5c9282801_small-red-logo.png"
+        ></img>
+      </div>
+      <h2>
+        Welcome <p className="welcome-bottom">Lambda student!</p>
+      </h2>
+      <h4>Your React Application is Ready</h4>
+      <h4>Now go work your magic!</h4>
+      <p className="filler-text">This is filler, no need to keep it!</p>
+      <div className="footer">
+        <a
+          href="https://lambdaschool.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Visit the Lambda Llama home
+        </a>
+        <br />
+        <div>
+          <p>Created using Create-React-App</p>
+          <p>Modified and maintained by Lambda School graduate Zac Smith</p>
+          <p>
+            <a
+              href="https://github.com/mrzacsmith"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Github
+            </a>{" "}
+            ::{" "}
+            <a
+              href="https://www.npmjs.com/~mrzacsmith"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              NPM
+            </a>{" "}
+            ::{" "}
+            <a
+              href="https://twitter.com/mrzacsmith"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Twitter
+            </a>
+          </p>
+        </div>
       </div>
       {/* Remove everything from line 8 to here */}
     </div>
-  )
-}
+  );
+};
 
-export default App`
+export default App;`;