From b34aebedf08f01d353abeddb9d35848463ed0cdf Mon Sep 17 00:00:00 2001 From: oscarmtzo Date: Wed, 14 Aug 2019 13:46:43 -0500 Subject: [PATCH 1/4] Part 1 div's --- starter-code/index.html | 59 +++++++++++++++++++++++++++++++++++++++++ starter-code/style.css | 48 +++++++++++++++++++++++++++++++++ 2 files changed, 107 insertions(+) create mode 100644 starter-code/style.css diff --git a/starter-code/index.html b/starter-code/index.html index 0a7febf..eadbc62 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -4,9 +4,68 @@ + npm +
+ +
+ +
+
+ npm-logo +
+
+ + +
+ + bear-logo +
+
+

Build amazing things

+

npm is the package manager for JavaScriptand the world's largest software registry. Discover packages for reusable code — and assemble them in powerfulnew ways.

+ +
+
+ collaboration +

npm Org is a powerful collaboration — free

+ +

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 from others.

+ +

What can you make with 475,000 building blocks?

+

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

+ binoculars +

Find

+

Libraries like JQuery, Bootstrap React and Angular, and components from frameworks such as Ember

+ mountain-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..0543c0c --- /dev/null +++ b/starter-code/style.css @@ -0,0 +1,48 @@ +*{ + font-size: 14px; + font-family: Arial, Helvetica, sans-serif; +} +body{ + margin: 0; +} +nav{ + + color: white; + background-color: red; + display: flex; + justify-content: space-between; +} +.nav{ + background-color:#216081; +} +.ul-nav, .ul-hdr { + list-style-type: none; + display: flex; +} +.a-ul, .a-hdr{ + text-decoration: none; + color: #ffffff; + margin-right: 10px; +} +ul{ + padding-inline-start: 20px; +} +.input-nav{ + background-color: rgb(27, 74, 101); +} +.srch-bar{ + width: 60vw; +} +.hdr-1{ + display: flex; + justify-content: space-between; + height: 3rem; + +} +.hdr{ + display: flex; +} +header{ + background-image: url('./images/city-scape.svg'); + height: 90vh; +} \ No newline at end of file From d043990a6a24cd115dc83a467a64c979634e8b24 Mon Sep 17 00:00:00 2001 From: oscarmtzo Date: Sat, 17 Aug 2019 10:08:23 -0500 Subject: [PATCH 2/4] main done --- starter-code/index.html | 62 ++++++++++++++++------------- starter-code/style.css | 88 +++++++++++++++++++++++++++++++++++++---- 2 files changed, 115 insertions(+), 35 deletions(-) diff --git a/starter-code/index.html b/starter-code/index.html index eadbc62..58485fe 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -9,27 +9,29 @@ -
- -
- +
+
+ +
- npm-logo -
-
+
+ npm-logo + +
+
-

Build amazing things

-

npm is the package manager for JavaScriptand the world's largest software registry. Discover packages for reusable code — and assemble them in powerfulnew ways.

- +
+

Build amazing things

+

npm is the package manager for JavaScriptand the world's largest software registry. Discover packages for reusable code — and assemble them in powerfulnew ways.

+ +
- collaboration -

npm Org is a powerful collaboration — 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
    • -
-

or Learn more about Orgs

+
+ collaboration +
+

npm Org is a 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
    • +
+

or Learn more about Orgs

+
+

What is npm?

diff --git a/starter-code/style.css b/starter-code/style.css index 0543c0c..62435d4 100644 --- a/starter-code/style.css +++ b/starter-code/style.css @@ -1,16 +1,21 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); *{ font-size: 14px; - font-family: Arial, Helvetica, sans-serif; + font-family: Open Sans; } body{ margin: 0; } -nav{ - +nav{ color: white; background-color: red; display: flex; justify-content: space-between; + width: 100vw; + position: fixed; +} +.nig{ + margin-left: 15px; } .nav{ background-color:#216081; @@ -22,27 +27,94 @@ nav{ .a-ul, .a-hdr{ text-decoration: none; color: #ffffff; - margin-right: 10px; + margin-right: 15px; } ul{ - padding-inline-start: 20px; + padding-left: 0; } .input-nav{ background-color: rgb(27, 74, 101); + height: 4vh; } .srch-bar{ - width: 60vw; + width: 69vw; + height: 4vh; } .hdr-1{ display: flex; justify-content: space-between; - height: 3rem; + /* height: 3rem; */ + padding-top: 9vh; } +.hdr-srch{ + width: 85vw; + display: flex; +} +.form-hdr{ + margin-top: 1vh; + margin-left: 1vh; +} .hdr{ display: flex; } header{ background-image: url('./images/city-scape.svg'); - height: 90vh; + height: 100vh; + color: #ffffff; +} +h2{ + font-size: 4rem; + font-weight: 100; +} +.hdr-cont{ + display: flex; + flex-direction: column; + /* width: 100%; */ + justify-content: center; + padding: 0 10vw 0 10vw; +} +.p-hdr{ + margin: 0 0 5rem 0; + padding: 0 20vw 0 0; +} +.btn-hdr{ + height: 3rem; + width: 12rem; + border-radius: 20px; + background-color: #EF9133; + color: #ffffff; + font-size: 1.2rem; +} +main{ + background-color: #2A333D; + height: 93vh; +} +.ul-main{ + list-style: circle; +} +.img-main{ + height: 64vh; +} +.main-cont{ + display: flex; + /* align-items: center; */ + justify-content: center; + align-items: center; + padding: 10% 0 10% 8%; +} +.main-p{ + color: #ffffff; + padding: 0 0 0 6%; +} +.main-h3{ + font-size: 2.5rem; +} +.btn-main{ + height: 3rem; + width: 12rem; + border-radius: 20px; + background-color: red; + color: #ffffff; + font-size: 1.2rem; } \ No newline at end of file From cfda3479bba6a484ebf8db62ab947ca3b8706cee Mon Sep 17 00:00:00 2001 From: oscarmtzo Date: Sat, 17 Aug 2019 11:23:53 -0500 Subject: [PATCH 3/4] done --- starter-code/index.html | 43 +++++++++++++++++++++++----------- starter-code/style.css | 51 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 80 insertions(+), 14 deletions(-) diff --git a/starter-code/index.html b/starter-code/index.html index 58485fe..a934bc8 100644 --- a/starter-code/index.html +++ b/starter-code/index.html @@ -45,6 +45,7 @@

Build amazing things

+
collaboration @@ -59,21 +60,35 @@

npm Org is a powerful collaboration — for free

+
-

What is npm?

-

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

- -

What can you make with 475,000 building blocks?

-

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

- binoculars -

Find

-

Libraries like JQuery, Bootstrap React and Angular, and components from frameworks such as Ember

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

+
+

What is npm?

+

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

+ +
+ +
+

What can you make with 475,000 building blocks?

+

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

+
+
+ binoculars +

Find

+

Libraries like JQuery, Bootstrap React and Angular, and components from frameworks such as Ember

+
+
+ mountain-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 index 62435d4..dec0b0c 100644 --- a/starter-code/style.css +++ b/starter-code/style.css @@ -117,4 +117,55 @@ main{ background-color: red; color: #ffffff; font-size: 1.2rem; +} +section{ + background-image: url('./images/forklift.svg'); + height: 94vh; + color: #ffffff; +} +.section-h3{ + margin-top: 0; + font-size: 2.5rem; +} +.section{ + padding: 15vh 65vh 0 10vh; +} +.btn-section{ + height: 3rem; + width: 12rem; + border-radius: 20px; + background-color: #2A333D; + color: #ffffff; + font-size: 1.2rem; +} +footer{ + height: 94vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0 10vh; + color: #2A333D; +} +.footer{ + display: flex; + padding: 10vh 0; +} +.ftr-h3{ + font-size: 2.5rem; + padding: 0 0 2vh 0; + margin: 0; +} +.ftr-subt{ + font-size: 1.2rem; +} +.find, .discover, .build { + display: flex; + flex-direction: column; + align-items: center; + padding: 0 2vh; +} +.ftr-a{ + color: red; + text-decoration: none; } \ No newline at end of file From dd461f790ead526e3a815dcf499e39a39e22ed1f Mon Sep 17 00:00:00 2001 From: Oscar Martinez de la O Date: Tue, 9 Jun 2020 04:38:33 +0000 Subject: [PATCH 4/4] Up to header --- {starter-code/images => images}/backpack.svg | 0 {starter-code/images => images}/bear-logo.png | Bin .../images => images}/binoculars.svg | 0 .../buildings-and-billboard.png | Bin .../images => images}/city-scape.svg | 0 .../images => images}/collaboration.svg | 0 {starter-code/images => images}/forklift.svg | 0 .../mountain-climbing-bears.svg | 0 .../images => images}/mountain-flag.svg | 0 {starter-code/images => images}/npm-logo.png | Bin {starter-code/images => images}/red-car.png | Bin index.html | 80 +++++ readme.md | 281 ------------------ starter-code/index.html | 94 ------ starter-code/style.css | 171 ----------- style.css | 35 +++ 16 files changed, 115 insertions(+), 546 deletions(-) rename {starter-code/images => images}/backpack.svg (100%) rename {starter-code/images => images}/bear-logo.png (100%) rename {starter-code/images => images}/binoculars.svg (100%) rename {starter-code/images => images}/buildings-and-billboard.png (100%) rename {starter-code/images => images}/city-scape.svg (100%) rename {starter-code/images => images}/collaboration.svg (100%) rename {starter-code/images => images}/forklift.svg (100%) rename {starter-code/images => images}/mountain-climbing-bears.svg (100%) rename {starter-code/images => images}/mountain-flag.svg (100%) rename {starter-code/images => images}/npm-logo.png (100%) rename {starter-code/images => images}/red-car.png (100%) create mode 100644 index.html delete mode 100644 readme.md delete mode 100644 starter-code/index.html delete mode 100644 starter-code/style.css create mode 100644 style.css diff --git a/starter-code/images/backpack.svg b/images/backpack.svg similarity index 100% rename from starter-code/images/backpack.svg rename to images/backpack.svg diff --git a/starter-code/images/bear-logo.png b/images/bear-logo.png similarity index 100% rename from starter-code/images/bear-logo.png rename to images/bear-logo.png diff --git a/starter-code/images/binoculars.svg b/images/binoculars.svg similarity index 100% rename from starter-code/images/binoculars.svg rename to images/binoculars.svg diff --git a/starter-code/images/buildings-and-billboard.png b/images/buildings-and-billboard.png similarity index 100% rename from starter-code/images/buildings-and-billboard.png rename to images/buildings-and-billboard.png diff --git a/starter-code/images/city-scape.svg b/images/city-scape.svg similarity index 100% rename from starter-code/images/city-scape.svg rename to images/city-scape.svg diff --git a/starter-code/images/collaboration.svg b/images/collaboration.svg similarity index 100% rename from starter-code/images/collaboration.svg rename to images/collaboration.svg diff --git a/starter-code/images/forklift.svg b/images/forklift.svg similarity index 100% rename from starter-code/images/forklift.svg rename to images/forklift.svg diff --git a/starter-code/images/mountain-climbing-bears.svg b/images/mountain-climbing-bears.svg similarity index 100% rename from starter-code/images/mountain-climbing-bears.svg rename to images/mountain-climbing-bears.svg diff --git a/starter-code/images/mountain-flag.svg b/images/mountain-flag.svg similarity index 100% rename from starter-code/images/mountain-flag.svg rename to images/mountain-flag.svg diff --git a/starter-code/images/npm-logo.png b/images/npm-logo.png similarity index 100% rename from starter-code/images/npm-logo.png rename to images/npm-logo.png diff --git a/starter-code/images/red-car.png b/images/red-car.png similarity index 100% rename from starter-code/images/red-car.png rename to images/red-car.png diff --git a/index.html b/index.html new file mode 100644 index 0000000..0a46b3c --- /dev/null +++ b/index.html @@ -0,0 +1,80 @@ +3 + + + + + + + npm + + + + +
+
+ + + + +
+
+

Build amazing things

+ +

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

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

npm Orgs is powerful collaboration -- for free

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

or, Learn more about Orgs

+
+ +
+

What is npm?

+

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

+ Install npm +
+ +
+

What is npm?

+

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

+
+ +

Find

+

Libraries like JQuery, Bootstrap, React, and Angular, and components from frameworks such as Ember.

+
+
+ +

Discover

+

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

+
+
+ +

Buid

+

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

+
+
+ + diff --git a/readme.md b/readme.md deleted file mode 100644 index dd3d308..0000000 --- a/readme.md +++ /dev/null @@ -1,281 +0,0 @@ -![Ironhack Logo](https://i.imgur.com/1QgrNNw.png) - -# Module Exercise: HTML & CSS - -## Learning Goals - -In this exercise you will be able to apply all the concepts you've just learned, such as: - -- using different HTML tags, -- structuring your HTML page with **block elements**, and -- adding content to your HTML page with **inline elements**. - -## Getting started - -- Click on the button "Clone or download" and a window will appear: -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e1d537a0f12e005606bc1fae2277bb70.jpeg) -- **Click the button "Download as zip"** - - -## Instructions - -### Introduction - -In this exercise, you will clone one of the previous versions of the landing page of **NPM website**. NPM is a package manager for NodeJS, and you will be using it heavily throughout this course. - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_66957e0bffb5e59c6b1713c489323168.png) - - -You can see the larger version of this picture [here](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_66957e0bffb5e59c6b1713c489323168.png). If you're struggling to see the details, feel free to zoom in to 200%. -Just by taking a look to this picture, we can conclude that we will have to apply quite a few styles on our web page: different background colors, font weight (bold, normal), and elements being positioned very deliberately with CSS. - -We will devide our work into two parts: -- part I - create web page with no styles, just add HTML elements -- part II - add styles and make it perfect 😌 - -So let's get started! - - -### Starter Code - -The `starter-code` folder contains an `index.html` file with the main structure already created. We provided the `images` folder with all the images necessary to successfully finish the exercise. - -### Part I - the pure HTML (no styles applied) - -This is kind of our goal 🙃: -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_fb961b15cf7fcd5867273a3e77d3a0cf.png) - -The most difficult part of this exercise is deciding how to structure the page and picking the correct *semantic* tags for the job. Picking the right semantic tags will make your job easier in the next exercise when it comes time to styling. - -Our recommendation is to try to keep it simple. Try to identify the different sections, and add `id`'s or `classes` to each `
`, `
`, `
    `, or `
    ` block elements to identify these elements: - - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_ca5d8ed98c9fb2a2bb25e7cb38c1578d.png) - -You can view a larger version of this picture [here](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_ca5d8ed98c9fb2a2bb25e7cb38c1578d.png). - -#### HTML 1 | Nav & Header -Your task in this iteration will be to create the `nav` and `header`, which are the first two sections of the page. - -**Example** - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_689037695dcb47e060b94a695af8b9f1.png) - -We could try to represent this navigation bar as follows: - -```htmlmixed - -``` -Since there are no styles applied, our final result won't look like the one on the picture, but rather somewhat like this: - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7867a5c5ff21731593eac7c0692399c5.png) - -After the navigation bar, create the header (on the sectioned image, it's marked with white). When done, move to the next iteration 🚀 - -#### HTML 2 | Content Sections - -Take a look at the sectioned image one more time and you can see we have three sections below the header. Create `section` tags and give each of them `id`s so you can identify them easily. - -Fill in the content for each of these sections: lists, headings, paragraphs, divs, etc. - -**All images can be found in your `images` folder!** - -The final result should be similar to this: - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_ae419a271f480bd9f0b04e1038e68e46.png) -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_625bd4f1a833cf02d0d8ec2823aa5809.png) - -The time has come! We'll make it pretty! 🎨 - -### Part II - CSS/styles - -#### CSS 1 | Setup - -As you might recall, the first thing we have to do to add styles to our page is to create a `styles.css` file and link it to our `index.html`. - -So let's begin by creating a new file, in the same folder as our HTML file, and name it `styles.css` - -Then, we need to add the following line to the `` of our HTML file: - -```htmlmixed - -``` - -Now we are ready to start adding some styles to our page. - -**Hint**: You might want to consider adding the following line to your CSS, just to confirm that you have linked it correctly: - -```css -body{ - background-color: red; -} -``` -If you the changes you just made in your `styles.ccs` file and refresh your browser, the whole page should turn red. If this happens, you know that you have linked the CSS file correctly. (*You can delete that from your CSS once you have confirmed it's working.*) :wink: - - -#### CSS 2 | The Navbar - -In the first part of this exercise, you created the navbar and it looks like this: - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7867a5c5ff21731593eac7c0692399c5.png) - -Right now, we are going to add some CSS to make it look a little more like this: - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_689037695dcb47e060b94a695af8b9f1.png) - -The first thing we notice is that the navbar has a *red background* and the *text inside the nav* is *white*. - -Furthermore, all the words/phrases on the right side of the nav are links, but they are all white as well, and they are not underlined. And as we said, they are on the right side :smile: -This positioning has to be done through CSS as well. - -This is our HTML: - -```htmlmixed - -``` - -And now we will add this to the `style.css` file: - -```css -nav { - background-color: #C12127; - color: rgba(255,255,255,0.8); - padding-top: 15px; - height: 100px; -} - -nav a { - color: rgba(255,255,255,0.8); - text-decoration: none; -} -``` - -This will make your `nav` having the right colors, but we still have a long way to go. The next thing that becomes obvious when we do this is that our list of links all fall on the left side, one on top of each other (why don't they go next to each other? 🤯 what type of element is an `
  • `? block or inline? 🤔). - -**Hint**: We also added a `height` property to the `nav`. This is just to make it easier to see while you are working on it, this is not meant to be interpreted as the correct height. - -In order to move the links where they need to go, we will `float` the `
      ` to the right and display all the links inside the list as `inline-block` elements, which give most of benefits of a block element, but allows them so "sit" next to each other. - -```css -.top-links { - display: inline-block; - float: right; - padding: 0; - margin: 0 20px 0 0; -} - -.top-links li { - display: inline-block; - margin: 0 10px; -} -``` - -Now our `nav` should look something like this: - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_dfe04b547a044dd725e790e04b2bdc5f.png) - -**Which property we should add to make the navbar look like the one on picture we clone?** - -Think about how you are going to change the vertical alighment of both sections. You might notice that the current font is not the right one but let that not stress you, try to find some that is similar. Later in the course you'll be able to get it when inspecting the page anyway. - - -#### CSS 3 | Header - -The header is composed of two seperate pieces: one with a search bar and logo, the other with some text content and a button. First, divide this section into halves using divs: - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_aecfece6e918c7ada45d206826ad504d.png) - -**Hints** - -- You can center the second `div` by giving it a width, and a `margin: 0 auto`. -- The image of a city next to "Build Amazing Things" can be floated right to position it to the side of the text content. - -**Colors** - -- **Font** - White -- **Button** - `rgb(240, 146, 51)` -- **Background** - `rgb(32, 101, 136)` -- **Search Bar Background** - `rgb(31, 82, 111)` - -#### CSS 4 | Collaboration Section - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_02e9ef3361b5fdc52e9e46b58ae72202.png) - -**Hints** - -- Wrap the content in a `div`, and give it either padding or a width and `margin: 0 auto` to center it. -- Float the div containing the heading, ul and button to the right of the image. - -**Colors** - -- **Font** - White -- **Background** - `rgb(39, 53, 71)` -- **Button** - `rgb(203, 56, 55)` - -#### CSS 5 | What is npm - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e18b75e8dff15d1392bf006a2b1d6e66.png) - - -**Hints** - -- The background of this section is actually an image ❗️ so use `background-size` property and set it to have value `cover` to have it cover the section. -- Use absolute positioning for the `div` containing the text. Remember, when you use absolute positioning you must position the `section` as *relative*. - -**Colors** - -- **Font** - White -- **Button** - `rgb(49, 68, 88)` - -#### CSS 6 | What can you make? - -![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_ff3f981a0a2e23c3270f42238fea37c6.png) - -This section is composed of 2 other sections: -- one containing a heading and text content, and --the other containing 3 sections, each with a logo, a bolded description, and some descriptive text. - -**Hints** - -- First, split the `section` into 2 divs, one containing the heading and "The npm registry hosts...", the other containing the three different logos & their descriptions. -- Once again, the content can be centered using either padding or `margin: 0 auto`. *There seems to be a pattern here* 🙃. Make a class for this and the other divs with a similar layout. -- Each `div` containing the logo should take approximately 33% (a third) of the parent's container. - -**Colors** - -- **Font: Heading** - `rgb(83, 88, 98)` -- **Font: Secondary / Paragraph text** - `rgb(135, 145, 156)` -- **Links** - `rgb(208, 74, 73)` -- **Background** - White - -## Summary - -In this exercise, you've built a clone of a piece of the npm home page. This site is very complexed so if you managed to make it look anything like the original, good job! 🏆 - -This concludes the HTML / CSS module. Next up is JavaScript, so get some rest, drink some coffee, and get ready to learn the muscles that make things move on a web page. - -Happy coding! :heart: diff --git a/starter-code/index.html b/starter-code/index.html deleted file mode 100644 index a934bc8..0000000 --- a/starter-code/index.html +++ /dev/null @@ -1,94 +0,0 @@ - - - - - - - - npm - - - - -
      -
      - -
      -
      -
      - npm-logo -
      - - -
      -
      -
      - - bear-logo -
      -
      -
      -

      Build amazing things

      -

      npm is the package manager for JavaScriptand the world's largest software registry. Discover packages for reusable code — and assemble them in powerfulnew ways.

      - -
      -
      - -
      -
      - collaboration -
      -

      npm Org is a 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
        • -
      -

      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 from others.

      - -
      -
      - - - - diff --git a/starter-code/style.css b/starter-code/style.css deleted file mode 100644 index dec0b0c..0000000 --- a/starter-code/style.css +++ /dev/null @@ -1,171 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); -*{ - font-size: 14px; - font-family: Open Sans; -} -body{ - margin: 0; -} -nav{ - color: white; - background-color: red; - display: flex; - justify-content: space-between; - width: 100vw; - position: fixed; -} -.nig{ - margin-left: 15px; -} -.nav{ - background-color:#216081; -} -.ul-nav, .ul-hdr { - list-style-type: none; - display: flex; -} -.a-ul, .a-hdr{ - text-decoration: none; - color: #ffffff; - margin-right: 15px; -} -ul{ - padding-left: 0; -} -.input-nav{ - background-color: rgb(27, 74, 101); - height: 4vh; -} -.srch-bar{ - width: 69vw; - height: 4vh; -} -.hdr-1{ - display: flex; - justify-content: space-between; - /* height: 3rem; */ - padding-top: 9vh; - -} -.hdr-srch{ - width: 85vw; - display: flex; -} -.form-hdr{ - margin-top: 1vh; - margin-left: 1vh; -} -.hdr{ - display: flex; -} -header{ - background-image: url('./images/city-scape.svg'); - height: 100vh; - color: #ffffff; -} -h2{ - font-size: 4rem; - font-weight: 100; -} -.hdr-cont{ - display: flex; - flex-direction: column; - /* width: 100%; */ - justify-content: center; - padding: 0 10vw 0 10vw; -} -.p-hdr{ - margin: 0 0 5rem 0; - padding: 0 20vw 0 0; -} -.btn-hdr{ - height: 3rem; - width: 12rem; - border-radius: 20px; - background-color: #EF9133; - color: #ffffff; - font-size: 1.2rem; -} -main{ - background-color: #2A333D; - height: 93vh; -} -.ul-main{ - list-style: circle; -} -.img-main{ - height: 64vh; -} -.main-cont{ - display: flex; - /* align-items: center; */ - justify-content: center; - align-items: center; - padding: 10% 0 10% 8%; -} -.main-p{ - color: #ffffff; - padding: 0 0 0 6%; -} -.main-h3{ - font-size: 2.5rem; -} -.btn-main{ - height: 3rem; - width: 12rem; - border-radius: 20px; - background-color: red; - color: #ffffff; - font-size: 1.2rem; -} -section{ - background-image: url('./images/forklift.svg'); - height: 94vh; - color: #ffffff; -} -.section-h3{ - margin-top: 0; - font-size: 2.5rem; -} -.section{ - padding: 15vh 65vh 0 10vh; -} -.btn-section{ - height: 3rem; - width: 12rem; - border-radius: 20px; - background-color: #2A333D; - color: #ffffff; - font-size: 1.2rem; -} -footer{ - height: 94vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 0 10vh; - color: #2A333D; -} -.footer{ - display: flex; - padding: 10vh 0; -} -.ftr-h3{ - font-size: 2.5rem; - padding: 0 0 2vh 0; - margin: 0; -} -.ftr-subt{ - font-size: 1.2rem; -} -.find, .discover, .build { - display: flex; - flex-direction: column; - align-items: center; - padding: 0 2vh; -} -.ftr-a{ - color: red; - text-decoration: none; -} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..862081f --- /dev/null +++ b/style.css @@ -0,0 +1,35 @@ +nav { + background-color: #C12127; + color: rgba(255, 255, 255, 0.802); + padding-top: 15px; + height: 30px; +} + +nav a { + color: rgba(255,255,255,0.8); + text-decoration: none; +} + +.top-links { + display: inline-block; + float: right; + padding: 0; + margin: 0 20px 0 0; +} + +.top-links li { + display: inline-block; + margin: 0 10px; +} + +.top-left { + float: left; +} + +.search-bar { + +} + +.hdr-h1 { + +} \ No newline at end of file