Merge pull request #1 from shan-shaji/master

rubenshibu · web-flow · commit b551de8581be · 2020-10-01T21:08:53.000+05:30
Basic page
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,51 @@
+/* Please don't edit this file*/
+:root {
+  --primary-color: #ffdd67;
+  --padding-main: 20px;
+  --primary-font: "Montserrat", sans-serif;
+  --secondary-font: "Anton", sans-serif;
+}
+
+body {
+  font-family: var(--primary-font);
+}
+
+/* main section css */
+.section-for-header {
+  padding: var(--padding-main);
+  background-color: var(--primary-color);
+  color: rgb(0, 0, 0);
+}
+
+.content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30px;
+  flex-direction: column;
+}
+
+.content-header h1 {
+  font-size: 4rem;
+  font-weight: 900;
+  font-family: var(--primary-font);
+  letter-spacing: 3px;
+}
+
+.content-body h3 {
+  font-weight: bold;
+}
+
+.btn {
+  margin: 30px;
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 4px;
+  font-weight: 600;
+  padding: 0.75em 1em;
+  transition: none;
+  position: relative;
+  background-color: #ff5a79;
+  color: #fff;
+  box-shadow: 0 4px #f3002e;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Css Components</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="css/style.css" />
+  </head>
+  <body>
+    <section class="header">
+      <div class="container-fluid section-for-header">
+        <div class="content">
+          <div class="content-header">
+            <h1>CSS COMPONENTS</h1>
+          </div>
+          <div class="content-body">
+            <h3>Add your css Components</h3>
+          </div>
+          <div class="content-footer">
+            <a href="" class="btn">⚡ Github </a>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="items">
+      <div class="container-fluid section-for-header"></div>
+    </section>
+  </body>
+</html>
