diff --git a/7.Product_Designer-FlexBox/css/phone-screen.css b/7.Product_Designer-FlexBox/css/phone-screen.css new file mode 100644 index 0000000..475ea60 --- /dev/null +++ b/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; +} diff --git a/7.Product_Designer-FlexBox/css/style.css b/7.Product_Designer-FlexBox/css/style.css new file mode 100644 index 0000000..7199e1a --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/7.Product_Designer-FlexBox/images/logos/Adidas.png b/7.Product_Designer-FlexBox/images/logos/Adidas.png new file mode 100644 index 0000000..ed97f0d Binary files /dev/null and b/7.Product_Designer-FlexBox/images/logos/Adidas.png differ diff --git a/7.Product_Designer-FlexBox/images/logos/Audi.png b/7.Product_Designer-FlexBox/images/logos/Audi.png new file mode 100644 index 0000000..dd34244 Binary files /dev/null and b/7.Product_Designer-FlexBox/images/logos/Audi.png differ diff --git a/7.Product_Designer-FlexBox/images/logos/IKEA.png b/7.Product_Designer-FlexBox/images/logos/IKEA.png new file mode 100644 index 0000000..b65702f Binary files /dev/null and b/7.Product_Designer-FlexBox/images/logos/IKEA.png differ diff --git a/7.Product_Designer-FlexBox/images/logos/Lufthansa.png b/7.Product_Designer-FlexBox/images/logos/Lufthansa.png new file mode 100644 index 0000000..e31355f Binary files /dev/null and b/7.Product_Designer-FlexBox/images/logos/Lufthansa.png differ diff --git a/7.Product_Designer-FlexBox/images/logos/MontBlanc.png b/7.Product_Designer-FlexBox/images/logos/MontBlanc.png new file mode 100644 index 0000000..60f1c81 Binary files /dev/null and b/7.Product_Designer-FlexBox/images/logos/MontBlanc.png differ diff --git a/7.Product_Designer-FlexBox/images/logos/Spotify.png b/7.Product_Designer-FlexBox/images/logos/Spotify.png new file mode 100644 index 0000000..aa464aa Binary files /dev/null and b/7.Product_Designer-FlexBox/images/logos/Spotify.png differ diff --git a/7.Product_Designer-FlexBox/images/products/fancycrave-329196-unsplash.png b/7.Product_Designer-FlexBox/images/products/fancycrave-329196-unsplash.png new file mode 100644 index 0000000..ef5ce26 Binary files /dev/null and b/7.Product_Designer-FlexBox/images/products/fancycrave-329196-unsplash.png differ diff --git a/7.Product_Designer-FlexBox/images/products/fikri-rasyid-689579-unsplash.png b/7.Product_Designer-FlexBox/images/products/fikri-rasyid-689579-unsplash.png new file mode 100644 index 0000000..8a35e56 Binary files /dev/null and b/7.Product_Designer-FlexBox/images/products/fikri-rasyid-689579-unsplash.png differ diff --git a/7.Product_Designer-FlexBox/images/products/jeff-sheldon-3219-unsplash.png b/7.Product_Designer-FlexBox/images/products/jeff-sheldon-3219-unsplash.png new file mode 100644 index 0000000..0b38a9d Binary files /dev/null and b/7.Product_Designer-FlexBox/images/products/jeff-sheldon-3219-unsplash.png differ diff --git a/7.Product_Designer-FlexBox/images/products/marc-mueller-654355-unsplash.png b/7.Product_Designer-FlexBox/images/products/marc-mueller-654355-unsplash.png new file mode 100644 index 0000000..9d6ea48 Binary files /dev/null and b/7.Product_Designer-FlexBox/images/products/marc-mueller-654355-unsplash.png differ diff --git a/7.Product_Designer-FlexBox/images/products/nadine-shaabana-1112616-unsplash.png b/7.Product_Designer-FlexBox/images/products/nadine-shaabana-1112616-unsplash.png new file mode 100644 index 0000000..7e57f9e Binary files /dev/null and b/7.Product_Designer-FlexBox/images/products/nadine-shaabana-1112616-unsplash.png differ diff --git a/7.Product_Designer-FlexBox/images/products/rawpixel-769308-unsplash.png b/7.Product_Designer-FlexBox/images/products/rawpixel-769308-unsplash.png new file mode 100644 index 0000000..e468125 Binary files /dev/null and b/7.Product_Designer-FlexBox/images/products/rawpixel-769308-unsplash.png differ diff --git a/7.Product_Designer-FlexBox/index.html b/7.Product_Designer-FlexBox/index.html new file mode 100644 index 0000000..ba6d303 --- /dev/null +++ b/7.Product_Designer-FlexBox/index.html @@ -0,0 +1,121 @@ + + + + + + + Product Designer + + + + + + + + + + + + + + +
+
+

shruthi.bhatt@siriuscom.com

+
+ +
+

Shruthi Bhatt

+

a product designer

+
+
+ + +
+
+ Shirt +
+
+ Book +
+
+ Coffee +
+
+ Printer +
+
+ Phone +
+
+ Speaker +
+
+ + + +
+ + +
+

Big names to show off

+
+ + +
+ + + + + + +
+
+ + + + + + \ No newline at end of file