second section ready css

niwatoridev · Mar 18, 2022 · 56012a0 · 56012a0
1 parent 1f92c79
commit 56012a0
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -51,9 +51,9 @@
         </div>
     </div>
     </section>
-    <section>
-        <img src="images\triangle-hexagon.svg" alt="triangle-hexagon">
-        <h1>Bring the best of open source to your company</h1>
+    <section class="sectionTwo">
+        <div class="sectionTwoDiv1"><img src="images\triangle-hexagon.svg" alt="triangle-hexagon"></div>
+        <h1 class="sectionTwoDiv2">Bring the best of open source to your company</h1>
         <article>npm is the tool used by over 11,000,000 JavaScript developers around the world. Your developers already use it. Your company depends on it. Create an Org and get more out of the tools your team already knows and loves.</article>
     </section>
     <section>

diff --git a/styles.css b/styles.css
@@ -150,3 +150,38 @@ nav a {
   color: rgb(0, 0, 0);
   font-weight: bold;
 }
+
+.sectionTwo {
+  height: 600px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.sectionTwoDiv1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.sectionTwoDiv2 {
+  display: flex;
+  align-items: center;
+  background-color: rgba(255, 204, 53, 0.4);
+  transform: skew(9deg, 0deg);
+  font-style: italic;
+  background-size: 20px;
+}
+
+.sectionTwo img {
+  width: 200px;
+}
+
+.sectionTwo article {
+  width: 700px;
+  text-align: center;
+  margin-bottom: 50px;
+}