Popular New Releases in Collaboration
excalidraw
v0.11.0 (2022-02-17)
flarum
v1.2.0
element-web
v1.10.11-rc.1
yjs
GitLab FOSS
GitLab 14.0
Popular Libraries in Collaboration
by discourse ruby
35516 NOASSERTION
A platform for community discussion. Free, open, simple.
by excalidraw typescript
28761 MIT
Virtual whiteboard for sketching hand-drawn like diagrams
by forem ruby
18980 AGPL-3.0
For empowering community 🌱
by flarum php
12292 MIT
Simple forum software for building great communities.
by kubernetes jupyter notebook
8611 Apache-2.0
Kubernetes community content
by vector-im typescript
8169 Apache-2.0
A glossy Matrix collaboration client for the web.
by yjs javascript
7137 NOASSERTION
Shared data types for building collaborative software
by gitlab-org ruby
6599
GitLab FOSS is a read-only mirror of GitLab, with all proprietary code removed. This project was previously used to host GitLab Community Edition, but all development has now moved to https://gitlab.com/gitlab-org/gitlab.
by humhub php
5671 NOASSERTION
HumHub is an Open Source Enterprise Social Network. Easy to install, intuitive to use and extendable with countless freely available modules.
Trending New libraries in Collaboration
by excalidraw typescript
28761 MIT
Virtual whiteboard for sketching hand-drawn like diagrams
by linagora typescript
1351 NOASSERTION
Twake is a secure open source collaboration platform to improve organizational productivity.
by Twake javascript
846 NOASSERTION
Twake is a secure open source collaboration platform to improve organizational productivity.
by TwakeApp javascript
736 NOASSERTION
Twake is a collaborative platform which improves teamwork
by casbin go
676 Apache-2.0
An open-source forum (BBS) software developed by Go and React, QQ group: 555019739
by Qbian61 java
535 AGPL-3.0
一款用 Java(spring boot) 实现的现代化社区(论坛/问答/BBS/社交网络/博客)系统平台。A modern community (forum/Q&A/BBS/SNS/blog) system platform implemented in Java(spring boot).
by vas3k python
481 MIT
No bullshit IT community with private membership
by toger5 javascript
351 MIT
A collaborative Whiteboard powered by the [matrix] protocol and infrastucture.
by w3c html
334 NOASSERTION
Charter and administrivia for the WebExtensions Community Group (WECG)
Top Authors in Collaboration
1
15 Libraries
192
2
14 Libraries
658
3
5 Libraries
797
4
4 Libraries
117
5
4 Libraries
41
6
4 Libraries
168
7
4 Libraries
2553
8
4 Libraries
124
9
4 Libraries
1528
10
4 Libraries
562
1
15 Libraries
192
2
14 Libraries
658
3
5 Libraries
797
4
4 Libraries
117
5
4 Libraries
41
6
4 Libraries
168
7
4 Libraries
2553
8
4 Libraries
124
9
4 Libraries
1528
10
4 Libraries
562
Trending Kits in Collaboration
No Trending Kits are available at this moment for Collaboration
Trending Discussions on Collaboration
I can't get my <img> tags to center inside of my grid
Counting repeated pairs in a list
As seen in the image, create two responsive DIVs with space between them
Django mod_wsgi Apache Server, ModuleNotFoundError: No Module Named Django
How to return different format of records from a single PL/pgSQL function?
Remove position absolute in media query
Incorrect images path in production build - Vue.js
Problem accessing prop to change color of button conditionally
user table not created on django deployment but superuser created on heroku bash
Find the categories that frequently occur together based on another column
QUESTION
I can't get my <img> tags to center inside of my grid
Asked 2022-Mar-29 at 04:59I'm attempting to code my first website from scratch and I have found myself stuck on this problem for the last day. I am trying to center the logos for my mobile view. I have them placed correctly in my @media tag and they are displaying inside the grid however after countless tries I cannot get them to center inside of there grid columns. I do apologise if any of my code is messy.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="/styles.css">
8 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10 <title>Developer Portfolio</title>
11</head>
12<body>
13 <nav>
14 <div class="logo">
15 <h3>
16 <a href="/">Johnathan Specter</a>
17 </h3>
18 </div>
19 <div class="nav-list">
20 <ul>
21 <li><a href="#">Articles</a></li>
22 <li><a href="#">Chats</a></li>
23 <li><a href="#">Awards</a></li>
24 <li><a href="#">About</a></li>
25 <button class="nav-button">Get in touch</button>
26 </ul>
27 </div>
28 </nav>
29 <div class="mob-menu">
30 <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31 <ul class="mobile-menu">
32 <li><a href="#">Articles</a></li>
33 <li><a href="#">Chats</a></li>
34 <li><a href="#">Awards</a></li>
35 <li><a href="#">About</a></li>
36 <li><a href="#">Get in touch</a></li>
37 </ul>
38 </div>
39 <section class="top">
40 <div class="top-container">
41 <div class="column-left">
42 <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43 <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44 </div>
45 </div>
46 </section>
47 <section class="logos">
48 <div class="company-logos">
49 <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50 <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51 <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52 <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53 <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54 <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55 </div>
56 </section>
57 <section>
58 <div class="previews">
59 <div class="spense">
60 <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61 <h2 class="spense-heading">Spense.com</h2>
62 <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63 </div>
64 <div class="yelp">
65 <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66 <h2 class="yelp-heading">YelpCamp.com</h2>
67 <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68 </div>
69 </div>
70 </section>
71 <section>
72 <div class="blurb">
73 <div class="blurb1">
74 <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75 <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76 <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77 </div>
78 <div class="blurb2">
79 <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80 <p>A quote I live by perfectly illustrates what I mean.</p>
81 <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82 <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83 </div>
84 </div>
85 </section>
86 <section>
87 <div class="interested">
88 <div class="interested1">
89 <h1>Intersted in working with me?</h1>
90 <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91 <button class="git-button">Get in touch</button>
92 </div>
93 <div class="interested2">
94 </div>
95 </div>
96 </section>
97</body>
98</html>
99
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="/styles.css">
8 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10 <title>Developer Portfolio</title>
11</head>
12<body>
13 <nav>
14 <div class="logo">
15 <h3>
16 <a href="/">Johnathan Specter</a>
17 </h3>
18 </div>
19 <div class="nav-list">
20 <ul>
21 <li><a href="#">Articles</a></li>
22 <li><a href="#">Chats</a></li>
23 <li><a href="#">Awards</a></li>
24 <li><a href="#">About</a></li>
25 <button class="nav-button">Get in touch</button>
26 </ul>
27 </div>
28 </nav>
29 <div class="mob-menu">
30 <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31 <ul class="mobile-menu">
32 <li><a href="#">Articles</a></li>
33 <li><a href="#">Chats</a></li>
34 <li><a href="#">Awards</a></li>
35 <li><a href="#">About</a></li>
36 <li><a href="#">Get in touch</a></li>
37 </ul>
38 </div>
39 <section class="top">
40 <div class="top-container">
41 <div class="column-left">
42 <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43 <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44 </div>
45 </div>
46 </section>
47 <section class="logos">
48 <div class="company-logos">
49 <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50 <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51 <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52 <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53 <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54 <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55 </div>
56 </section>
57 <section>
58 <div class="previews">
59 <div class="spense">
60 <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61 <h2 class="spense-heading">Spense.com</h2>
62 <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63 </div>
64 <div class="yelp">
65 <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66 <h2 class="yelp-heading">YelpCamp.com</h2>
67 <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68 </div>
69 </div>
70 </section>
71 <section>
72 <div class="blurb">
73 <div class="blurb1">
74 <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75 <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76 <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77 </div>
78 <div class="blurb2">
79 <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80 <p>A quote I live by perfectly illustrates what I mean.</p>
81 <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82 <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83 </div>
84 </div>
85 </section>
86 <section>
87 <div class="interested">
88 <div class="interested1">
89 <h1>Intersted in working with me?</h1>
90 <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91 <button class="git-button">Get in touch</button>
92 </div>
93 <div class="interested2">
94 </div>
95 </div>
96 </section>
97</body>
98</html>
99* {
100 box-sizing: border-box;
101 margin: 0;
102 padding: 0;
103}
104
105body {
106 background-color: black;
107}
108
109nav {
110 display: flex;
111 flex-wrap: wrap;
112 padding: 2% 6%;
113 justify-content: space-between;
114 align-items: center;
115}
116
117.logo {
118 font-family: 'Prata';
119 color: #ffffff;
120 font-size: 110%;
121}
122
123.logo a {
124 text-decoration: none;
125 font-family: 'Prata';
126 color: #ffffff;
127}
128
129.logo:hover {
130 transform: scale(1.1);
131 transition: 0.3s;
132}
133
134.nav-list {
135 flex: 1;
136 text-align: center;
137}
138
139.nav-list li {
140 list-style: none;
141 display: inline-block;
142 padding: 8px 12px;
143 position: relative;
144}
145
146.nav-list li:hover {
147 transform: scale(1.1);
148 transition: 0.3s;
149}
150
151.nav-list li a {
152 color: #939495;
153 text-decoration: none;
154 font-family: 'Inter';
155}
156
157.nav-button {
158 background-color: #fbe850;
159 color: #000000;
160 float: right;
161 padding: 15px 30px;
162 font-family: 'Prata';
163}
164
165.nav-button:hover {
166 transform: scale(1.1);
167 transition: 0.3s;
168}
169
170.company-logos {
171 display: flex;
172 flex-wrap: wrap;
173 flex-basis: 100%;
174 padding: 2% 6%;
175 justify-content: space-between;
176}
177
178h1 {
179 font-family: 'Prata';
180 color: #ffffff;
181}
182
183p {
184 font-family: 'Inter';
185 color: #939495;
186}
187
188.top-container {
189 display: flex;
190 width: 50%;
191 padding: 2% 6%;
192}
193
194.sub-heading {
195 font-size: 250%;
196}
197
198.previews {
199 display: flex;
200 padding: 2% 6%;
201 gap: 1rem;
202}
203
204.previews > * {
205 flex-basis: 100%;
206}
207
208.spense-heading {
209 font-family: 'Prata';
210 color: #ffffff;
211 padding-top: 1rem;
212 padding-bottom: 1rem;
213}
214
215.spense p {
216 color: #939495;
217}
218
219.spense-img {
220 height: auto;
221 max-width: 100%;
222}
223
224.yelp-img {
225 height: auto;
226 max-width: 100%;
227}
228
229.yelp-heading {
230 font-family: 'Prata';
231 color: #ffffff;
232 padding-top: 1rem;
233 padding-bottom: 1rem;
234}
235
236.yelp p {
237 color: #939495;
238}
239
240.blurb {
241 display: flex;
242 padding: 2% 6%;
243 gap: 1rem;
244 background-color: #2e3038;
245}
246
247.blurb1 h1 {
248 margin-bottom: 1rem;
249 color: #ffffff;
250}
251
252.blurb1 p {
253 margin-bottom: 1rem;
254 color: #939495;
255}
256
257.blurb2 p {
258 margin-top: 0.5rem;
259 margin-bottom: 1rem;
260 color: #939495;
261}
262
263.interested {
264 display: flex;
265 padding: 2% 6%;
266 gap: 1rem;
267}
268
269.interested h1 {
270 margin-bottom: 1rem;
271}
272
273.interested1 p {
274 margin-bottom: 1rem;
275 margin-right: 1rem;
276}
277
278.interested1 {
279 flex-basis: 50%;
280}
281
282.git-button {
283 background-color: #fbe850;
284 color: #000000;
285 padding: 15px 30px;
286 font-family: 'Prata';
287}
288
289.git-button:hover {
290 transform: scale(1.1);
291 transition: 0.3s;
292}
293
294.hamburger-icon {
295 margin: auto 0;
296 display: none;
297 cursor: pointer;
298}
299
300.mobile-menu {
301 display: none;
302 position: absolute;
303 top: 50px;
304 left: 0;
305 height: calc(100vh - 50px);
306 width: 100%;
307}
308
309.open .mobile-menu {
310 display: flex;
311 flex-direction: column;
312 align-items: center;
313 justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317 .top-container {
318 width: 100%;
319 margin-bottom: 3rem;
320 }
321
322 .previews {
323 display: block;
324 }
325
326 .blurb {
327 display: block;
328 }
329
330 .blurb1 {
331 margin-bottom: 3rem;
332 }
333
334 .interested {
335 display: block;
336 max-width: 80%;
337 }
338}
339
340@media (max-width: 750px) {
341 .nav-list {
342 display: none;
343 }
344
345 .hamburger-icon {
346 display:inline-block
347 }
348}
349
350@media (max-width: 800px) {
351 .company-logos {
352 display: grid;
353 grid-template-columns: repeat(2, 1fr);
354 gap: 1rem;
355 align-items: center;
356 justify-content: center;
357 }
358}
359
I have done plenty of googling and from my understanding this shouldn't be a hard fix, I can only assume I have something overriding my code stopping me from centering my images.
ANSWER
Answered 2022-Mar-28 at 23:571<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="/styles.css">
8 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10 <title>Developer Portfolio</title>
11</head>
12<body>
13 <nav>
14 <div class="logo">
15 <h3>
16 <a href="/">Johnathan Specter</a>
17 </h3>
18 </div>
19 <div class="nav-list">
20 <ul>
21 <li><a href="#">Articles</a></li>
22 <li><a href="#">Chats</a></li>
23 <li><a href="#">Awards</a></li>
24 <li><a href="#">About</a></li>
25 <button class="nav-button">Get in touch</button>
26 </ul>
27 </div>
28 </nav>
29 <div class="mob-menu">
30 <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31 <ul class="mobile-menu">
32 <li><a href="#">Articles</a></li>
33 <li><a href="#">Chats</a></li>
34 <li><a href="#">Awards</a></li>
35 <li><a href="#">About</a></li>
36 <li><a href="#">Get in touch</a></li>
37 </ul>
38 </div>
39 <section class="top">
40 <div class="top-container">
41 <div class="column-left">
42 <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43 <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44 </div>
45 </div>
46 </section>
47 <section class="logos">
48 <div class="company-logos">
49 <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50 <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51 <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52 <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53 <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54 <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55 </div>
56 </section>
57 <section>
58 <div class="previews">
59 <div class="spense">
60 <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61 <h2 class="spense-heading">Spense.com</h2>
62 <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63 </div>
64 <div class="yelp">
65 <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66 <h2 class="yelp-heading">YelpCamp.com</h2>
67 <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68 </div>
69 </div>
70 </section>
71 <section>
72 <div class="blurb">
73 <div class="blurb1">
74 <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75 <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76 <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77 </div>
78 <div class="blurb2">
79 <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80 <p>A quote I live by perfectly illustrates what I mean.</p>
81 <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82 <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83 </div>
84 </div>
85 </section>
86 <section>
87 <div class="interested">
88 <div class="interested1">
89 <h1>Intersted in working with me?</h1>
90 <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91 <button class="git-button">Get in touch</button>
92 </div>
93 <div class="interested2">
94 </div>
95 </div>
96 </section>
97</body>
98</html>
99* {
100 box-sizing: border-box;
101 margin: 0;
102 padding: 0;
103}
104
105body {
106 background-color: black;
107}
108
109nav {
110 display: flex;
111 flex-wrap: wrap;
112 padding: 2% 6%;
113 justify-content: space-between;
114 align-items: center;
115}
116
117.logo {
118 font-family: 'Prata';
119 color: #ffffff;
120 font-size: 110%;
121}
122
123.logo a {
124 text-decoration: none;
125 font-family: 'Prata';
126 color: #ffffff;
127}
128
129.logo:hover {
130 transform: scale(1.1);
131 transition: 0.3s;
132}
133
134.nav-list {
135 flex: 1;
136 text-align: center;
137}
138
139.nav-list li {
140 list-style: none;
141 display: inline-block;
142 padding: 8px 12px;
143 position: relative;
144}
145
146.nav-list li:hover {
147 transform: scale(1.1);
148 transition: 0.3s;
149}
150
151.nav-list li a {
152 color: #939495;
153 text-decoration: none;
154 font-family: 'Inter';
155}
156
157.nav-button {
158 background-color: #fbe850;
159 color: #000000;
160 float: right;
161 padding: 15px 30px;
162 font-family: 'Prata';
163}
164
165.nav-button:hover {
166 transform: scale(1.1);
167 transition: 0.3s;
168}
169
170.company-logos {
171 display: flex;
172 flex-wrap: wrap;
173 flex-basis: 100%;
174 padding: 2% 6%;
175 justify-content: space-between;
176}
177
178h1 {
179 font-family: 'Prata';
180 color: #ffffff;
181}
182
183p {
184 font-family: 'Inter';
185 color: #939495;
186}
187
188.top-container {
189 display: flex;
190 width: 50%;
191 padding: 2% 6%;
192}
193
194.sub-heading {
195 font-size: 250%;
196}
197
198.previews {
199 display: flex;
200 padding: 2% 6%;
201 gap: 1rem;
202}
203
204.previews > * {
205 flex-basis: 100%;
206}
207
208.spense-heading {
209 font-family: 'Prata';
210 color: #ffffff;
211 padding-top: 1rem;
212 padding-bottom: 1rem;
213}
214
215.spense p {
216 color: #939495;
217}
218
219.spense-img {
220 height: auto;
221 max-width: 100%;
222}
223
224.yelp-img {
225 height: auto;
226 max-width: 100%;
227}
228
229.yelp-heading {
230 font-family: 'Prata';
231 color: #ffffff;
232 padding-top: 1rem;
233 padding-bottom: 1rem;
234}
235
236.yelp p {
237 color: #939495;
238}
239
240.blurb {
241 display: flex;
242 padding: 2% 6%;
243 gap: 1rem;
244 background-color: #2e3038;
245}
246
247.blurb1 h1 {
248 margin-bottom: 1rem;
249 color: #ffffff;
250}
251
252.blurb1 p {
253 margin-bottom: 1rem;
254 color: #939495;
255}
256
257.blurb2 p {
258 margin-top: 0.5rem;
259 margin-bottom: 1rem;
260 color: #939495;
261}
262
263.interested {
264 display: flex;
265 padding: 2% 6%;
266 gap: 1rem;
267}
268
269.interested h1 {
270 margin-bottom: 1rem;
271}
272
273.interested1 p {
274 margin-bottom: 1rem;
275 margin-right: 1rem;
276}
277
278.interested1 {
279 flex-basis: 50%;
280}
281
282.git-button {
283 background-color: #fbe850;
284 color: #000000;
285 padding: 15px 30px;
286 font-family: 'Prata';
287}
288
289.git-button:hover {
290 transform: scale(1.1);
291 transition: 0.3s;
292}
293
294.hamburger-icon {
295 margin: auto 0;
296 display: none;
297 cursor: pointer;
298}
299
300.mobile-menu {
301 display: none;
302 position: absolute;
303 top: 50px;
304 left: 0;
305 height: calc(100vh - 50px);
306 width: 100%;
307}
308
309.open .mobile-menu {
310 display: flex;
311 flex-direction: column;
312 align-items: center;
313 justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317 .top-container {
318 width: 100%;
319 margin-bottom: 3rem;
320 }
321
322 .previews {
323 display: block;
324 }
325
326 .blurb {
327 display: block;
328 }
329
330 .blurb1 {
331 margin-bottom: 3rem;
332 }
333
334 .interested {
335 display: block;
336 max-width: 80%;
337 }
338}
339
340@media (max-width: 750px) {
341 .nav-list {
342 display: none;
343 }
344
345 .hamburger-icon {
346 display:inline-block
347 }
348}
349
350@media (max-width: 800px) {
351 .company-logos {
352 display: grid;
353 grid-template-columns: repeat(2, 1fr);
354 gap: 1rem;
355 align-items: center;
356 justify-content: center;
357 }
358}
359.company-logos img {
360 justify-self: center;
361}
362
will do it.
Another option:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="/styles.css">
8 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10 <title>Developer Portfolio</title>
11</head>
12<body>
13 <nav>
14 <div class="logo">
15 <h3>
16 <a href="/">Johnathan Specter</a>
17 </h3>
18 </div>
19 <div class="nav-list">
20 <ul>
21 <li><a href="#">Articles</a></li>
22 <li><a href="#">Chats</a></li>
23 <li><a href="#">Awards</a></li>
24 <li><a href="#">About</a></li>
25 <button class="nav-button">Get in touch</button>
26 </ul>
27 </div>
28 </nav>
29 <div class="mob-menu">
30 <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31 <ul class="mobile-menu">
32 <li><a href="#">Articles</a></li>
33 <li><a href="#">Chats</a></li>
34 <li><a href="#">Awards</a></li>
35 <li><a href="#">About</a></li>
36 <li><a href="#">Get in touch</a></li>
37 </ul>
38 </div>
39 <section class="top">
40 <div class="top-container">
41 <div class="column-left">
42 <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43 <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44 </div>
45 </div>
46 </section>
47 <section class="logos">
48 <div class="company-logos">
49 <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50 <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51 <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52 <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53 <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54 <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55 </div>
56 </section>
57 <section>
58 <div class="previews">
59 <div class="spense">
60 <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61 <h2 class="spense-heading">Spense.com</h2>
62 <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63 </div>
64 <div class="yelp">
65 <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66 <h2 class="yelp-heading">YelpCamp.com</h2>
67 <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68 </div>
69 </div>
70 </section>
71 <section>
72 <div class="blurb">
73 <div class="blurb1">
74 <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75 <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76 <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77 </div>
78 <div class="blurb2">
79 <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80 <p>A quote I live by perfectly illustrates what I mean.</p>
81 <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82 <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83 </div>
84 </div>
85 </section>
86 <section>
87 <div class="interested">
88 <div class="interested1">
89 <h1>Intersted in working with me?</h1>
90 <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91 <button class="git-button">Get in touch</button>
92 </div>
93 <div class="interested2">
94 </div>
95 </div>
96 </section>
97</body>
98</html>
99* {
100 box-sizing: border-box;
101 margin: 0;
102 padding: 0;
103}
104
105body {
106 background-color: black;
107}
108
109nav {
110 display: flex;
111 flex-wrap: wrap;
112 padding: 2% 6%;
113 justify-content: space-between;
114 align-items: center;
115}
116
117.logo {
118 font-family: 'Prata';
119 color: #ffffff;
120 font-size: 110%;
121}
122
123.logo a {
124 text-decoration: none;
125 font-family: 'Prata';
126 color: #ffffff;
127}
128
129.logo:hover {
130 transform: scale(1.1);
131 transition: 0.3s;
132}
133
134.nav-list {
135 flex: 1;
136 text-align: center;
137}
138
139.nav-list li {
140 list-style: none;
141 display: inline-block;
142 padding: 8px 12px;
143 position: relative;
144}
145
146.nav-list li:hover {
147 transform: scale(1.1);
148 transition: 0.3s;
149}
150
151.nav-list li a {
152 color: #939495;
153 text-decoration: none;
154 font-family: 'Inter';
155}
156
157.nav-button {
158 background-color: #fbe850;
159 color: #000000;
160 float: right;
161 padding: 15px 30px;
162 font-family: 'Prata';
163}
164
165.nav-button:hover {
166 transform: scale(1.1);
167 transition: 0.3s;
168}
169
170.company-logos {
171 display: flex;
172 flex-wrap: wrap;
173 flex-basis: 100%;
174 padding: 2% 6%;
175 justify-content: space-between;
176}
177
178h1 {
179 font-family: 'Prata';
180 color: #ffffff;
181}
182
183p {
184 font-family: 'Inter';
185 color: #939495;
186}
187
188.top-container {
189 display: flex;
190 width: 50%;
191 padding: 2% 6%;
192}
193
194.sub-heading {
195 font-size: 250%;
196}
197
198.previews {
199 display: flex;
200 padding: 2% 6%;
201 gap: 1rem;
202}
203
204.previews > * {
205 flex-basis: 100%;
206}
207
208.spense-heading {
209 font-family: 'Prata';
210 color: #ffffff;
211 padding-top: 1rem;
212 padding-bottom: 1rem;
213}
214
215.spense p {
216 color: #939495;
217}
218
219.spense-img {
220 height: auto;
221 max-width: 100%;
222}
223
224.yelp-img {
225 height: auto;
226 max-width: 100%;
227}
228
229.yelp-heading {
230 font-family: 'Prata';
231 color: #ffffff;
232 padding-top: 1rem;
233 padding-bottom: 1rem;
234}
235
236.yelp p {
237 color: #939495;
238}
239
240.blurb {
241 display: flex;
242 padding: 2% 6%;
243 gap: 1rem;
244 background-color: #2e3038;
245}
246
247.blurb1 h1 {
248 margin-bottom: 1rem;
249 color: #ffffff;
250}
251
252.blurb1 p {
253 margin-bottom: 1rem;
254 color: #939495;
255}
256
257.blurb2 p {
258 margin-top: 0.5rem;
259 margin-bottom: 1rem;
260 color: #939495;
261}
262
263.interested {
264 display: flex;
265 padding: 2% 6%;
266 gap: 1rem;
267}
268
269.interested h1 {
270 margin-bottom: 1rem;
271}
272
273.interested1 p {
274 margin-bottom: 1rem;
275 margin-right: 1rem;
276}
277
278.interested1 {
279 flex-basis: 50%;
280}
281
282.git-button {
283 background-color: #fbe850;
284 color: #000000;
285 padding: 15px 30px;
286 font-family: 'Prata';
287}
288
289.git-button:hover {
290 transform: scale(1.1);
291 transition: 0.3s;
292}
293
294.hamburger-icon {
295 margin: auto 0;
296 display: none;
297 cursor: pointer;
298}
299
300.mobile-menu {
301 display: none;
302 position: absolute;
303 top: 50px;
304 left: 0;
305 height: calc(100vh - 50px);
306 width: 100%;
307}
308
309.open .mobile-menu {
310 display: flex;
311 flex-direction: column;
312 align-items: center;
313 justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317 .top-container {
318 width: 100%;
319 margin-bottom: 3rem;
320 }
321
322 .previews {
323 display: block;
324 }
325
326 .blurb {
327 display: block;
328 }
329
330 .blurb1 {
331 margin-bottom: 3rem;
332 }
333
334 .interested {
335 display: block;
336 max-width: 80%;
337 }
338}
339
340@media (max-width: 750px) {
341 .nav-list {
342 display: none;
343 }
344
345 .hamburger-icon {
346 display:inline-block
347 }
348}
349
350@media (max-width: 800px) {
351 .company-logos {
352 display: grid;
353 grid-template-columns: repeat(2, 1fr);
354 gap: 1rem;
355 align-items: center;
356 justify-content: center;
357 }
358}
359.company-logos img {
360 justify-self: center;
361}
362.company-logos img {
363 margin: 0 auto;
364}
365
Note: you might not realise it, but you posted everything except the images, because they're relative, on your system. You should have replaced the src's with some random image urls or some image placeholders (e.g: https://via.placeholder.com/150
)
Working example:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="/styles.css">
8 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10 <title>Developer Portfolio</title>
11</head>
12<body>
13 <nav>
14 <div class="logo">
15 <h3>
16 <a href="/">Johnathan Specter</a>
17 </h3>
18 </div>
19 <div class="nav-list">
20 <ul>
21 <li><a href="#">Articles</a></li>
22 <li><a href="#">Chats</a></li>
23 <li><a href="#">Awards</a></li>
24 <li><a href="#">About</a></li>
25 <button class="nav-button">Get in touch</button>
26 </ul>
27 </div>
28 </nav>
29 <div class="mob-menu">
30 <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31 <ul class="mobile-menu">
32 <li><a href="#">Articles</a></li>
33 <li><a href="#">Chats</a></li>
34 <li><a href="#">Awards</a></li>
35 <li><a href="#">About</a></li>
36 <li><a href="#">Get in touch</a></li>
37 </ul>
38 </div>
39 <section class="top">
40 <div class="top-container">
41 <div class="column-left">
42 <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43 <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44 </div>
45 </div>
46 </section>
47 <section class="logos">
48 <div class="company-logos">
49 <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50 <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51 <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52 <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53 <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54 <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55 </div>
56 </section>
57 <section>
58 <div class="previews">
59 <div class="spense">
60 <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61 <h2 class="spense-heading">Spense.com</h2>
62 <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63 </div>
64 <div class="yelp">
65 <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66 <h2 class="yelp-heading">YelpCamp.com</h2>
67 <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68 </div>
69 </div>
70 </section>
71 <section>
72 <div class="blurb">
73 <div class="blurb1">
74 <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75 <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76 <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77 </div>
78 <div class="blurb2">
79 <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80 <p>A quote I live by perfectly illustrates what I mean.</p>
81 <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82 <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83 </div>
84 </div>
85 </section>
86 <section>
87 <div class="interested">
88 <div class="interested1">
89 <h1>Intersted in working with me?</h1>
90 <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91 <button class="git-button">Get in touch</button>
92 </div>
93 <div class="interested2">
94 </div>
95 </div>
96 </section>
97</body>
98</html>
99* {
100 box-sizing: border-box;
101 margin: 0;
102 padding: 0;
103}
104
105body {
106 background-color: black;
107}
108
109nav {
110 display: flex;
111 flex-wrap: wrap;
112 padding: 2% 6%;
113 justify-content: space-between;
114 align-items: center;
115}
116
117.logo {
118 font-family: 'Prata';
119 color: #ffffff;
120 font-size: 110%;
121}
122
123.logo a {
124 text-decoration: none;
125 font-family: 'Prata';
126 color: #ffffff;
127}
128
129.logo:hover {
130 transform: scale(1.1);
131 transition: 0.3s;
132}
133
134.nav-list {
135 flex: 1;
136 text-align: center;
137}
138
139.nav-list li {
140 list-style: none;
141 display: inline-block;
142 padding: 8px 12px;
143 position: relative;
144}
145
146.nav-list li:hover {
147 transform: scale(1.1);
148 transition: 0.3s;
149}
150
151.nav-list li a {
152 color: #939495;
153 text-decoration: none;
154 font-family: 'Inter';
155}
156
157.nav-button {
158 background-color: #fbe850;
159 color: #000000;
160 float: right;
161 padding: 15px 30px;
162 font-family: 'Prata';
163}
164
165.nav-button:hover {
166 transform: scale(1.1);
167 transition: 0.3s;
168}
169
170.company-logos {
171 display: flex;
172 flex-wrap: wrap;
173 flex-basis: 100%;
174 padding: 2% 6%;
175 justify-content: space-between;
176}
177
178h1 {
179 font-family: 'Prata';
180 color: #ffffff;
181}
182
183p {
184 font-family: 'Inter';
185 color: #939495;
186}
187
188.top-container {
189 display: flex;
190 width: 50%;
191 padding: 2% 6%;
192}
193
194.sub-heading {
195 font-size: 250%;
196}
197
198.previews {
199 display: flex;
200 padding: 2% 6%;
201 gap: 1rem;
202}
203
204.previews > * {
205 flex-basis: 100%;
206}
207
208.spense-heading {
209 font-family: 'Prata';
210 color: #ffffff;
211 padding-top: 1rem;
212 padding-bottom: 1rem;
213}
214
215.spense p {
216 color: #939495;
217}
218
219.spense-img {
220 height: auto;
221 max-width: 100%;
222}
223
224.yelp-img {
225 height: auto;
226 max-width: 100%;
227}
228
229.yelp-heading {
230 font-family: 'Prata';
231 color: #ffffff;
232 padding-top: 1rem;
233 padding-bottom: 1rem;
234}
235
236.yelp p {
237 color: #939495;
238}
239
240.blurb {
241 display: flex;
242 padding: 2% 6%;
243 gap: 1rem;
244 background-color: #2e3038;
245}
246
247.blurb1 h1 {
248 margin-bottom: 1rem;
249 color: #ffffff;
250}
251
252.blurb1 p {
253 margin-bottom: 1rem;
254 color: #939495;
255}
256
257.blurb2 p {
258 margin-top: 0.5rem;
259 margin-bottom: 1rem;
260 color: #939495;
261}
262
263.interested {
264 display: flex;
265 padding: 2% 6%;
266 gap: 1rem;
267}
268
269.interested h1 {
270 margin-bottom: 1rem;
271}
272
273.interested1 p {
274 margin-bottom: 1rem;
275 margin-right: 1rem;
276}
277
278.interested1 {
279 flex-basis: 50%;
280}
281
282.git-button {
283 background-color: #fbe850;
284 color: #000000;
285 padding: 15px 30px;
286 font-family: 'Prata';
287}
288
289.git-button:hover {
290 transform: scale(1.1);
291 transition: 0.3s;
292}
293
294.hamburger-icon {
295 margin: auto 0;
296 display: none;
297 cursor: pointer;
298}
299
300.mobile-menu {
301 display: none;
302 position: absolute;
303 top: 50px;
304 left: 0;
305 height: calc(100vh - 50px);
306 width: 100%;
307}
308
309.open .mobile-menu {
310 display: flex;
311 flex-direction: column;
312 align-items: center;
313 justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317 .top-container {
318 width: 100%;
319 margin-bottom: 3rem;
320 }
321
322 .previews {
323 display: block;
324 }
325
326 .blurb {
327 display: block;
328 }
329
330 .blurb1 {
331 margin-bottom: 3rem;
332 }
333
334 .interested {
335 display: block;
336 max-width: 80%;
337 }
338}
339
340@media (max-width: 750px) {
341 .nav-list {
342 display: none;
343 }
344
345 .hamburger-icon {
346 display:inline-block
347 }
348}
349
350@media (max-width: 800px) {
351 .company-logos {
352 display: grid;
353 grid-template-columns: repeat(2, 1fr);
354 gap: 1rem;
355 align-items: center;
356 justify-content: center;
357 }
358}
359.company-logos img {
360 justify-self: center;
361}
362.company-logos img {
363 margin: 0 auto;
364}
365* {
366 box-sizing: border-box;
367 margin: 0;
368 padding: 0;
369}
370
371body {
372 background-color: black;
373}
374
375.company-logos {
376 display: flex;
377 flex-wrap: wrap;
378 flex-basis: 100%;
379 padding: 2% 6%;
380 justify-content: space-between;
381}
382
383@media(max-width: 1050px) {
384 .company-logos {
385 display: grid;
386 grid-template-columns: repeat(3, 1fr);
387 gap: 1rem;
388 }
389}
390
391@media (max-width: 800px) {
392 .company-logos {
393 grid-template-columns: repeat(2, 1fr);
394 }
395}
396
397.company-logos img {
398 justify-self: center;
399}
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="/styles.css">
8 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
9 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
10 <title>Developer Portfolio</title>
11</head>
12<body>
13 <nav>
14 <div class="logo">
15 <h3>
16 <a href="/">Johnathan Specter</a>
17 </h3>
18 </div>
19 <div class="nav-list">
20 <ul>
21 <li><a href="#">Articles</a></li>
22 <li><a href="#">Chats</a></li>
23 <li><a href="#">Awards</a></li>
24 <li><a href="#">About</a></li>
25 <button class="nav-button">Get in touch</button>
26 </ul>
27 </div>
28 </nav>
29 <div class="mob-menu">
30 <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
31 <ul class="mobile-menu">
32 <li><a href="#">Articles</a></li>
33 <li><a href="#">Chats</a></li>
34 <li><a href="#">Awards</a></li>
35 <li><a href="#">About</a></li>
36 <li><a href="#">Get in touch</a></li>
37 </ul>
38 </div>
39 <section class="top">
40 <div class="top-container">
41 <div class="column-left">
42 <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
43 <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
44 </div>
45 </div>
46 </section>
47 <section class="logos">
48 <div class="company-logos">
49 <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
50 <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
51 <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
52 <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
53 <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
54 <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
55 </div>
56 </section>
57 <section>
58 <div class="previews">
59 <div class="spense">
60 <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
61 <h2 class="spense-heading">Spense.com</h2>
62 <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
63 </div>
64 <div class="yelp">
65 <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
66 <h2 class="yelp-heading">YelpCamp.com</h2>
67 <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
68 </div>
69 </div>
70 </section>
71 <section>
72 <div class="blurb">
73 <div class="blurb1">
74 <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
75 <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
76 <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
77 </div>
78 <div class="blurb2">
79 <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
80 <p>A quote I live by perfectly illustrates what I mean.</p>
81 <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
82 <p>I'm happy to chat over coffee some time about how I can help your company.</p>
83 </div>
84 </div>
85 </section>
86 <section>
87 <div class="interested">
88 <div class="interested1">
89 <h1>Intersted in working with me?</h1>
90 <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
91 <button class="git-button">Get in touch</button>
92 </div>
93 <div class="interested2">
94 </div>
95 </div>
96 </section>
97</body>
98</html>
99* {
100 box-sizing: border-box;
101 margin: 0;
102 padding: 0;
103}
104
105body {
106 background-color: black;
107}
108
109nav {
110 display: flex;
111 flex-wrap: wrap;
112 padding: 2% 6%;
113 justify-content: space-between;
114 align-items: center;
115}
116
117.logo {
118 font-family: 'Prata';
119 color: #ffffff;
120 font-size: 110%;
121}
122
123.logo a {
124 text-decoration: none;
125 font-family: 'Prata';
126 color: #ffffff;
127}
128
129.logo:hover {
130 transform: scale(1.1);
131 transition: 0.3s;
132}
133
134.nav-list {
135 flex: 1;
136 text-align: center;
137}
138
139.nav-list li {
140 list-style: none;
141 display: inline-block;
142 padding: 8px 12px;
143 position: relative;
144}
145
146.nav-list li:hover {
147 transform: scale(1.1);
148 transition: 0.3s;
149}
150
151.nav-list li a {
152 color: #939495;
153 text-decoration: none;
154 font-family: 'Inter';
155}
156
157.nav-button {
158 background-color: #fbe850;
159 color: #000000;
160 float: right;
161 padding: 15px 30px;
162 font-family: 'Prata';
163}
164
165.nav-button:hover {
166 transform: scale(1.1);
167 transition: 0.3s;
168}
169
170.company-logos {
171 display: flex;
172 flex-wrap: wrap;
173 flex-basis: 100%;
174 padding: 2% 6%;
175 justify-content: space-between;
176}
177
178h1 {
179 font-family: 'Prata';
180 color: #ffffff;
181}
182
183p {
184 font-family: 'Inter';
185 color: #939495;
186}
187
188.top-container {
189 display: flex;
190 width: 50%;
191 padding: 2% 6%;
192}
193
194.sub-heading {
195 font-size: 250%;
196}
197
198.previews {
199 display: flex;
200 padding: 2% 6%;
201 gap: 1rem;
202}
203
204.previews > * {
205 flex-basis: 100%;
206}
207
208.spense-heading {
209 font-family: 'Prata';
210 color: #ffffff;
211 padding-top: 1rem;
212 padding-bottom: 1rem;
213}
214
215.spense p {
216 color: #939495;
217}
218
219.spense-img {
220 height: auto;
221 max-width: 100%;
222}
223
224.yelp-img {
225 height: auto;
226 max-width: 100%;
227}
228
229.yelp-heading {
230 font-family: 'Prata';
231 color: #ffffff;
232 padding-top: 1rem;
233 padding-bottom: 1rem;
234}
235
236.yelp p {
237 color: #939495;
238}
239
240.blurb {
241 display: flex;
242 padding: 2% 6%;
243 gap: 1rem;
244 background-color: #2e3038;
245}
246
247.blurb1 h1 {
248 margin-bottom: 1rem;
249 color: #ffffff;
250}
251
252.blurb1 p {
253 margin-bottom: 1rem;
254 color: #939495;
255}
256
257.blurb2 p {
258 margin-top: 0.5rem;
259 margin-bottom: 1rem;
260 color: #939495;
261}
262
263.interested {
264 display: flex;
265 padding: 2% 6%;
266 gap: 1rem;
267}
268
269.interested h1 {
270 margin-bottom: 1rem;
271}
272
273.interested1 p {
274 margin-bottom: 1rem;
275 margin-right: 1rem;
276}
277
278.interested1 {
279 flex-basis: 50%;
280}
281
282.git-button {
283 background-color: #fbe850;
284 color: #000000;
285 padding: 15px 30px;
286 font-family: 'Prata';
287}
288
289.git-button:hover {
290 transform: scale(1.1);
291 transition: 0.3s;
292}
293
294.hamburger-icon {
295 margin: auto 0;
296 display: none;
297 cursor: pointer;
298}
299
300.mobile-menu {
301 display: none;
302 position: absolute;
303 top: 50px;
304 left: 0;
305 height: calc(100vh - 50px);
306 width: 100%;
307}
308
309.open .mobile-menu {
310 display: flex;
311 flex-direction: column;
312 align-items: center;
313 justify-content: flex-start;
314}
315
316@media (max-width: 500px) {
317 .top-container {
318 width: 100%;
319 margin-bottom: 3rem;
320 }
321
322 .previews {
323 display: block;
324 }
325
326 .blurb {
327 display: block;
328 }
329
330 .blurb1 {
331 margin-bottom: 3rem;
332 }
333
334 .interested {
335 display: block;
336 max-width: 80%;
337 }
338}
339
340@media (max-width: 750px) {
341 .nav-list {
342 display: none;
343 }
344
345 .hamburger-icon {
346 display:inline-block
347 }
348}
349
350@media (max-width: 800px) {
351 .company-logos {
352 display: grid;
353 grid-template-columns: repeat(2, 1fr);
354 gap: 1rem;
355 align-items: center;
356 justify-content: center;
357 }
358}
359.company-logos img {
360 justify-self: center;
361}
362.company-logos img {
363 margin: 0 auto;
364}
365* {
366 box-sizing: border-box;
367 margin: 0;
368 padding: 0;
369}
370
371body {
372 background-color: black;
373}
374
375.company-logos {
376 display: flex;
377 flex-wrap: wrap;
378 flex-basis: 100%;
379 padding: 2% 6%;
380 justify-content: space-between;
381}
382
383@media(max-width: 1050px) {
384 .company-logos {
385 display: grid;
386 grid-template-columns: repeat(3, 1fr);
387 gap: 1rem;
388 }
389}
390
391@media (max-width: 800px) {
392 .company-logos {
393 grid-template-columns: repeat(2, 1fr);
394 }
395}
396
397.company-logos img {
398 justify-self: center;
399} <section class="logos">
400 <div class="company-logos">
401 <img src="https://via.placeholder.com/150" alt="Walmart logo" class="walmart-logo">
402 <img src="https://via.placeholder.com/150" alt="JP Morgan logo">
403 <img src="https://via.placeholder.com/150" alt="Visa logo">
404 <img src="https://via.placeholder.com/150" alt="Tinder logo">
405 <img src="https://via.placeholder.com/150" alt="Samsung logo">
406 <img src="https://via.placeholder.com/150" alt="Verizon logo">
407 </div>
408 </section>
Note: I removed all code irrelevant for question being asked.
QUESTION
Counting repeated pairs in a list
Asked 2022-Feb-15 at 03:11I have an assignment that has a data mining element. I need to find which authors collaborate the most across several publication webpages.
I've scraped the webpages and compiled the author text into a list.
My current output looks like this:
1for author in list:
2 print(author)
3
4##output :
5['Author 1', 'Author 2', 'Author 3']
6['Author 2', 'Author 4', 'Author 1']
7['Author 1', 'Author 5', 'Author 6', 'Author 7', 'Author 4']
8
etc for ~100 more rows.
My idea is, for in each section of the list, to produce another list that contains each of the unique pairs in that list. E.g. the third demo row would give 'Author 1 + Author 5', 'Author 1 + Author 6', 'Author 1 + Author 7', 'Author 1 + Author 4', 'Author 5 + Author 6', 'Author 5 + Author 7', 'Author 5 + Author 4', 'Author 6 + Author 7', 'Author 6 + Author 4', 'Author 7 + Author 4'. Then I'd append these pairs lists to one large list and put it through a counter to see which pairs came up the most.
The problem is I'm just not sure how to actually implement that pair matcher, so if anyone has any pointers that would be great. I'm sure it can't be that complicated an answer, but I've been unable to find it. Alternative ideas on how to measure collaboration would be good too.
ANSWER
Answered 2022-Feb-14 at 21:36You could use a dictionary where the pair is the key and the number how often it occurs is the value. You'll need to make sure that you always generate the same key for (Author1,Author2)
and (Author2, Author1)
but you could choose alphabetic ordering for dealing with that.
Then you simply increment the number stored for the pair whenever you encounter it.
QUESTION
As seen in the image, create two responsive DIVs with space between them
Asked 2022-Feb-10 at 22:15I'm working on a codewell challenge and I'm stuck on this portion. I can't make an even space between them, and the images are overlapping.
1.website {
2 display: flex;
3 justify-content: space-between;
4}
5
6.arrow {
7 display: inline-block;
8 width: 1rem;
9}
1.website {
2 display: flex;
3 justify-content: space-between;
4}
5
6.arrow {
7 display: inline-block;
8 width: 1rem;
9}<div class="website">
10 <div class="spense">
11 <img id="spense" src="./Assets/Spense.png" alt="spense">
12 <h3>Spense.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
13 Rethinking the way writers get paid, an open resource platform <br> design to help writers focus more on writing, and less on <br> when and how they'll get paid, Projects in collaboration with <br> Codewell.cc
14 </div>
15 <div class="yelp">
16 <img id="yelp" src="./Assets/YelpCamp.png" alt="YelpCamp">
17 <h3>YelpCamp.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
18 Allowing backpack travelers to perfectly plan their trip <br> through an open-source platform similar to TripAdvisor. With <br>over 1m MAU, YelpCamp has been the crowd's favorite in <br>2021.
19 </div>
20</div>
ANSWER
Answered 2022-Feb-09 at 13:09You can use width property on each child inside flex container.
1.website {
2 display: flex;
3 justify-content: space-between;
4}
5
6.arrow {
7 display: inline-block;
8 width: 1rem;
9}<div class="website">
10 <div class="spense">
11 <img id="spense" src="./Assets/Spense.png" alt="spense">
12 <h3>Spense.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
13 Rethinking the way writers get paid, an open resource platform <br> design to help writers focus more on writing, and less on <br> when and how they'll get paid, Projects in collaboration with <br> Codewell.cc
14 </div>
15 <div class="yelp">
16 <img id="yelp" src="./Assets/YelpCamp.png" alt="YelpCamp">
17 <h3>YelpCamp.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
18 Allowing backpack travelers to perfectly plan their trip <br> through an open-source platform similar to TripAdvisor. With <br>over 1m MAU, YelpCamp has been the crowd's favorite in <br>2021.
19 </div>
20</div>.website {
21 display: flex;
22 justify-content: space-between;
23}
24
25.spense, .yelp{
26 width:40%;
27}
28.arrow {
29 display: inline-block;
30 width: 1rem;
31}
32.image{
33width:100%;
34object-fit:cover;
35}
1.website {
2 display: flex;
3 justify-content: space-between;
4}
5
6.arrow {
7 display: inline-block;
8 width: 1rem;
9}<div class="website">
10 <div class="spense">
11 <img id="spense" src="./Assets/Spense.png" alt="spense">
12 <h3>Spense.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
13 Rethinking the way writers get paid, an open resource platform <br> design to help writers focus more on writing, and less on <br> when and how they'll get paid, Projects in collaboration with <br> Codewell.cc
14 </div>
15 <div class="yelp">
16 <img id="yelp" src="./Assets/YelpCamp.png" alt="YelpCamp">
17 <h3>YelpCamp.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
18 Allowing backpack travelers to perfectly plan their trip <br> through an open-source platform similar to TripAdvisor. With <br>over 1m MAU, YelpCamp has been the crowd's favorite in <br>2021.
19 </div>
20</div>.website {
21 display: flex;
22 justify-content: space-between;
23}
24
25.spense, .yelp{
26 width:40%;
27}
28.arrow {
29 display: inline-block;
30 width: 1rem;
31}
32.image{
33width:100%;
34object-fit:cover;
35}<div class="website">
36 <div class="spense">
37 <img class="image" id="spense" src="https://via.placeholder.com/350
38
39C/O https://placeholder.com/" alt="spense">
40 <h3>Spense.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
41 Rethinking the way writers get paid, an open resource platform <br> design to help writers focus more on writing, and less on <br> when and how they'll get paid, Projects in collaboration with <br> Codewell.cc
42 </div>
43 <div class="yelp">
44 <img class="image" id="yelp" src="https://via.placeholder.com/350
45
46C/O https://placeholder.com/" alt="YelpCamp">
47 <h3>YelpCamp.com<img class="arrow" src="./Assets/noun-arrow-2841221-svg.png" alt="arrow-icon"></h3>
48 Allowing backpack travelers to perfectly plan their trip <br> through an open-source platform similar to TripAdvisor. With <br>over 1m MAU, YelpCamp has been the crowd's favorite in <br>2021.
49 </div>
QUESTION
Django mod_wsgi Apache Server, ModuleNotFoundError: No Module Named Django
Asked 2022-Feb-09 at 21:35I read ton of articles, but still can't figure out what I'm missing. I'm running a django website from virtualenv. Here's my config file. The website address is replaced by <domain.com>, can't use that here.
Config
1<VirtualHost *:80>
2
3 ServerAdmin sidharth@collaboration-management
4 ServerName <domain.com>
5 ServerAlias <domain.com>
6 DocumentRoot /home/sidharth/Downloads/gmcweb
7
8 ErrorLog ${APACHE_LOG_DIR}/error.log
9 CustomLog ${APACHE_LOG_DIR}/access.log combined
10
11 Alias /static /home/sidharth/Downloads/gmcweb/static
12
13 <Directory /home/sidharth/Downloads/gmcweb/static>
14 Require all granted
15 </Directory>
16
17 <Directory /home/sidharth/Downloads/gmcweb/gmcweb>
18 <Files wsgi.py>
19 Require all granted
20 </Files>
21 </Directory>
22
23
24 WSGIDaemonProcess gmcweb python-home=/home/sidharth/Downloads/gmcwebenvlin python-path=/home/sidharth/Downloads/gmcweb
25 WSGIProcessGroup gmcweb
26 WSGIScriptAlias / /home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py
27</VirtualHost>
28
Here's my WSGI.py file, didn't change anything never had to earlier
1<VirtualHost *:80>
2
3 ServerAdmin sidharth@collaboration-management
4 ServerName <domain.com>
5 ServerAlias <domain.com>
6 DocumentRoot /home/sidharth/Downloads/gmcweb
7
8 ErrorLog ${APACHE_LOG_DIR}/error.log
9 CustomLog ${APACHE_LOG_DIR}/access.log combined
10
11 Alias /static /home/sidharth/Downloads/gmcweb/static
12
13 <Directory /home/sidharth/Downloads/gmcweb/static>
14 Require all granted
15 </Directory>
16
17 <Directory /home/sidharth/Downloads/gmcweb/gmcweb>
18 <Files wsgi.py>
19 Require all granted
20 </Files>
21 </Directory>
22
23
24 WSGIDaemonProcess gmcweb python-home=/home/sidharth/Downloads/gmcwebenvlin python-path=/home/sidharth/Downloads/gmcweb
25 WSGIProcessGroup gmcweb
26 WSGIScriptAlias / /home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py
27</VirtualHost>
28import os
29
30from django.core.wsgi import get_wsgi_application
31
32os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'gmcweb.settings')
33
34application = get_wsgi_application()
35
Python Versions
My virtualenv python version is 3.9.5 Default Google VM python version is 3.6.9
Python Installed Libraries
1<VirtualHost *:80>
2
3 ServerAdmin sidharth@collaboration-management
4 ServerName <domain.com>
5 ServerAlias <domain.com>
6 DocumentRoot /home/sidharth/Downloads/gmcweb
7
8 ErrorLog ${APACHE_LOG_DIR}/error.log
9 CustomLog ${APACHE_LOG_DIR}/access.log combined
10
11 Alias /static /home/sidharth/Downloads/gmcweb/static
12
13 <Directory /home/sidharth/Downloads/gmcweb/static>
14 Require all granted
15 </Directory>
16
17 <Directory /home/sidharth/Downloads/gmcweb/gmcweb>
18 <Files wsgi.py>
19 Require all granted
20 </Files>
21 </Directory>
22
23
24 WSGIDaemonProcess gmcweb python-home=/home/sidharth/Downloads/gmcwebenvlin python-path=/home/sidharth/Downloads/gmcweb
25 WSGIProcessGroup gmcweb
26 WSGIScriptAlias / /home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py
27</VirtualHost>
28import os
29
30from django.core.wsgi import get_wsgi_application
31
32os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'gmcweb.settings')
33
34application = get_wsgi_application()
35Package Version
36------------------------ ---------
37asgiref 3.4.0
38attrs 21.2.0
39autopep8 1.5.7
40beautifulsoup4 4.9.3
41certifi 2021.5.30
42cffi 1.14.5
43chardet 4.0.0
44cryptography 3.4.7
45defusedxml 0.7.1
46Django 3.2.4
47django-allauth 0.44.0
48django-livereload-server 0.3.2
49idna 2.10
50jsonschema 3.2.0
51oauthlib 3.1.1
52pip 21.2.3
53pycodestyle 2.7.0
54pycparser 2.20
55PyJWT 2.1.0
56pyrsistent 0.18.0
57python3-openid 3.2.0
58pytz 2021.1
59requests 2.25.1
60requests-oauthlib 1.3.0
61setuptools 57.4.0
62six 1.16.0
63soupsieve 2.2.1
64sqlparse 0.4.1
65toml 0.10.2
66tornado 6.1
67urllib3 1.26.6
68
I installed apache modwsgi as well sudo apt-get install python3-pip apache2 libapache2-mod-wsgi-py3
Error Log File
1<VirtualHost *:80>
2
3 ServerAdmin sidharth@collaboration-management
4 ServerName <domain.com>
5 ServerAlias <domain.com>
6 DocumentRoot /home/sidharth/Downloads/gmcweb
7
8 ErrorLog ${APACHE_LOG_DIR}/error.log
9 CustomLog ${APACHE_LOG_DIR}/access.log combined
10
11 Alias /static /home/sidharth/Downloads/gmcweb/static
12
13 <Directory /home/sidharth/Downloads/gmcweb/static>
14 Require all granted
15 </Directory>
16
17 <Directory /home/sidharth/Downloads/gmcweb/gmcweb>
18 <Files wsgi.py>
19 Require all granted
20 </Files>
21 </Directory>
22
23
24 WSGIDaemonProcess gmcweb python-home=/home/sidharth/Downloads/gmcwebenvlin python-path=/home/sidharth/Downloads/gmcweb
25 WSGIProcessGroup gmcweb
26 WSGIScriptAlias / /home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py
27</VirtualHost>
28import os
29
30from django.core.wsgi import get_wsgi_application
31
32os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'gmcweb.settings')
33
34application = get_wsgi_application()
35Package Version
36------------------------ ---------
37asgiref 3.4.0
38attrs 21.2.0
39autopep8 1.5.7
40beautifulsoup4 4.9.3
41certifi 2021.5.30
42cffi 1.14.5
43chardet 4.0.0
44cryptography 3.4.7
45defusedxml 0.7.1
46Django 3.2.4
47django-allauth 0.44.0
48django-livereload-server 0.3.2
49idna 2.10
50jsonschema 3.2.0
51oauthlib 3.1.1
52pip 21.2.3
53pycodestyle 2.7.0
54pycparser 2.20
55PyJWT 2.1.0
56pyrsistent 0.18.0
57python3-openid 3.2.0
58pytz 2021.1
59requests 2.25.1
60requests-oauthlib 1.3.0
61setuptools 57.4.0
62six 1.16.0
63soupsieve 2.2.1
64sqlparse 0.4.1
65toml 0.10.2
66tornado 6.1
67urllib3 1.26.6
68[Thu Sep 23 15:05:06.554545 2021] [mpm_event:notice] [pid 32077:tid 140392561593280] AH00489: Apache/2.4.29 (Ubuntu) mod_wsgi/4.5.17 Python/3.6 configured -- resuming normal operations
69[Thu Sep 23 15:05:06.554594 2021] [core:notice] [pid 32077:tid 140392561593280] AH00094: Command line: '/usr/sbin/apache2'
70[Thu Sep 23 15:05:19.081581 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] mod_wsgi (pid=32617): Target WSGI script '/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py' c$
71[Thu Sep 23 15:05:19.081638 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] mod_wsgi (pid=32617): Exception occurred processing WSGI script '/home/sidharth/Downloads/g$
72[Thu Sep 23 15:05:19.081828 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] Traceback (most recent call last):
73[Thu Sep 23 15:05:19.081849 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] File "/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py", line 12, in <module>
74[Thu Sep 23 15:05:19.081853 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] from django.core.wsgi import get_wsgi_application
75[Thu Sep 23 15:05:19.081867 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] ModuleNotFoundError: No module named 'django'
76[Thu Sep 23 15:05:32.244779 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] mod_wsgi (pid=32617): Target WSGI script '/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py' c$
77[Thu Sep 23 15:05:32.244845 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] mod_wsgi (pid=32617): Exception occurred processing WSGI script '/home/sidharth/Downloads/g$
78[Thu Sep 23 15:05:32.244924 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] Traceback (most recent call last):
79[Thu Sep 23 15:05:32.244946 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] File "/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py", line 12, in <module>
80[Thu Sep 23 15:05:32.244951 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] from django.core.wsgi import get_wsgi_application
81[Thu Sep 23 15:05:32.244966 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] ModuleNotFoundError: No module named 'django'
82
ANSWER
Answered 2021-Sep-23 at 15:28The error says that either you haven't got Django installed or didn't activate the virtual environment in which the Django was installed. Make sure that you check the list of installed packages and find Django in there, via:
1<VirtualHost *:80>
2
3 ServerAdmin sidharth@collaboration-management
4 ServerName <domain.com>
5 ServerAlias <domain.com>
6 DocumentRoot /home/sidharth/Downloads/gmcweb
7
8 ErrorLog ${APACHE_LOG_DIR}/error.log
9 CustomLog ${APACHE_LOG_DIR}/access.log combined
10
11 Alias /static /home/sidharth/Downloads/gmcweb/static
12
13 <Directory /home/sidharth/Downloads/gmcweb/static>
14 Require all granted
15 </Directory>
16
17 <Directory /home/sidharth/Downloads/gmcweb/gmcweb>
18 <Files wsgi.py>
19 Require all granted
20 </Files>
21 </Directory>
22
23
24 WSGIDaemonProcess gmcweb python-home=/home/sidharth/Downloads/gmcwebenvlin python-path=/home/sidharth/Downloads/gmcweb
25 WSGIProcessGroup gmcweb
26 WSGIScriptAlias / /home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py
27</VirtualHost>
28import os
29
30from django.core.wsgi import get_wsgi_application
31
32os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'gmcweb.settings')
33
34application = get_wsgi_application()
35Package Version
36------------------------ ---------
37asgiref 3.4.0
38attrs 21.2.0
39autopep8 1.5.7
40beautifulsoup4 4.9.3
41certifi 2021.5.30
42cffi 1.14.5
43chardet 4.0.0
44cryptography 3.4.7
45defusedxml 0.7.1
46Django 3.2.4
47django-allauth 0.44.0
48django-livereload-server 0.3.2
49idna 2.10
50jsonschema 3.2.0
51oauthlib 3.1.1
52pip 21.2.3
53pycodestyle 2.7.0
54pycparser 2.20
55PyJWT 2.1.0
56pyrsistent 0.18.0
57python3-openid 3.2.0
58pytz 2021.1
59requests 2.25.1
60requests-oauthlib 1.3.0
61setuptools 57.4.0
62six 1.16.0
63soupsieve 2.2.1
64sqlparse 0.4.1
65toml 0.10.2
66tornado 6.1
67urllib3 1.26.6
68[Thu Sep 23 15:05:06.554545 2021] [mpm_event:notice] [pid 32077:tid 140392561593280] AH00489: Apache/2.4.29 (Ubuntu) mod_wsgi/4.5.17 Python/3.6 configured -- resuming normal operations
69[Thu Sep 23 15:05:06.554594 2021] [core:notice] [pid 32077:tid 140392561593280] AH00094: Command line: '/usr/sbin/apache2'
70[Thu Sep 23 15:05:19.081581 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] mod_wsgi (pid=32617): Target WSGI script '/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py' c$
71[Thu Sep 23 15:05:19.081638 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] mod_wsgi (pid=32617): Exception occurred processing WSGI script '/home/sidharth/Downloads/g$
72[Thu Sep 23 15:05:19.081828 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] Traceback (most recent call last):
73[Thu Sep 23 15:05:19.081849 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] File "/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py", line 12, in <module>
74[Thu Sep 23 15:05:19.081853 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] from django.core.wsgi import get_wsgi_application
75[Thu Sep 23 15:05:19.081867 2021] [wsgi:error] [pid 32617:tid 140392409851648] [remote 103.206.177.13:49604] ModuleNotFoundError: No module named 'django'
76[Thu Sep 23 15:05:32.244779 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] mod_wsgi (pid=32617): Target WSGI script '/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py' c$
77[Thu Sep 23 15:05:32.244845 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] mod_wsgi (pid=32617): Exception occurred processing WSGI script '/home/sidharth/Downloads/g$
78[Thu Sep 23 15:05:32.244924 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] Traceback (most recent call last):
79[Thu Sep 23 15:05:32.244946 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] File "/home/sidharth/Downloads/gmcweb/gmcweb/wsgi.py", line 12, in <module>
80[Thu Sep 23 15:05:32.244951 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] from django.core.wsgi import get_wsgi_application
81[Thu Sep 23 15:05:32.244966 2021] [wsgi:error] [pid 32617:tid 140392325842688] [remote 103.206.177.13:52916] ModuleNotFoundError: No module named 'django'
82$pip list
83
QUESTION
How to return different format of records from a single PL/pgSQL function?
Asked 2022-Jan-30 at 02:41I am a frontend developer but I started to write backend stuff. I have spent quite some amount of time trying to figure out how to solve this. I really need some help.
Here are the simplified definitions and relations of two tables:
1CREATE TABLE IF NOT EXISTS items (
2 item_id uuid NOT NULL DEFAULT gen_random_uuid() ,
3 parent_id uuid DEFAULT NULL ,
4 parent_table parent_tables NOT NULL
5);
6
1CREATE TABLE IF NOT EXISTS items (
2 item_id uuid NOT NULL DEFAULT gen_random_uuid() ,
3 parent_id uuid DEFAULT NULL ,
4 parent_table parent_tables NOT NULL
5);
6CREATE TABLE IF NOT EXISTS collections (
7 collection_id uuid NOT NULL DEFAULT gen_random_uuid() ,
8 parent_id uuid DEFAULT NULL
9);
10
Our product is an online document collaboration tool, page can have nested pages.
I have a piece of PostgreSQL code for getting all of its ancestor records for given item_ids.
1CREATE TABLE IF NOT EXISTS items (
2 item_id uuid NOT NULL DEFAULT gen_random_uuid() ,
3 parent_id uuid DEFAULT NULL ,
4 parent_table parent_tables NOT NULL
5);
6CREATE TABLE IF NOT EXISTS collections (
7 collection_id uuid NOT NULL DEFAULT gen_random_uuid() ,
8 parent_id uuid DEFAULT NULL
9);
10WITH RECURSIVE ancestors AS (
11 SELECT *
12 FROM items
13 WHERE item_id in ( ${itemIds} )
14
15 UNION
16
17 SELECT i.*
18 FROM items i
19 INNER JOIN ancestors a ON a.parent_id = i.item_id
20)
21SELECT * FROM ancestors
22
It works fine for nesting regular pages, But if I am going to support nesting collection pages, which means some items' parent_id might refer to "collection" table's collection_id, this code will not work anymore. According to my limited experience, I don't think pure SQL code can solve it. I think writing a PL/pgSQL function might be a solution, but I need to get all ancestor records to given itemIds
, which means returning a mix of items and collections records.
So how to return different format of records from a single PL/pgSQL function? I did some research but haven't found any example.
ANSWER
Answered 2022-Jan-30 at 02:36You can make it work by returning a superset as row: comprised of item and collection. One of both will be NULL
for each result row.
1CREATE TABLE IF NOT EXISTS items (
2 item_id uuid NOT NULL DEFAULT gen_random_uuid() ,
3 parent_id uuid DEFAULT NULL ,
4 parent_table parent_tables NOT NULL
5);
6CREATE TABLE IF NOT EXISTS collections (
7 collection_id uuid NOT NULL DEFAULT gen_random_uuid() ,
8 parent_id uuid DEFAULT NULL
9);
10WITH RECURSIVE ancestors AS (
11 SELECT *
12 FROM items
13 WHERE item_id in ( ${itemIds} )
14
15 UNION
16
17 SELECT i.*
18 FROM items i
19 INNER JOIN ancestors a ON a.parent_id = i.item_id
20)
21SELECT * FROM ancestors
22WITH RECURSIVE ancestors AS (
23 SELECT 0 AS lvl, i.parent_id, i.parent_table, i AS _item, NULL::collections AS _coll
24 FROM items i
25 WHERE item_id IN ( ${itemIds} )
26
27 UNION ALL -- !
28 SELECT lvl + 1, COALESCE(i.parent_id, c.parent_id), COALESCE(i.parent_table, 'i'), i, c
29 FROM ancestors a
30 LEFT JOIN items i ON a.parent_table = 'i' AND i.item_id = a.parent_id
31 LEFT JOIN collections c ON a.parent_table = 'c' AND c.collection_id = a.parent_id
32 WHERE a.parent_id IS NOT NULL
33 )
34SELECT lvl, _item, _coll
35FROM ancestors
36-- ORDER BY ?
37
db<>fiddle here
UNION ALL
, not UNION
.
Assuming a collection's parent is always an item, while an item can go either way.
We need LEFT JOIN
on both potential parent tables to stay in the race.
I added an optional lvl
to keep track of the level of hierarchy.
About decomposing row types:
QUESTION
Remove position absolute in media query
Asked 2022-Jan-28 at 14:46I am using display: flex for a container (.zone-container) to position the children. However, I am applying position: absolute to one of the children (#camp-zone) in order to place it on top of the other children. I want to remove the position: absolute from the child element in the media query and apply the same style for all the children (except for background-color). I have tried to set position to static in the media query for both the element that has position: absolute and the container that has position: relative but the child element continues to have different style compared to the other children. How do I unset the specific styling in the media query?
1.header {
2 background-color: navy;
3 min-height: 7vh;
4 display: grid;
5}
6
7.header h2 {
8 color: white;
9 text-align: center;
10 font-size: 45px;
11 font-weight: inherit;
12 font-family: arial;
13}
14
15.game-area {
16 display: flex;
17 justify-content: flex-start;
18 width: 100%;
19 background-color: navy;
20 height: 100%;
21 min-height: 1000px;
22}
23
24.activity-zone-container {
25 display: flex;
26}
27
28.zone-container {
29 display: flex;
30 flex-wrap: wrap;
31 max-width: 120vh;
32 position: relative;
33 max-height: 95vh;
34 margin: 0%;
35}
36
37.zone {
38 min-width: 32vh;
39 min-height: 27vh;
40 margin: 15px;
41 display: flex;
42 justify-content: center;
43 align-items: center;
44 width: 44%;
45 height: 33%;
46 max-height: 300px;
47}
48
49.zone p {
50 color: white;
51 text-align: center;
52 margin-bottom: 15px;
53 font-family: arial;
54}
55
56#concentration-zone {
57 background-color: orange;
58}
59#communication-zone {
60 background-color: yellow;
61}
62#communication-zone p {
63 color: black;
64}
65#collaboration-zone {
66 background-color: #3260a8;
67}
68#chill-out-zone {
69 background-color: pink;
70}
71#chill-out-zone p {
72 color: black;
73}
74#camp-zone {
75 justify-content: center;
76 background-color: green;
77 justify-self: center;
78 position: absolute;
79 z-index: 0;
80 bottom: 0;
81 right: 0;
82 width: 44%;
83 height: 33%;
84 min-width: 32vh;
85 min-height: 27vh;
86 margin-left: auto;
87 margin-right: auto;
88 margin-top: auto;
89 margin-bottom: auto;
90 left: 0;
91 top: 0;
92}
93.activity-container {
94 margin: 0;
95 max-width: 73vh;
96 display: flex;
97 flex-wrap: wrap;
98 width: 40%;
99}
100
101.activity {
102 background-color: #3260a8;
103 margin: 17px;
104 display: flex;
105 justify-content: center;
106 cursor: pointer;
107 width: 140px;
108 height: 87px;
109}
110.activity-concentration {
111 background-color: orange;
112 margin: 17px;
113 display: flex;
114 justify-content: center;
115 color: white;
116 width: 140px;
117 height: 87px;
118}
119.activity-communication {
120 background-color: yellow;
121 margin: 17px;
122 display: flex;
123 justify-content: center;
124 width: 140px;
125 height: 87px;
126}
127.activity-chill-out {
128 background-color: pink;
129 margin: 17px;
130 display: flex;
131 justify-content: center;
132 width: 140px;
133 height: 87px;
134}
135.activity-camp {
136 background-color: green;
137 margin: 17px;
138 display: flex;
139 justify-content: center;
140 color: white;
141 width: 140px;
142 height: 87px;
143}
144.activity p {
145 color: white;
146}
147
148@media (max-width: 768px) {
149
150 .game-area {
151 min-height: 150vh;
152 }
153
154 .header h2 {
155 margin: 15px;
156 font-size: 30px;
157 }
158
159 .zone {
160 width: 220px;
161 height: 180px;
162 }
163
164 #camp-zone {
165 position: static;
166 width: unset;
167 height: unset;
168 margin-top: unset;
169 justify-content: unset;
170 justify-self: unset;
171 z-index: unset;
172 bottom: unset;
173 right: unset;
174 width: unset;
175 height: unset;
176 min-width: unset;
177 min-height: unset;
178 margin-left: unset;
179 margin-right: unset;
180 margin-bottom: unset;
181 left: unset;
182 top: unset;
183 }
184
1.header {
2 background-color: navy;
3 min-height: 7vh;
4 display: grid;
5}
6
7.header h2 {
8 color: white;
9 text-align: center;
10 font-size: 45px;
11 font-weight: inherit;
12 font-family: arial;
13}
14
15.game-area {
16 display: flex;
17 justify-content: flex-start;
18 width: 100%;
19 background-color: navy;
20 height: 100%;
21 min-height: 1000px;
22}
23
24.activity-zone-container {
25 display: flex;
26}
27
28.zone-container {
29 display: flex;
30 flex-wrap: wrap;
31 max-width: 120vh;
32 position: relative;
33 max-height: 95vh;
34 margin: 0%;
35}
36
37.zone {
38 min-width: 32vh;
39 min-height: 27vh;
40 margin: 15px;
41 display: flex;
42 justify-content: center;
43 align-items: center;
44 width: 44%;
45 height: 33%;
46 max-height: 300px;
47}
48
49.zone p {
50 color: white;
51 text-align: center;
52 margin-bottom: 15px;
53 font-family: arial;
54}
55
56#concentration-zone {
57 background-color: orange;
58}
59#communication-zone {
60 background-color: yellow;
61}
62#communication-zone p {
63 color: black;
64}
65#collaboration-zone {
66 background-color: #3260a8;
67}
68#chill-out-zone {
69 background-color: pink;
70}
71#chill-out-zone p {
72 color: black;
73}
74#camp-zone {
75 justify-content: center;
76 background-color: green;
77 justify-self: center;
78 position: absolute;
79 z-index: 0;
80 bottom: 0;
81 right: 0;
82 width: 44%;
83 height: 33%;
84 min-width: 32vh;
85 min-height: 27vh;
86 margin-left: auto;
87 margin-right: auto;
88 margin-top: auto;
89 margin-bottom: auto;
90 left: 0;
91 top: 0;
92}
93.activity-container {
94 margin: 0;
95 max-width: 73vh;
96 display: flex;
97 flex-wrap: wrap;
98 width: 40%;
99}
100
101.activity {
102 background-color: #3260a8;
103 margin: 17px;
104 display: flex;
105 justify-content: center;
106 cursor: pointer;
107 width: 140px;
108 height: 87px;
109}
110.activity-concentration {
111 background-color: orange;
112 margin: 17px;
113 display: flex;
114 justify-content: center;
115 color: white;
116 width: 140px;
117 height: 87px;
118}
119.activity-communication {
120 background-color: yellow;
121 margin: 17px;
122 display: flex;
123 justify-content: center;
124 width: 140px;
125 height: 87px;
126}
127.activity-chill-out {
128 background-color: pink;
129 margin: 17px;
130 display: flex;
131 justify-content: center;
132 width: 140px;
133 height: 87px;
134}
135.activity-camp {
136 background-color: green;
137 margin: 17px;
138 display: flex;
139 justify-content: center;
140 color: white;
141 width: 140px;
142 height: 87px;
143}
144.activity p {
145 color: white;
146}
147
148@media (max-width: 768px) {
149
150 .game-area {
151 min-height: 150vh;
152 }
153
154 .header h2 {
155 margin: 15px;
156 font-size: 30px;
157 }
158
159 .zone {
160 width: 220px;
161 height: 180px;
162 }
163
164 #camp-zone {
165 position: static;
166 width: unset;
167 height: unset;
168 margin-top: unset;
169 justify-content: unset;
170 justify-self: unset;
171 z-index: unset;
172 bottom: unset;
173 right: unset;
174 width: unset;
175 height: unset;
176 min-width: unset;
177 min-height: unset;
178 margin-left: unset;
179 margin-right: unset;
180 margin-bottom: unset;
181 left: unset;
182 top: unset;
183 }
184<html lang
185<body>
186 <div id="app">
187 <section class="header">
188 <h2>Click on an activity box to see which area it belongs to</h2>
189 </section>
190 <section class="game-area">
191 <div class="activity-zone-container">
192 <div class="zone-container">
193 <div class="zone" id="concentration-zone">
194 <p>Concentration</p>
195 </div>
196 <div class="zone" id="communication-zone">
197 <p>Communication</p>
198 </div>
199 <div class="zone" id="collaboration-zone">
200 <p>Collaboration</p>
201 </div>
202 <div class="zone" id="chill-out-zone">
203 <p>Chill Out</p>
204 </div>
205 <div class="zone" id="camp-zone">
206 <p>Camp</p>
207 </div>
208 </div>
209 <div class="activity-container">
210 <button class="activity" activitytype="concentration">
211 <p>Code</p>
212 </button>
213 <button class="activity" activitytype="communication">
214 <p>Teams Meeting</p>
215 </button>
216 <button class="activity" activitytype="camp">
217 <p>Make a phone call</p>
218 </button>
219 <button class="activity" activitytype="collaboration">
220 <p>Work shops with colleagues</p>
221 </button>
222 <button class="activity" activitytype="chillout">
223 <p>Coffee break</p>
224 </button>
225 <button class="activity" activitytype="collaboration">
226 <p>Lively discussions/brainstorming</p>
227 </button>
228 <button class="activity" activitytype="camp">
229 <p>Long group work</p>
230 </button>
231 <button class="activity" activitytype="collaboration">
232 <p>Creative zone for problem solving</p>
233 </button>
234 <button class="activity" activitytype="concentration">
235 <p>Concentrate on task</p>
236 </button>
237 <button class="activity" activitytype="communication">
238 <p>Not bothered by phone calls/chatting</p>
239 </button>
240 <button class="activity" activitytype="collaboration">
241 <p>Collaboration &amp; Planning</p>
242 </button>
243 <button class="activity" activitytype="chillout">
244 <p>Coffee break with groups</p>
245 </button>
246 <button class="activity" activitytype="collaboration">
247 <p>Prepare a presentation together</p>
248 </button>
249 <button class="activity" activitytype="communication">
250 <p>Think for yourself</p>
251 </button>
252 <button class="activity" activitytype="collaboration">
253 <p>Meeting with no sensitive info</p>
254 </button>
255 <button class="activity" activitytype="collaboration">
256 <p>Quick, spontaneous meetings</p>
257 </button>
258 <button class="activity" activitytype="communication">
259 <p>Have a chat without disturbance</p>
260 </button>
261 <button class="activity" activitytype="camp">
262 <p>Room for external/internal parties</p>
263 </button>
264 <button class="activity" activitytype="communication">
265 <p>Private dialogue</p>
266 </button>
267 <button class="activity" activitytype="communication">
268 <p>Read a contract in silence</p>
269 </button>
270 <button class="activity" activitytype="concentration">
271 <p>Individual work without disturbance</p>
272 </button>
273 <button class="activity" activitytype="communication">
274 <p>Check e-mails</p>
275 </button>
276 <button class="activity" activitytype="concentration">
277 <p>Calm &amp; quiet work space</p>
278 </button>
279 <button class="activity" activitytype="chillout">
280 <p>Hangout with colleagues outside project</p>
281 </button>
282 <button class="activity" activitytype="communication">
283 <p>Plan work</p>
284 </button>
285 <button class="activity" activitytype="communication">
286 <p>Lead employees/team</p>
287 </button>
288 <button class="activity" activitytype="concentration">
289 <p>Analyze data</p>
290 </button>
291 <button class="activity" activitytype="concentration">
292 <p>Rest</p>
293 </button>
294 <button class="activity" activitytype="chillout">
295 <p>Chat with a colleague about weekend plans</p>
296 </button>
297 <button class="activity" activitytype="collaboration">
298 <p>Discuss solutions for challenges in projects</p>
299 </button>
300 <button class="activity" activitytype="chillout">
301 <p>Pause from work</p>
302 </button>
303 <button class="activity" activitytype="camp">
304 <p>Private room for team/project for a long time</p>
305 </button>
306 <button class="activity" activitytype="chillout">
307 <p>Coffee with colleagues</p>
308 </button>
309 <button class="activity" activitytype="chillout">
310 <p>Networking</p>
311 </button>
312 </div>
313 </div>
314 </section>
315 </div>
316 <script src="index.js" type="text/javascript"/>
317 <script src="/static/js/bundle.js"/>
318 <script src="/static/js/0.chunk.js"/>
319 <script src="/static/js/main.chunk.js"/>
320</body>
321</html>
ANSWER
Answered 2022-Jan-28 at 14:46Kindly change your CSS to this. The code in @media (min-width: 767px){}
only applies to screens that are larger than 767px. Smaller screens (e.g. @media (max-width: 768px){}
) will completely ignore it.
1.header {
2 background-color: navy;
3 min-height: 7vh;
4 display: grid;
5}
6
7.header h2 {
8 color: white;
9 text-align: center;
10 font-size: 45px;
11 font-weight: inherit;
12 font-family: arial;
13}
14
15.game-area {
16 display: flex;
17 justify-content: flex-start;
18 width: 100%;
19 background-color: navy;
20 height: 100%;
21 min-height: 1000px;
22}
23
24.activity-zone-container {
25 display: flex;
26}
27
28.zone-container {
29 display: flex;
30 flex-wrap: wrap;
31 max-width: 120vh;
32 position: relative;
33 max-height: 95vh;
34 margin: 0%;
35}
36
37.zone {
38 min-width: 32vh;
39 min-height: 27vh;
40 margin: 15px;
41 display: flex;
42 justify-content: center;
43 align-items: center;
44 width: 44%;
45 height: 33%;
46 max-height: 300px;
47}
48
49.zone p {
50 color: white;
51 text-align: center;
52 margin-bottom: 15px;
53 font-family: arial;
54}
55
56#concentration-zone {
57 background-color: orange;
58}
59#communication-zone {
60 background-color: yellow;
61}
62#communication-zone p {
63 color: black;
64}
65#collaboration-zone {
66 background-color: #3260a8;
67}
68#chill-out-zone {
69 background-color: pink;
70}
71#chill-out-zone p {
72 color: black;
73}
74#camp-zone {
75 justify-content: center;
76 background-color: green;
77 justify-self: center;
78 position: absolute;
79 z-index: 0;
80 bottom: 0;
81 right: 0;
82 width: 44%;
83 height: 33%;
84 min-width: 32vh;
85 min-height: 27vh;
86 margin-left: auto;
87 margin-right: auto;
88 margin-top: auto;
89 margin-bottom: auto;
90 left: 0;
91 top: 0;
92}
93.activity-container {
94 margin: 0;
95 max-width: 73vh;
96 display: flex;
97 flex-wrap: wrap;
98 width: 40%;
99}
100
101.activity {
102 background-color: #3260a8;
103 margin: 17px;
104 display: flex;
105 justify-content: center;
106 cursor: pointer;
107 width: 140px;
108 height: 87px;
109}
110.activity-concentration {
111 background-color: orange;
112 margin: 17px;
113 display: flex;
114 justify-content: center;
115 color: white;
116 width: 140px;
117 height: 87px;
118}
119.activity-communication {
120 background-color: yellow;
121 margin: 17px;
122 display: flex;
123 justify-content: center;
124 width: 140px;
125 height: 87px;
126}
127.activity-chill-out {
128 background-color: pink;
129 margin: 17px;
130 display: flex;
131 justify-content: center;
132 width: 140px;
133 height: 87px;
134}
135.activity-camp {
136 background-color: green;
137 margin: 17px;
138 display: flex;
139 justify-content: center;
140 color: white;
141 width: 140px;
142 height: 87px;
143}
144.activity p {
145 color: white;
146}
147
148@media (max-width: 768px) {
149
150 .game-area {
151 min-height: 150vh;
152 }
153
154 .header h2 {
155 margin: 15px;
156 font-size: 30px;
157 }
158
159 .zone {
160 width: 220px;
161 height: 180px;
162 }
163
164 #camp-zone {
165 position: static;
166 width: unset;
167 height: unset;
168 margin-top: unset;
169 justify-content: unset;
170 justify-self: unset;
171 z-index: unset;
172 bottom: unset;
173 right: unset;
174 width: unset;
175 height: unset;
176 min-width: unset;
177 min-height: unset;
178 margin-left: unset;
179 margin-right: unset;
180 margin-bottom: unset;
181 left: unset;
182 top: unset;
183 }
184<html lang
185<body>
186 <div id="app">
187 <section class="header">
188 <h2>Click on an activity box to see which area it belongs to</h2>
189 </section>
190 <section class="game-area">
191 <div class="activity-zone-container">
192 <div class="zone-container">
193 <div class="zone" id="concentration-zone">
194 <p>Concentration</p>
195 </div>
196 <div class="zone" id="communication-zone">
197 <p>Communication</p>
198 </div>
199 <div class="zone" id="collaboration-zone">
200 <p>Collaboration</p>
201 </div>
202 <div class="zone" id="chill-out-zone">
203 <p>Chill Out</p>
204 </div>
205 <div class="zone" id="camp-zone">
206 <p>Camp</p>
207 </div>
208 </div>
209 <div class="activity-container">
210 <button class="activity" activitytype="concentration">
211 <p>Code</p>
212 </button>
213 <button class="activity" activitytype="communication">
214 <p>Teams Meeting</p>
215 </button>
216 <button class="activity" activitytype="camp">
217 <p>Make a phone call</p>
218 </button>
219 <button class="activity" activitytype="collaboration">
220 <p>Work shops with colleagues</p>
221 </button>
222 <button class="activity" activitytype="chillout">
223 <p>Coffee break</p>
224 </button>
225 <button class="activity" activitytype="collaboration">
226 <p>Lively discussions/brainstorming</p>
227 </button>
228 <button class="activity" activitytype="camp">
229 <p>Long group work</p>
230 </button>
231 <button class="activity" activitytype="collaboration">
232 <p>Creative zone for problem solving</p>
233 </button>
234 <button class="activity" activitytype="concentration">
235 <p>Concentrate on task</p>
236 </button>
237 <button class="activity" activitytype="communication">
238 <p>Not bothered by phone calls/chatting</p>
239 </button>
240 <button class="activity" activitytype="collaboration">
241 <p>Collaboration &amp; Planning</p>
242 </button>
243 <button class="activity" activitytype="chillout">
244 <p>Coffee break with groups</p>
245 </button>
246 <button class="activity" activitytype="collaboration">
247 <p>Prepare a presentation together</p>
248 </button>
249 <button class="activity" activitytype="communication">
250 <p>Think for yourself</p>
251 </button>
252 <button class="activity" activitytype="collaboration">
253 <p>Meeting with no sensitive info</p>
254 </button>
255 <button class="activity" activitytype="collaboration">
256 <p>Quick, spontaneous meetings</p>
257 </button>
258 <button class="activity" activitytype="communication">
259 <p>Have a chat without disturbance</p>
260 </button>
261 <button class="activity" activitytype="camp">
262 <p>Room for external/internal parties</p>
263 </button>
264 <button class="activity" activitytype="communication">
265 <p>Private dialogue</p>
266 </button>
267 <button class="activity" activitytype="communication">
268 <p>Read a contract in silence</p>
269 </button>
270 <button class="activity" activitytype="concentration">
271 <p>Individual work without disturbance</p>
272 </button>
273 <button class="activity" activitytype="communication">
274 <p>Check e-mails</p>
275 </button>
276 <button class="activity" activitytype="concentration">
277 <p>Calm &amp; quiet work space</p>
278 </button>
279 <button class="activity" activitytype="chillout">
280 <p>Hangout with colleagues outside project</p>
281 </button>
282 <button class="activity" activitytype="communication">
283 <p>Plan work</p>
284 </button>
285 <button class="activity" activitytype="communication">
286 <p>Lead employees/team</p>
287 </button>
288 <button class="activity" activitytype="concentration">
289 <p>Analyze data</p>
290 </button>
291 <button class="activity" activitytype="concentration">
292 <p>Rest</p>
293 </button>
294 <button class="activity" activitytype="chillout">
295 <p>Chat with a colleague about weekend plans</p>
296 </button>
297 <button class="activity" activitytype="collaboration">
298 <p>Discuss solutions for challenges in projects</p>
299 </button>
300 <button class="activity" activitytype="chillout">
301 <p>Pause from work</p>
302 </button>
303 <button class="activity" activitytype="camp">
304 <p>Private room for team/project for a long time</p>
305 </button>
306 <button class="activity" activitytype="chillout">
307 <p>Coffee with colleagues</p>
308 </button>
309 <button class="activity" activitytype="chillout">
310 <p>Networking</p>
311 </button>
312 </div>
313 </div>
314 </section>
315 </div>
316 <script src="index.js" type="text/javascript"/>
317 <script src="/static/js/bundle.js"/>
318 <script src="/static/js/0.chunk.js"/>
319 <script src="/static/js/main.chunk.js"/>
320</body>
321</html>.header {
322 background-color: navy;
323 min-height: 7vh;
324 display: grid;
325}
326
327.header h2 {
328 color: white;
329 text-align: center;
330 font-size: 45px;
331 font-weight: inherit;
332 font-family: arial;
333}
334
335.game-area {
336 display: flex;
337 justify-content: flex-start;
338 width: 100%;
339 background-color: navy;
340 height: 100%;
341 min-height: 1000px;
342}
343
344.activity-zone-container {
345 display: flex;
346}
347
348.zone-container {
349 display: flex;
350 flex-wrap: wrap;
351 max-width: 120vh;
352 position: relative;
353 max-height: 95vh;
354 margin: 0%;
355}
356
357.zone {
358 min-width: 32vh;
359 min-height: 27vh;
360 margin: 15px;
361 display: flex;
362 justify-content: center;
363 align-items: center;
364 width: 44%;
365 height: 33%;
366 max-height: 300px;
367}
368
369.zone p {
370 color: white;
371 text-align: center;
372 margin-bottom: 15px;
373 font-family: arial;
374}
375
376#concentration-zone {
377 background-color: orange;
378}
379#communication-zone {
380 background-color: yellow;
381}
382#communication-zone p {
383 color: black;
384}
385#collaboration-zone {
386 background-color: #3260a8;
387}
388#chill-out-zone {
389 background-color: pink;
390}
391#chill-out-zone p {
392 color: black;
393}
394#camp-zone {
395 background-color: green;
396}
397.activity-container {
398 margin: 0;
399 max-width: 73vh;
400 display: flex;
401 flex-wrap: wrap;
402 width: 40%;
403}
404
405.activity {
406 background-color: #3260a8;
407 margin: 17px;
408 display: flex;
409 justify-content: center;
410 cursor: pointer;
411 width: 140px;
412 height: 87px;
413}
414.activity-concentration {
415 background-color: orange;
416 margin: 17px;
417 display: flex;
418 justify-content: center;
419 color: white;
420 width: 140px;
421 height: 87px;
422}
423.activity-communication {
424 background-color: yellow;
425 margin: 17px;
426 display: flex;
427 justify-content: center;
428 width: 140px;
429 height: 87px;
430}
431.activity-chill-out {
432 background-color: pink;
433 margin: 17px;
434 display: flex;
435 justify-content: center;
436 width: 140px;
437 height: 87px;
438}
439.activity-camp {
440 background-color: green;
441 margin: 17px;
442 display: flex;
443 justify-content: center;
444 color: white;
445 width: 140px;
446 height: 87px;
447}
448.activity p {
449 color: white;
450}
451
452@media (min-width: 767px) {
453 #camp-zone {
454 justify-content: center;
455 justify-self: center;
456 position: absolute;
457 z-index: 0;
458 bottom: 0;
459 right: 0;
460 width: 44%;
461 height: 33%;
462 min-width: 32vh;
463 min-height: 27vh;
464 margin-left: auto;
465 margin-right: auto;
466 margin-top: auto;
467 margin-bottom: auto;
468 left: 0;
469 top: 0;
470 }
471}
472
473@media (max-width: 768px) {
474 .game-area {
475 min-height: 150vh;
476 }
477
478 .header h2 {
479 margin: 15px;
480 font-size: 30px;
481 }
482
483 .zone {
484 width: 220px;
485 height: 180px;
486 }
487}
488
QUESTION
Incorrect images path in production build - Vue.js
Asked 2022-Jan-24 at 11:27I'm building my project with Vue.js 3, Vite.js. The app works fine when in dev mode (when using the dev server). Once I do launch the build command, Vite creates for me the /dist directory containing the build for my app. If I run the preview command (vite preview) it starts with no problem the preview of my build.
The problem is with some images which are coming from Vue components. All the images of my project are in the src/assets directory.
1.
2├── Attribution.txt
3├── README.md
4├── index.html
5├── package-lock.json
6├── package.json
7├── postcss.config.js
8├── public
9│ └── favicon.ico
10├── src
11│ ├── App.vue
12│ ├── assets
13│ │ ├── Temp.png
14│ │ ├── bridge.png
15│ │ ├── city-security.png
16│ │ ├── credit-card.png
17│ │ ├── deforestation.png
18│ │ ├── eagle.png
19│ │ ├── favicon
20│ │ │ ├── android-chrome-192x192.png
21│ │ │ ├── android-chrome-512x512.png
22│ │ │ ├── apple-touch-icon.png
23│ │ │ ├── favicon-16x16.png
24│ │ │ ├── favicon-32x32.png
25│ │ │ └── favicon.ico
26│ │ ├── global-goals.png
27│ │ ├── hall.png
28│ │ ├── italian-flag.png
29│ │ ├── machine-learning.png
30│ │ ├── modern-architecture.png
31│ │ ├── moon-festival.png
32│ │ ├── people.png
33│ │ ├── planet-earth.png
34│ │ ├── police.png
35│ │ ├── teamwork.png
36│ │ ├── uk-flag.png
37│ │ └── virtual.png
38│ ├── components
39│ │ ├── Button.vue
40│ │ ├── Card.vue
41│ │ ├── Column.vue
42│ │ ├── Footer.vue
43│ │ ├── MainContent.vue
44│ │ ├── Navbar.vue
45│ │ └── components-it
46│ │ ├── Card-it.vue
47│ │ ├── Footer-it.vue
48│ │ └── Navbar-it.vue
49│ ├── main.js
50│ ├── router
51│ │ └── index.js
52│ ├── tailwind.css
53│ └── views
54│ ├── CitySecurity.vue
55│ ├── Contribute.vue
56│ ├── Credits.vue
57│ ├── Goals.vue
58│ ├── Home.vue
59│ ├── It
60│ │ ├── CitySecurity-it.vue
61│ │ ├── Contribute-it.vue
62│ │ ├── Credits-it.vue
63│ │ ├── Goals-it.vue
64│ │ ├── Home-it.vue
65│ │ └── Municipality-it.vue
66│ └── Municipality.vue
67├── tailwind.config.js
68└── vite.config.js
69
70
The images in the views have the correct path and are displayed correctly in the build. But the images in the components folder have a problem: the path doesn't change in the build file.
i.e.
1.
2├── Attribution.txt
3├── README.md
4├── index.html
5├── package-lock.json
6├── package.json
7├── postcss.config.js
8├── public
9│ └── favicon.ico
10├── src
11│ ├── App.vue
12│ ├── assets
13│ │ ├── Temp.png
14│ │ ├── bridge.png
15│ │ ├── city-security.png
16│ │ ├── credit-card.png
17│ │ ├── deforestation.png
18│ │ ├── eagle.png
19│ │ ├── favicon
20│ │ │ ├── android-chrome-192x192.png
21│ │ │ ├── android-chrome-512x512.png
22│ │ │ ├── apple-touch-icon.png
23│ │ │ ├── favicon-16x16.png
24│ │ │ ├── favicon-32x32.png
25│ │ │ └── favicon.ico
26│ │ ├── global-goals.png
27│ │ ├── hall.png
28│ │ ├── italian-flag.png
29│ │ ├── machine-learning.png
30│ │ ├── modern-architecture.png
31│ │ ├── moon-festival.png
32│ │ ├── people.png
33│ │ ├── planet-earth.png
34│ │ ├── police.png
35│ │ ├── teamwork.png
36│ │ ├── uk-flag.png
37│ │ └── virtual.png
38│ ├── components
39│ │ ├── Button.vue
40│ │ ├── Card.vue
41│ │ ├── Column.vue
42│ │ ├── Footer.vue
43│ │ ├── MainContent.vue
44│ │ ├── Navbar.vue
45│ │ └── components-it
46│ │ ├── Card-it.vue
47│ │ ├── Footer-it.vue
48│ │ └── Navbar-it.vue
49│ ├── main.js
50│ ├── router
51│ │ └── index.js
52│ ├── tailwind.css
53│ └── views
54│ ├── CitySecurity.vue
55│ ├── Contribute.vue
56│ ├── Credits.vue
57│ ├── Goals.vue
58│ ├── Home.vue
59│ ├── It
60│ │ ├── CitySecurity-it.vue
61│ │ ├── Contribute-it.vue
62│ │ ├── Credits-it.vue
63│ │ ├── Goals-it.vue
64│ │ ├── Home-it.vue
65│ │ └── Municipality-it.vue
66│ └── Municipality.vue
67├── tailwind.config.js
68└── vite.config.js
69
70<template>
71 <Navbar />
72 <div class="container flex flex-col items-center py-20 font-bold mx-auto">
73 <h1 class="uppercase text-3xl">A new way to live the City</h1>
74 <img src="../assets/hall.png" alt="Town Hall" width="250" class="py-10" />
75 <p class="lg:w-1/2 text-justify leading-relaxed">
76 To improve the municipality livings being we tought about some ideas, that
77 are somehow able to improve the qol(Quality of life). One of the most
78 reliable problem that requires to be solved is the minimization of
79 burocracy, tryna to make things digital any sort of procedure. One of ours
80 ideas is to improve the mechanism of shifting around the city, by giving
81 cityzens public and shareble veichles to reduce pollution and the waste of
82 fuel.
83 </p>
84 <div class="grid lg:grid-cols-3 lg:gap-0 gap-10 place-items-center pt-20">
85 <div class="card container flex flex-col items-center justify-center">
86 <h1 class="uppercase text-xl">Digitalization</h1>
87 <img
88 class="py-5"
89 src="../assets/virtual.png"
90 alt="Digitalization"
91 width="100"
92 />
93 <p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
94 Burocracy is so annoying, so we tought about how we can semplify it.
95 The Answer is... DIGITALIZATION! Everything's simpler when digital, so
96 our city is going to have a system for all of them.
97 </p>
98 </div>
99 <div class="card container flex flex-col items-center justify-center">
100 <h1 class="uppercase text-xl">Infrastructures Upgrading</h1>
101 <img
102 class="py-5"
103 src="../assets/bridge.png"
104 alt="Digitalization"
105 width="100"
106 />
107 <p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
108 To make our city better, our city is going to invest in
109 infrastructures to let cityzens live their life much better. Better
110 "bridges" makes better people.
111 </p>
112 </div>
113 <div class="card container flex flex-col items-center justify-center">
114 <h1 class="uppercase text-xl">Innovative Learning</h1>
115 <img
116 class="py-5"
117 src="../assets/Machine-Learning.png"
118 alt="Digitalization"
119 width="100"
120 />
121 <p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
122 Our city is going to offer a learning system to make everyone learn
123 about technologies and new innovation. The mind of a man is the most
124 precious part of him.
125 </p>
126 </div>
127 </div>
128 </div>
129 <Footer />
130</template>
131
132<script>
133import Navbar from "../components/Navbar.vue";
134import Footer from "../components/Footer.vue";
135import Button from "../components/Button.vue";
136export default {
137 name: "Municipality",
138 components: {
139 Navbar,
140 Footer,
141 Button,
142 },
143};
144</script>
145
146<style></style>
147
148
This is one of my views. In the build, all the img tags will have the correct path (Ex: /assets/imgName.randomNumbersAndString.png).
But this doesn't happen in the components.
i.e. - Card.vue component
1.
2├── Attribution.txt
3├── README.md
4├── index.html
5├── package-lock.json
6├── package.json
7├── postcss.config.js
8├── public
9│ └── favicon.ico
10├── src
11│ ├── App.vue
12│ ├── assets
13│ │ ├── Temp.png
14│ │ ├── bridge.png
15│ │ ├── city-security.png
16│ │ ├── credit-card.png
17│ │ ├── deforestation.png
18│ │ ├── eagle.png
19│ │ ├── favicon
20│ │ │ ├── android-chrome-192x192.png
21│ │ │ ├── android-chrome-512x512.png
22│ │ │ ├── apple-touch-icon.png
23│ │ │ ├── favicon-16x16.png
24│ │ │ ├── favicon-32x32.png
25│ │ │ └── favicon.ico
26│ │ ├── global-goals.png
27│ │ ├── hall.png
28│ │ ├── italian-flag.png
29│ │ ├── machine-learning.png
30│ │ ├── modern-architecture.png
31│ │ ├── moon-festival.png
32│ │ ├── people.png
33│ │ ├── planet-earth.png
34│ │ ├── police.png
35│ │ ├── teamwork.png
36│ │ ├── uk-flag.png
37│ │ └── virtual.png
38│ ├── components
39│ │ ├── Button.vue
40│ │ ├── Card.vue
41│ │ ├── Column.vue
42│ │ ├── Footer.vue
43│ │ ├── MainContent.vue
44│ │ ├── Navbar.vue
45│ │ └── components-it
46│ │ ├── Card-it.vue
47│ │ ├── Footer-it.vue
48│ │ └── Navbar-it.vue
49│ ├── main.js
50│ ├── router
51│ │ └── index.js
52│ ├── tailwind.css
53│ └── views
54│ ├── CitySecurity.vue
55│ ├── Contribute.vue
56│ ├── Credits.vue
57│ ├── Goals.vue
58│ ├── Home.vue
59│ ├── It
60│ │ ├── CitySecurity-it.vue
61│ │ ├── Contribute-it.vue
62│ │ ├── Credits-it.vue
63│ │ ├── Goals-it.vue
64│ │ ├── Home-it.vue
65│ │ └── Municipality-it.vue
66│ └── Municipality.vue
67├── tailwind.config.js
68└── vite.config.js
69
70<template>
71 <Navbar />
72 <div class="container flex flex-col items-center py-20 font-bold mx-auto">
73 <h1 class="uppercase text-3xl">A new way to live the City</h1>
74 <img src="../assets/hall.png" alt="Town Hall" width="250" class="py-10" />
75 <p class="lg:w-1/2 text-justify leading-relaxed">
76 To improve the municipality livings being we tought about some ideas, that
77 are somehow able to improve the qol(Quality of life). One of the most
78 reliable problem that requires to be solved is the minimization of
79 burocracy, tryna to make things digital any sort of procedure. One of ours
80 ideas is to improve the mechanism of shifting around the city, by giving
81 cityzens public and shareble veichles to reduce pollution and the waste of
82 fuel.
83 </p>
84 <div class="grid lg:grid-cols-3 lg:gap-0 gap-10 place-items-center pt-20">
85 <div class="card container flex flex-col items-center justify-center">
86 <h1 class="uppercase text-xl">Digitalization</h1>
87 <img
88 class="py-5"
89 src="../assets/virtual.png"
90 alt="Digitalization"
91 width="100"
92 />
93 <p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
94 Burocracy is so annoying, so we tought about how we can semplify it.
95 The Answer is... DIGITALIZATION! Everything's simpler when digital, so
96 our city is going to have a system for all of them.
97 </p>
98 </div>
99 <div class="card container flex flex-col items-center justify-center">
100 <h1 class="uppercase text-xl">Infrastructures Upgrading</h1>
101 <img
102 class="py-5"
103 src="../assets/bridge.png"
104 alt="Digitalization"
105 width="100"
106 />
107 <p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
108 To make our city better, our city is going to invest in
109 infrastructures to let cityzens live their life much better. Better
110 "bridges" makes better people.
111 </p>
112 </div>
113 <div class="card container flex flex-col items-center justify-center">
114 <h1 class="uppercase text-xl">Innovative Learning</h1>
115 <img
116 class="py-5"
117 src="../assets/Machine-Learning.png"
118 alt="Digitalization"
119 width="100"
120 />
121 <p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
122 Our city is going to offer a learning system to make everyone learn
123 about technologies and new innovation. The mind of a man is the most
124 precious part of him.
125 </p>
126 </div>
127 </div>
128 </div>
129 <Footer />
130</template>
131
132<script>
133import Navbar from "../components/Navbar.vue";
134import Footer from "../components/Footer.vue";
135import Button from "../components/Button.vue";
136export default {
137 name: "Municipality",
138 components: {
139 Navbar,
140 Footer,
141 Button,
142 },
143};
144</script>
145
146<style></style>
147
148<template>
149 <div
150 class="card container flex flex-col items-center justify-center pt-20 pb-20"
151 >
152 <a :href="`${link}`">
153 <img
154 :class="`${imgClass || 'py-5'}`"
155 :src="`./src/assets/${imgName}`"
156 :alt="`${imgAlt}`"
157 width="100"
158 />
159 </a>
160 <p class="lg:w-full lg:w-3/5 lg:leading-relaxed w-3/4">{{ text }}</p>
161 </div>
162</template>
163
164<script>
165export default {
166 name: "Card",
167 props: {
168 link: String,
169 imgClass: String,
170 imgName: String,
171 imgAlt: String,
172 text: String,
173 },
174};
175</script>
176
177<style scoped></style>
178
179
Credits.vue view
1.
2├── Attribution.txt
3├── README.md
4├── index.html
5├── package-lock.json
6├── package.json
7├── postcss.config.js
8├── public
9│ └── favicon.ico
10├── src
11│ ├── App.vue
12│ ├── assets
13│ │ ├── Temp.png
14│ │ ├── bridge.png
15│ │ ├── city-security.png
16│ │ ├── credit-card.png
17│ │ ├── deforestation.png
18│ │ ├── eagle.png
19│ │ ├── favicon
20│ │ │ ├── android-chrome-192x192.png
21│ │ │ ├── android-chrome-512x512.png
22│ │ │ ├── apple-touch-icon.png
23│ │ │ ├── favicon-16x16.png
24│ │ │ ├── favicon-32x32.png
25│ │ │ └── favicon.ico
26│ │ ├── global-goals.png
27│ │ ├── hall.png
28│ │ ├── italian-flag.png
29│ │ ├── machine-learning.png
30│ │ ├── modern-architecture.png
31│ │ ├── moon-festival.png
32│ │ ├── people.png
33│ │ ├── planet-earth.png
34│ │ ├── police.png
35│ │ ├── teamwork.png
36│ │ ├── uk-flag.png
37│ │ └── virtual.png
38│ ├── components
39│ │ ├── Button.vue
40│ │ ├── Card.vue
41│ │ ├── Column.vue
42│ │ ├── Footer.vue
43│ │ ├── MainContent.vue
44│ │ ├── Navbar.vue
45│ │ └── components-it
46│ │ ├── Card-it.vue
47│ │ ├── Footer-it.vue
48│ │ └── Navbar-it.vue
49│ ├── main.js
50│ ├── router
51│ │ └── index.js
52│ ├── tailwind.css
53│ └── views
54│ ├── CitySecurity.vue
55│ ├── Contribute.vue
56│ ├── Credits.vue
57│ ├── Goals.vue
58│ ├── Home.vue
59│ ├── It
60│ │ ├── CitySecurity-it.vue
61│ │ ├── Contribute-it.vue
62│ │ ├── Credits-it.vue
63│ │ ├── Goals-it.vue
64│ │ ├── Home-it.vue
65│ │ └── Municipality-it.vue
66│ └── Municipality.vue
67├── tailwind.config.js
68└── vite.config.js
69
70<template>
71 <Navbar />
72 <div class="container flex flex-col items-center py-20 font-bold mx-auto">
73 <h1 class="uppercase text-3xl">A new way to live the City</h1>
74 <img src="../assets/hall.png" alt="Town Hall" width="250" class="py-10" />
75 <p class="lg:w-1/2 text-justify leading-relaxed">
76 To improve the municipality livings being we tought about some ideas, that
77 are somehow able to improve the qol(Quality of life). One of the most
78 reliable problem that requires to be solved is the minimization of
79 burocracy, tryna to make things digital any sort of procedure. One of ours
80 ideas is to improve the mechanism of shifting around the city, by giving
81 cityzens public and shareble veichles to reduce pollution and the waste of
82 fuel.
83 </p>
84 <div class="grid lg:grid-cols-3 lg:gap-0 gap-10 place-items-center pt-20">
85 <div class="card container flex flex-col items-center justify-center">
86 <h1 class="uppercase text-xl">Digitalization</h1>
87 <img
88 class="py-5"
89 src="../assets/virtual.png"
90 alt="Digitalization"
91 width="100"
92 />
93 <p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
94 Burocracy is so annoying, so we tought about how we can semplify it.
95 The Answer is... DIGITALIZATION! Everything's simpler when digital, so
96 our city is going to have a system for all of them.
97 </p>
98 </div>
99 <div class="card container flex flex-col items-center justify-center">
100 <h1 class="uppercase text-xl">Infrastructures Upgrading</h1>
101 <img
102 class="py-5"
103 src="../assets/bridge.png"
104 alt="Digitalization"
105 width="100"
106 />
107 <p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
108 To make our city better, our city is going to invest in
109 infrastructures to let cityzens live their life much better. Better
110 "bridges" makes better people.
111 </p>
112 </div>
113 <div class="card container flex flex-col items-center justify-center">
114 <h1 class="uppercase text-xl">Innovative Learning</h1>
115 <img
116 class="py-5"
117 src="../assets/Machine-Learning.png"
118 alt="Digitalization"
119 width="100"
120 />
121 <p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
122 Our city is going to offer a learning system to make everyone learn
123 about technologies and new innovation. The mind of a man is the most
124 precious part of him.
125 </p>
126 </div>
127 </div>
128 </div>
129 <Footer />
130</template>
131
132<script>
133import Navbar from "../components/Navbar.vue";
134import Footer from "../components/Footer.vue";
135import Button from "../components/Button.vue";
136export default {
137 name: "Municipality",
138 components: {
139 Navbar,
140 Footer,
141 Button,
142 },
143};
144</script>
145
146<style></style>
147
148<template>
149 <div
150 class="card container flex flex-col items-center justify-center pt-20 pb-20"
151 >
152 <a :href="`${link}`">
153 <img
154 :class="`${imgClass || 'py-5'}`"
155 :src="`./src/assets/${imgName}`"
156 :alt="`${imgAlt}`"
157 width="100"
158 />
159 </a>
160 <p class="lg:w-full lg:w-3/5 lg:leading-relaxed w-3/4">{{ text }}</p>
161 </div>
162</template>
163
164<script>
165export default {
166 name: "Card",
167 props: {
168 link: String,
169 imgClass: String,
170 imgName: String,
171 imgAlt: String,
172 text: String,
173 },
174};
175</script>
176
177<style scoped></style>
178
179<template>
180 <Navbar />
181 <h1 class="uppercase lg:text-5xl text-2xl mx-auto text-center pt-20">
182 Images and Icons attributions
183 </h1>
184 <div class="grid lg:grid-cols-3 place-items-center lg:pb-10 mx-auto">
185 <Card
186 link="Hall icons created by Smashicons - Flaticon"
187 text="Hall icons created by Smashicons - Flaticon"
188 imgAlt="Hall vector representation"
189 imgName="hall.png"
190 />
191 <Card
192 link="https://www.flaticon.com/free-icons/moon-festival"
193 text="Pokemon icons created by Roundicons Freebies - Flaticon"
194 imgAlt="Temp logo"
195 imgName="Temp.png"
196 />
197 <Card
198 link="https://www.flaticon.com/free-icons/moon-festival"
199 text="Moon festival icons created by Flat Icons - Flaticon"
200 imgAlt="Moon vector representation"
201 imgName="moon-festival.png"
202 />
203 <Card
204 link="https://www.flaticon.com/free-icons/digital"
205 text="Digital icons created by Freepik - Flaticon"
206 imgAlt="Digital vector representation"
207 imgName="virtual.png"
208 />
209 <Card
210 link="https://www.flaticon.com/free-icons/tower-bridge"
211 text="Tower bridge icons created by Freepik - Flaticon"
212 imgAlt="Bridge vector representation"
213 imgName="bridge.png"
214 />
215 <Card
216 link="https://www.flaticon.com/free-icons/machine-learning"
217 text="Machine learning icons created by Flat Icons - Flaticon"
218 imgAlt="Machine learning vector representation"
219 imgName="machine-learning.png"
220 />
221 <Card
222 link="https://www.flaticon.com/free-icons/business-and-finance"
223 text="Business and finance icons created by Freepik - Flaticon"
224 imgAlt="City security vector"
225 imgName="city-security.png"
226 />
227 <Card
228 link="https://www.flaticon.com/free-icons/credit-card"
229 text="Credit card icons created by Freepik - Flaticon"
230 imgAlt="Credit card vector"
231 imgName="credit-card.png"
232 />
233 <Card
234 link="https://www.flaticon.com/free-icons/deforestation"
235 text="Deforestation icons created by Freepik - Flaticon"
236 imgAlt="Deforestation vector representation"
237 imgName="deforestation.png"
238 />
239 <Card
240 link="https://www.flaticon.com/free-icons/eagle"
241 text="Eagle icons created by Freepik - Flaticon"
242 imgAlt="Eagle vector"
243 imgName="eagle.png"
244 />
245 <Card
246 link="https://www.flaticon.com/free-icons/modern-architecture"
247 text="Modern architecture icons created by Freepik - Flaticon"
248 imgAlt="Modern architecture vector"
249 imgName="modern-architecture.png"
250 />
251 <Card
252 link="https://www.flaticon.com/free-icons/environment"
253 text="Environment icons created by Freepik - Flaticon"
254 imgAlt="Earth planet vector"
255 imgName="planet-earth.png"
256 />
257 </div>
258 <div class="container mx-auto flex flex-row items-center justify-center text-center">
259 <Card
260 link="https://www.flaticon.com/free-icons/police"
261 text="Police icons created by Freepik - Flaticon"
262 imgAlt="Police officer vector"
263 imgName="police.png"
264 />
265 <Card
266 link="https://www.flaticon.com/free-icons/collaboration"
267 text="Collaboration icons created by Freepik - Flaticon"
268 imgAlt="Community vector"
269 imgName="teamwork.png"
270 />
271 </div>
272 <Footer />
273</template>
274
275<script>
276import Card from "../components/Card.vue";
277import Navbar from "../components/Navbar.vue";
278import Footer from "../components/Footer.vue";
279import Button from "../components/Button.vue";
280
281export default {
282 name: "Credits",
283 components: {
284 Navbar,
285 Footer,
286 Button,
287 Card,
288 },
289};
290</script>
291
292<style scoped></style>
293
294
In this case, when I pass the imgName to the Card component, in the build file the path of the image is ./src/assets/name.png.
How can I fix?
ANSWER
Answered 2022-Jan-24 at 11:27Instead of using relative path (..)
to the assets folder, you can use @/assets
from any of the vue components to refer to files in the assets folder.
E.g this should work, no matter how deep the Vue component is nested.
1.
2├── Attribution.txt
3├── README.md
4├── index.html
5├── package-lock.json
6├── package.json
7├── postcss.config.js
8├── public
9│ └── favicon.ico
10├── src
11│ ├── App.vue
12│ ├── assets
13│ │ ├── Temp.png
14│ │ ├── bridge.png
15│ │ ├── city-security.png
16│ │ ├── credit-card.png
17│ │ ├── deforestation.png
18│ │ ├── eagle.png
19│ │ ├── favicon
20│ │ │ ├── android-chrome-192x192.png
21│ │ │ ├── android-chrome-512x512.png
22│ │ │ ├── apple-touch-icon.png
23│ │ │ ├── favicon-16x16.png
24│ │ │ ├── favicon-32x32.png
25│ │ │ └── favicon.ico
26│ │ ├── global-goals.png
27│ │ ├── hall.png
28│ │ ├── italian-flag.png
29│ │ ├── machine-learning.png
30│ │ ├── modern-architecture.png
31│ │ ├── moon-festival.png
32│ │ ├── people.png
33│ │ ├── planet-earth.png
34│ │ ├── police.png
35│ │ ├── teamwork.png
36│ │ ├── uk-flag.png
37│ │ └── virtual.png
38│ ├── components
39│ │ ├── Button.vue
40│ │ ├── Card.vue
41│ │ ├── Column.vue
42│ │ ├── Footer.vue
43│ │ ├── MainContent.vue
44│ │ ├── Navbar.vue
45│ │ └── components-it
46│ │ ├── Card-it.vue
47│ │ ├── Footer-it.vue
48│ │ └── Navbar-it.vue
49│ ├── main.js
50│ ├── router
51│ │ └── index.js
52│ ├── tailwind.css
53│ └── views
54│ ├── CitySecurity.vue
55│ ├── Contribute.vue
56│ ├── Credits.vue
57│ ├── Goals.vue
58│ ├── Home.vue
59│ ├── It
60│ │ ├── CitySecurity-it.vue
61│ │ ├── Contribute-it.vue
62│ │ ├── Credits-it.vue
63│ │ ├── Goals-it.vue
64│ │ ├── Home-it.vue
65│ │ └── Municipality-it.vue
66│ └── Municipality.vue
67├── tailwind.config.js
68└── vite.config.js
69
70<template>
71 <Navbar />
72 <div class="container flex flex-col items-center py-20 font-bold mx-auto">
73 <h1 class="uppercase text-3xl">A new way to live the City</h1>
74 <img src="../assets/hall.png" alt="Town Hall" width="250" class="py-10" />
75 <p class="lg:w-1/2 text-justify leading-relaxed">
76 To improve the municipality livings being we tought about some ideas, that
77 are somehow able to improve the qol(Quality of life). One of the most
78 reliable problem that requires to be solved is the minimization of
79 burocracy, tryna to make things digital any sort of procedure. One of ours
80 ideas is to improve the mechanism of shifting around the city, by giving
81 cityzens public and shareble veichles to reduce pollution and the waste of
82 fuel.
83 </p>
84 <div class="grid lg:grid-cols-3 lg:gap-0 gap-10 place-items-center pt-20">
85 <div class="card container flex flex-col items-center justify-center">
86 <h1 class="uppercase text-xl">Digitalization</h1>
87 <img
88 class="py-5"
89 src="../assets/virtual.png"
90 alt="Digitalization"
91 width="100"
92 />
93 <p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
94 Burocracy is so annoying, so we tought about how we can semplify it.
95 The Answer is... DIGITALIZATION! Everything's simpler when digital, so
96 our city is going to have a system for all of them.
97 </p>
98 </div>
99 <div class="card container flex flex-col items-center justify-center">
100 <h1 class="uppercase text-xl">Infrastructures Upgrading</h1>
101 <img
102 class="py-5"
103 src="../assets/bridge.png"
104 alt="Digitalization"
105 width="100"
106 />
107 <p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
108 To make our city better, our city is going to invest in
109 infrastructures to let cityzens live their life much better. Better
110 "bridges" makes better people.
111 </p>
112 </div>
113 <div class="card container flex flex-col items-center justify-center">
114 <h1 class="uppercase text-xl">Innovative Learning</h1>
115 <img
116 class="py-5"
117 src="../assets/Machine-Learning.png"
118 alt="Digitalization"
119 width="100"
120 />
121 <p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
122 Our city is going to offer a learning system to make everyone learn
123 about technologies and new innovation. The mind of a man is the most
124 precious part of him.
125 </p>
126 </div>
127 </div>
128 </div>
129 <Footer />
130</template>
131
132<script>
133import Navbar from "../components/Navbar.vue";
134import Footer from "../components/Footer.vue";
135import Button from "../components/Button.vue";
136export default {
137 name: "Municipality",
138 components: {
139 Navbar,
140 Footer,
141 Button,
142 },
143};
144</script>
145
146<style></style>
147
148<template>
149 <div
150 class="card container flex flex-col items-center justify-center pt-20 pb-20"
151 >
152 <a :href="`${link}`">
153 <img
154 :class="`${imgClass || 'py-5'}`"
155 :src="`./src/assets/${imgName}`"
156 :alt="`${imgAlt}`"
157 width="100"
158 />
159 </a>
160 <p class="lg:w-full lg:w-3/5 lg:leading-relaxed w-3/4">{{ text }}</p>
161 </div>
162</template>
163
164<script>
165export default {
166 name: "Card",
167 props: {
168 link: String,
169 imgClass: String,
170 imgName: String,
171 imgAlt: String,
172 text: String,
173 },
174};
175</script>
176
177<style scoped></style>
178
179<template>
180 <Navbar />
181 <h1 class="uppercase lg:text-5xl text-2xl mx-auto text-center pt-20">
182 Images and Icons attributions
183 </h1>
184 <div class="grid lg:grid-cols-3 place-items-center lg:pb-10 mx-auto">
185 <Card
186 link="Hall icons created by Smashicons - Flaticon"
187 text="Hall icons created by Smashicons - Flaticon"
188 imgAlt="Hall vector representation"
189 imgName="hall.png"
190 />
191 <Card
192 link="https://www.flaticon.com/free-icons/moon-festival"
193 text="Pokemon icons created by Roundicons Freebies - Flaticon"
194 imgAlt="Temp logo"
195 imgName="Temp.png"
196 />
197 <Card
198 link="https://www.flaticon.com/free-icons/moon-festival"
199 text="Moon festival icons created by Flat Icons - Flaticon"
200 imgAlt="Moon vector representation"
201 imgName="moon-festival.png"
202 />
203 <Card
204 link="https://www.flaticon.com/free-icons/digital"
205 text="Digital icons created by Freepik - Flaticon"
206 imgAlt="Digital vector representation"
207 imgName="virtual.png"
208 />
209 <Card
210 link="https://www.flaticon.com/free-icons/tower-bridge"
211 text="Tower bridge icons created by Freepik - Flaticon"
212 imgAlt="Bridge vector representation"
213 imgName="bridge.png"
214 />
215 <Card
216 link="https://www.flaticon.com/free-icons/machine-learning"
217 text="Machine learning icons created by Flat Icons - Flaticon"
218 imgAlt="Machine learning vector representation"
219 imgName="machine-learning.png"
220 />
221 <Card
222 link="https://www.flaticon.com/free-icons/business-and-finance"
223 text="Business and finance icons created by Freepik - Flaticon"
224 imgAlt="City security vector"
225 imgName="city-security.png"
226 />
227 <Card
228 link="https://www.flaticon.com/free-icons/credit-card"
229 text="Credit card icons created by Freepik - Flaticon"
230 imgAlt="Credit card vector"
231 imgName="credit-card.png"
232 />
233 <Card
234 link="https://www.flaticon.com/free-icons/deforestation"
235 text="Deforestation icons created by Freepik - Flaticon"
236 imgAlt="Deforestation vector representation"
237 imgName="deforestation.png"
238 />
239 <Card
240 link="https://www.flaticon.com/free-icons/eagle"
241 text="Eagle icons created by Freepik - Flaticon"
242 imgAlt="Eagle vector"
243 imgName="eagle.png"
244 />
245 <Card
246 link="https://www.flaticon.com/free-icons/modern-architecture"
247 text="Modern architecture icons created by Freepik - Flaticon"
248 imgAlt="Modern architecture vector"
249 imgName="modern-architecture.png"
250 />
251 <Card
252 link="https://www.flaticon.com/free-icons/environment"
253 text="Environment icons created by Freepik - Flaticon"
254 imgAlt="Earth planet vector"
255 imgName="planet-earth.png"
256 />
257 </div>
258 <div class="container mx-auto flex flex-row items-center justify-center text-center">
259 <Card
260 link="https://www.flaticon.com/free-icons/police"
261 text="Police icons created by Freepik - Flaticon"
262 imgAlt="Police officer vector"
263 imgName="police.png"
264 />
265 <Card
266 link="https://www.flaticon.com/free-icons/collaboration"
267 text="Collaboration icons created by Freepik - Flaticon"
268 imgAlt="Community vector"
269 imgName="teamwork.png"
270 />
271 </div>
272 <Footer />
273</template>
274
275<script>
276import Card from "../components/Card.vue";
277import Navbar from "../components/Navbar.vue";
278import Footer from "../components/Footer.vue";
279import Button from "../components/Button.vue";
280
281export default {
282 name: "Credits",
283 components: {
284 Navbar,
285 Footer,
286 Button,
287 Card,
288 },
289};
290</script>
291
292<style scoped></style>
293
294<img src="@/assets/images/name.png"/>
295
EDIT:
As pointed out by @flydev
, you'll have to configure vite config like this: https://stackoverflow.com/a/66046200/3565182 for this to work.
QUESTION
Problem accessing prop to change color of button conditionally
Asked 2022-Jan-23 at 12:38What I am trying to achieve is this: I want to change the color of the buttons when you click on them depending on the type of activity. For instance if you click on a button that has activity "concentration" the specific style class for the activity type should be applied when you click on the button. What I am struggling with is to access the activity.type in my changeStyle function. How do I access the activity type and get the button to change color based on the activity type?
Game.js
1import React, { useState } from 'react';
2
3const Game = () => {
4 const [activityStyle, setActivityStyle] = useState("activity");
5
6 const zones = [
7 {id: 1, name: "Concentration", styleType: "concentration-zone"},
8 {id: 2, name: "Communication", styleType: "communication-zone"},
9 {id: 3, name: "Collaboration", styleType: "collaboration-zone"},
10 {id: 4, name: "Chill Out", styleType: "chill-out-zone"},
11 {id: 5, name: "Camp", styleType: "camp-zone"}
12 ]
13 const activities = [
14 {id: 1, name: "Code", type: "concentration"},
15 {id: 2, name: "Teams Meeting", type: "communication"},
16 {id: 3, name: "Make a phone call", type: "camp"},
17 {id: 4, name: "Work shop", type: "collaboration"},
18 {id: 5, name: "Coffee break", type: "chillout"}
19 ]
20
21 const changeActivityStyle = () => {
22
23
24 if (activityType === "concentration") {
25 setActivityStyle("activity-concentration");
26 }
27 if (activityType === "communication") {
28 setActivityStyle("activity-communication");
29 }
30 if (activityYype === "camp") {
31 setActivityStyle("activity-camp");
32 }
33 if (activityType === "chillout") {
34 setActivityStyle("activity-chill-out");
35 }
36 return;
37 };
38
39 return (
40 <section className="game-area">
41 {zones.map((zone =>
42 <div className="zone" id={zone.styleType} key={zone.id}>
43 <p>{zone.name}</p>
44 </div>
45 ))}
46 <div className="activity-container">
47 {activities.map((activity =>
48 <button className={activityStyle}
49 onClick={changeActivityStyle}
50 key={activity.id}
51 activityType={activity.type}
52 >
53 <p>{activity.name}</p>
54 </button>))}
55 </div>
56 </section>
57 );
58
59
60};
61
62export default Game;
63
64
ANSWER
Answered 2022-Jan-23 at 12:38Modify changeActivityStyle
method like this:
1import React, { useState } from 'react';
2
3const Game = () => {
4 const [activityStyle, setActivityStyle] = useState("activity");
5
6 const zones = [
7 {id: 1, name: "Concentration", styleType: "concentration-zone"},
8 {id: 2, name: "Communication", styleType: "communication-zone"},
9 {id: 3, name: "Collaboration", styleType: "collaboration-zone"},
10 {id: 4, name: "Chill Out", styleType: "chill-out-zone"},
11 {id: 5, name: "Camp", styleType: "camp-zone"}
12 ]
13 const activities = [
14 {id: 1, name: "Code", type: "concentration"},
15 {id: 2, name: "Teams Meeting", type: "communication"},
16 {id: 3, name: "Make a phone call", type: "camp"},
17 {id: 4, name: "Work shop", type: "collaboration"},
18 {id: 5, name: "Coffee break", type: "chillout"}
19 ]
20
21 const changeActivityStyle = () => {
22
23
24 if (activityType === "concentration") {
25 setActivityStyle("activity-concentration");
26 }
27 if (activityType === "communication") {
28 setActivityStyle("activity-communication");
29 }
30 if (activityYype === "camp") {
31 setActivityStyle("activity-camp");
32 }
33 if (activityType === "chillout") {
34 setActivityStyle("activity-chill-out");
35 }
36 return;
37 };
38
39 return (
40 <section className="game-area">
41 {zones.map((zone =>
42 <div className="zone" id={zone.styleType} key={zone.id}>
43 <p>{zone.name}</p>
44 </div>
45 ))}
46 <div className="activity-container">
47 {activities.map((activity =>
48 <button className={activityStyle}
49 onClick={changeActivityStyle}
50 key={activity.id}
51 activityType={activity.type}
52 >
53 <p>{activity.name}</p>
54 </button>))}
55 </div>
56 </section>
57 );
58
59
60};
61
62export default Game;
63
64 /* create reactive state variable to hold the index of the activity clicked */
65 const [clickedActivityIndex, setClickedActivityIndex] = useState(-1);
66
67 const changeActivityStyle = (activityType, index) => {
68 /* set the index provided by the click handler as active index */
69 setClickedActivityIndex(index);
70
71 // access activityType and do whatever you want
72
73
74
75 if (activityType === "concentration") {
76 setActivityStyle("activity-concentration");
77 }
78 if (activityType === "communication") {
79 setActivityStyle("activity-communication");
80 }
81 if (activityYype === "camp") {
82 setActivityStyle("activity-camp");
83 }
84 if (activityType === "chillout") {
85 setActivityStyle("activity-chill-out");
86 }
87 return;
88 };
89
and in JSX
and provide activity.type
and the clicked element's index
as argument to this method:
1import React, { useState } from 'react';
2
3const Game = () => {
4 const [activityStyle, setActivityStyle] = useState("activity");
5
6 const zones = [
7 {id: 1, name: "Concentration", styleType: "concentration-zone"},
8 {id: 2, name: "Communication", styleType: "communication-zone"},
9 {id: 3, name: "Collaboration", styleType: "collaboration-zone"},
10 {id: 4, name: "Chill Out", styleType: "chill-out-zone"},
11 {id: 5, name: "Camp", styleType: "camp-zone"}
12 ]
13 const activities = [
14 {id: 1, name: "Code", type: "concentration"},
15 {id: 2, name: "Teams Meeting", type: "communication"},
16 {id: 3, name: "Make a phone call", type: "camp"},
17 {id: 4, name: "Work shop", type: "collaboration"},
18 {id: 5, name: "Coffee break", type: "chillout"}
19 ]
20
21 const changeActivityStyle = () => {
22
23
24 if (activityType === "concentration") {
25 setActivityStyle("activity-concentration");
26 }
27 if (activityType === "communication") {
28 setActivityStyle("activity-communication");
29 }
30 if (activityYype === "camp") {
31 setActivityStyle("activity-camp");
32 }
33 if (activityType === "chillout") {
34 setActivityStyle("activity-chill-out");
35 }
36 return;
37 };
38
39 return (
40 <section className="game-area">
41 {zones.map((zone =>
42 <div className="zone" id={zone.styleType} key={zone.id}>
43 <p>{zone.name}</p>
44 </div>
45 ))}
46 <div className="activity-container">
47 {activities.map((activity =>
48 <button className={activityStyle}
49 onClick={changeActivityStyle}
50 key={activity.id}
51 activityType={activity.type}
52 >
53 <p>{activity.name}</p>
54 </button>))}
55 </div>
56 </section>
57 );
58
59
60};
61
62export default Game;
63
64 /* create reactive state variable to hold the index of the activity clicked */
65 const [clickedActivityIndex, setClickedActivityIndex] = useState(-1);
66
67 const changeActivityStyle = (activityType, index) => {
68 /* set the index provided by the click handler as active index */
69 setClickedActivityIndex(index);
70
71 // access activityType and do whatever you want
72
73
74
75 if (activityType === "concentration") {
76 setActivityStyle("activity-concentration");
77 }
78 if (activityType === "communication") {
79 setActivityStyle("activity-communication");
80 }
81 if (activityYype === "camp") {
82 setActivityStyle("activity-camp");
83 }
84 if (activityType === "chillout") {
85 setActivityStyle("activity-chill-out");
86 }
87 return;
88 };
89 <div className="activity-container">
90 {activities.map((activity,index) =>
91 <button className={clickedActivityIndex === index ? activityStyle : ''}
92 onClick={() => changeActivityStyle(activity.type, index)}
93 key={activity.id}
94 activityType={activity.type}>
95 <p>{activity.name}</p>
96 </button>)}
97 </div>
98
QUESTION
user table not created on django deployment but superuser created on heroku bash
Asked 2022-Jan-18 at 21:06I'm trying to upload my first django app and I've been struggle with this issue for sometime, help is appreciated.
I already set up my project to be on heroku, I followed this tutorial: https://www.youtube.com/watch?v=6DI_7Zja8Zc in which django_heroku module is used to configure DB, here is the link to library https://pypi.org/project/django-heroku/
The app throws the error on login as if user tables didn't exist but I already create a super user using the heroku bash feature, after apply migrations using "heroku run python manage.py migrate". When I run "ls" command on heroku bash this is my directory:
manage.py Procfile requirements.txt runtime.txt smoke staticfile
"smoke" is my folder app, should I could see the db in this directory? if the db was not created how could I create a superuser using heroku bash feature?
This is the DB configuration that django gives me on server:
1{'default': {'ATOMIC_REQUESTS': False,
2 'AUTOCOMMIT': True,
3 'CONN_MAX_AGE': 0,
4 'ENGINE': 'django.db.backends.sqlite3',
5 'HOST': '',
6 'NAME': PosixPath('/app/db.sqlite3'),
7 'OPTIONS': {},
8 'PASSWORD': '********************',
9 'PORT': '',
10 'TEST': {'CHARSET': None,
11 'COLLATION': None,
12 'MIGRATE': True,
13 'MIRROR': None,
14 'NAME': None},
15 'TIME_ZONE': None,
16 'USER': ''}}
17
I see that db is sqlite3 and should be postgreSQL but I understand that django-heroku library should do that.
I don't know what other information could be useful because I have no experience deploying nothing so I will be pending on more information request to edit this question.
My gitignore file is this:
1{'default': {'ATOMIC_REQUESTS': False,
2 'AUTOCOMMIT': True,
3 'CONN_MAX_AGE': 0,
4 'ENGINE': 'django.db.backends.sqlite3',
5 'HOST': '',
6 'NAME': PosixPath('/app/db.sqlite3'),
7 'OPTIONS': {},
8 'PASSWORD': '********************',
9 'PORT': '',
10 'TEST': {'CHARSET': None,
11 'COLLATION': None,
12 'MIGRATE': True,
13 'MIRROR': None,
14 'NAME': None},
15 'TIME_ZONE': None,
16 'USER': ''}}
17# Byte-compiled / optimized / DLL files
18__pycache__/
19*.py[cod]
20*$py.class
21
22# C extensions
23*.so
24
25# Distribution / packaging
26.Python
27build/
28develop-eggs/
29dist/
30downloads/
31eggs/
32.eggs/
33lib/
34lib64/
35parts/
36sdist/
37var/
38wheels/
39share/python-wheels/
40*.egg-info/
41.installed.cfg
42*.egg
43MANIFEST
44
45*.manifest
46*.spec
47
48# Installer logs
49pip-log.txt
50pip-delete-this-directory.txt
51
52# Unit test / coverage reports
53htmlcov/
54.tox/
55.nox/
56.coverage
57.coverage.*
58.cache
59nosetests.xml
60coverage.xml
61*.cover
62*.py,cover
63.hypothesis/
64.pytest_cache/
65cover/
66
67# Translations
68*.mo
69*.pot
70
71# Django stuff:
72*.log
73local_settings.py
74db.sqlite3
75db.sqlite3-journal
76
77# Flask stuff:
78instance/
79.webassets-cache
80
81# Scrapy stuff:
82.scrapy
83
84# Sphinx documentation
85docs/_build/
86
87# PyBuilder
88.pybuilder/
89target/
90
91# Jupyter Notebook
92.ipynb_checkpoints
93
94# IPython
95profile_default/
96ipython_config.py
97
98# pyenv
99# For a library or package, you might want to ignore these files since the code is
100# intended to run in multiple environments; otherwise, check them in:
101# .python-version
102
103# pipenv
104# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
105# However, in case of collaboration, if having platform-specific dependencies or dependencies
106# having no cross-platform support, pipenv may install dependencies that don't work, or not
107# install all needed dependencies.
108#Pipfile.lock
109
110# poetry
111# Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
112# This is especially recommended for binary packages to ensure reproducibility, and is more
113# commonly ignored for libraries.
114# https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
115#poetry.lock
116
117# PEP 582; used by e.g. github.com/David-OConnor/pyflow
118__pypackages__/
119
120# Celery stuff
121celerybeat-schedule
122celerybeat.pid
123
124# SageMath parsed files
125*.sage.py
126
127# Environments
128.env
129.venv
130env/
131venv/
132ENV/
133env.bak/
134venv.bak/
135
136# Spyder project settings
137.spyderproject
138.spyproject
139
140# Rope project settings
141.ropeproject
142
143# mkdocs documentation
144/site
145
146# mypy
147.mypy_cache/
148.dmypy.json
149dmypy.json
150
151# Pyre type checker
152.pyre/
153
154# pytype static type analyzer
155.pytype/
156
157# Cython debug symbols
158cython_debug/
159
This is the bottom of my settings.py file:
...
1{'default': {'ATOMIC_REQUESTS': False,
2 'AUTOCOMMIT': True,
3 'CONN_MAX_AGE': 0,
4 'ENGINE': 'django.db.backends.sqlite3',
5 'HOST': '',
6 'NAME': PosixPath('/app/db.sqlite3'),
7 'OPTIONS': {},
8 'PASSWORD': '********************',
9 'PORT': '',
10 'TEST': {'CHARSET': None,
11 'COLLATION': None,
12 'MIGRATE': True,
13 'MIRROR': None,
14 'NAME': None},
15 'TIME_ZONE': None,
16 'USER': ''}}
17# Byte-compiled / optimized / DLL files
18__pycache__/
19*.py[cod]
20*$py.class
21
22# C extensions
23*.so
24
25# Distribution / packaging
26.Python
27build/
28develop-eggs/
29dist/
30downloads/
31eggs/
32.eggs/
33lib/
34lib64/
35parts/
36sdist/
37var/
38wheels/
39share/python-wheels/
40*.egg-info/
41.installed.cfg
42*.egg
43MANIFEST
44
45*.manifest
46*.spec
47
48# Installer logs
49pip-log.txt
50pip-delete-this-directory.txt
51
52# Unit test / coverage reports
53htmlcov/
54.tox/
55.nox/
56.coverage
57.coverage.*
58.cache
59nosetests.xml
60coverage.xml
61*.cover
62*.py,cover
63.hypothesis/
64.pytest_cache/
65cover/
66
67# Translations
68*.mo
69*.pot
70
71# Django stuff:
72*.log
73local_settings.py
74db.sqlite3
75db.sqlite3-journal
76
77# Flask stuff:
78instance/
79.webassets-cache
80
81# Scrapy stuff:
82.scrapy
83
84# Sphinx documentation
85docs/_build/
86
87# PyBuilder
88.pybuilder/
89target/
90
91# Jupyter Notebook
92.ipynb_checkpoints
93
94# IPython
95profile_default/
96ipython_config.py
97
98# pyenv
99# For a library or package, you might want to ignore these files since the code is
100# intended to run in multiple environments; otherwise, check them in:
101# .python-version
102
103# pipenv
104# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
105# However, in case of collaboration, if having platform-specific dependencies or dependencies
106# having no cross-platform support, pipenv may install dependencies that don't work, or not
107# install all needed dependencies.
108#Pipfile.lock
109
110# poetry
111# Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
112# This is especially recommended for binary packages to ensure reproducibility, and is more
113# commonly ignored for libraries.
114# https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
115#poetry.lock
116
117# PEP 582; used by e.g. github.com/David-OConnor/pyflow
118__pypackages__/
119
120# Celery stuff
121celerybeat-schedule
122celerybeat.pid
123
124# SageMath parsed files
125*.sage.py
126
127# Environments
128.env
129.venv
130env/
131venv/
132ENV/
133env.bak/
134venv.bak/
135
136# Spyder project settings
137.spyderproject
138.spyproject
139
140# Rope project settings
141.ropeproject
142
143# mkdocs documentation
144/site
145
146# mypy
147.mypy_cache/
148.dmypy.json
149dmypy.json
150
151# Pyre type checker
152.pyre/
153
154# pytype static type analyzer
155.pytype/
156
157# Cython debug symbols
158cython_debug/
159STATIC_ROOT = os.path.join(BASE_DIR, 'staticfile')
160
161STATIC_URL = '/static/'
162
163django_heroku.settings(locals())
164
Thank you.
ANSWER
Answered 2022-Jan-18 at 21:06If you look at the django-heroku
repository on GitHub I think you'll find that it has been abandoned. It has a banner saying
This repository has been archived by the owner. It is now read-only.
and has not had a new commit on the master
branch since October, 2018.
The heroku-on-django
library aims to be an updated replacement for django-heroku
:
This has been forked from django-heroku because it was abandoned and then renamed to django-on-heroku because old project has been archived.
It is also somewhat stagnant (the most recent commit to master
at the time of writing is from October, 2020) but it should work better than django-heroku
.
In either case, make sure to put this at the bottom of your settings.py
as indicated in the documentation:
1{'default': {'ATOMIC_REQUESTS': False,
2 'AUTOCOMMIT': True,
3 'CONN_MAX_AGE': 0,
4 'ENGINE': 'django.db.backends.sqlite3',
5 'HOST': '',
6 'NAME': PosixPath('/app/db.sqlite3'),
7 'OPTIONS': {},
8 'PASSWORD': '********************',
9 'PORT': '',
10 'TEST': {'CHARSET': None,
11 'COLLATION': None,
12 'MIGRATE': True,
13 'MIRROR': None,
14 'NAME': None},
15 'TIME_ZONE': None,
16 'USER': ''}}
17# Byte-compiled / optimized / DLL files
18__pycache__/
19*.py[cod]
20*$py.class
21
22# C extensions
23*.so
24
25# Distribution / packaging
26.Python
27build/
28develop-eggs/
29dist/
30downloads/
31eggs/
32.eggs/
33lib/
34lib64/
35parts/
36sdist/
37var/
38wheels/
39share/python-wheels/
40*.egg-info/
41.installed.cfg
42*.egg
43MANIFEST
44
45*.manifest
46*.spec
47
48# Installer logs
49pip-log.txt
50pip-delete-this-directory.txt
51
52# Unit test / coverage reports
53htmlcov/
54.tox/
55.nox/
56.coverage
57.coverage.*
58.cache
59nosetests.xml
60coverage.xml
61*.cover
62*.py,cover
63.hypothesis/
64.pytest_cache/
65cover/
66
67# Translations
68*.mo
69*.pot
70
71# Django stuff:
72*.log
73local_settings.py
74db.sqlite3
75db.sqlite3-journal
76
77# Flask stuff:
78instance/
79.webassets-cache
80
81# Scrapy stuff:
82.scrapy
83
84# Sphinx documentation
85docs/_build/
86
87# PyBuilder
88.pybuilder/
89target/
90
91# Jupyter Notebook
92.ipynb_checkpoints
93
94# IPython
95profile_default/
96ipython_config.py
97
98# pyenv
99# For a library or package, you might want to ignore these files since the code is
100# intended to run in multiple environments; otherwise, check them in:
101# .python-version
102
103# pipenv
104# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
105# However, in case of collaboration, if having platform-specific dependencies or dependencies
106# having no cross-platform support, pipenv may install dependencies that don't work, or not
107# install all needed dependencies.
108#Pipfile.lock
109
110# poetry
111# Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
112# This is especially recommended for binary packages to ensure reproducibility, and is more
113# commonly ignored for libraries.
114# https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
115#poetry.lock
116
117# PEP 582; used by e.g. github.com/David-OConnor/pyflow
118__pypackages__/
119
120# Celery stuff
121celerybeat-schedule
122celerybeat.pid
123
124# SageMath parsed files
125*.sage.py
126
127# Environments
128.env
129.venv
130env/
131venv/
132ENV/
133env.bak/
134venv.bak/
135
136# Spyder project settings
137.spyderproject
138.spyproject
139
140# Rope project settings
141.ropeproject
142
143# mkdocs documentation
144/site
145
146# mypy
147.mypy_cache/
148.dmypy.json
149dmypy.json
150
151# Pyre type checker
152.pyre/
153
154# pytype static type analyzer
155.pytype/
156
157# Cython debug symbols
158cython_debug/
159STATIC_ROOT = os.path.join(BASE_DIR, 'staticfile')
160
161STATIC_URL = '/static/'
162
163django_heroku.settings(locals())
164# Configure Django App for Heroku.
165import django_on_heroku
166django_on_heroku.settings(locals())
167
QUESTION
Find the categories that frequently occur together based on another column
Asked 2022-Jan-03 at 16:36Consider that I have the following data in a Pandas dataframe:
Paper ID | Author ID |
---|---|
Paper_1 | Author_1 |
Paper_1 | Author_2 |
Paper_2 | Author_2 |
Paper_3 | Author_1 |
Paper_3 | Author_2 |
Paper_3 | Author_3 |
Paper_4 | Author_1 |
Paper_4 | Author_3 |
I need to find the number of non-zero collaborations. So, the output should be:
(Author_1,Author_2) --> 2
(Author_1,Author_3) --> 1
Any help or advice will be greatly appreciated.
ANSWER
Answered 2022-Jan-03 at 16:36If the data is fairly small, then merging on the Paper ID
will generate pairs that can be collapsed/aggregated:
1# assume df has columns Paper ID, Author ID
2df_merged = df.merge(df, on="Paper ID")
3
4# keep only one instance of a collaboration
5mask = df_merged["Author ID_x"] > df_merged["Author ID_y"]
6
7# aggregate (note the use of the mask to avoid double-
8# counting and self-collaborations as noted in the
9# comment by Riccardo Bucco)
10counts = (
11 df_merged[mask]
12 .groupby(["Author ID_x", "Author ID_y"])
13 .agg(collaboration_count=("Paper ID", "count"))
14)
15
Community Discussions contain sources that include Stack Exchange Network
Tutorials and Learning Resources in Collaboration
Tutorials and Learning Resources are not available at this moment for Collaboration