From d0b1d01c2a0c9f7c9445117fd402bec428cbd964 Mon Sep 17 00:00:00 2001 From: radhikagupta6 Date: Fri, 21 Aug 2020 00:46:13 +0530 Subject: [PATCH 1/3] styling --- assets/n.png | Bin 0 -> 2999 bytes assets/search.png | Bin 0 -> 5638 bytes assets/whiteheart.png | Bin 0 -> 10194 bytes index.html | 183 ++++++++++++++++++++- style.css | 360 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 542 insertions(+), 1 deletion(-) create mode 100644 assets/n.png create mode 100644 assets/search.png create mode 100644 assets/whiteheart.png diff --git a/assets/n.png b/assets/n.png new file mode 100644 index 0000000000000000000000000000000000000000..6a357e5995cfd7f0d42b09b890bfa7c4fb592b08 GIT binary patch literal 2999 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 RfcZZQpbXWxi;}Yp{uk|`ISv2- literal 0 HcmV?d00001 diff --git a/assets/whiteheart.png b/assets/whiteheart.png new file mode 100644 index 0000000000000000000000000000000000000000..88cc6a7743512dee7526f704fdfba9e13682ce9a GIT binary patch literal 10194 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:~3}u1E8@kl&euV}`Rbly~w} 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 Lq?Z5Y^T+=I@cvV{ literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 9a3afe1..6788979 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,193 @@ + Document + - +
+
+ + +
+ +
+ + search +
+ + + +
+
+
+
+

Build amazing things

+ +
+

+ We're npm, Inc., the company behind Node package manager, the npm + Registry, and npm CLI. We offer those to the community for free, but + our day job is building and selling useful tools for developers like you. +

+ +

+ Take your JavaScript development up a notch +

+ +

+ Get started today for free, or step up to npm Pro to enjoy a premium + JavaScript development experience, with features like private packages. +

+ + + + +
+
+
+ bubble +

Bring the best of open source to you, your team, and your company

+ +
+

+ Relied upon by more than 11 million developers worldwide, npm is committed to + making JavaScript development elegant, productive, and safe. The free npm + Registry has become the center of JavaScript code sharing, and with more than + one million packages, the largest software registry in the world. Our other + tools and services take the Registry, and the work you do around it, to the + next level. +

+
+
+
+
+
+
+ bubble +

npm Free

+
+

Become a contributing member of the open source Javascript community. Create public packages, + publish updates, audit your dependencies and more.

+ +
+ + +
+ +
+ cup + flag +

npm Pro & Teams

+
+

or next-level JavaScript developers who want more capabilities. Pro and Teams add the ability to + build private packages for you, your team, or for customers.

+
+
+ + + +
+ +
+ trend +

npm Enterprise

+
+

For very large teams and business critical projects, npm Enterprise delivers features that + organizations with hundreds of developers need, like SSO and enhanced security.

+
+
+ + +
+ +
+ jss +

npm PkgSafe

+
+

+ Our security team's unique insights into JavaScript vulnerabilities and threats are delivered as + free + and premium features, as well as services for resellers and others. +

+
+ +
+
+
+
+

We black-heartopen source

+

+ At npm, Inc., we're proud to dedicate teams of full-time employees to operating + the npm Registry, enhancing the CLI, improving JavaScript security, and other + projects that support and nurture a vibrant open source community. +

+ +
+
+
+
+ +

+ Gratefully serving everyone from solo devs to the Fortune 500 +

+
+ + company +
+
+
+
+
+
n
+ +
+

Help

+
    +
  • Documentation
    • +
  • Community
    • +
  • Resources
    • +
  • Advisories
    • +
  • Status
    • +
  • Contact
    • +
+
+
+

About

+
    +
  • Company
    • +
  • Blog
    • +
  • Careers
    • +
  • Webinars
    • +
  • Press
    • +
  • Newsletter
    • +
+
+
+

Terms & Policies

+
    +
  • Policies
    • +
  • Terms of Use
    • +
  • Code of Conduct
    • +
+
+
+
+ \ No newline at end of file diff --git a/style.css b/style.css index e69de29..73d7ece 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,360 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins'); + +* { + padding: 0%; + margin: 0%; + box-sizing: border-box; +} + +body { + font-family: 'Poppins'; +} + +header>div { + padding: 0 25px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid lightgray; +} + +/* header form input { + color: rgba(0, 0, 0, .05); +} + +header form button { + background: #fb3e44; + color: white; +} */ +.break { + display: block; +} + +.uplogo { + font-size: 1em; + font-weight: 700; + padding-left: 100px; + +} + +nav { + width: 600px; + display: flex; + align-content: center; + flex-grow: 0; + justify-content: center; + padding-right: 0; + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-left: 100px; +} + +nav ul { + list-style: none; + display: flex; + align-items: center; + padding: 0px; + margin: 0px; + align-content: flex-end; +} + +nav ul li { + display: flex; + padding: 10px; +} + +nav a { + text-decoration: none; + color: black; +} + +nav a:hover { + color: grey; +} + +.blackHeart { + width: 30px; + +} + +.con1 { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.logo { + display: flex; + margin-left: 50px; + +} + +.search { + width: 30px; + +} + +#sec1 { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; + background: url('./assets/background2.png'); + background-repeat: no-repeat; + background-size: cover; + color: white; + height: 850px; + font-size: 1.5em; +} + +#sec1 h2 { + display: flex; + flex-direction: column; + font-size: 3.2em; + text-align: center; + padding-top: 0%; + padding-left: 600px; + padding-right: 600px; +} + +#sec1 h3 { + display: flex; + flex-direction: column; + font-size: 1.5em; + text-align: center; + padding-top: 1%; + padding-left: 650px; + padding-right: 650px; +} + +#sec1 div p { + display: flex; + flex-direction: column; + padding-top: 1%; + padding-left: 620px; + padding-right: 620px; + font-size: 0.7em; +} + +#sec1 button { + + width: 250px; + height: 60px; + +} + +#redd { + margin: 2%; + background: #cc0000; + color: white; + font-size: 0.8em; + font-weight: 800; + border: none; + border-bottom: 5px solid yellow; +} + +#purplee { + background: #ff1a8c; + color: white; + border: none; + font-size: 0.8em; + font-weight: 800; + border-bottom: 5px solid purple; +} + +#sec2 { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; + + height: 650px; + font-size: 1.5em; +} + +#sec2 div p { + display: flex; + flex-direction: column; + padding-top: 1%; + padding-left: 620px; + padding-right: 620px; + font-size: 0.7em; + color: #333333; +} + +#sec2 h3 { + display: flex; + flex-direction: column; + font-size: 1.5em; + text-align: center; + padding-top: 1%; + padding-left: 660px; + padding-right: 660px; + color: #333333; +} + +#sec3 { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; + background: url('./assets/background.png'); + background-repeat: no-repeat; + background-size: cover; + color: white; + height: 320px; + font-size: 1.5em; +} + +#sec3 h3 { + display: flex; + flex-direction: column; + font-size: 1.6em; + text-align: center; + padding-top: 1%; + padding-left: 650px; + padding-right: 650px; +} + +#sec3 p { + display: flex; + flex-direction: column; + padding-top: 1%; + padding-left: 620px; + padding-right: 620px; + font-size: 0.7em; +} + +#sec4 { + display: flex; + flex-direction: row; + text-align: center; + align-items: center; + justify-content: space-around; + height: 500px; + font-size: 1.5em; +} + +.con2 { + display: flex; + padding-right: 100px; + padding-left: 100px; +} + +#sec4 article { + padding: 5%; + text-align: left; +} + +#sec4 h3 { + display: flex; + flex-direction: column; + font-size: 0.8em; + text-align: left; + padding-top: 1%; + +} + +#sec4 p { + display: flex; + flex-direction: column; + font-size: 0.7em; +} + +#btnlrnmore { + background: white; + color: black; + border: 2px solid black; + width: 200px; + height: 50px; + border-radius: 25px; + font-weight: 800; + +} + +#sec5 { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; + height: 1050px; + font-size: 1.5em; +} + +#sec5 h2 { + display: flex; + /* flex-direction: column; */ + font-size: 1.5em; + text-align: center; + padding-top: 0%; + padding-left: 660px; + padding-right: 660px; + padding-bottom: 3%; + color: #333333; + border-bottom: 1px solid black; +} + + +#sec5 img { + display: flex; + padding: 5%; + width: 650px; +} + +#sec5 div { + display: flex; + + + +} + +#sec6 footer { + display: flex; + flex-direction: row; + text-align: center; + align-items: center; + justify-content: space-around; + height: 400px; + font-size: 1.5em; +} + +#sec6 img { + display: flex; + justify-content: center; + align-items: center; + width: 50px; + padding-top: 0%; +} + + +#sec6 article { + /* display: flex; */ + padding: 5%; + text-align: left; + justify-content: center; + align-items: center; + +} + +#sec6 h3 { + display: flex; + font-size: 0.8em; + text-align: left; + font-weight: 800; + + +} + +#sec6 ul li { + + list-style: none; + padding: 5%; + font-size: 0.8em; +} \ No newline at end of file From f16812eebb0370605690408e2d7dcf655475540a Mon Sep 17 00:00:00 2001 From: radhikagupta6 Date: Fri, 21 Aug 2020 12:03:38 +0530 Subject: [PATCH 2/3] header done, final touches --- index.html | 18 +- style.css | 516 +++++++++++++++++++++++++++++------------------------ 2 files changed, 292 insertions(+), 242 deletions(-) diff --git a/index.html b/index.html index 6788979..20036cb 100644 --- a/index.html +++ b/index.html @@ -25,16 +25,18 @@ - -
+
- search -
- - -
+
+
+ + + +
+
+

Build amazing things

@@ -140,7 +142,7 @@

We black-heart

diff --git a/style.css b/style.css index 73d7ece..fca7505 100644 --- a/style.css +++ b/style.css @@ -1,21 +1,21 @@ -@import url('https://fonts.googleapis.com/css?family=Poppins'); +@import url("https://fonts.googleapis.com/css?family=Poppins"); * { - padding: 0%; - margin: 0%; - box-sizing: border-box; + padding: 0%; + margin: 0%; + box-sizing: border-box; } body { - font-family: 'Poppins'; + font-family: "Poppins"; } -header>div { - padding: 0 25px; - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid lightgray; +header > div { + padding: 0 25px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid lightgray; } /* header form input { @@ -27,334 +27,382 @@ header form button { color: white; } */ .break { - display: block; + display: block; } .uplogo { - font-size: 1em; - font-weight: 700; - padding-left: 100px; - + font-size: 1em; + font-weight: 700; + padding-left: 100px; } nav { - width: 600px; - display: flex; - align-content: center; - flex-grow: 0; - justify-content: center; - padding-right: 0; - text-align: right; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-left: 100px; + width: 600px; + display: flex; + align-content: center; + flex-grow: 0; + justify-content: center; + padding-right: 0; + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-left: 100px; } nav ul { - list-style: none; - display: flex; - align-items: center; - padding: 0px; - margin: 0px; - align-content: flex-end; + list-style: none; + display: flex; + align-items: center; + padding: 0px; + margin: 0px; + align-content: flex-end; } nav ul li { - display: flex; - padding: 10px; + display: flex; + padding: 10px; } nav a { - text-decoration: none; - color: black; + text-decoration: none; + color: black; } nav a:hover { - color: grey; + color: grey; } .blackHeart { - width: 30px; - -} - -.con1 { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; + width: 30px; +} + +.topnav { + display: flex; + flex-direction: row; + justify-content: center; + overflow: hidden; + width: 100%; + height: 4.5em; +} + +.topnav a { + float: left; + display: flex; + color: black; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; +} + +.topnav a.active { + background-color: #2196f3; + color: white; +} + +.topnav input[type="text"] { + padding: 6px; + padding-bottom: 6px; + margin-top: 7px; + font-size: 17px; + border: none; + width: 1200px; + height: 45px; + background: lightgrey; +} +#searchbtn { + background: black; + width: 90px; + height: 45px; + color: white; + font-size: 0.8em; + font-weight: 800; + border: none; +} +#signin:hover { + color: gray; +} +#signin { + background: white; + width: 90px; + height: 45px; + color: black; + font-size: 0.8em; + font-weight: 800; + border: none; + margin-left: 5px; +} +#signup:hover { + color: gray; + border: 0.5px solid lightgray; +} +#signup { + background: white; + width: 90px; + height: 45px; + color: black; + font-size: 0.8em; + font-weight: 800; + border: 0.5px solid gray; + margin-left: 5px; } - .logo { - display: flex; - margin-left: 50px; - + display: flex; + margin-left: 50px; + width: 110px; } - +/* .search { - width: 30px; - -} + width: 30px; +} */ #sec1 { - display: flex; - flex-direction: column; - text-align: center; - align-items: center; - justify-content: center; - background: url('./assets/background2.png'); - background-repeat: no-repeat; - background-size: cover; - color: white; - height: 850px; - font-size: 1.5em; + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; + background: url("./assets/background2.png"); + background-repeat: no-repeat; + background-size: cover; + color: white; + height: 850px; + font-size: 1.5em; } #sec1 h2 { - display: flex; - flex-direction: column; - font-size: 3.2em; - text-align: center; - padding-top: 0%; - padding-left: 600px; - padding-right: 600px; + display: flex; + flex-direction: column; + font-size: 3.2em; + text-align: center; + padding-top: 0%; + padding-left: 600px; + padding-right: 600px; } #sec1 h3 { - display: flex; - flex-direction: column; - font-size: 1.5em; - text-align: center; - padding-top: 1%; - padding-left: 650px; - padding-right: 650px; + display: flex; + flex-direction: column; + font-size: 1.5em; + text-align: center; + padding-top: 1%; + padding-left: 650px; + padding-right: 650px; } #sec1 div p { - display: flex; - flex-direction: column; - padding-top: 1%; - padding-left: 620px; - padding-right: 620px; - font-size: 0.7em; + display: flex; + flex-direction: column; + padding-top: 1%; + padding-left: 620px; + padding-right: 620px; + font-size: 0.7em; } #sec1 button { - - width: 250px; - height: 60px; - + width: 250px; + height: 60px; } #redd { - margin: 2%; - background: #cc0000; - color: white; - font-size: 0.8em; - font-weight: 800; - border: none; - border-bottom: 5px solid yellow; + margin: 2%; + background: #cc0000; + color: white; + font-size: 0.8em; + font-weight: 800; + border: none; + border-bottom: 5px solid yellow; } #purplee { - background: #ff1a8c; - color: white; - border: none; - font-size: 0.8em; - font-weight: 800; - border-bottom: 5px solid purple; + background: #ff1a8c; + color: white; + border: none; + font-size: 0.8em; + font-weight: 800; + border-bottom: 5px solid purple; } #sec2 { - display: flex; - flex-direction: column; - text-align: center; - align-items: center; - justify-content: center; + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; - height: 650px; - font-size: 1.5em; + height: 650px; + font-size: 1.5em; } #sec2 div p { - display: flex; - flex-direction: column; - padding-top: 1%; - padding-left: 620px; - padding-right: 620px; - font-size: 0.7em; - color: #333333; + display: flex; + flex-direction: column; + padding-top: 1%; + padding-left: 620px; + padding-right: 620px; + font-size: 0.7em; + color: #333333; } #sec2 h3 { - display: flex; - flex-direction: column; - font-size: 1.5em; - text-align: center; - padding-top: 1%; - padding-left: 660px; - padding-right: 660px; - color: #333333; + display: flex; + flex-direction: column; + font-size: 1.5em; + text-align: center; + padding-top: 1%; + padding-left: 660px; + padding-right: 660px; + color: #333333; } #sec3 { - display: flex; - flex-direction: column; - text-align: center; - align-items: center; - justify-content: center; - background: url('./assets/background.png'); - background-repeat: no-repeat; - background-size: cover; - color: white; - height: 320px; - font-size: 1.5em; + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; + background: url("./assets/background.png"); + background-repeat: no-repeat; + background-size: cover; + color: white; + height: 320px; + font-size: 1.5em; } #sec3 h3 { - display: flex; - flex-direction: column; - font-size: 1.6em; - text-align: center; - padding-top: 1%; - padding-left: 650px; - padding-right: 650px; + display: flex; + flex-direction: column; + font-size: 1.6em; + text-align: center; + padding-top: 1%; + padding-left: 650px; + padding-right: 650px; } #sec3 p { - display: flex; - flex-direction: column; - padding-top: 1%; - padding-left: 620px; - padding-right: 620px; - font-size: 0.7em; + display: flex; + flex-direction: column; + padding-top: 1%; + padding-left: 620px; + padding-right: 620px; + font-size: 0.7em; } #sec4 { - display: flex; - flex-direction: row; - text-align: center; - align-items: center; - justify-content: space-around; - height: 500px; - font-size: 1.5em; + display: flex; + flex-direction: row; + text-align: center; + align-items: center; + justify-content: space-around; + height: 500px; + font-size: 1.5em; } .con2 { - display: flex; - padding-right: 100px; - padding-left: 100px; + display: flex; + padding-right: 100px; + padding-left: 100px; } #sec4 article { - padding: 5%; - text-align: left; + padding: 5%; + text-align: left; } #sec4 h3 { - display: flex; - flex-direction: column; - font-size: 0.8em; - text-align: left; - padding-top: 1%; - + display: flex; + flex-direction: column; + font-size: 0.8em; + text-align: left; + padding-top: 1%; } #sec4 p { - display: flex; - flex-direction: column; - font-size: 0.7em; + display: flex; + flex-direction: column; + font-size: 0.7em; } #btnlrnmore { - background: white; - color: black; - border: 2px solid black; - width: 200px; - height: 50px; - border-radius: 25px; - font-weight: 800; - + background: white; + color: black; + border: 2px solid black; + width: 200px; + height: 50px; + border-radius: 25px; + font-weight: 800; } #sec5 { - display: flex; - flex-direction: column; - text-align: center; - align-items: center; - justify-content: center; - height: 1050px; - font-size: 1.5em; + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; + height: 1050px; + font-size: 1.5em; } #sec5 h2 { - display: flex; - /* flex-direction: column; */ - font-size: 1.5em; - text-align: center; - padding-top: 0%; - padding-left: 660px; - padding-right: 660px; - padding-bottom: 3%; - color: #333333; - border-bottom: 1px solid black; + display: flex; + /* flex-direction: column; */ + font-size: 1.5em; + text-align: center; + padding-top: 0%; + padding-left: 660px; + padding-right: 660px; + padding-bottom: 3%; + color: #333333; + /* border-bottom: 1px solid black; */ } - #sec5 img { - display: flex; - padding: 5%; - width: 650px; + display: flex; + padding: 5%; + width: 650px; } #sec5 div { - display: flex; - - - + display: flex; +} +#sec6 { + display: flex; + flex-direction: row; + text-align: center; + /* /* align-items: center; */ + justify-content: space-around; + height: 300px; + font-size: 1.5em; } #sec6 footer { - display: flex; - flex-direction: row; - text-align: center; - align-items: center; - justify-content: space-around; - height: 400px; - font-size: 1.5em; + display: flex; + width: 100%; } #sec6 img { - display: flex; - justify-content: center; - align-items: center; - width: 50px; - padding-top: 0%; + display: flex; + justify-content: center; + align-items: center; + width: 50px; + padding-top: 0%; } - #sec6 article { - /* display: flex; */ - padding: 5%; - text-align: left; - justify-content: center; - align-items: center; - + padding: 8%; + padding-top: 2%; + text-align: left; } - #sec6 h3 { - display: flex; - font-size: 0.8em; - text-align: left; - font-weight: 800; - - + display: flex; + font-size: 0.8em; + text-align: left; + font-weight: 800; } #sec6 ul li { - - list-style: none; - padding: 5%; - font-size: 0.8em; -} \ No newline at end of file + list-style: none; + padding: 5%; + font-size: 0.8em; +} From cb80c5f3cd047f7aacbfb2a6b010b035bc919de3 Mon Sep 17 00:00:00 2001 From: Radhika Gupta Date: Fri, 21 Aug 2020 12:07:51 +0530 Subject: [PATCH 3/3] Update.README.md --- README.md | 261 +----------------------------------------------------- 1 file changed, 2 insertions(+), 259 deletions(-) diff --git a/README.md b/README.md index a80e716..b3c92c6 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -![Image description](https://i1.faceprep.in/ProGrad/face-logo-resized.png) + # ProGrad Lab | HTML & CSS - NPM clone @@ -11,262 +11,5 @@ In this exercise, the goal is to apply as many as possible of the concepts you'v - how to use flexbox to position elements on the page and - how to style the page. -## Getting started - -1. [Fork](https://github.com/FACEPrep-ProGrad/project-builder-html-css-npm) this repo -2. [Clone](https://github.com/FACEPrep-ProGrad/project-builder-html-css-npm) this repo - -Whenever you create a first significant change, you should make your first commit. - -3. Follow these [guidelines to add, commit and push changes](https://github.com/FACEPrep-ProGrad/general-guidelines-labs-project-builders.git). - -In the end of this document, you will find guidelines on how to submit the exercise. - -**Keep in mind that you don't have to wait to fully finish the exercise to make a pull request. You only have to make a pull request once. After that, every time when you make a commit, it will be automatically added and shown in the pull request.** - -## Instructions - -### Introduction - -In this exercise, you will clone the landing page of the **NPM website**. NPM stands for a Node Package Manager, and you will be using it heavily throughout this course. The version you will be cloning is the one in that you see in the following image. If you want, you can visit the [official page](https://www.npmjs.com/) to pick up some of their styles, but this is not necessary; you’ll see that the NPM page has been updated, but that’s okay. You already have all the assets for this version in the images folder as well as the necessary text in the `index.html`. - -Our goal is to get as close as possible to this: - -![](https://ilkcng.bn.files.1drv.com/y4m6QVvhtgzJoBCQ_KtAAWCPb_LBNNGHx924XIQUp6wk5kQ8DNgHo68ZbufSvpjbzNmfA4b8P867jMXXYNJgHGZ12zF_vhB1YG-qPwZY3hwL3mVFhyZvAUa-fQCDihA8F3SfLnNXAljiZ-vEWbNr-hOL4IPee5ZJR2hkZTVKtFHkSdjNiDFjrwOJ_NyxaFBCOwuO7ThXvcsjY970QI-6HMFAg?width=1343&height=231&cropmode=none) -![](https://ilkdng.bn.files.1drv.com/y4m7jSoqgGQAR1BEsSRn8_sQ8e3MoasA_YYAS9up0TpDbuYs63s0vIJNLQKKWz8lzFScyCtNLA6llomIfIojTVwtY3qn8h7EkcVkShwUbZQe7mITI5Lwq1k_03YmnEhrtllmYeuEpLs_tHzi6yRDne6vERcwfBnMC8rPB-X6OFFOVDu-Kfdm59YyCYf2InCBYZdK9Gbdy5gWRGEM4lbZxDODg?width=1342&height=357&cropmode=none) -![](https://ilkbng.bn.files.1drv.com/y4mpb0kXN3GlEy0AhvRdSp6BWlwfxBF7vouTlM8zqxMrMHLGsmGCpaMKkNn3ryCUnL7_0AACTWhTtxL7PmjKWMud55uFanRHJCfqDdIY1-VT9nMv1Tx4I882fs7Tw9LNMPU_gflcezJxLL51e3H608ggkUUTtcZaIRgfhrqMvXgJlLTR3A8MKKUSHT3NEVAODecYg9EYBIwgls8WrDx2i9gGQ?width=1341&height=388&cropmode=none) -![](https://ilkang.bn.files.1drv.com/y4mOqKQHU6Pkr9v5QR6FGlp3SYxXSvOMn6LVxi2hEji4cdIF_h0tETmr6UJjyQoXej-7lNi_op6b7meI8fCSPhuwqJWOaeF-OrQCBg_kt6I4g_mVPnia90MQg1S6XwEXN1Cc0oHgRYHdkejgpfJ3jVltOTCkKoQtpYO7FoIFb44r6iuA12cLy2kj_j_Hf5VERcbvlt-lXyGXOYoiM_8pLUZTA?width=1343&height=530&cropmode=none) -![](https://iljqng.bn.files.1drv.com/y4menGzetAuCplL8dDPu1TRGNWM-ekdunP4qGsX6biVNnav994YW-b7K1JGGhXjiEF0ig2m9_NbMU5m30vm2NUHv2oDXplUxh6I1D3c92dl9mNDbTpw63QEa9Ivu5Oz21pTU-X5d2h07AGc8KLfBIskKFaCgRXWduzrAgWdypxwpIkh-JAsTaGo9spUZDiG0X2ybagG52jdfDgnRD1vqOcc3Q?width=1343&height=448&cropmode=none) -![](https://iljpng.bn.files.1drv.com/y4mxJAtU8eq6P9oi8f8VsG5Yv-hM2t-c56a0W3rEFMh0EUyMk_l4lZ9Ww7xISTauqphecJPBkKdjvK1KdTKOQExXs-9uan0UaHHt2LOKPpUBNeg-AnSX5-P5NGd0THbIa83vjFeVK3Lmepf2zFT2aWgYj9G52naFhSqp1SBggTIGP5lpr-fma7vMX6K17DvvB4oAvrHvsiXfhIQBIt-EgW4aA?width=1343&height=367&cropmode=none) -![](https://ilj9ng.bn.files.1drv.com/y4muhIIR4G6X3zbZYLWFkbLDQJm_ntNbkezHMpLIBo0n5y7FL1KfzGH9cCv-wMUGdV7gDyHZ2Zu7kvv90DJXSWcccfxn1faXpgR0FA8-I8LVIhZ0IuPjI63Kz5YnFevtl5QAvq6MjzjwYISXCHxZMUsltElKDz1tPOARgwMEZGAk2B1Uq2BPzf1Nj2amorBh24IPb9nOQHvAcM9ixJR05js1Q?width=1344&height=237&cropmode=none) -![](https://ilj8ng.bn.files.1drv.com/y4mH5euErvapj_XCRuOonRayqufCkv_jVTeiyGziHKme3FsJz1HvVXRmftBNVCQlxGdw3NCdMZZQOhkjqkMIaFH2DnxWRl6HCu4tPRFKlU7dcryBDyJsywLt9xFTOsO6cBtGBn_igNy4a3mzMdJ6vpDJkDr8qzjoJ2QHC_ECX3Lf8FMNUx8-ov7ClxaFwuDgV9rlPrdrlLEe9rOUMfIAWQWgg?width=1341&height=513&cropmode=none) -![](https://ilklng.bn.files.1drv.com/y4mpbWo-wfTgV2ia_oAQXu3rTLoYK50-lM3OFMKQejV6pIDF5wxrBCc-vvhb6VwsUrcVt13v0Oh3LOug4btJkV3aZ7Vv1ZQilAUn6zIosgdoGK9vg9nOF80DamecqwM6gpn4cE-X3ZYPemBBwqLp4-F2nTmYsrWiH68HImJgREKRwo8ifEfTLZ48Vb5lPkH5R3SE-uHSkCizUZfQolJduAXZg?width=1342&height=552&cropmode=none) - - -Although it doesn't look too complicated, we will have to apply quite a few styles on our web page: set a background color on different elements, set a font weight (bold, normal), and position elements using our newly acquired skills in flexbox. - -We will divide our work into two parts: - -- part I - create a webpage with no styles, just add HTML and -- part II - add styles and make it perfect. 🎨 - -So let's get started! - -**The assets we provided contain the `index.html` file, as well as the `images` folder with all the required images to successfully finish the exercise.** - -### Part I - pure HTML (no styles applied) - -It might seem like a joke, but this is our goal in this iteration: -![1](https://i1kdng.bn.files.1drv.com/y4mNhLR86qK3PsPFg7f51D4Vc1mzvfjOIc4-6LNPiLUsORsznxV8nkFQgn9gOIZUBkgATeoNuYoI247klDZfbl7WQrME1t9_X2oWAkFPtwBkpFvvVCyBelDiHXLTiOEQlDMSV18xBM19mBFut-3cUWcNIiiDJg_4lqwAkoEzbynUHCB4xz0_4rNLX-ui2wb0-266ezsQ4FUHbWfc-Wvcq3iGg?width=1343&height=491&cropmode=none) -![2](https://i1kcng.bn.files.1drv.com/y4mZLUmausPXprCemTmSplK2STDZ_9F9QLwlMjf1Goa_3-2E7Twmoq2KU3UZnkU41oNtwwCgc6M-XP9EN-VldKnhMk6JbTfjzCqEyDDlJJQXA-EjwMXCMdaykK33pyQN-JCMLCuWGV8G5dAOMgOrc8b7dNNi1x9SL2K5CsD0pd2wxKvFxYgy4oqNF-vjd8rc9LNLXkLojMmBY5xBOMiYNfJ-w?width=1344&height=488&cropmode=none) -![3](https://i1kbng.bn.files.1drv.com/y4m_3jtSZwNm-cZcIZUTm1Y90TKsw6f--R3mvP5j4W8Z6GuQKvQnsi_oj6-uMp1w1PKsCYdbQopA3YkGXZ_bGo8jyKyh07nEQUnM9u8U4sxAOblLMWuadvlypIBQDPqBgNe_vuJ1WoS8mxBGrxCXBk71BE1ERnQqrn9eMCTrqJbZHEp32Qt6v0KNYIS7p4YUGX-TjFTH33UblvkTNEE-YZ7Ng?width=1338&height=547&cropmode=none) -![4](https://i1jqng.bn.files.1drv.com/y4ml_gCvvuYXIaaGT-jngL180WPSzfrTSg43XMSaS0vTy8zOGEcZ_x5BzkoCr8yz_e_uz-j-OZBHou2ceuuiNTGkRBtqxKvQR-9uBGeODt2fEascv1o1WpadBLFrS1QQlG0EXOPanZdYRJa5yDi8clM3IEijaZLz-7jE15QlQd3i6JjmBj0Vc8hSUBirVUgb6YrgzAWxproeMPt_4pLA2f0wg?width=1339&height=552&cropmode=none) -![5](https://i1kang.bn.files.1drv.com/y4mpgL4exBVWIgP4nEuJ3bpIe3RbVnuDWzPBRBt5IgRaWo3EXpPoY670NM4wcZJ2AsJ2kxJk6YfpndQquA4tKFA40_xW6MFloshnWt1EydtTuUk95oSPtvrJEuMD3TtA-zZPYoXMUC3AKJ0v02kIeIwgjwjWxEhXfDTDrGC6-NgE1ut4QF-PIxNRWuQAMmWL4NvoHL38HlVESTvb48rJSUeyg?width=1344&height=537&cropmode=none) -![6](https://i1jpng.bn.files.1drv.com/y4mezIZPz_zc4jHIdoRDRsniEGSUi6RTTTbqqZyfSBmjph_U9ftEBXLMzrgUedCRjL76UUManma21bKYcElIXgNGMrHgwBQl1wOmDAxbJqTaWqVi9qc-Q5cj8MexHSuSoLde1sy1bbN_y-vRPyYQvX1EWBg0fKYH1GAJHD4HTTsGqEEvOF-eSDnySbYLgc-A-fvorzbdziuCmAwwOLk5TtlsQ?width=1340&height=80&cropmode=none) -![7](https://i1j9ng.bn.files.1drv.com/y4mB8Bx0gYxhCox8JyGghX7-MzYkdvRHh2UdIkW1gRHmDIwkxfXY-YEPI7dBTs0DILfAXwk0R1nqcfHpSe33oHbl663hvs_F-gAvJF7J-Fa9md7uCVuCctczLJVizapigJ4SpX0iwEpCB4fOiwI5K7R6OcPWHLsvzWKyv5r5k7slFJNtMPNFhqh61PGYjVClrU1lq1jOG6N_ny9GR_rBwoXIA?width=1337&height=503&cropmode=none) -![8](https://i1j8ng.bn.files.1drv.com/y4mkGXi4GNyy3EgwMVCR-d8d5bhraTuruUDYtCfQqjmuPE1zB1-rrKxlYJs1eSdQVyM-6tMinofZlXF0QpCsLIGj-P1QmIGBAF-A2n-u6tL6K3pW6J0UnmRkglmpRvZuqs5sKWlDrecRz7K7fJqgGDeb3b6SQrhzlZjVaV5x9bWOPw6U61ENCvQJxtVREO-5D-D7c4sG_ael_2572-Y3mDjmw?width=1344&height=451&cropmode=none) - -
- -The very first step is deciding **how to structure the page and picking the correct _semantic_ tags**. In general, choosing the right tags will make your job easier in the next step when the time comes to do some styling. - -Our recommendation is to try to keep it as simple as possible. Try to identify the different sections, and add `id`'s or `classes` to each `
`, `
`, `
    `, or `
    ` block elements to identify these elements. Here is suggested guideline but you might have something on your mind that is different from this - bring it up. - -![]() - -#### HTML 1 | `
    ` & `