From 092e05f95b46fd8b5892c87a0bce018f522b6d6d Mon Sep 17 00:00:00 2001
From: Agramom <108925739+Agramom@users.noreply.github.com>
Date: Fri, 5 Aug 2022 11:27:25 +0530
Subject: [PATCH] Forindividualspart1

---
 forindipart1.css  | 337 ++++++++++++++++++++++++++++++++++++++++++++++
 forindipart1.html | 163 ++++++++++++++++++++++
 2 files changed, 500 insertions(+)
 create mode 100644 forindipart1.css
 create mode 100644 forindipart1.html

diff --git a/forindipart1.css b/forindipart1.css
new file mode 100644
index 0000000..f27630f
--- /dev/null
+++ b/forindipart1.css
@@ -0,0 +1,337 @@
+#forindi-1{
+    background-color: black;
+    color: aliceblue;
+}
+#forindi-1>div:nth-child(1){
+    /* border: 1px solid red; */
+    width: 90%;
+    margin: auto;
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    grid-template-rows: repeat(1,auto);
+    padding: 20px;
+    gap: 60px;
+    padding-bottom: 100px;
+    
+}
+#forindi-1>div>div{
+    /* border: 1px solid greenyellow; */
+    line-height: 30px;
+    font-size: 20px;
+    
+}
+#forindi-1>div>div>h1{
+    padding-top: 30px;
+    padding-bottom: 30px;
+}
+#forindi-1>div>div>button{
+    padding: 20px;
+    font-size: 15px;
+    color: aliceblue;
+    background-color: rgb(244, 13, 51);
+    border-radius: 5px;
+    border-color: rgb(244, 13, 51);
+}
+#forindi-1>div:nth-child(2){
+    /* border: 1px solid yellow; */
+    width: 90%;
+    margin: auto;
+    height: 50px;
+    background-color: rgb(234, 26, 60);
+    text-align: center;
+    padding-top: 1px;
+
+}
+.redd{
+    color: rgb(244, 13, 51);
+}
+#forindi-1>div:nth-child(3){
+    width: 90%;
+    margin: auto;
+}
+#forindi-1>div:nth-child(4){
+    width: 90%;
+    margin: auto;
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+    grid-template-rows: repeat(1,auto);
+    gap: 20px;
+    padding-bottom: 100px;
+}
+#forindi-1>div:nth-child(4)>div{
+    /* width: 100%; */
+    background-color: #181818;
+    line-height: 10px;
+    padding: 10px;
+}
+#forindi-1>div:nth-child(4)>div>img{
+    width: 100%;
+    height: 70%;
+}
+#forindi-1>div:nth-child(4)>div>div{
+    /* border: 1px solid yellowgreen; */
+    display: flex;
+    gap: 20px;
+    font-size: 15px;
+    text-align: center;
+
+}
+#forindi-1>div:nth-child(5)>div{
+    background-color: #212121;
+    width: 90%;
+    margin: auto;
+    padding: 3px;
+    /* border: 1px solid red; */
+    
+}
+#forindi-1>div:nth-child(5){
+    padding-bottom: 40px;
+}
+#forindi-1>div:nth-child(6){
+    /* border: 1px solid green; */
+    
+    background-color: #212121;
+    width: 90%;
+    margin: auto;
+    
+}
+#forindi1grid1{
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    grid-template-rows: repeat(1,auto);
+}
+#forindi1grid1>div{
+    width: 80%;
+    /* border: 1px solid yellowgreen; */
+    padding: 40px;
+    margin: auto;
+}
+#forindi1gridmid1{
+    /* border: 1px solid red; */
+    text-align: center;
+    padding-top: 30px;
+    font-size: 10px;
+    color: gray;
+}
+#forindi1grid2{
+    display: grid;
+    grid-template-columns: repeat(5,1fr);
+    grid-template-rows: repeat(1,auto);
+    width: 60%;
+    margin: auto;
+    margin-top: 50px;
+    /* border: 1px solid yellowgreen; */
+    padding-bottom: 30px;
+}
+#foindi1grid3{
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    grid-template-rows: repeat(1,auto);
+    /* border: 1px solid red; */
+    margin-top: 100px;
+}
+#forindi1grid3>div{
+    width: 80%;
+    /* border: 1px solid yellowgreen; */
+    padding: 40px;
+    margin: auto;
+}
+#forindi1grid4{
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    grid-template-rows: repeat(1,auto);
+    /* border: 1px solid red; */
+    margin-top: 140px;
+}
+#forindi1grid4>div{
+    width: 80%;
+    /* border: 1px solid yellowgreen; */
+    padding: 40px;
+    margin: auto;
+}
+#forindi1grid5{
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    grid-template-rows: repeat(1,auto);
+    /* border: 1px solid red; */
+    margin-top: 140px;
+    margin-bottom: 100px;
+}
+#forindi1grid5>div{
+    width: 80%;
+    /* border: 1px solid yellowgreen; */
+    padding: 40px;
+    margin: auto;
+}
+#forindi1grid6{
+    width: 80%;
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    grid-template-rows: repeat(1,auto);
+    /* border: 1px solid red; */
+    margin: auto;
+    
+    margin-bottom: 200px;
+    
+}
+#forindi1grid6>div{
+    width: 80%;
+    /* border: 1px solid yellowgreen; */
+    padding: 40px;
+    margin: auto;
+}
+
+
+
+
+
+
+/* meidum screens */
+@media all and (min-width: 768px) and (max-width: 1024px) {
+    #forindi-1>div:nth-child(1){
+        /* border: 1px solid red; */
+        width: 90%;
+        margin: auto;
+        display: grid;
+        grid-template-columns: repeat(1,1fr);
+        grid-template-rows: repeat(auto,auto);
+        padding: 20px;
+        gap: 60px;
+        padding-bottom: 100px;
+        
+    }
+    #forindi-1>div:nth-child(4){
+        width: 90%;
+        margin: auto;
+        display: grid;
+        grid-template-columns: repeat(2,1fr);
+        grid-template-rows: repeat(auto,auto);
+        gap: 20px;
+        padding-bottom: 100px;
+    }
+    #forindi1grid1{
+        display: grid;
+        grid-template-columns: repeat(2,1fr);
+        grid-template-rows: repeat(1,auto);
+    }
+    #forindi1grid2{
+        display: grid;
+        grid-template-columns: repeat(3,1fr);
+        grid-template-rows: repeat(auto,auto);
+        width: 60%;
+        margin: auto;
+        margin-top: 50px;
+        /* border: 1px solid yellowgreen; */
+        padding-bottom: 30px;
+    }
+    #forindi1grid3{
+        display: grid;
+        grid-template-columns: repeat(2,1fr);
+        grid-template-rows: repeat(1,auto);
+        /* border: 1px solid red; */
+        margin-top: 100px;
+    }
+    #forindi1grid4{
+        display: grid;
+        grid-template-columns: repeat(2,1fr);
+        grid-template-rows: repeat(1,auto);
+        /* border: 1px solid red; */
+        margin-top: 140px;
+    }
+    #forindi1grid5{
+        display: grid;
+        grid-template-columns: repeat(2,1fr);
+        grid-template-rows: repeat(1,auto);
+        /* border: 1px solid red; */
+        margin-top: 140px;
+        margin-bottom: 100px;
+    }
+    #forindi1grid6{
+        width: 80%;
+        display: grid;
+        grid-template-columns: repeat(2,1fr);
+        grid-template-rows: repeat(1,auto);
+        /* border: 1px solid red; */
+        margin: auto;
+        
+        margin-bottom: 200px;
+        
+    }
+    
+  }
+
+        /* small screens */
+  @media all and (min-width: 320px) and (max-width: 767px) {
+    #forindi-1>div:nth-child(1){
+        /* border: 1px solid red; */
+        width: 90%;
+        margin: auto;
+        display: grid;
+        grid-template-columns: repeat(1,1fr);
+        grid-template-rows: repeat(auto,auto);
+        padding: 20px;
+        gap: 60px;
+        padding-bottom: 100px;
+        
+    }
+    #forindi-1>div:nth-child(4){
+        width: 90%;
+        margin: auto;
+        display: grid;
+        grid-template-columns: repeat(1,1fr);
+        grid-template-rows: repeat(auto,auto);
+        gap: 20px;
+        padding-bottom: 100px;
+    }
+    #forindi1grid1{
+        display: grid;
+        grid-template-columns: repeat(1,1fr);
+        grid-template-rows: repeat(1,auto);
+    }
+    #forindi1grid2{
+        display: grid;
+        grid-template-columns: repeat(1,1fr);
+        grid-template-rows: repeat(auto,auto);
+        width: 60%;
+        margin: auto;
+        margin-top: 50px;
+        /* border: 1px solid yellowgreen; */
+        padding-bottom: 30px;
+    }
+    #forindi1grid3{
+        display: grid;
+        grid-template-columns: repeat(1,1fr);
+        grid-template-rows: repeat(auto,auto);
+        /* border: 1px solid red; */
+        margin-top: 100px;
+    }
+    #forindigrid4{
+        display: grid;
+        grid-template-columns: repeat(1,1fr);
+        grid-template-rows: repeat(auto,auto);
+        /* border: 1px solid red; */
+        margin-top: 140px;
+    }
+    #forindi1grid5{
+        display: grid;
+        grid-template-columns: repeat(1,1fr);
+        grid-template-rows: repeat(auto,auto);
+        /* border: 1px solid red; */
+        margin-top: 140px;
+        margin-bottom: 100px;
+    }
+    #forindi1grid6{
+        width: 80%;
+        display: grid;
+        grid-template-columns: repeat(1,1fr);
+        grid-template-rows: repeat(auto,auto);
+        /* border: 1px solid red; */
+        margin: auto;
+        
+        margin-bottom: 200px;
+        
+    }
+   
+  }
+
+
diff --git a/forindipart1.html b/forindipart1.html
new file mode 100644
index 0000000..3cbbdad
--- /dev/null
+++ b/forindipart1.html
@@ -0,0 +1,163 @@
+<!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">
+    <link rel="stylesheet" href="forindipart1.css">
+    <title>For individuals</title>
+</head>
+<body>
+    <div id="forindi-1">
+        <div>
+            <div>
+                <img src="https://www.pluralsight.com/content/dam/pluralsight2/product/v2/logos/logo-skills.png" alt=""/>
+                <h3>FOR INDIVIDUALS</h3>
+                <h1>For Individuals: Build better skills</h1>
+                <h3>With the technology skills platform, you can see where your skills stand and master the latest in software development, IT ops, AI and machine learning, security and more.</h3>
+                <button>TRY FOR FREE</button>
+            </div>
+            <div>
+                <img src="https://www.pluralsight.com/content/dam/pluralsight2/individual/hero-individual-illustration.png" alt="">
+            </div>
+        </div>
+        <div>
+            <h2>Serious skills. Simple pricing. See plans ></h2>
+        </div>
+        <div>
+            <h2>Trending on Pluralsight</h2>
+        </div>
+        <div>
+            <div>
+                <img src="https://pluralsight.imgix.net/course-images/php-7-whats-new-v1.jpg?w=760" alt=""/>
+                <p class="redd">COURSE</p>
+                <h3>What's New in PHP 7</h3>
+                <div>
+                    <p>Christian Wenz</p>
+                    <p>Intermediate</p>
+                    <p>Dec 3, 2015</p>
+                    <p>1h 45m</p>
+                </div>
+            </div>
+            <div>
+                <img src="	https://pluralsight.imgix.net/course-images/java-12-whats-new-v1.jpg?w=760" alt=""/>
+                <p class="redd">COURSE</p>
+                <h3>What's New in Java 12</h3>
+                <div>
+                    <p>Sander Mak</p>
+                    <p>Intermediate</p>
+                    <p>Mar 18, 2019</p>
+                    <p>1h 7m/p>
+                </div>
+            </div>
+            <div>
+                <img src="https://pluralsight.imgix.net/course-images/whats-new-aspdotnet-core-6-v1.jpg?w=760" alt=""/>
+                <p class="redd">COURSE</p>
+                <h3>What’s New in ASP.NET Core 6.0</h3>
+                <div>
+                    <p>Alex Wolf</p>
+                    <p>Intermediate</p>
+                    <p>Dec 9, 2021</p>
+                    <p>2h 4m</p>
+                </div>
+            </div>
+            
+        </div>
+        <div>
+            <div>
+                <h3>View More Courses >></h3>
+            </div>
+            
+        </div>
+        <div>
+            <div id="forindi1grid1">
+                <div>
+                    <img src="https://www.pluralsight.com/content/pluralsight/en/product/skills/individuals/jcr:content/main/generic_block_copy/parsys/generic_block_413530/parsys/animation_wrapper/parsys/columns_copy/column-parsys-1/generic_block_202764/parsys/columns_copy/column-parsys-2/generic_block_copy_c/parsys/image/image-res.img.7367216d-cffc-4818-97b9-979a20c13db4.png" alt=""/>
+
+                </div>
+                <div>
+                    <h4 class="redd">OVERVIEW</h4>
+                    <h1>Take control of your career</h1>
+                    <p>Whether you want to transition into a new field, improve in your role or bring your big ideas to life, Pluralsight Skills can help you get there. With our technology skills platform, you can build in-demand skills and apply them in the real world with confidence.</p>
+                    <p>What is Skills?  ></p> 
+                </div>
+
+            </div>
+            <div id="forindi1gridmid1">
+                <h4>TRUSTED BY LEARNERS AT THOUSANDS OF COMPANIES</h4>
+            </div>
+            <div id="forindi1grid2">
+                <div>
+                    <img src="https://www.pluralsight.com/content/pluralsight/en/product/skills/individuals/jcr:content/main/generic_block_copy/parsys/generic_block_413530/parsys/animation_wrapper/parsys/columns_copy/column-parsys-1/generic_block_202764/parsys/columns_1110011315_c/column-parsys-1/generic_block/parsys/column_control/column-parsys-1/animation_wrapper/parsys/image_1399077451/image-res.img.c8b00ca9-350d-43b3-a8ff-aff7c88e40a8.png" alt=""/>
+                </div>
+                <div>
+                    <img src="https://www.pluralsight.com/content/pluralsight/en/product/skills/individuals/jcr:content/main/generic_block_copy/parsys/generic_block_413530/parsys/animation_wrapper/parsys/columns_copy/column-parsys-1/generic_block_202764/parsys/columns_1110011315_c/column-parsys-1/generic_block/parsys/column_control/column-parsys-2/animation_wrapper/parsys/image/image-res.img.a34c888d-9962-4238-ad26-d0f3c69618e4.png" alt=""/>
+                </div>
+                <div>
+                    <img src="https://www.pluralsight.com/content/pluralsight/en/product/skills/individuals/jcr:content/main/generic_block_copy/parsys/generic_block_413530/parsys/animation_wrapper/parsys/columns_copy/column-parsys-1/generic_block_202764/parsys/columns_1110011315_c/column-parsys-1/generic_block/parsys/column_control/column-parsys-3/animation_wrapper/parsys/image/image-res.img.f9825d73-03e8-436b-a86d-f098f2bfe3c1.png" alt=""/>
+                </div>
+                <div>
+                    <img src="https://www.pluralsight.com/content/pluralsight/en/product/skills/individuals/jcr:content/main/generic_block_copy/parsys/generic_block_413530/parsys/animation_wrapper/parsys/columns_copy/column-parsys-1/generic_block_202764/parsys/columns_1110011315_c/column-parsys-1/generic_block/parsys/column_control/column-parsys-4/animation_wrapper/parsys/image/image-res.img.2f5072d4-ac66-4988-aa9c-c18171b9623a.png" alt=""/>
+                </div>
+                <div>
+                    <img src="https://www.pluralsight.com/content/pluralsight/en/product/skills/individuals/jcr:content/main/generic_block_copy/parsys/generic_block_413530/parsys/animation_wrapper/parsys/columns_copy/column-parsys-1/generic_block_202764/parsys/columns_1110011315_c/column-parsys-1/generic_block/parsys/column_control/column-parsys-5/animation_wrapper/parsys/image/image-res.img.1724678f-85dd-4ec8-90a2-85193211978e.png" alt=""/>
+                </div>
+
+            </div>
+            <div id="forindi1grid3">
+                <div>
+                    <h4 class="redd">COURSE LIBRARY</h4>
+                    <h1>Learn from top technologists around the world</h1>
+                    <p>Keep your skills up-to-date with access to thousands of courses authored by an elite network of industry experts and partners.</p>
+                    <h5>Browse our libraries  ></h5>
+                </div>
+                <div>
+                    <img src="https://www.pluralsight.com/content/dam/pluralsight2/individual/illustration-course-library.png" alt=""/>
+                </div>
+
+            </div>
+            <div id="forindi1grid4">
+                <div>
+                    <img src="https://www.pluralsight.com/content/dam/pluralsight2/individual/illustration-assessments.png" alt=""/>
+                </div>
+                <div>
+                    <h4 class="redd">SKILL ASSESSMENTS</h4>
+                    <h1>See where your skills stand and where you can grow</h1>
+                    <p>The best way to start learning is to see where your skills stand first. Take a quick skill assessment to uncover your strengths and weaknesses and get personalized recommendations on what to work on.  </p>
+                </div>
+            </div>
+            <div id="forindi1grid5">
+                <div>
+                    <h4 class="redd">HANDS-ON LEARNING</h4>
+                    <h1>Practice applying new skills</h1>
+                    <p>With projects and interactive courses, you can test drive new skills in a risk-free environment and get guided feedback—so you can make mistakes before they matter. </p>
+                </div>
+                <div>
+                    <img src="https://www.pluralsight.com/content/dam/pluralsight2/individual/illustration-hands-on-learning.png" alt=""/>
+                </div>
+               
+
+            </div>
+
+
+
+        </div>
+        <div id="forindi1grid6">
+            <div>
+                <h4 class="redd">CUSTOMER STORIES</h4>
+                <h1>From soldier to IT specialist: Ryan's Pluralsight story</h1>
+                <p>Technology skills change lives. Hear veteran-turned-IT professional Ryan Chasteauneuf’s Pluralsight story. </p>
+                <h5>Watch Ryan's story  > </h5>
+            </div>
+            <div>
+                <img src="https://www.pluralsight.com/content/dam/pluralsight2/individual/cs-ryan.png" alt="">
+            </div>
+
+        </div>
+
+
+
+
+    </div>
+</body>
+</html>
\ No newline at end of file