Skip to content

Commit 74eefb4

Browse files
author
Ant-Quanique Dancy
committed
added styling to the page
1 parent e712938 commit 74eefb4

File tree

4 files changed

+296
-42
lines changed

4 files changed

+296
-42
lines changed

‎.DS_Store‎

6 KB
Binary file not shown.

‎starter-code/.DS_Store‎

4 KB
Binary file not shown.

‎starter-code/index.html‎

Lines changed: 75 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<title>npm</title>
8-
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="style.css" type="text/css">
99
</head>
1010
<body>
1111
<nav>
@@ -22,53 +22,86 @@
2222
</ul>
2323
</nav>
2424
<header>
25-
<img src="images/npm-logo.png" alt="npm-logo">
26-
<input type="text" name="search-box" value="find packages">
27-
<p><a href="signin.html">sign up</a> or <a href="login.html">login</a></p>
28-
<img src="images/bear-logo.png" alt="bear-logo">
29-
<h1> Build amazing things</h1>
30-
<p> npm is the package manager for JavaScript and the world's larges software registry.
31-
Discover the packages of resuable code - and assemble them in powerful new ways.
32-
</p>
25+
<div class="npm-logo col col-3">
26+
<img id="npm-logo" src="images/npm-logo.png" alt="npm-logo">
27+
</div>
28+
<div class="search-bar col col-3 col-middle">
29+
<input type="text" name="search-box" value="find packages">
30+
31+
</div>
32+
<div class="col col-3">
33+
<p><a href="signin.html">sign up</a> or <a href="login.html">login</a></p>
34+
<img id="bear-logo" src="images/bear-logo.png" alt="bear-logo">
35+
</div>
3336

34-
<button type="button"> <a href="signup.html">Sign up for npm</a></button>
35-
</header>
36-
<section>
37-
<img src="images/collaboration.svg" alt="collaboration">
38-
<h3> npm Orgs is powerful collaboration - for free</h3>
39-
<ul>
40-
<li> Encourage code discovery and re-use within teams</li>
41-
<li> Publish and control access to your own namespace</li>
42-
<li> Manage public and private code with the same workflow</li>
43-
</ul>
44-
<button type="button"><a href="signup.html">Sign up for Orgs</a></button>
45-
<p> or <a>Learn more about Orgs</a></p>
46-
</section>
47-
<section>
48-
<h3> What is npm? </h3>
49-
<p> Use npm to install, share, and distribute code; manage dependencies in your project; and share and receive feedback with others.</p>
50-
<button type="button"><a>Install npm</a></button>
51-
<h3> What can you make with 475,000 building blocks?</h3>
52-
<p>The nom registry hosts almost half a million packages for free, reusable code - the largest software registry in the world</p>
53-
<div>
54-
<img src="images/binoculars.svg" alt="binoculars">
55-
<h5> Find</h5>
56-
<p>Libraries like <a href="https://jquery.com/">JQuery</a>, <a href="https://getbootstrap.com/">Bootstrap</a>,
57-
<a href="https://reactjs.org/">React</a>, <a href="https://angular.io/">Angular</a>, and components
58-
from frameworks such as <a href="https://emberjs.com/">Ember</a>
37+
<div class="about-npm">
38+
<h1> Build amazing things</h1>
39+
<p> npm is the package manager for JavaScript and the world's larges software registry.
40+
Discover the packages of resuable code - and assemble them in powerful new ways.
5941
</p>
42+
43+
<button type="button"> <a href="signup.html">Sign up for npm</a></button>
44+
6045
</div>
61-
<div>
62-
<img src="images/mountain-flag.svg" alt="mountain-flag">
63-
<h5> Discover</h5>
64-
<p>Packages for mobile, IoT, front end, back end. robotics... everything you need to start building amazing things</p>
46+
</header>
47+
48+
<section id="collaboration">
49+
<div class="collaboration-image">
50+
<img src="images/collaboration.svg" alt="collaboration">
51+
6552
</div>
66-
<div>
67-
<img src="images/backpack.svg" alt="backpack">
68-
<h5> Build</h5>
69-
<p> Assemble packages like building blocks to quickly develop awesome new projectz</p>
53+
54+
<div class="collaboration">
55+
<h3> npm Orgs is powerful collaboration - for free</h3>
56+
<ul>
57+
<li> Encourage code discovery and re-use within teams</li>
58+
<li> Publish and control access to your own namespace</li>
59+
<li> Manage public and private code with the same workflow</li>
60+
</ul>
61+
<button type="button"><a href="signup.html">Sign up for Orgs</a></button>
62+
<p> or <a>Learn more about Orgs</a></p>
7063
</div>
64+
<div class="clearfix"></div>
65+
</section>
66+
67+
<section id="npm">
68+
<div class="what-is-npm">
69+
<h1>What is npm?</h1>
70+
<p> Use npm to install, share, and distribute code; manage dependencies in your project; and share and receive feedback with others.</p>
71+
<button type="button"><a>Install npm</a></button>
72+
</div>
73+
<div class="clearfix"></div>
74+
</section>
7175

76+
<section id="building-blocks">
77+
<div class="building-blocks-header">
78+
<h1> What can you make with 475,000 building blocks?</h1>
79+
<p>The nom registry hosts almost half a million packages for free, reusable code - the largest software registry in the world</p>
80+
</div>
81+
82+
<div>
83+
<div class=" col col-3">
84+
<img src="images/binoculars.svg" alt="binoculars">
85+
<h3> Find</h3>
86+
<p>Libraries like <a href="https://jquery.com/">JQuery</a>, <a href="https://getbootstrap.com/">Bootstrap</a>,
87+
<a href="https://reactjs.org/">React</a>, <a href="https://angular.io/">Angular</a>, and components
88+
from frameworks such as <a href="https://emberjs.com/">Ember</a>
89+
</p>
90+
</div>
91+
<div class="col col-middle col-3">
92+
<img src="images/mountain-flag.svg" alt="mountain-flag">
93+
<h3> Discover</h3>
94+
<p>Packages for mobile, IoT, front end, back end. robotics... everything you need to start building amazing things</p>
95+
</div>
96+
<div class="col col-3">
97+
<img src="images/backpack.svg" alt="backpack">
98+
<h3> Build</h3>
99+
<p> Assemble packages like building blocks to quickly develop awesome new projectz</p>
100+
</div>
101+
</div>
102+
103+
<div class="clearfix"> </div>
104+
72105
</section>
73106

74107
</body>

‎starter-code/style.css‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
/* styling for the nav bar */
2+
nav {
3+
background-color: #C12127;
4+
color: rgba(255,255,255,0.8);
5+
padding: 0 20px;
6+
height: 50px;
7+
margin: 0;
8+
}
9+
10+
nav a {
11+
color: rgba(255,255,255,0.8);
12+
text-decoration: none;
13+
}
14+
15+
.top-links {
16+
display: inline-block;
17+
float: right;
18+
padding: 0;
19+
margin: 0 20px 0 0;
20+
21+
22+
}
23+
24+
.top-links li {
25+
display: inline-block;
26+
margin: 0 10px;
27+
vertical-align: baseline;
28+
padding-top:10px;
29+
font-size: 16px;
30+
}
31+
32+
33+
.heart{
34+
margin: 20px;
35+
}
36+
37+
38+
.acronym {
39+
padding-left: 10px;
40+
}
41+
42+
.top-left{
43+
padding-top:10px;
44+
padding-left: 15px;
45+
float: left;
46+
font-size: 16px;
47+
}
48+
49+
/* Header styling*/
50+
header {
51+
height: 500px;
52+
background-color: rgb(32,101,136);
53+
color: white;
54+
padding: 0 0 35px 0;
55+
margin: 0 auto;
56+
background-image: url(images/city-scape.svg);
57+
background-size: cover;
58+
align-items: center;
59+
}
60+
61+
.search-bar {
62+
padding: 0 0 0 15px;
63+
padding: 0 5px;
64+
}
65+
66+
.search-bar input {
67+
background-color: rgb(31, 82, 111);
68+
color: gray;
69+
width: 800px;
70+
height: 40px;
71+
font-size: 16px;
72+
border: 1px solid rgb(31, 82, 111);
73+
}
74+
.search-bar p a {
75+
text-decoration: none;
76+
color: white;
77+
}
78+
79+
#bear-logo {
80+
float: right;
81+
82+
}
83+
84+
#npm-logo {
85+
float: left;
86+
}
87+
88+
.about-npm{
89+
width: 30%;
90+
margin: 0 auto;
91+
padding: 15px 40px 40px 200px;
92+
float:left;
93+
text-align: left;
94+
margin-top: 125px;
95+
}
96+
97+
98+
99+
#city-scape {
100+
float: right;
101+
102+
}
103+
104+
105+
106+
.about-npm button {
107+
background-color: rgb(240, 146, 51);
108+
}
109+
110+
.about-npm button a {
111+
text-decoration: none;
112+
color: white;
113+
}
114+
115+
/* collaboration section */
116+
117+
#collaboration {
118+
margin: 0 auto;
119+
color: white;
120+
background-color: rgb(39,53,71);
121+
height: 200px;
122+
123+
}
124+
.collaboration-image {
125+
width: 30%;
126+
float: left;
127+
margin-bottom: 0px;
128+
129+
}
130+
131+
.collaboration {
132+
width: 30%;
133+
float: right;
134+
135+
}
136+
137+
.collaboration button{
138+
background-color: rgb(203, 56, 55);
139+
}
140+
141+
.collaboration button a {
142+
text-decoration: none;
143+
color: white;
144+
}
145+
146+
147+
/* what is npm section */
148+
149+
#npm {
150+
background-image: url(images/forklift.svg);
151+
background-size: cover;
152+
height: 500px;
153+
position: relative;
154+
color: white;
155+
}
156+
.what-is-npm {
157+
padding: 60px 40px 40px 100px;
158+
float:left;
159+
text-align: left;
160+
color:white;
161+
margin-top: 125px;
162+
width: 30%;
163+
position: absolute;
164+
165+
}
166+
167+
.what-is-npm button{
168+
background-color: rgb(49,68,88);
169+
}
170+
171+
.what-is-npm button a {
172+
text-decoration: none;
173+
color: white;
174+
}
175+
176+
177+
/* what can you make section */
178+
179+
#building-blocks {
180+
background-color: white;
181+
height: 300px;
182+
margin: 0 auto;
183+
}
184+
185+
.building-blocks-header {
186+
margin: 0 auto;
187+
text-align: center;
188+
color: rgb(83, 88, 98);
189+
padding-top: 20px;
190+
}
191+
192+
.building-blocks-header h1 {
193+
color: rgb(83, 88, 98);
194+
}
195+
196+
#building-blocks p a {
197+
color: rgb(208, 74, 73);
198+
}
199+
200+
#building-blocks p {
201+
color: rgb(135, 145, 156);
202+
}
203+
204+
#building-blocks h3 {
205+
color: rgb(83, 88, 98);
206+
}
207+
.col {
208+
float: left;
209+
}
210+
.col-3 {
211+
width: 30%;
212+
margin: 0 auto;
213+
}
214+
215+
.col-middle {
216+
margin: 0 5% 0 5%;
217+
}
218+
219+
.clearfix {
220+
clear: both;
221+
}

0 commit comments

Comments
 (0)