Skip to content

Commit ecc7d07

Browse files
author
techgurll
committed
peoples/section/rebased
1 parent b59605f commit ecc7d07

File tree

4 files changed

+165
-159
lines changed

4 files changed

+165
-159
lines changed

‎css/main.css‎

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1562,23 +1562,23 @@ u {
15621562
margin-left: 5rem; }
15631563
.grid .item1 {
15641564
margin-top: 24rem;
1565-
margin-left: 3rem; }
1565+
margin-left: 17rem; }
15661566
.grid .item2 {
15671567
margin-top: 19rem;
1568-
margin-left: -0.7rem; }
1568+
margin-left: 0.5rem; }
15691569
.grid .item3 {
1570-
margin-left: -15rem; }
1570+
margin-left: -17rem; }
15711571
.grid .item4 {
1572-
margin-left: 8rem; }
1572+
margin-left: 22rem; }
15731573
.grid .item5 {
15741574
margin-top: -11rem;
1575-
margin-left: -0.5rem; }
1575+
margin-left: 0.5rem; }
15761576
.grid .item6 {
15771577
margin-top: -11rem;
1578-
margin-left: 0.5rem; }
1578+
margin-left: -1.5rem; }
15791579

15801580
.item7 {
1581-
margin-left: 59rem;
1581+
margin-left: 73rem;
15821582
margin-top: -20rem; }
15831583

15841584
@media (max-width: 580px) {
@@ -1591,28 +1591,44 @@ u {
15911591
.peoples-media {
15921592
display: block; } }
15931593

1594-
.peoples-media-grid {
1594+
@media (max-width: 768px) {
1595+
.grid {
1596+
display: none; }
1597+
.item7 {
1598+
display: none; }
1599+
.footer-writeup {
1600+
display: none; }
1601+
.peoples-media {
1602+
display: block; } }
1603+
1604+
.peoples-media .peoples-media-writeup {
1605+
margin-top: 2rem;
1606+
margin-left: 15rem;
1607+
margin-bottom: 2.5rem; }
1608+
1609+
.peoples-media .peoples-media-grid {
15951610
display: grid;
15961611
grid-template-columns: repeat(3, 1fr);
15971612
margin-top: 2rem;
15981613
overflow: hidden; }
1599-
.peoples-media-grid .item-1-media {
1600-
margin-left: 4rem;
1614+
.peoples-media .peoples-media-grid .item-1-media {
1615+
margin-left: 12.5rem;
16011616
margin-top: 5rem; }
1602-
.peoples-media-grid .item-2-media {
1617+
.peoples-media .peoples-media-grid .item-2-media {
16031618
margin-top: 5rem; }
1604-
.peoples-media-grid .item-3-media {
1605-
margin-left: -2.5rem; }
1606-
.peoples-media-grid .item-4-media {
1607-
margin-left: 7rem; }
1608-
.peoples-media-grid .item-5-media {
1619+
.peoples-media .peoples-media-grid .item-3-media {
1620+
margin-left: -3rem;
1621+
margin-top: 0.5rem; }
1622+
.peoples-media .peoples-media-grid .item-4-media {
1623+
margin-left: 15.7rem; }
1624+
.peoples-media .peoples-media-grid .item-5-media {
16091625
margin-top: -3rem; }
1610-
.peoples-media-grid .item-6-media {
1626+
.peoples-media .peoples-media-grid .item-6-media {
16111627
margin-top: -3rem;
1612-
margin-right: 8rem; }
1628+
margin-right: 15rem; }
16131629

1614-
.item-7-media {
1615-
margin-left: 18.8rem;
1630+
.peoples-media .item-7-media {
1631+
margin-left: 27.2rem;
16161632
margin-top: -5rem; }
16171633

16181634
*,

‎pages/home.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@ <h1 class="mobileSection__header2">Know when to buy</h1>
7878
</div>
7979
</div>
8080

81+
82+
8183
<!--The Features Sections-->
8284

8385
<div class="container">

‎pages/people.html‎

Lines changed: 32 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -13,74 +13,48 @@
1313
<body class='people'>
1414
<div data-include='header'></div>
1515
<div class="footer-writeup">
16-
17-
<p style="margin-top:12rem;margin-left:10rem;">The people behind the bunny</p>
18-
<h1 style="margin-left:10rem;margin-top:1rem;">"Hopper is a culture of</br>makers.We build things"</h1>
19-
<p style="margin-left:10rem;margin-top:1rem;">Joost Owerenest, CTO</p>
20-
</div>
21-
<div class="grid">
22-
23-
24-
<div class="item1"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532778/samples/zainabs/g0c8l1h7sfbk7cfyo9uy.png" alt="" style="width:22rem;height:18rem;" ></div>
25-
26-
<div class="item2"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532821/samples/zainabs/a4719narskqef0vbc0p2.png" alt="" style="width:13rem;height:12rem;" ></div>
27-
<div class="item3"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532869/samples/zainabs/lsytskpvsc1bu1xnxswz.png" alt=""></div>
28-
29-
30-
31-
<div class="item4"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532789/samples/zainabs/vi3s3cjf7mywvkdqrxl6.png" alt="" style="width:17rem;height:15rem;" ></div>
32-
<div class="item5"> <img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532864/samples/zainabs/enxliolo9ot26neyb9jz.png" alt="" style="width:28rem;height:35rem;"></div>
33-
<div class="item6"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569432777/samples/new%20folder/b9gtf0pytjcj3sblgdux.png" alt="" style="width:16rem;height:15rem;"></div>
34-
35-
36-
</div>
37-
</div>
38-
<<<<<<< HEAD
39-
<div class="grid">
40-
41-
42-
<div class="item1"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532778/samples/zainabs/g0c8l1h7sfbk7cfyo9uy.png" alt="" style="width:22rem;height:18rem;" ></div>
43-
44-
<div class="item2"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532821/samples/zainabs/a4719narskqef0vbc0p2.png" alt="" style="width:13rem;height:12rem;" ></div>
45-
<div class="item3"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532869/samples/zainabs/lsytskpvsc1bu1xnxswz.png" alt=""></div>
4616

17+
<p style="margin-top:12rem;margin-left:15rem;">The people behind the bunny</p>
18+
<h1 style="margin-left:15rem;margin-top:1rem;">"Hopper is a culture of</br>makers.We build things"</h1>
19+
<p style="margin-left:15rem;margin-top:1rem;">Joost Owerenest, CTO</p>
20+
</div>
21+
<div class="grid">
4722

23+
<div class="item1"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532778/samples/zainabs/g0c8l1h7sfbk7cfyo9uy.png" alt="" style="width:22rem;height:18rem;"></div>
4824

49-
<div class="item4"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532789/samples/zainabs/vi3s3cjf7mywvkdqrxl6.png" alt="" style="width:17rem;height:15rem;" ></div>
50-
<div class="item5"> <img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532864/samples/zainabs/enxliolo9ot26neyb9jz.png" alt="" style="width:28rem;height:35rem;"></div>
51-
<div class="item6"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532884/samples/zainabs/a6xbpakvlngtgmmqtkap.png" alt="" style="width:16rem;height:15rem;"></div>
52-
53-
54-
</div>
55-
=======
56-
>>>>>>> 0239cb67bf7166b0bad456e0bf608f63290c18a0
57-
<div class="item7"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532802/samples/zainabs/xp42b9u1ml5uvwb3zlir.png" alt="" style="width:15rem;height:15rem;"></div>
25+
<div class="item2"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532821/samples/zainabs/a4719narskqef0vbc0p2.png" alt="" style="width:13rem;height:12rem;"></div>
26+
<div class="item3"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532869/samples/zainabs/lsytskpvsc1bu1xnxswz.png" alt=""></div>
5827

59-
<div class="peoples-media">
60-
<div style="margin-top:2rem;margin-left:7rem;margin-bottom:2.5rem;">
61-
<p>The people behind the bunny</p>
62-
<h1>"We dont want to </br>optimize; we want to </br>change the world."</h1>
63-
<p>Maggie,Product Designer.</p>
64-
</div>
28+
<div class="item4"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532789/samples/zainabs/vi3s3cjf7mywvkdqrxl6.png" alt="" style="width:17rem;height:15rem;"></div>
29+
<div class="item5"> <img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532864/samples/zainabs/enxliolo9ot26neyb9jz.png" alt="" style="width:28rem;height:35rem;"></div>
30+
<div class="item6"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569432777/samples/new%20folder/b9gtf0pytjcj3sblgdux.png" alt="" style="width:16rem;height:15rem;"></div>
6531

66-
<img style="margin-left:14rem;" src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569505351/samples/figma%20people/jmef88phxs49jjvphmil.png" alt="">
67-
<div class="peoples-media-grid">
68-
<div class="item-1-media"><img style="width:8rem;" src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504680/samples/figma%20people/wkqqdalk0c93agx7bk2a.png" alt=""></div>
69-
<div class="item-2-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504704/samples/figma%20people/iysfnyunmqvnyup9hjxr.png" alt=""></div>
70-
<div class="item-3-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504728/samples/figma%20people/abu6ierylfnsrzbceekn.png" alt=""></div>
71-
<div class="item-4-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504686/samples/figma%20people/gtsmpoclevpsjisubb9m.png" alt=""></div>
72-
<div class="item-5-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504715/samples/figma%20people/gmulenmtoxww8uvcxzyh.png" alt=""></div>
73-
<div class="item-6-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504737/samples/figma%20people/ywylzqftoy9nsrc6fvld.png" alt=""></div>
74-
75-
76-
</div>
32+
</div>
33+
<div class="item7"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532802/samples/zainabs/xp42b9u1ml5uvwb3zlir.png" alt="" style="width:15rem;height:15rem;"></div>
7734

35+
<div class="peoples-media">
36+
<div class="peoples-media-writeup">
37+
<p>The people behind the bunny</p>
38+
<h1>"We dont want to </br>optimize; we want to </br>change the world."</h1>
39+
<p>Maggie,Product Designer.</p>
40+
</div>
7841

79-
<div class="item-7-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504695/samples/figma%20people/fqz4qyaq13xiz9ogwhj1.png" alt=""></div>
42+
<img style="margin-left:22rem;" src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569505351/samples/figma%20people/jmef88phxs49jjvphmil.png" alt="">
43+
<div class="peoples-media-grid">
44+
<div class="item-1-media"><img style="width:8rem;" src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504680/samples/figma%20people/wkqqdalk0c93agx7bk2a.png" alt=""></div>
45+
<div class="item-2-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504704/samples/figma%20people/iysfnyunmqvnyup9hjxr.png" alt=""></div>
46+
<div class="item-3-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504728/samples/figma%20people/abu6ierylfnsrzbceekn.png" alt=""></div>
47+
<div class="item-4-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504686/samples/figma%20people/gtsmpoclevpsjisubb9m.png" alt=""></div>
48+
<div class="item-5-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504715/samples/figma%20people/gmulenmtoxww8uvcxzyh.png" alt=""></div>
49+
<div class="item-6-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504737/samples/figma%20people/ywylzqftoy9nsrc6fvld.png" alt=""></div>
8050

81-
</div>
51+
</div>
52+
53+
<div class="item-7-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504695/samples/figma%20people/fqz4qyaq13xiz9ogwhj1.png" alt=""></div>
8254

55+
</div>
8356

57+
8458
<div class="flex-container">
8559
<div id="flex-item-1">
8660
<h2>Assorted Hopper Humans</h2>

‎scss/pages/_people.scss‎

Lines changed: 95 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -7,98 +7,112 @@
77
}
88
}
99
}
10-
.peoples-media{
11-
display:none;
12-
}
13-
14-
.grid{
15-
display:grid;
16-
grid-template-columns: repeat(3,1fr);
17-
margin-top: -15rem;
18-
margin-left: 5rem;
19-
20-
.item1{
21-
margin-top:24rem;
22-
margin-left:3rem;
23-
}
2410

25-
.item2{
26-
margin-top:19rem;
27-
margin-left:-0.7rem;
11+
.peoples-media {
12+
display: none;
2813
}
2914

30-
.item3{
31-
margin-left: -15rem;
32-
}
33-
.item4{
34-
margin-left: 8rem;
35-
}
36-
37-
.item5{
38-
margin-top: -11rem;
39-
margin-left:-0.5rem;
40-
}
41-
42-
.item6{
43-
margin-top: -11rem;
44-
margin-left:0.5rem;
45-
46-
}
47-
48-
49-
15+
.grid {
16+
display: grid;
17+
grid-template-columns: repeat(3, 1fr);
18+
margin-top: -15rem;
19+
margin-left: 5rem;
20+
.item1 {
21+
margin-top: 24rem;
22+
margin-left: 17rem;
23+
}
24+
.item2 {
25+
margin-top: 19rem;
26+
margin-left: 0.5rem;
27+
}
28+
.item3 {
29+
margin-left: -17rem;
30+
}
31+
.item4 {
32+
margin-left: 22rem;
33+
}
34+
.item5 {
35+
margin-top: -11rem;
36+
margin-left: 0.5rem;
37+
}
38+
.item6 {
39+
margin-top: -11rem;
40+
margin-left: -1.5rem;
41+
}
5042
}
5143

52-
.item7{
53-
margin-left:59rem;
54-
margin-top: -20rem;
44+
.item7 {
45+
margin-left: 73rem;
46+
margin-top: -20rem;
5547
}
5648

57-
@media(max-width:580px){
58-
.grid{
59-
display:none;
60-
}
61-
.item7{
62-
display:none;
63-
}
64-
.footer-writeup{
65-
display:none;
66-
}
67-
.peoples-media{
68-
display:block;
69-
}
49+
@media(max-width:580px) {
50+
.grid {
51+
display: none;
52+
}
53+
.item7 {
54+
display: none;
55+
}
56+
.footer-writeup {
57+
display: none;
58+
}
59+
.peoples-media {
60+
display: block;
61+
}
7062
}
7163

72-
73-
.peoples-media-grid{
74-
display:grid;
75-
grid-template-columns: repeat(3,1fr);
76-
margin-top:2rem;
77-
overflow:hidden;
78-
.item-1-media{margin-left:4rem;
79-
margin-top:5rem;
80-
}
81-
.item-2-media{
82-
margin-top:5rem;
83-
}
84-
.item-3-media{margin-left:-2.5rem;
85-
}
86-
.item-4-media{margin-left:7rem;
87-
}
88-
.item-5-media{margin-top:-3rem;
89-
}
90-
.item-6-media{margin-top:-3rem;
91-
margin-right:8rem;
92-
}
93-
94-
95-
96-
64+
@media(max-width:768px) {
65+
.grid {
66+
display: none;
67+
}
68+
.item7 {
69+
display: none;
70+
}
71+
.footer-writeup {
72+
display: none;
73+
}
74+
.peoples-media {
75+
display: block;
76+
}
9777
}
9878

99-
.item-7-media{
100-
margin-left:18.8rem;
101-
margin-top:-5rem;
79+
.peoples-media {
80+
.peoples-media-writeup {
81+
margin-top: 2rem;
82+
margin-left: 15rem;
83+
margin-bottom: 2.5rem
84+
}
85+
.peoples-media-grid {
86+
display: grid;
87+
grid-template-columns: repeat(3, 1fr);
88+
margin-top: 2rem;
89+
overflow: hidden;
90+
.item-1-media {
91+
margin-left: 12.5rem;
92+
margin-top: 5rem;
93+
}
94+
.item-2-media {
95+
margin-top: 5rem;
96+
}
97+
.item-3-media {
98+
margin-left: -3rem;
99+
margin-top: 0.5rem;
100+
}
101+
.item-4-media {
102+
margin-left: 15.7rem;
103+
}
104+
.item-5-media {
105+
margin-top: -3rem;
106+
}
107+
.item-6-media {
108+
margin-top: -3rem;
109+
margin-right: 15rem;
110+
}
111+
}
112+
.item-7-media {
113+
margin-left: 27.2rem;
114+
margin-top: -5rem;
115+
}
102116
}
103117

104118
*,

0 commit comments

Comments
 (0)