Skip to content

Commit 526d77f

Browse files
brianwtaylorbrianwtaylor
authored
Merge pull request #54 from React-Proto/gh-pages
website
2 parents 0c26c35 + 083d1d4 commit 526d77f

File tree

3 files changed

+121
-45
lines changed

3 files changed

+121
-45
lines changed

‎docs/assets/react-proto-logo.png‎

223 KB
Loading

‎docs/index.html‎

Lines changed: 61 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,17 @@
1515
<body>
1616
<nav class="nav">
1717
<div class="nav-logo">
18-
<a href="#">Logo</a>
18+
<img src="./assets/react-proto-logo.png" alt="" srcset="">
1919
</div>
2020
<ul class="nav-list">
2121
<li class="nav-item">
22-
<a href="#" class="nav-link">About</a>
22+
<a href="#about" class="nav-link">About</a>
2323
</li>
2424
<li class="nav-item">
25-
<a href="#" class="nav-link">Team</a>
25+
<a href="#team" class="nav-link">Team</a>
2626
</li>
2727
<li class="nav-item">
28-
<a href="#" class="nav-link">Contact</a>
29-
</li>
30-
<li class="nav-item">
31-
<a href="https://github.com/CS-Eevee/react-proto" target="_blank">
28+
<a href="https://github.com/React-Proto/react-proto" target="_blank">
3229
<svg class="nav-icon">
3330
<use xlink:href="assets/sprites.svg#icon-github"></use>
3431
</svg>
@@ -42,24 +39,28 @@
4239
<h1 class="hero-title">React Proto</h1>
4340
<h3 class="hero-subtitle">React prototyping for designers and developers</h3>
4441
<div class="buttons">
45-
<button class="btn-primary hero-btn">Checkout our Github</button>
46-
<button class="btn-primary hero-btn">Download React Proto</button>
42+
<a href="https://github.com/React-Proto/react-proto">
43+
<button class="btn-primary hero-btn">Checkout our Github</button>
44+
</a>
45+
<a href="https://github.com/React-Proto/react-proto/releases">
46+
<button class="btn-primary hero-btn">Download React Proto</button>
47+
</a>
4748
</div>
4849
<div class="github-buttons">
4950
<!-- Place this tag where you want the button to render. -->
50-
<a class="github-button" href="https://github.com/CS-Eevee/react-proto" aria-label="Follow on GitHub">Follow</a>
51+
<a class="github-button" href="https://github.com/React-Proto/react-proto" aria-label="Follow on GitHub">Follow</a>
5152
<!-- Place this tag where you want the button to render. -->
52-
<a class="github-button" href="https://github.com/CS-Eevee/react-proto/" data-icon="octicon-eye" aria-label="Watch ntkme/github-buttons on GitHub">Watch</a>
53+
<a class="github-button" href="https://github.com/React-Proto/react-proto/" data-icon="octicon-eye" aria-label="Watch ntkme/github-buttons on GitHub">Watch</a>
5354
<!-- Place this tag where you want the button to render. -->
54-
<a class="github-button" href="https://github.com/CS-Eevee/react-proto/" data-icon="octicon-star" aria-label="Star ntkme/github-buttons on GitHub">Star</a>
55+
<a class="github-button" href="https://github.com/React-Proto/react-proto/" data-icon="octicon-star" aria-label="Star ntkme/github-buttons on GitHub">Star</a>
5556
</div>
5657
</div>
5758
<div class="hero-image">
5859
<img src="./assets/screen-shot-2.png" alt="" srcset="">
5960
</div>
6061
</section>
6162

62-
<section class="about">
63+
<section class="about" id="about">
6364
<div class="about-container">
6465
<div class="about-details">
6566
<div class="about-detail">
@@ -100,57 +101,75 @@ <h3 class="detail-title">Export Files</h3>
100101
</div>
101102
</section>
102103

103-
<section class="download">
104+
<section class="download" id="download">
104105
<h1 class="section-title">Download React Proto</h1>
105106
<div class="download-buttons">
106-
<button class="btn-primary">Download for Mac</button>
107-
<button class="btn-primary">Download for Windows</button>
107+
<a href="https://github.com/React-Proto/react-proto/releases">
108+
<button class="btn-primary">Download for Mac</button>
109+
</a>
110+
<a href="https://github.com/React-Proto/react-proto/releases">
111+
<button href="https://github.com/React-Proto/react-proto/releases" class="btn-primary">Download for Windows</button>
112+
</a>
108113
</div>
109114
</section>
110115

111-
<section class="team">
116+
<section class="team" id="team">
112117
<h1 class="section-title">Meet Our Team</h1>
113118
<div class="team-profiles">
114119
<div class="team-profile">
115-
<img class="team-image" src="./assets/LadyB-007.jpg" alt="" srcset="">
120+
<div class="team-images blessing">
121+
<!-- <img src="./assets/IMG-1710.jpeg" alt="" srcset=""> -->
122+
</div>
116123
<h5 class="team-name">Blessing Ebowe</h5>
117124
<div class="team-links">
118-
<svg class="team-icon">
119-
<use xlink:href="assets/sprites.svg#icon-github"></use>
120-
</svg>
121-
<svg class="team-icon">
122-
<use xlink:href="assets/sprites.svg#icon-linkedin"></use>
123-
</svg>
125+
<a href="https://github.com/refinedblessing" target="_blank">
126+
<svg class="team-icon">
127+
<use xlink:href="assets/sprites.svg#icon-github"></use>
128+
</svg>
129+
</a>
130+
<a href="https://www.linkedin.com/in/blessingebowe/" target="_blank">
131+
<svg class="team-icon">
132+
<use xlink:href="assets/sprites.svg#icon-linkedin"></use>
133+
</svg>
134+
</a>
124135
</div>
125136
</div>
126137

127138
<div class="team-profile">
128-
<div class="team-image">
129-
<img src="./assets/IMG-1710.jpeg" alt="" srcset="">
139+
<div class="team-images erik">
140+
<!-- <img src="./assets/IMG-1710.jpeg" alt="" srcset=""> -->
130141
</div>
131142
<h5 class="team-name">Erik Guntner</h5>
132143
<div class="team-links">
133-
<svg class="team-icon">
134-
<use xlink:href="assets/sprites.svg#icon-github"></use>
135-
</svg>
136-
<svg class="team-icon">
137-
<use xlink:href="assets/sprites.svg#icon-linkedin"></use>
138-
</svg>
144+
<a href="https://github.com/erikguntner" target="_blank">
145+
<svg class="team-icon">
146+
<use xlink:href="assets/sprites.svg#icon-github"></use>
147+
</svg>
148+
</a>
149+
<a href="https://www.linkedin.com/in/erik-guntner-9aa324b9/" target="_blank">
150+
<svg class="team-icon">
151+
<use xlink:href="assets/sprites.svg#icon-linkedin"></use>
152+
</svg>
153+
</a>
139154
</div>
140155
</div>
141156

142157
<div class="team-profile">
143-
<div class="team-image">
144-
<img src="./assets/BTPhoto.jpg" alt="" srcset="">
158+
<div class="team-images brian">
159+
<!-- <img src="./assets/BTPhoto.jpg" alt="" srcset=""> -->
145160
</div>
146-
<h5 class="team-name ">Brian Taylor</h5>
147-
<div class="team-links ">
148-
<svg class="team-icon ">
149-
<use xlink:href="assets/sprites.svg#icon-github "></use>
150-
</svg>
151-
<svg class="team-icon ">
152-
<use xlink:href="assets/sprites.svg#icon-linkedin "></use>
153-
</svg>
161+
<h5 class="team-name">Brian Taylor</h5>
162+
<div class="team-links">
163+
<a href="https://github.com/brianwtaylor" target="_blank">
164+
<svg class="team-icon ">
165+
<use xlink:href="assets/sprites.svg#icon-github "></use>
166+
</svg>
167+
</a>
168+
<a href="https://www.linkedin.com/in/brianwtaylor/" target="_blank">
169+
<svg class="team-icon">
170+
<use xlink:href="assets/sprites.svg#icon-linkedin"></use>
171+
</svg>
172+
</a>
154173
</div>
155174
</div>
156175
</div>

‎docs/style.css‎

Lines changed: 60 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ body {
8383
display: flex;
8484
padding: 2rem;
8585
justify-content: start;
86+
align-items: center;
8687
position: relative;
8788
background-color: var(--color-dary-grey-1);
8889
/* background-color: var(--color-primary); */
@@ -92,6 +93,12 @@ body {
9293
margin-right: auto;
9394
}
9495

96+
.nav-logo > img {
97+
98+
width: 4rem;
99+
height: 4rem;
100+
}
101+
95102
.nav-list {
96103
display: flex;
97104
list-style: none;
@@ -314,6 +321,7 @@ body {
314321
flex-direction: column;
315322
justify-content: center;
316323
align-items: center;
324+
padding: 4rem 0;
317325
margin-top: 2rem;
318326
}
319327

@@ -345,6 +353,35 @@ body {
345353
align-items: center;
346354
}
347355

356+
.team-profile:not(:last-child) {
357+
margin-right: 4rem;
358+
}
359+
360+
.erik {
361+
background-image: url(assets/IMG-1710.jpeg);
362+
}
363+
364+
365+
.brian {
366+
background-image: url(assets/BTPhoto.jpg);
367+
}
368+
369+
.blessing {
370+
background-image: url(assets/LadyB-007.jpg);
371+
}
372+
373+
.team-images {
374+
width: 30rem;
375+
height: 30rem;
376+
border-radius: 50%;
377+
background-size: cover;
378+
background-position: center;
379+
display: flex;
380+
flex: 1 1 auto;
381+
justify-content: center;
382+
align-items: center;
383+
}
384+
348385
.team-image img {
349386
width: 100%;
350387
}
@@ -355,9 +392,19 @@ body {
355392
}
356393

357394
.team-icon {
358-
height: 2rem;
359-
width: 2rem;
395+
height: 3rem;
396+
width: 3rem;
397+
transition: all .2s ease;
398+
margin-right: 1rem;
399+
}
360400

401+
.team-icon:hover {
402+
fill: var(--color-primary-light);
403+
}
404+
405+
406+
a {
407+
text-decoration: none;
361408
}
362409

363410
/* ********************************* */
@@ -375,6 +422,16 @@ body {
375422
}
376423
}
377424

425+
@media screen and (max-width: 800px) {
426+
.team-profiles {
427+
flex-direction: column;
428+
}
429+
430+
.team-profile:not(:last-child) {
431+
margin-bottom: 4rem;
432+
}
433+
}
434+
378435
@media screen and (max-width: 450px) {
379436

380437
.nav-item:not(:last-child) {
@@ -431,6 +488,6 @@ body {
431488
}
432489

433490
.team-profile:not(:last-child) {
434-
margin-bottom: 2rem;
491+
margin-bottom: 4rem;
435492
}
436493
}

0 commit comments

Comments
 (0)