HTML-CSSModuleExcercise/index.html at master · soniameller/HTML-CSSModuleExcercise · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
?><!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="/Users/soniameller/code/HTML & CSS Module Exercise/lab-html-module-exercise-master/starter-code/styles.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>npm</title>
</head>
<body>

 <nav>
  <div class="top-left">
    <a class = "heart" href="#">♥︎</a>
    <span class="acronym">Neophobe Plebeian Mumpsimus</span>
  </div>
  <ul class="top-links">
    <li><a href="#">npm Enterprise</a></li>
    <li><a href="#">features</a></li>
    <li><a href="#">pricing</a></li>
    <li><a href="#">documentation</a></li>
    <li><a href="#">support</a></li>
  </ul>
</nav>

<header>
  <div>
    <img class="col left" src="/Users/soniameller/code/HTML & CSS Module Exercise/lab-html-module-exercise-master/starter-code/images/npm-logo.png" alt="npm-logo">
    <form class="col left">
      <input class="search bar" type="text" placeholder="Find packages"></input>
      <button type="submit" class="search search-button"></button>
    </form>
    <img class="col right" src="/Users/soniameller/code/HTML & CSS Module Exercise/lab-html-module-exercise-master/starter-code/images/bear-logo.png" alt="bear-logo">
    <p class="col right"><a class="login-item" href="#">sign up<a class="login-item"> or <a class="login-item" href="#">login</a></p>
  </div>

  <div class="clearfix"></div>

  <article class= "colors left">
    <h1>Build amazing things</h1>
    <p> 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.</p>
    <button class="orange button">Sign up for npm</button>
  </article>

  <!--<img src="/Users/soniameller/code/HTML & CSS Module Exercise/lab-html-module-exercise-master/starter-code/images/city-scape.svg" alt="city-background">-->

</header>

<section id="section-1" class="dark-blue">

  <img class="collaboration-img left"src= "/Users/soniameller/code/HTML & CSS Module Exercise/lab-html-module-exercise-master/starter-code/images/collaboration.svg" alt="collaboration">
  <div class="right middle-align">
    <h2>npm Orgs is powerful collaboration -- for free</h2>
    <ul>
      <li>Encourage code discovery and re-use within teams</li>
      <li>Publish and control acces to your own namespace</li>
      <li>Manage public and private code with the same workflow</li>
    </ul>
    <button class="red button">Sign up for Orgs</button>
    <p>or<a href="#"> Learn about Orgs</a></p>
  </div>

<div class="clearfix"></div>

</section>

<section id="section-2" style="background: url('/Users/soniameller/code/HTML & CSS Module Exercise/lab-html-module-exercise-master/starter-code/images/forklift.svg');">
  <div>
    <article class="new-width">
      <h2>What is npm?</h2>
      <p>Use npm to install, share, and distribute code; manage dependencies in your project; and share & recieve feedback with others.</p>
      <button class="gray button">Install npm</button>
    </article>
  </div>
</section>

<section id="section-3">

  <div class="center">
    <h3 class="dark-gray">What can you make with 700,000 building blocks?</h3>
    <p>The npm registry hosts almost half a million free, reusable code - the largest software registry in the world</p>
  </div>

  <div class="icons">
    <img src="/Users/soniameller/code/HTML & CSS Module Exercise/lab-html-module-exercise-master/starter-code/images/binoculars.svg">
    <h4>Find</h4>
    <p>Libraries like <a class="red-link" href="#">jQuery</a>,<a class="red-link" href="#">Bootstrap</a>, <a class="red-link" href="#">React</a>, and <a class="red-link" href="#">Angular</a> and components from frameworks such as <a class="red-link" href="#">Ember</a>.</p>
  </div>

  <div class="icons">
    <img src="/Users/soniameller/code/HTML & CSS Module Exercise/lab-html-module-exercise-master/starter-code/images/mountain-flag.svg">
    <h4>Discover</h4>
    <p>Packages for mobile, loT, front end, back end, robotics...everything you need to start building amazing things.</p>
  </div>

   <div class="icons">
    <img src="/Users/soniameller/code/HTML & CSS Module Exercise/lab-html-module-exercise-master/starter-code/images/backpack.svg">
    <h4>Build</h4>
    <p>Assemble packages like building blocks to quickly develop awsome new projects</p>
  </div>

</section>

</body>
</html>