7.product designer

7.Product_Designer-FlexBox/css/phone-screen.css

@@ -0,0 +1,58 @@
+/* ================================TITLE CONTENT=================================== */
+.designer{
+    flex-direction:column-reverse;
+    row-gap:6px;
+    padding: 210px 0px 0px;
+}
+/* Designer Name */
+.designer-name{
+    row-gap: 12px;
+}
+.designer-name h1{
+    font-size: 50px;
+}
+.designer-name h3{
+    font-size: 30px;
+}
+/* Designer Mail */
+.designer-mail{
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+/* =================================GALLERY CONTENT================================ */
+.gallery{
+    padding: 0px 20px;
+}
+.gallery-image{
+    width:400px;
+}
+
+/* =================================BRANDS CONTENT================================= */
+.brand-heading h2{
+    font-size: 35px;
+}
+/* Brands logo */
+.brands-wrapper{
+    justify-content: space-between;
+    column-gap:0px;
+}
+.brand-logo{
+    width: 200px;
+    padding: 45px;
+}
+
+/* ===============================FOOTER CONTENT=================================== */
+footer{
+    row-gap: 40px;
+    margin:150px auto 50px;
+}
+/* Designer border */
+.small-divider{
+    width: 25px;
+    margin-right: 25px;
+}
+.large-divider{
+    width: 125px;
+}

7.Product_Designer-FlexBox/css/style.css

@@ -0,0 +1,146 @@
+/* CSS reset */
+*{
+    margin:0;
+    padding:0;
+
+    box-sizing: border-box;
+    overflow:auto;
+}
+body{
+    background-color: #000;
+    color: #fff;
+    font-family: 'Roboto Condensed', sans-serif;
+}
+
+/* ================================TITLE CONTENT=================================== */
+.designer{
+    display: flex;
+    flex-direction: column;
+    row-gap: 130px;
+    padding: 40px 172px 0px;
+}
+/* Designer Mail */
+.designer-mail{
+    display: flex;
+    justify-content: flex-end;
+    font-size: 24px;
+}
+/* Designer Name*/
+.designer-name{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 6px;
+}
+.designer-name h1{
+    font-weight: 300;
+    font-size: 150px;
+}
+.bold{
+    font-weight: 900;
+}
+.designer-name h3{
+    font-size: 50px;
+    color: #cecece;
+}
+.blue{
+    color: #4990e2;
+}
+/* =================================GALLERY CONTENT================================ */
+.gallery{
+    margin-top:100px;
+    padding: 0px 50px;
+    display:flex;
+    flex-wrap: wrap; 
+    row-gap: 20px;
+    column-gap: 20px;
+    justify-content: center;
+}
+.gallery-image{
+    width: 400px;
+}
+.gallery-image img{
+    width: 100%;
+}
+
+/* =================================BRANDS CONTENT================================= */
+.brands-content{
+    display:flex;
+    flex-direction: column;
+    row-gap:100px;
+    margin-top: 175px;
+}
+/* ----------Brands Heading--------------- */
+.brand-heading{
+    display:flex;
+    justify-content: center;
+}
+.brand-heading h2{
+    font-size: 50px;
+    color: #cecece;
+}
+.green{
+    color: #87d979;
+}
+/* --------Brands Logos Wrapper----------- */
+.brands-wrapper{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    column-gap:100px;
+}
+.brand-logo{
+    display: flex;
+    justify-content: center;
+    width: 120px;
+}
+/* ===============================FOOTER CONTENT=================================== */
+footer{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: center;
+    row-gap:120px;
+    margin: 280px auto 170px;
+}
+/* -----------Designer Border---------- */
+.divider{
+    display: flex;
+    justify-content:center;
+}
+.small-divider{
+    width: 35px;
+    margin-right: 35px;
+}
+.large-divider{
+    width: 200px;
+}
+/* ------------Social Icons------------- */
+.social-icons{
+    display: flex;
+    justify-content:center;
+    align-items: center;
+    column-gap: 20px;
+}
+.icon{
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    width: 50px;
+    height: 50px;
+    font-size:32px;
+    border-radius:50%;
+    border: 1px solid #bab6b6;
+}
+/* -------- Caption for the page---------- */
+
+.footer-caption{
+    display: flex;
+    justify-content: center;
+}
+.footer-caption p{
+    font-size: 20px;
+    font-weight: 600;
+}

7.Product_Designer-FlexBox/index.html

@@ -0,0 +1,121 @@
+<!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>Product Designer</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <!-- External Stylesheet -->
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/phone-screen.css" media="only screen and (max-width: 786px)">
+
+</head>
+<body>
+    <!--================================ TITLE CONTENT ================================----->
+    <header class="designer">
+        <div class="designer-mail">
+            <p>shruthi.bhatt@siriuscom.com</p>
+        </div>
+
+        <div class="designer-name">
+            <h1>Shruthi<span class="bold"> Bhatt</span></h1>
+            <h3>a <span class="blue">product </span>designer</h3>
+        </div>
+    </header>
+
+    <!--================================ GALLERY CONTENT ================================-->
+    <section class="gallery">
+        <div class="gallery-image">
+            <img src="images/products/rawpixel-769308-unsplash.png" alt="Shirt">
+        </div>
+        <div class="gallery-image">
+            <img src="images/products/fancycrave-329196-unsplash.png" alt="Book">
+        </div>
+        <div class="gallery-image">
+            <img src="images/products/nadine-shaabana-1112616-unsplash.png" alt="Coffee">
+        </div>
+        <div class="gallery-image">
+            <img src="images/products/fikri-rasyid-689579-unsplash.png" alt="Printer">
+        </div>
+        <div class="gallery-image">
+            <img src="images/products/marc-mueller-654355-unsplash.png" alt="Phone">
+        </div>
+        <div class="gallery-image">
+            <img src="images/products/jeff-sheldon-3219-unsplash.png" alt="Speaker">
+        </div>
+    </section>
+
+
+    <!--================================ BRANDS CONTENT ================================-->
+    <section class="brands-content">
+
+        <!-- Brands Heading-->
+        <div class="brand-heading">
+            <h2>Big names to <span class="green">show off</span></h2>
+        </div>
+
+        <!-- Brands Logos Wrapper-->
+        <section class="brands-wrapper">
+            <div class="brand-logo">
+                <img src="images/logos/Spotify.png" alt="Spotify">
+            </div>
+            <div class="brand-logo">
+                <img src="images/logos/Audi.png" alt="Audi">
+            </div>
+            <div class="brand-logo">
+                <img src="images/logos/Adidas.png" alt="Adiddas">
+            </div>
+            <div class="brand-logo">
+                <img src="images/logos/Lufthansa.png" alt="Lufthansa">
+            </div>
+            <div class="brand-logo">
+                <img src="images/logos/IKEA.png" alt="IKEA">
+            </div>
+            <div class="brand-logo">
+                <img src="images/logos/MontBlanc.png" alt="MontBlanc">
+            </div>
+        </section>
+    </section>
+
+
+    <!--================================FOOTER CONTENT ================================-->
+    <footer>
+        <!-- Designer Divider -->
+        <article class="divider">
+           <hr class="small-divider">
+           <hr class="large-divider">
+        </article>
+
+        <!-- Social Icons -->
+        <article class="social-icons">
+            <div class="icon">
+                <div class="fa fa-facebook-f"></div>
+            </div>
+            <div class="icon">
+                <div class="fa fa-twitter"></div>
+            </div>
+            <div class="icon">
+                <div class="fa fa-instagram"></div>
+            </div>
+            <div class="icon">
+                <div class="fa fa-dribbble"></div>
+            </div>
+            <div class="icon">
+                <div class="fa fa-medium"></div>
+            </div>
+        </article>
+
+        <!-- Caption for the page -->
+        <article class="footer-caption">
+            <p>Coded with Love & Passion</p>
+        </article>
+    </footer>
+</body>
+</html>