Skip to content

Commit d09e3a1

Browse files
techgurllSEUNAGBEYE
techgurll
authored and
SEUNAGBEYE
committed
peoples/section/rebased
1 parent 151ccf9 commit d09e3a1

File tree

4 files changed

+153
-115
lines changed

4 files changed

+153
-115
lines changed

‎css/main.css‎

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1632,23 +1632,23 @@ u {
16321632
margin-left: 5rem; }
16331633
.grid .item1 {
16341634
margin-top: 24rem;
1635-
margin-left: 3rem; }
1635+
margin-left: 17rem; }
16361636
.grid .item2 {
16371637
margin-top: 19rem;
1638-
margin-left: -0.7rem; }
1638+
margin-left: 0.5rem; }
16391639
.grid .item3 {
1640-
margin-left: -15rem; }
1640+
margin-left: -17rem; }
16411641
.grid .item4 {
1642-
margin-left: 8rem; }
1642+
margin-left: 22rem; }
16431643
.grid .item5 {
16441644
margin-top: -11rem;
1645-
margin-left: -0.5rem; }
1645+
margin-left: 0.5rem; }
16461646
.grid .item6 {
16471647
margin-top: -11rem;
1648-
margin-left: 0.5rem; }
1648+
margin-left: -1.5rem; }
16491649

16501650
.item7 {
1651-
margin-left: 59rem;
1651+
margin-left: 73rem;
16521652
margin-top: -20rem; }
16531653

16541654
@media (max-width: 580px) {
@@ -1661,28 +1661,44 @@ u {
16611661
.peoples-media {
16621662
display: block; } }
16631663

1664-
.peoples-media-grid {
1664+
@media (max-width: 768px) {
1665+
.grid {
1666+
display: none; }
1667+
.item7 {
1668+
display: none; }
1669+
.footer-writeup {
1670+
display: none; }
1671+
.peoples-media {
1672+
display: block; } }
1673+
1674+
.peoples-media .peoples-media-writeup {
1675+
margin-top: 2rem;
1676+
margin-left: 15rem;
1677+
margin-bottom: 2.5rem; }
1678+
1679+
.peoples-media .peoples-media-grid {
16651680
display: grid;
16661681
grid-template-columns: repeat(3, 1fr);
16671682
margin-top: 2rem;
16681683
overflow: hidden; }
1669-
.peoples-media-grid .item-1-media {
1670-
margin-left: 4rem;
1684+
.peoples-media .peoples-media-grid .item-1-media {
1685+
margin-left: 12.5rem;
16711686
margin-top: 5rem; }
1672-
.peoples-media-grid .item-2-media {
1687+
.peoples-media .peoples-media-grid .item-2-media {
16731688
margin-top: 5rem; }
1674-
.peoples-media-grid .item-3-media {
1675-
margin-left: -2.5rem; }
1676-
.peoples-media-grid .item-4-media {
1677-
margin-left: 7rem; }
1678-
.peoples-media-grid .item-5-media {
1689+
.peoples-media .peoples-media-grid .item-3-media {
1690+
margin-left: -3rem;
1691+
margin-top: 0.5rem; }
1692+
.peoples-media .peoples-media-grid .item-4-media {
1693+
margin-left: 15.7rem; }
1694+
.peoples-media .peoples-media-grid .item-5-media {
16791695
margin-top: -3rem; }
1680-
.peoples-media-grid .item-6-media {
1696+
.peoples-media .peoples-media-grid .item-6-media {
16811697
margin-top: -3rem;
1682-
margin-right: 8rem; }
1698+
margin-right: 15rem; }
16831699

1684-
.item-7-media {
1685-
margin-left: 18.8rem;
1700+
.peoples-media .item-7-media {
1701+
margin-left: 27.2rem;
16861702
margin-top: -5rem; }
16871703

16881704
*,

‎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: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ <h1 style="margin-left:10rem;margin-top:1rem;">"Hopper is a culture of</br>maker
3333

3434

3535
</div>
36-
<div class="item7"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532802/samples/zainabs/xp42b9u1ml5uvwb3zlir.png" alt="" style="width:15rem;height:15rem;"></div>
3736

3837
<div class="peoples-media">
3938
<div style="margin-top:2rem;margin-left:7rem;margin-bottom:2.5rem;">
@@ -42,23 +41,30 @@ <h1>"We dont want to </br>optimize; we want to </br>change the world."</h1>
4241
<p>Maggie,Product Designer.</p>
4342
</div>
4443

45-
<img style="margin-left:14rem;" src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569505351/samples/figma%20people/jmef88phxs49jjvphmil.png" alt="">
46-
<div class="peoples-media-grid">
47-
<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>
48-
<div class="item-2-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504704/samples/figma%20people/iysfnyunmqvnyup9hjxr.png" alt=""></div>
49-
<div class="item-3-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504728/samples/figma%20people/abu6ierylfnsrzbceekn.png" alt=""></div>
50-
<div class="item-4-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504686/samples/figma%20people/gtsmpoclevpsjisubb9m.png" alt=""></div>
51-
<div class="item-5-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504715/samples/figma%20people/gmulenmtoxww8uvcxzyh.png" alt=""></div>
52-
<div class="item-6-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504737/samples/figma%20people/ywylzqftoy9nsrc6fvld.png" alt=""></div>
53-
54-
55-
</div>
44+
</div>
45+
<div class="item7"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569532802/samples/zainabs/xp42b9u1ml5uvwb3zlir.png" alt="" style="width:15rem;height:15rem;"></div>
5646

47+
<div class="peoples-media">
48+
<div class="peoples-media-writeup">
49+
<p>The people behind the bunny</p>
50+
<h1>"We dont want to </br>optimize; we want to </br>change the world."</h1>
51+
<p>Maggie,Product Designer.</p>
52+
</div>
5753

58-
<div class="item-7-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504695/samples/figma%20people/fqz4qyaq13xiz9ogwhj1.png" alt=""></div>
54+
<img style="margin-left:22rem;" src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569505351/samples/figma%20people/jmef88phxs49jjvphmil.png" alt="">
55+
<div class="peoples-media-grid">
56+
<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>
57+
<div class="item-2-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504704/samples/figma%20people/iysfnyunmqvnyup9hjxr.png" alt=""></div>
58+
<div class="item-3-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504728/samples/figma%20people/abu6ierylfnsrzbceekn.png" alt=""></div>
59+
<div class="item-4-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504686/samples/figma%20people/gtsmpoclevpsjisubb9m.png" alt=""></div>
60+
<div class="item-5-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504715/samples/figma%20people/gmulenmtoxww8uvcxzyh.png" alt=""></div>
61+
<div class="item-6-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504737/samples/figma%20people/ywylzqftoy9nsrc6fvld.png" alt=""></div>
5962

60-
</div>
63+
</div>
6164

65+
<div class="item-7-media"><img src="https://res.cloudinary.com/dtbjhs8a6/image/upload/v1569504695/samples/figma%20people/fqz4qyaq13xiz9ogwhj1.png" alt=""></div>
66+
67+
</div>
6268

6369
<div class="container">
6470
<div class="row">

‎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;
28-
}
29-
30-
.item3{
31-
margin-left: -15rem;
32-
}
33-
.item4{
34-
margin-left: 8rem;
11+
.peoples-media {
12+
display: none;
3513
}
3614

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)