From d90a4cd63cb19c73a35a50e8cf9c0cd55df126ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CAlexis?= Date: Wed, 1 Jan 2020 15:42:35 -0500 Subject: [PATCH] updating index.html ,creating style.css plus styles needed --- starter-code/index.html | 107 +++++++++++++- starter-code/style.css | 312 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 418 insertions(+), 1 deletion(-) create mode 100644 starter-code/style.css diff --git a/starter-code/index.html b/starter-code/index.html index 0a7febf..6cb670b 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -4,9 +4,114 @@ + npm - +
+
+
+ +
+ +
+ npm logo +
+ + + +
+ + +
+ +
+
+

Build amazing things

+

npm is the package manager for Javascript and the world's largest software registry. Discover packages of reusable code -- and assemble them in powerful new ways.

+ Sign up for npm +
+
+
+ +
+
+
+ collaboration +
+
+

npm Orgs is powerful collaboration -- for free

+
    +
  • Encourage code discovery and re-use within teams
    • +
  • Publish and control access to your own namespace
    • +
  • Manage public and private code with the same workflow
    • +
+ + Sign up for Orgs + +

or, Learn more about Orgs

+
+
+
+ + +
+
+

What is npm?

+

Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.

+ Install npm +
+
+ + +
+

What can you make with 475,000 building blocks?

+

+ The npm registry hosts almost half a million packages of free, reusable code -- the largest software registry in the world. +

+
+ + + +
+ flag +

Discover

+

+ Packages for mobile, IoT, front end, back end, robotics...everything you need to start building amazing things. +

+
+ +
+ backpack +

Build

+

+ Assemble packages like building blocks to quickly develop awesome new projects. +

+
+
+ + +
diff --git a/starter-code/style.css b/starter-code/style.css new file mode 100644 index 0000000..5e0801f --- /dev/null +++ b/starter-code/style.css @@ -0,0 +1,312 @@ +html body { + margin:0 auto; + font-family: Arial, Helvetica, sans-serif; +} + + +/* HEADING STYLES */ + +h1 { + font-size: 3.5em; + font-weight: bold; +} + +h2 { + font-size: 2.5em; + margin:0; +} +/* NAV BAR STYLES */ +nav { + background-color: #C12127; + color: rgba(255,255,255,0.8); + padding-top: 5px; + padding-bottom:5px; + padding-left:10px; + /*height: 100px;*/ + width:100%; + height:30px; + font-size:12px; + display:flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; + } + +nav a { + color: rgba(255,255,255,0.8); + text-decoration: none; + } + + +header .headerlinks { + display: flex; + justify-content: space-between; + align-items: center; +} + +.top-links { + display: inline-block; + float: right; + padding: 0; + margin: 0 20px 0 0; + } + +.top-links li { + display: inline-block; + margin: 0 10px; + } + +.heart { + margin-right: 10px; +} + +/* HEADER STYLES */ +header { + background-color: rgb(32, 101, 136); + height: 600px; + background-image: url(images/city-scape.svg); + background-size: cover; +} + +header a { + color:white; + text-decoration: none; +} + +.lower-header { + display: flex; + flex-flow: row nowrap; + justify-content: space-evenly; + padding: 10px 0 10px 0; +} + +.lower-header li { + display: inline-block; +} + +#lower-header-image1 { + width:7%; + height:7%; +} + +#lower-header-image2 { + width:20%; + height:20%; + position:relative; + top:5px; +} + +/*SEARCH BAR */ + +form input { + background-color: rgb(31, 82, 111); + color:white; + width:1000px; + height:30px; +} + +#button-color { + background-color: rgb(31, 82, 111); + border:grey solid 1px; + height:36px; + position: relative; + right:10px; +} + +.lower-header-ul-styles { + position: relative; + bottom:10px; +} + +.lower-header-ul-styles li { + color:white; +} + +/* TEXT AND IMAGE PART OF THE LOWER HEADER */ + +.headerdiv { + color: white; + /*width: 1000px;*/ + +} + +.headerdiv a { + background-color: rgb(240, 146, 51); + padding: 20px 30px; + border-radius:40px; + margin-top: 20px; + position: relative; + top:40px; +} + +.headerdiv p { + margin: 20px 0px; + font-size: 1.3em; +} + +.headerdiv article { + margin: 0 auto; + text-align: left; + width:700px; + position: relative; + right:200px; + top:10px; + +} + +/* SECTION 1 STYLES */ + +#section1 { + background-color: rgb(39, 53, 71); + color: white; + margin-top: 0px; + height:600px; + +} + +#section1 a { + text-decoration: none; + color: white; + font-weight: 800; + +} + +.section-flex { + display: flex; + padding-top: 7%; + +} + +#section1 article { + width: 500px; + float: right; + display: flex; + flex-direction: column; + justify-content: center; + align-items: left; + position: relative; + right: 100px; + +} + +#collab-pic { + width:600px; + display: inline-block; + margin: auto; + +} + +#section1 h2 { + line-height: 1.2em; +} + +#section1 ul > li { + line-height: 2em; +} + +#section1 h2, li, p { + font-weight: 100; +} + +.section1-button { + background-color: rgb(203, 56, 55); + padding: 20px 30px; + border-radius:40px; + width:140px; + text-align: center; + +} + +/*SECTION 2 STYLES*/ + +#section2 { + background-color: rgb(32, 101, 136); + height: 600px; + background-image: url(images/forklift.svg); + background-size: cover; + position: relative; +} + +#section2 h3 { + font-size: 2.5em; + font-weight: 100; + margin:0; +} + +.container { + margin: 0 auto; + width:400px; + color:white; + position: absolute; + top: 150px; + left:200px; +} + +.container p { + line-height: 1.2em; +} + +#link-btn { + background-color: rgb(49, 68, 88); + padding: 20px 30px; + border-radius:40px; + position: relative; + top:20px; +} + +#section2 a { + color:white; + text-decoration: none; +} + +/* SECTION 3 STYLES */ + +#section3 { + height:600px; + +} + +#section3 a { + color: rgb(208, 74, 73); + text-decoration: none; +} + +#section3 > div { + display:flex; + justify-content:space-evenly; +} + +#section3 > div > article { + display:flex; + flex-direction:column; + align-items:center; + width:33%; + +} + + +#section3 h2 { + margin-top: 150px; + text-align: center; + font-weight: 100; + color:rgb(83, 88, 98); + +} + +#section3 > div > article > p{ + width:50%; + text-align:center; +} + +#text-align { + text-align: center; +} + +.grey-text { + color: rgb(135, 145, 156); +} + +#section3 > p { + line-height:5rem; +} +