week_2: added the exercise_2.2 final

pesto-students · Aug 8, 2022 · 41b29ae · 41b29ae
1 parent 8ff8ac0
commit 41b29ae
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 1 deletion.
diff --git a/Week-2/exercise_2.1/README.md b/Week-2/exercise_2.1/README.md
@@ -21,4 +21,4 @@ Create a new webpage on a subject that you're interested in. The page should **N
 5. There should be one or more Git commits with meaningful commit messages.
 ---
 ### The finale output 0f the exercise
-![](../exercise_2.1/exercise_2.1.png)
+![](exercise_2.1.png)
diff --git a/Week-2/exercise_2.2/README.md b/Week-2/exercise_2.2/README.md
@@ -11,3 +11,6 @@
  2. The UI should closely match with the screengrab given as sample. Layout, forms, validationetc.
  3. 3rd party CSS libraries should not have been used.
  4. There should be one or more Git commits with meaningful commit messages.
+
+### final output 
+![](exercise_2.2.png)
diff --git a/Week-2/exercise_2.2/exercise_2.2.png b/Week-2/exercise_2.2/exercise_2.2.png
diff --git a/Week-2/exercise_2.2/index.html b/Week-2/exercise_2.2/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Advance CSS</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <main>
+    <h3 class="central-text">Hi!</h3>
+    <div class="one"></div>
+    <div class="two"></div>
+    <div class="three"></div>
+    <div class="four"></div>
+  </main>
+
+</body>
+
+</html>
diff --git a/Week-2/exercise_2.2/style.css b/Week-2/exercise_2.2/style.css
@@ -0,0 +1,70 @@
+* {
+  font-family: sans-serif;
+  margin: 2px;
+  padding: 2px;
+}
+
+body {
+  height: 100vh;
+  width: calc(100vw - 22px);
+}
+
+main {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  width: 200px;
+  height: 200px;
+  margin: auto;
+  padding-top: 200px;
+}
+
+.one {
+  grid-column: 1;
+  grid-row: 1;
+  background-color: red;
+  animation: spin 5s infinite;
+  animation-direction: alternate;
+  transform-origin: top left;
+}
+
+.two {
+  grid-column: 2;
+  grid-row: 1;
+  background-color: yellow;
+  animation: spin 5s infinite;
+  animation-direction: alternate;
+  transform-origin: top right;
+}
+
+.three {
+  grid-column: 1;
+  grid-row: 2;
+  background-color: blue;
+  animation: spin 5s infinite;
+  animation-direction: alternate;
+  transform-origin: bottom left;
+}
+
+.four {
+  grid-column: 2;
+  grid-row: 2;
+  background-color: green;
+  animation: spin 5s infinite;
+  animation-direction: alternate;
+  transform-origin: bottom right;
+}
+
+.central-text {
+  text-align: center;
+  width: 210px;
+  margin-top: 80px;
+  font-size: 40px;
+  position: absolute;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(60deg);
+  }
+}