diff --git a/README.md b/README.md index a80e716..fe7e0e1 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,6 @@ Our goal is to get as close as possible to this: ![](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: @@ -153,10 +152,10 @@ Refresh the page in Chrome, and if your _style.css_ is linked properly, the page Before we move forward, add at the very top of your _style.css_ file the following lines: ```css -@import url('https://fonts.googleapis.com/css?family=Poppins'); +@import url("https://fonts.googleapis.com/css?family=Poppins"); body { - font-family: 'Poppins'; + font-family: "Poppins"; } ``` @@ -226,7 +225,6 @@ _Useful information_: - background image is inside the assets folder. - #### CSS 4 | section 2 ![](https://jfkcng.bn.files.1drv.com/y4mFB6mDVX6J_QjQVZu7FWI62rOk4AoJ7zLJOpPqORJ8oWzHiBbEYQLmCL8PTFyW-shO5bJVjspXJOkj7BclLx6RzByqbZ56s_poyYCEr1OXVQY_xGoNzxw_y-sxvyC7f0rJowqVvdlTM40J84uzHOrIFl9W2XVfoo_yRffbluOOSOt7IVWDhRvXsUE1ge8ytNEqjQ4zcZBSyZKUJHB3W6ruw?width=1342&height=521&cropmode=none) @@ -246,6 +244,7 @@ Again use a lot of flexbox to get the right position of elements - direction, ju ![](https://jfkang.bn.files.1drv.com/y4m86eISxpwtCD7HHun540D_TRoLKCV3MLPxOzBgOvkD2eBGFHDjz24s5QkMnmnDFi3KkN6IjLpxIjzuLFFjNxh3ABVCB0713sJxV8EZ-8i0K1NbmGj5OLGJAoO1yb_THY80ushGtynjdImqQ9yxHTPK60RI8izJ5SYfJtixg2gC2lwAxM9bgSUgLBhFU8r2-v4TapfdfwHkpJYwecRFl8dHA?width=1347&height=326&cropmode=none) #### CSS 7 | section 5 + ![](https://jfjqng.bn.files.1drv.com/y4mt88RWimlHj8iihCWedLjY8RyBzO4rn5h9JEYVjdCtXEbRtvbtqKcmk-kAWDhNwClt44zS-l1u9KM4VTrCqLl-EyixGiDrnpaEumYXWlc33goduuHTb8RScZFUrBNR-bqpdNWN8ZeRxLQSzEogXa3cU0Noi95U92ocx7Z8VPshkXSHDN8kA-OZ6uFHBNn8BJOPT2RypfRKo8G05XECNR8FQ?width=1348&height=176&cropmode=none) ![](https://jfjpng.bn.files.1drv.com/y4myLEYi6ScJR_Zj-Sy8kf3D7AyGLDwSr2TajDTJIwXAp3difAZb9eqRmK3R5i6GhDn8G32zmawWd-D3IECCDcynwaN0PdFJCdwkuqkpIXzMXTs12rawBQl6-kiF6U4QVqpFYFVj9KJJKyyJzPR7E_UJiZQisjcGuEn2BoXqvPEWSHgwrarPXH8RwpQec4bevyo9pBEqcmB2d-0rGy_D_O1KA?width=1345&height=662&cropmode=none) diff --git a/assets/githublogo.png b/assets/githublogo.png new file mode 100644 index 0000000..70fbe51 Binary files /dev/null and b/assets/githublogo.png differ diff --git a/assets/logo.png b/assets/logo.png index f026d21..48ceb76 100644 Binary files a/assets/logo.png and b/assets/logo.png differ diff --git a/assets/logo2.jpg b/assets/logo2.jpg new file mode 100644 index 0000000..a80298d Binary files /dev/null and b/assets/logo2.jpg differ diff --git a/assets/npm footer logo.PNG b/assets/npm footer logo.PNG new file mode 100644 index 0000000..3cde218 Binary files /dev/null and b/assets/npm footer logo.PNG differ diff --git a/assets/searchlogo.png b/assets/searchlogo.png new file mode 100644 index 0000000..66b32de Binary files /dev/null and b/assets/searchlogo.png differ diff --git a/index.html b/index.html index 9a3afe1..4d3942b 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,159 @@ + - Document + npm build amazing things + - +
+ npm logo + + + npm + is now a part of + GitHub + + + github logo +
+ + background + +
+ +
+ +
+ + logo2 +
+ + + + + +
+
+ +
+ 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. +
+ + +
+ 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 + + companies logos +
+ + + + background + + \ No newline at end of file diff --git a/style.css b/style.css index e69de29..3419667 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,365 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins'); + +* { + padding: 0; + margin: 0; + +} + +body { + font-size: 10px; +} + +.npmheader { + display: flex; + font-family: 'Poppins'; + flex-direction: normal; + justify-content: center; + align-items: center; + background-color: #231f20; + color: white; + height: 80px; + +} + +.navbar { + border-bottom: 1px solid lightgray; +} + +.npmheader .firstanchor { + color: white; + font-size: 2.5em; +} + +nav span { + font-size: 1.5em; + font-weight: 400; + color: black; + font-family: 'Poppins'; + padding-left: 0; + margin-left: 0; +} + +.logo-text { + font-size: 1.5em; + font-weight: 400; + color: black; + font-family: 'Poppins'; + padding-left: 0; + margin-left: 0; + +} + +.nav-link { + text-decoration: none; + color: black; + cursor: pointer; + font-weight: 700; + font-size: 1.5em; + font-family: 'Poppins'; + +} + +.nav-link:hover { + color: grey; +} + + + +nav ul { + display: flex; + justify-content: space-between; + align-items: center; + list-style: none; + padding: 10px; +} + +nav ul li { + margin: 0 10px; + +} + +#npmlogo2 { + margin-left: 30px; + margin-top: 10px; +} + +#npmsearchlogo { + margin-top: 20px; + margin-right: 20px; +} + +.search { + width: 750px; + height: 50px; +} + +#searchbtn { + height: 50px; + width: 120px; + font-family: 'Poppins'; + background-color: #231f20; + color: white; + margin-left: 0; + font-weight: 700; +} + +#searchbtn:hover { + cursor: pointer; + +} + +#signupbtn { + height: 50px; + width: 120px; + font-family: 'Poppins'; + color: black; + font-weight: 700; + border: 2px solid grey; + margin-left: 20px; +} + +#signupbtn:hover { + color: grey; + cursor: pointer; +} + +#signinbtn { + height: 50px; + width: 120px; + font-family: 'Poppins'; + color: black; + font-weight: 700; + border: 0 solid +} + +#signinbtn:hover { + color: grey; + cursor: pointer; +} + +.searchbar { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.banner1 { + margin-top: 20px; + background: url(./assets/background2.png); + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + color: white; + height: 800px; + font-family: 'Poppins'; + +} + +.banner1 .heading1 { + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 8em; + margin-top: 80px; + margin-left: 300px; + margin-right: 300px; + text-align: center; + color: white; +} + +.banner1 .para1 { + font-size: 1.5em; + font-family: Poppins; + font-weight: 400; + margin-left: 400px; + margin-right: 400px; + text-align: center; + color: white; +} + +.banner1 .heading2 { + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 4em; + + margin-left: 400px; + margin-right: 400px; + text-align: center; + color: white; +} + +.banner1 .para2 { + font-size: 1.5em; + font-family: Poppins; + font-weight: 400; + margin-left: 400px; + margin-right: 400px; + text-align: center; + color: white; +} + +.bubble1 { + margin-top: 30px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + color: #231f20; + height: 550px; + + +} + +.bubble1 .text1 { + font-family: 'Poppins'; + font-weight: bold; + font-size: 3.5em; + margin-left: 450px; + margin-right: 450px; + text-align: center; + color: #231f20; + +} + +.bubble1 .text2 { + font-size: 1.75em; + font-family: Poppins; + font-weight: 400; + margin-left: 400px; + margin-right: 400px; + text-align: center; + color: #231f20; +} + +.banner1 .btn1 { + width: 230px; + height: 60px; + background-color: #c12127; + color: white; + font-family: 'Poppins'; + border-bottom-color: orange; + border-right-color: black; + border-left-color: black; + border-top-color: black; + border-left-width: 0; + border-right-width: 0; + border-top-width: 0; + border-bottom-width: 5px; + font-weight: 900; + margin-bottom: 60px; + font-size: 1.5em; + cursor: pointer; + + +} + +.banner1 .btn2 { + margin-left: 20px; + width: 230px; + height: 60px; + font-weight: 900; + color: white; + background-color: #e81aa8; + border-bottom-color: #b30ad2; + border-right-color: black; + border-left-color: black; + border-top-color: black; + border-left-width: 0; + border-right-width: 0; + border-top-width: 0; + font-size: 1.5em; + border-bottom-width: 5px; + cursor: pointer; +} + +.open { + + margin-top: 100px; + background: url(./assets/background.png); + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + color: white; + height: 300px; + font-family: 'Poppins'; +} + +.open .open1 { + font-family: Poppins, sans-serif; + font-weight: 800; + font-size: 5em; + margin-top: 30px; + margin-left: 300px; + margin-right: 300px; + text-align: center; + color: white; +} + +.open .open2 { + font-size: 1.5em; + font-family: Poppins; + font-weight: 400; + margin-left: 400px; + margin-right: 400px; + margin-bottom: 50px; + text-align: center; + color: white; +} + +.companies { + margin-top: 50px; + margin-bottom: 50px; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + color: black; + height: 700px; + font-family: Poppins, sans-serif; +} + +.companies .grateful { + font-family: Poppins, sans-serif; + font-weight: 900; + font-size: 3.5em; + margin-top: 60px; + margin-bottom: 60px; + margin-left: 430px; + margin-right: 430px; + text-align: center; + color: #303030; +} + + +.footer1 { + margin-top: 180px; + margin-bottom: 50px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: baseline; + color: black; + height: 300px; + font-family: Poppins, sans-serif; +} + +.footer1 ul { + list-style: none; + font-size: 1.5em; + line-height: 3em; + margin-left: 0; +} + +.footer1 ul a { + text-decoration: none; + color: rgba(0, 0, 0, .7); +} + +.footer1 .headingfoot { + font-size: 1.75em; + color: #231f20; + font-weight: 900; +} \ No newline at end of file