From 4064b047acd06390b56dfd71cf477117fa6c78ef Mon Sep 17 00:00:00 2001 From: sawankrgope Date: Sun, 6 Sep 2020 09:33:22 +0530 Subject: [PATCH] FSD1611415 --- README.md | 272 --------------------------------------- assets/git.png | Bin 0 -> 1007 bytes index.html | 275 ++++++++++++++++++++++++++++++++++++++-- style.css | 338 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 605 insertions(+), 280 deletions(-) delete mode 100644 README.md create mode 100644 assets/git.png diff --git a/README.md b/README.md deleted file mode 100644 index a80e716..0000000 --- a/README.md +++ /dev/null @@ -1,272 +0,0 @@ -![Image description](https://i1.faceprep.in/ProGrad/face-logo-resized.png) - -# ProGrad Lab | HTML & CSS - NPM clone - -## Learning Goals - -In this exercise, the goal is to apply as many as possible of the concepts you've just learned: - -- when and how to use different HTML tags, -- how to structure HTML page and add the content to it using _block and inline elements_, -- 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 | `
    ` & `
+ + +
+
+

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. +

+
+
+
+ + Sign Up for free + Learn about Pro +
+
+ + + + + +
+
+ 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. +

+
+
+
+ + + + + + +
+
+ img_1 +

+ Npm free


+

+ Become a contributing member of
+the OJNn source JavaScript
+cornm.nny, Create
+packages. publish updates. audit
+your dependency and more. +



+

LEARN MORE

+
+
+ img_1 + img_1

+

Npm Pro & Teams


+

+ For next level JavaScript
+ developers who want rnore
+ capabilities, Pro and Teams add the
+ ability to build private packages tor
+ team, or for customers. +



+

LEARN MORE

+
+
+ img_1

+

npm Enterprise


+

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



+

LEARN MORE

+
+
+ img_1

+

npm PkgSafe


+

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



+

LEARN MORE

+
+
+ - + + + + + + + + +
+
+

We ❤ open 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 +
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css index e69de29..379ab8e 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,338 @@ +@import url("https://fonts.googleapis.com/css?family=Poppins"); + +* { + padding: 0%; + margin: 0%; +} +body { + font-family: "Poppins", sans-serif; +} +#horizontal { + display: block; + border: 0px; + height: 8px; + background-image: url("./assets/b1.png"); + transform: scaleX(-1); +} + + +.topsection { + display: flex; + flex-direction: row; + justify-content: center; + height: 80px; + color: white; + text-decoration: underline; + place-items: 10px; + align-items: center; + background-color: black; +} + +.npmlogo1{ + margin-right: 20px; +} +.totext{ + font-size:24px; +} + +.npmlogo2{ + margin-left:20px; +} + + +#header{ + padding: 0 25px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid lightgray; +} + +nav { + width: 600px; +} + +nav ul { + margin: 0px 0px; + list-style: none; + display: flex; + justify-content: space-evenly; + margin: 0px; + align-items: center; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 3px; + margin-inline-end: 3px; + padding-inline-start: 100px; +} + +nav ul li { + margin: 0px 20px; + margin-left: 10px; + font-size: 16px; +} + +.pane{ + text-align: right; +} + +nav a { + text-decoration: none; + font-size: 14px; + font-weight: 600; + color: black; +} +#text { + color: black; +} +#searcher{ + margin: 0px 55px 0px 0px; + padding: 4px 25px; + display: flex; + height: 80px; + align-items: center; + border-bottom: 1px solid lightgray; +} + +.search { + width: 1000px; + height: 55px; + background-color: #f2f2f2; + outline: none; + border-width: 0px; + border: none; +} +i { + display: flex; + + font-size: 18px; + background-color: #f2f2f2; +} + +#search2 { + width: 25px; + height: 25px; + padding: 10px 50px 20px 50px; + margin: 10px 10px 10px 0px; + text-decoration: none; + font-size: 12px; + color: white; + font-weight: 700; + background-color: #000000; + display: flex; + flex-direction: row; + justify-content: center; + text-align: center; + align-items: center; +} + +#signup1 { + width: 50px; + height: 30px; + padding: 10px 20px 10px 20px; + margin: 10px 10px 10px 10px; + text-decoration: none; + font-size: 12px; + font-weight: 600; + border: 0.1px solid black; + text-align: center; + color: black; + display: flex; + flex-direction: column; + justify-content: center; + border: 2px solid black; + text-align: center; +} +#signup2 { + margin-left: 10px; + text-decoration: none; + font-size: 12px; + font-weight: 600; + color: black; +} +#section_one { + display: flex; + height: 800px; + justify-content: center; + flex-direction: row; + background-image: url("./assets/b1.png"); + text-align: center; +} + +#section_one h1 { + margin: 100px 10px 0 0; + font-size: 80px; + color: white; +} + +h2 { + color: white; + font-size: 36px; +} + +p { + color: white; + font-size: 15px; +} +#signup3{ + width: 440px; + height: 61px; + padding: 10px 50px 20px 50px; + margin: 10px 10px 10px 0px; + border-bottom: 5px solid #fa8717; + text-align: center; + color: white; + text-decoration: none; + font-size: 16px; + font-weight: 700; + background-color: #c12127; +} +#learn { + width: 440px; + height: 61px; + padding: 10px 50px 20px 50px; + margin: 10px 10px 10px 20px; + border-bottom: 5px solid #b30ad2; + text-align: center; + color: white; + text-decoration: none; + font-size: 16px; + font-weight: 700; + background-color: #e81aa8; +} + + +#openso { + background-image: url("./assets/background.png"); +} + +#section_two { + margin: 60px 10px 0 0; + display: flex; + height: 500px; + justify-content: center; + flex-direction: row; + + text-align: center; +} + +#section_two h2 { + margin: 30px 10px 0 0; + color: black; + font-size: 36px; +} + +#section_two p { + margin: 30px 10px 0 0; + color: black; + font-size: 15px; +} + +#npmpro { + margin-top: 50px; + margin-left: 200px; + margin-right: 200px; + height: 400px; + + display: flex; + justify-content: space-between; +} +#nmphead { + color: #000000; +} +#npmpara { + color: #000000; + font-size: 13px; +} +#npmpro h1 { + text-decoration: none; + width: 200px; + text-transform: uppercase; + + height: 40px; + font-size: 16px; + letter-spacing: 2px; + font-weight: 1000; + border-radius: 20px; + display: flex; + flex-direction: column; + justify-content: center; + border: 2px solid black; + text-align: center; + color: black; +} + +#section3 { + background-image: url("./assets/background.png"); +} + +#section3 { + display: flex; + height: 320px; + justify-content: center; + flex-direction: row; + text-align: center; +} + +#section3 h2 { + margin: 60px 0px 4px 0; + font-size: 46px; +} + +#section3 p { + margin: 30px 10px 0 0; + color: white; + font-size: 15px; +} + + + + +#section4 { + display: flex; + height: 320px; + justify-content: center; + flex-direction: row; + text-align: center; + height: fit-content; + margin-bottom: 65px; +} +#section4 h2 { + margin: 60px 50px 0 0; + margin-bottom: 25px; + + font-weight: 600; + color: #333333; + font-size: 36px; + line-height: 45px; +} +#company { + width: 520px; + height: 580px; + align-content: center; + margin: 15px 10px 0 0; +} + + + +#footer { + display: flex; + justify-content: space-between; + height:300px; + width:80%; + margin: 60px 20px 0px 20px; + background: white; + color: black; +} +#footer svg { + width: 55px; + height: 55px; +} +#footer help { + margin: 0px 0px; +} +#footer ul li { + margin: 10px 0; + list-style: none; + color: grey; +} \ No newline at end of file