Sitemap

I've made a program that reads the /robots.txt and the /sitemap.xml of a page and substracts the available sitemaps and stores them on the siteMapsUnsorted list. Once there I use crawler-commons library to analyze if the links are SiteMaps or SiteMapIndexes (cluster of SiteMaps).

When I use it on a normal siteMapIndex it works, the problem occurs in some cases where bigger sites have the list of SiteMapIndexes on a compressed format, e.g:

Compressed sitemapIndex: http://tripadvisor-sitemaps.s3-website-us-east-1.amazonaws.com/2/es/sitemap_es_index.xml
Normal sitemapIndex: https://www.infolibre.es/sitemap_index_382e2.xml

The code I'm using:

1SiteMapParser sitemapParser = new SiteMapParser();
2
3for (String sitemapURLStr : siteMapsUnsorted) {
4    AbstractSiteMap siteMapCandidate = sitemapParser.parseSiteMap(new URL(sitemapURLStr));
5//AbstractSiteMap siteMapCandidate = sitemapParser.parseSiteMap(&quot;xml&quot;, content , new URL(sitemapURLStr));
6    
7    // Check if the elements inside the list are SiteMapIndexes or SiteMaps, if they are SiteMapINDEXES, we need to break them down into SiteMaps
8    if (siteMapCandidate instanceof SiteMapIndex){
9        SiteMapIndex siteMapIndex = (SiteMapIndex) siteMapCandidate;
10
11        for (AbstractSiteMap aSiteMap : siteMapIndex.getSitemaps()){
12            if (aSiteMap instanceof  SiteMap){
13                String siteMapString = aSiteMap.getUrl().toString();
14                System.out.println(siteMapString);
15                siteMaps.add(siteMapString);
16            } else{
17                LOG.warn(&quot;ignoring site map index inside site map index: &quot; + aSiteMap.getUrl());
18            }
19        }
20    }
21    // If the elements inside the list are individual SiteMaps we add them to the SiteMaps list
22    else {
23        siteMaps.add(siteMapCandidate.getUrl().toString());
24    }
25}
26

I've noticed that the method parseSitemap changes depending the parameters you pass to it, but after trying multiple times I couldnt find a way to handle the compressed elements.

My last alternative would be to program a method that downloads every .tar.gz, decompresses it, reads the decompressed list of links, store them and finally deletes the directory; but that would be extremelly slow and inefficient, so first I came here to see if anyone has a better idea/could help me with the parseSitemap().

Thanks to anyone helping in advance.

ANSWER

Answered 2022-Apr-01 at 14:32

The reason this is failing is that Tripadvisor doesn't set the correct mime type on its sitemaps:

1SiteMapParser sitemapParser = new SiteMapParser();
2
3for (String sitemapURLStr : siteMapsUnsorted) {
4    AbstractSiteMap siteMapCandidate = sitemapParser.parseSiteMap(new URL(sitemapURLStr));
5//AbstractSiteMap siteMapCandidate = sitemapParser.parseSiteMap(&quot;xml&quot;, content , new URL(sitemapURLStr));
6    
7    // Check if the elements inside the list are SiteMapIndexes or SiteMaps, if they are SiteMapINDEXES, we need to break them down into SiteMaps
8    if (siteMapCandidate instanceof SiteMapIndex){
9        SiteMapIndex siteMapIndex = (SiteMapIndex) siteMapCandidate;
10
11        for (AbstractSiteMap aSiteMap : siteMapIndex.getSitemaps()){
12            if (aSiteMap instanceof  SiteMap){
13                String siteMapString = aSiteMap.getUrl().toString();
14                System.out.println(siteMapString);
15                siteMaps.add(siteMapString);
16            } else{
17                LOG.warn(&quot;ignoring site map index inside site map index: &quot; + aSiteMap.getUrl());
18            }
19        }
20    }
21    // If the elements inside the list are individual SiteMaps we add them to the SiteMaps list
22    else {
23        siteMaps.add(siteMapCandidate.getUrl().toString());
24    }
25}
26$ curl --head https://www.tripadvisor.es/sitemap/2/es/sitemap-1662847-es-articles-1644753222.xml.gz
27...
28content-type: text/plain; charset=utf-8
29

and the library that are using only decodes with gzip when the content type is one of:

1SiteMapParser sitemapParser = new SiteMapParser();
2
3for (String sitemapURLStr : siteMapsUnsorted) {
4    AbstractSiteMap siteMapCandidate = sitemapParser.parseSiteMap(new URL(sitemapURLStr));
5//AbstractSiteMap siteMapCandidate = sitemapParser.parseSiteMap(&quot;xml&quot;, content , new URL(sitemapURLStr));
6    
7    // Check if the elements inside the list are SiteMapIndexes or SiteMaps, if they are SiteMapINDEXES, we need to break them down into SiteMaps
8    if (siteMapCandidate instanceof SiteMapIndex){
9        SiteMapIndex siteMapIndex = (SiteMapIndex) siteMapCandidate;
10
11        for (AbstractSiteMap aSiteMap : siteMapIndex.getSitemaps()){
12            if (aSiteMap instanceof  SiteMap){
13                String siteMapString = aSiteMap.getUrl().toString();
14                System.out.println(siteMapString);
15                siteMaps.add(siteMapString);
16            } else{
17                LOG.warn(&quot;ignoring site map index inside site map index: &quot; + aSiteMap.getUrl());
18            }
19        }
20    }
21    // If the elements inside the list are individual SiteMaps we add them to the SiteMaps list
22    else {
23        siteMaps.add(siteMapCandidate.getUrl().toString());
24    }
25}
26$ curl --head https://www.tripadvisor.es/sitemap/2/es/sitemap-1662847-es-articles-1644753222.xml.gz
27...
28content-type: text/plain; charset=utf-8
29private static String[] GZIP_MIMETYPES = new String[] { 
30  &quot;application/gzip&quot;,
31  &quot;application/gzip-compressed&quot;,
32  &quot;application/gzipped&quot;,
33  &quot;application/x-gzip&quot;,
34  &quot;application/x-gzip-compressed&quot;,
35  &quot;application/x-gunzip&quot;,
36  &quot;gzip/document&quot;
37};
38

You could probably work around this by implementing better detection of gzip and xml (like the URL ends in .xml.gz) and call the processGzippedXML method directly after downloading the sitemap to a byte[].

Source https://stackoverflow.com/questions/71704120

QUESTION

Golang reads html tags (<>) from JSON string data as &lt and &gt which causes rendering issues in the browser

Asked 2022-Mar-19 at 18:45

I have a basic web server that renders blog posts from a database of JSON posts wherein the main paragraphs are built from a JSON string array. I was trying to find a way to easily encode new lines or line breaks and found a lot of difficulty with how the encoding for these values changes from JSON to GoLang and finally to my HTML webpage. When I tried to encode my JSON with newlines I found I had to encode them using \\n rather than just \n in order for them to actually appear on my page. One problem however was they simply appeared as text and not line breaks.

I then tried to research ways to replace the \n portions of the joined string array into   tags, however I could not find any way to do this with go and moved to trying to do so in javascript. This did not work either despite me deferring the calling of my javascript in my link from my HTML. this is that javascript:

1var title = window.document.getElementById(&quot;title&quot;);
2var timestamp = window.document.getElementById(&quot;timestamp&quot;);
3var sitemap = window.document.getElementById(&quot;sitemap&quot;);
4var main = window.document.getElementById(&quot;main&quot;);
5var contact_form = window.document.getElementById(&quot;contact-form&quot;);
6var content_info = window.document.getElementById(&quot;content-info&quot;);
7
8var str = main.innerHTML;
9
10function replaceNewlines() {
11    // Replace the \n with &lt;br&gt;
12    str = str.replace(/(?:\r\n|\r|\n)/g, &quot;&lt;br&gt;&quot;);
13
14    // Update the value of paragraph
15    main.innerHTML = str;
16}
17

Here is my HTML:

1var title = window.document.getElementById(&quot;title&quot;);
2var timestamp = window.document.getElementById(&quot;timestamp&quot;);
3var sitemap = window.document.getElementById(&quot;sitemap&quot;);
4var main = window.document.getElementById(&quot;main&quot;);
5var contact_form = window.document.getElementById(&quot;contact-form&quot;);
6var content_info = window.document.getElementById(&quot;content-info&quot;);
7
8var str = main.innerHTML;
9
10function replaceNewlines() {
11    // Replace the \n with &lt;br&gt;
12    str = str.replace(/(?:\r\n|\r|\n)/g, &quot;&lt;br&gt;&quot;);
13
14    // Update the value of paragraph
15    main.innerHTML = str;
16}
17&lt;!DOCTYPE html&gt;
18&lt;html lang=&quot;en&quot;&gt;
19&lt;head&gt;
20    &lt;meta charset=&quot;UTF-8&quot;&gt;
21    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
22    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
23    &lt;title&gt;Dynamic JSON Events&lt;/title&gt;
24    &lt;link rel=&quot;stylesheet&quot; href=&quot;/blogtemplate.css&quot;&gt;&lt;/style&gt;
25&lt;/head&gt;
26&lt;body&gt;
27    &lt;section id=&quot;title&quot;&gt;
28        &lt;h1 id=&quot;text-title&quot;&gt;{{.Title}}&lt;/h1&gt;
29        &lt;time id=&quot;timestamp&quot;&gt;
30            {{.Timestamp}}
31        &lt;/time&gt;
32    &lt;/section&gt;
33    &lt;nav role=&quot;navigation&quot; id=&quot;site-nav&quot;&gt;
34        &lt;ul id=&quot;sitemap&quot;&gt;
35        &lt;/ul&gt;
36    &lt;/nav&gt;
37    &lt;main role=&quot;main&quot; id=&quot;main&quot;&gt;
38        {{.ParsedMain}}
39    &lt;/main&gt;
40    &lt;footer role=&quot;contentinfo&quot; id=&quot;footer&quot;&gt;
41        &lt;form id=&quot;contact-form&quot; role=&quot;form&quot;&gt;
42        &lt;address&gt;
43            Contact me by &lt;a id=&quot;my-email&quot; href=&quot;mailto:antonhibl11@gmail.com&quot; class=&quot;my-email&quot;&gt;e-mail&lt;/a&gt;
44        &lt;/address&gt;
45        &lt;/form&gt;
46    &lt;/footer&gt;
47&lt;script defer src=&quot;/blogtemplate.js&quot;&gt;
48&lt;/script&gt;
49&lt;/body&gt;
50&lt;/html&gt;
51

I then finally turned to trying to hardcode   tags into my json data to discover that this simply renders as &lt and &gt when it finally reaches the browser. I am getting pretty frustrated with this process of encoding constantly causing me issues in creating newlines and line breaks. How can I easily include newlines where I want in my JSON string data?

Here is my Go script if it helps:

1var title = window.document.getElementById(&quot;title&quot;);
2var timestamp = window.document.getElementById(&quot;timestamp&quot;);
3var sitemap = window.document.getElementById(&quot;sitemap&quot;);
4var main = window.document.getElementById(&quot;main&quot;);
5var contact_form = window.document.getElementById(&quot;contact-form&quot;);
6var content_info = window.document.getElementById(&quot;content-info&quot;);
7
8var str = main.innerHTML;
9
10function replaceNewlines() {
11    // Replace the \n with &lt;br&gt;
12    str = str.replace(/(?:\r\n|\r|\n)/g, &quot;&lt;br&gt;&quot;);
13
14    // Update the value of paragraph
15    main.innerHTML = str;
16}
17&lt;!DOCTYPE html&gt;
18&lt;html lang=&quot;en&quot;&gt;
19&lt;head&gt;
20    &lt;meta charset=&quot;UTF-8&quot;&gt;
21    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
22    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
23    &lt;title&gt;Dynamic JSON Events&lt;/title&gt;
24    &lt;link rel=&quot;stylesheet&quot; href=&quot;/blogtemplate.css&quot;&gt;&lt;/style&gt;
25&lt;/head&gt;
26&lt;body&gt;
27    &lt;section id=&quot;title&quot;&gt;
28        &lt;h1 id=&quot;text-title&quot;&gt;{{.Title}}&lt;/h1&gt;
29        &lt;time id=&quot;timestamp&quot;&gt;
30            {{.Timestamp}}
31        &lt;/time&gt;
32    &lt;/section&gt;
33    &lt;nav role=&quot;navigation&quot; id=&quot;site-nav&quot;&gt;
34        &lt;ul id=&quot;sitemap&quot;&gt;
35        &lt;/ul&gt;
36    &lt;/nav&gt;
37    &lt;main role=&quot;main&quot; id=&quot;main&quot;&gt;
38        {{.ParsedMain}}
39    &lt;/main&gt;
40    &lt;footer role=&quot;contentinfo&quot; id=&quot;footer&quot;&gt;
41        &lt;form id=&quot;contact-form&quot; role=&quot;form&quot;&gt;
42        &lt;address&gt;
43            Contact me by &lt;a id=&quot;my-email&quot; href=&quot;mailto:antonhibl11@gmail.com&quot; class=&quot;my-email&quot;&gt;e-mail&lt;/a&gt;
44        &lt;/address&gt;
45        &lt;/form&gt;
46    &lt;/footer&gt;
47&lt;script defer src=&quot;/blogtemplate.js&quot;&gt;
48&lt;/script&gt;
49&lt;/body&gt;
50&lt;/html&gt;
51package main
52
53import (
54    &quot;encoding/json&quot;
55    &quot;html/template&quot;
56    &quot;log&quot;
57    &quot;net/http&quot;
58    &quot;os&quot;
59    &quot;regexp&quot;
60    &quot;strings&quot;
61)
62
63type BlogPost struct {
64    Title      string   `json:&quot;title&quot;`
65    Timestamp  string   `json:&quot;timestamp&quot;`
66    Main       []string `json:&quot;main&quot;`
67    ParsedMain string
68}
69
70// this did not seem to work when I tried to implement it below
71var re = regexp.MustCompile(`\r\n|[\r\n\v\f\x{0085}\x{2028}\x{2029}]`)
72func replaceRegexp(s string) string {
73    return re.ReplaceAllString(s, &quot;&lt;br&gt;\n&quot;)
74}
75
76var blogTemplate = template.Must(template.ParseFiles(&quot;./assets/docs/blogtemplate.html&quot;))
77
78func blogHandler(w http.ResponseWriter, r *http.Request) {
79    blogstr := r.URL.Path[len(&quot;/blog/&quot;):] + &quot;.json&quot;
80
81    f, err := os.Open(&quot;db/&quot; + blogstr)
82    if err != nil {
83        http.Error(w, err.Error(), http.StatusNotFound)
84        return
85    }
86    defer f.Close()
87
88    var post BlogPost
89    if err := json.NewDecoder(f).Decode(&amp;post); err != nil {
90        http.Error(w, err.Error(), http.StatusInternalServerError)
91        return
92    }
93
94    post.ParsedMain = strings.Join(post.Main, &quot;&quot;)
95
96    // post.ParsedMain = replaceRegexp(post.ParsedMain)
97
98    if err := blogTemplate.Execute(w, post); err != nil {
99        log.Println(err)
100    }
101}
102
103func teapotHandler(w http.ResponseWriter, r *http.Request) {
104    w.WriteHeader(http.StatusTeapot)
105    w.Write([]byte(&quot;&lt;html&gt;&lt;h1&gt;&lt;a href='https://datatracker.ietf.org/doc/html/rfc2324/'&gt;HTCPTP&lt;/h1&gt;&lt;img src='https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftaooftea.com%2Fwp-content%2Fuploads%2F2015%2F12%2Fyixing-dark-brown-small.jpg&amp;f=1&amp;nofb=1' alt='Im a teapot'&gt;&lt;html&gt;&quot;))
106}
107
108func faviconHandler(w http.ResponseWriter, r *http.Request) {
109    http.ServeFile(w, r, &quot;./assets/art/favicon.ico&quot;)
110}
111
112func main() {
113    http.Handle(&quot;/&quot;, http.FileServer(http.Dir(&quot;/assets/docs&quot;)))
114    http.HandleFunc(&quot;/blog/&quot;, blogHandler)
115    http.HandleFunc(&quot;/favicon.ico&quot;, faviconHandler)
116    http.HandleFunc(&quot;/teapot&quot;, teapotHandler)
117    log.Fatal(http.ListenAndServe(&quot;:8080&quot;, nil))
118}
119
120

Here is an example of my JSON data:

1var title = window.document.getElementById(&quot;title&quot;);
2var timestamp = window.document.getElementById(&quot;timestamp&quot;);
3var sitemap = window.document.getElementById(&quot;sitemap&quot;);
4var main = window.document.getElementById(&quot;main&quot;);
5var contact_form = window.document.getElementById(&quot;contact-form&quot;);
6var content_info = window.document.getElementById(&quot;content-info&quot;);
7
8var str = main.innerHTML;
9
10function replaceNewlines() {
11    // Replace the \n with &lt;br&gt;
12    str = str.replace(/(?:\r\n|\r|\n)/g, &quot;&lt;br&gt;&quot;);
13
14    // Update the value of paragraph
15    main.innerHTML = str;
16}
17&lt;!DOCTYPE html&gt;
18&lt;html lang=&quot;en&quot;&gt;
19&lt;head&gt;
20    &lt;meta charset=&quot;UTF-8&quot;&gt;
21    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
22    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
23    &lt;title&gt;Dynamic JSON Events&lt;/title&gt;
24    &lt;link rel=&quot;stylesheet&quot; href=&quot;/blogtemplate.css&quot;&gt;&lt;/style&gt;
25&lt;/head&gt;
26&lt;body&gt;
27    &lt;section id=&quot;title&quot;&gt;
28        &lt;h1 id=&quot;text-title&quot;&gt;{{.Title}}&lt;/h1&gt;
29        &lt;time id=&quot;timestamp&quot;&gt;
30            {{.Timestamp}}
31        &lt;/time&gt;
32    &lt;/section&gt;
33    &lt;nav role=&quot;navigation&quot; id=&quot;site-nav&quot;&gt;
34        &lt;ul id=&quot;sitemap&quot;&gt;
35        &lt;/ul&gt;
36    &lt;/nav&gt;
37    &lt;main role=&quot;main&quot; id=&quot;main&quot;&gt;
38        {{.ParsedMain}}
39    &lt;/main&gt;
40    &lt;footer role=&quot;contentinfo&quot; id=&quot;footer&quot;&gt;
41        &lt;form id=&quot;contact-form&quot; role=&quot;form&quot;&gt;
42        &lt;address&gt;
43            Contact me by &lt;a id=&quot;my-email&quot; href=&quot;mailto:antonhibl11@gmail.com&quot; class=&quot;my-email&quot;&gt;e-mail&lt;/a&gt;
44        &lt;/address&gt;
45        &lt;/form&gt;
46    &lt;/footer&gt;
47&lt;script defer src=&quot;/blogtemplate.js&quot;&gt;
48&lt;/script&gt;
49&lt;/body&gt;
50&lt;/html&gt;
51package main
52
53import (
54    &quot;encoding/json&quot;
55    &quot;html/template&quot;
56    &quot;log&quot;
57    &quot;net/http&quot;
58    &quot;os&quot;
59    &quot;regexp&quot;
60    &quot;strings&quot;
61)
62
63type BlogPost struct {
64    Title      string   `json:&quot;title&quot;`
65    Timestamp  string   `json:&quot;timestamp&quot;`
66    Main       []string `json:&quot;main&quot;`
67    ParsedMain string
68}
69
70// this did not seem to work when I tried to implement it below
71var re = regexp.MustCompile(`\r\n|[\r\n\v\f\x{0085}\x{2028}\x{2029}]`)
72func replaceRegexp(s string) string {
73    return re.ReplaceAllString(s, &quot;&lt;br&gt;\n&quot;)
74}
75
76var blogTemplate = template.Must(template.ParseFiles(&quot;./assets/docs/blogtemplate.html&quot;))
77
78func blogHandler(w http.ResponseWriter, r *http.Request) {
79    blogstr := r.URL.Path[len(&quot;/blog/&quot;):] + &quot;.json&quot;
80
81    f, err := os.Open(&quot;db/&quot; + blogstr)
82    if err != nil {
83        http.Error(w, err.Error(), http.StatusNotFound)
84        return
85    }
86    defer f.Close()
87
88    var post BlogPost
89    if err := json.NewDecoder(f).Decode(&amp;post); err != nil {
90        http.Error(w, err.Error(), http.StatusInternalServerError)
91        return
92    }
93
94    post.ParsedMain = strings.Join(post.Main, &quot;&quot;)
95
96    // post.ParsedMain = replaceRegexp(post.ParsedMain)
97
98    if err := blogTemplate.Execute(w, post); err != nil {
99        log.Println(err)
100    }
101}
102
103func teapotHandler(w http.ResponseWriter, r *http.Request) {
104    w.WriteHeader(http.StatusTeapot)
105    w.Write([]byte(&quot;&lt;html&gt;&lt;h1&gt;&lt;a href='https://datatracker.ietf.org/doc/html/rfc2324/'&gt;HTCPTP&lt;/h1&gt;&lt;img src='https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftaooftea.com%2Fwp-content%2Fuploads%2F2015%2F12%2Fyixing-dark-brown-small.jpg&amp;f=1&amp;nofb=1' alt='Im a teapot'&gt;&lt;html&gt;&quot;))
106}
107
108func faviconHandler(w http.ResponseWriter, r *http.Request) {
109    http.ServeFile(w, r, &quot;./assets/art/favicon.ico&quot;)
110}
111
112func main() {
113    http.Handle(&quot;/&quot;, http.FileServer(http.Dir(&quot;/assets/docs&quot;)))
114    http.HandleFunc(&quot;/blog/&quot;, blogHandler)
115    http.HandleFunc(&quot;/favicon.ico&quot;, faviconHandler)
116    http.HandleFunc(&quot;/teapot&quot;, teapotHandler)
117    log.Fatal(http.ListenAndServe(&quot;:8080&quot;, nil))
118}
119
120{
121    &quot;title&quot; : &quot;Finished My First Blog App&quot;,
122    &quot;timestamp&quot;: &quot;Friday, March 18th, 11:39 AM&quot;,
123    &quot;main&quot;: [
124        &quot;It took me awhile to tidy everything up but I finally finished creating my first &quot;,
125        &quot;blog app using Go along with JSON for my database. I plan on using this to document &quot;,
126        &quot;my own thoughts and experiences as a programmer and cybersecurity researcher; things &quot;,
127        &quot;like tutorials, thought-pieces, and journals on my own projects progress will be &quot;,
128        &quot;posted here. I look forward to getting more used to writing and sharing my own story, &quot;,
129        &quot;I think it will help me learn from doing and also hearing feedback from others.\\n\\n&quot;,
130        &quot;I utilized a handler function to dynamically read from my JSON database and template &quot;,
131        &quot;data into my HTML template using the go html/template package as well as the encoding/json &quot;,
132        &quot;to handling reading those objects. Next I had to make sure my CSS and JavaScript assets &quot;,
133        &quot;would be served alongside this finished template in order for my styling to be output into &quot;,
134        &quot;the browser. For this I used a FileServer function which allowed for me to serve linked &quot;,
135        &quot;resources in my HTML boilerplate and have the server still locate blog resources dynamically. &quot;,
136        &quot;Going forward I am looking to add better styling, more JavaScript elements to the page, and &quot;,
137        &quot;more functionality to how my JSON data is encoded and parsed in order to create more complex &quot;,
138        &quot;looking pages and blog posts.&quot;
139    ]
140}
141

I am just trying to find a way to easily include spaces between paragraphs in the long array of strings in my JSON however I have failed in Go, my JS doesn't ever seem to affect my webpage(this is not the only problem I have had with this, it does not seem to want to affect any page elements for some reason), and I cannot seem to hardcode   tags directly into my JSON as the browser interprets those as  . Nothing I have tried has actually let me encode linebreaks, What can I do here?

ANSWER

Answered 2022-Mar-19 at 06:43

You could try to loop over your array inside the template and generate a p tag for every element of the array. This way there is no need to edit your main array in go.

Template:

1var title = window.document.getElementById(&quot;title&quot;);
2var timestamp = window.document.getElementById(&quot;timestamp&quot;);
3var sitemap = window.document.getElementById(&quot;sitemap&quot;);
4var main = window.document.getElementById(&quot;main&quot;);
5var contact_form = window.document.getElementById(&quot;contact-form&quot;);
6var content_info = window.document.getElementById(&quot;content-info&quot;);
7
8var str = main.innerHTML;
9
10function replaceNewlines() {
11    // Replace the \n with &lt;br&gt;
12    str = str.replace(/(?:\r\n|\r|\n)/g, &quot;&lt;br&gt;&quot;);
13
14    // Update the value of paragraph
15    main.innerHTML = str;
16}
17&lt;!DOCTYPE html&gt;
18&lt;html lang=&quot;en&quot;&gt;
19&lt;head&gt;
20    &lt;meta charset=&quot;UTF-8&quot;&gt;
21    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
22    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
23    &lt;title&gt;Dynamic JSON Events&lt;/title&gt;
24    &lt;link rel=&quot;stylesheet&quot; href=&quot;/blogtemplate.css&quot;&gt;&lt;/style&gt;
25&lt;/head&gt;
26&lt;body&gt;
27    &lt;section id=&quot;title&quot;&gt;
28        &lt;h1 id=&quot;text-title&quot;&gt;{{.Title}}&lt;/h1&gt;
29        &lt;time id=&quot;timestamp&quot;&gt;
30            {{.Timestamp}}
31        &lt;/time&gt;
32    &lt;/section&gt;
33    &lt;nav role=&quot;navigation&quot; id=&quot;site-nav&quot;&gt;
34        &lt;ul id=&quot;sitemap&quot;&gt;
35        &lt;/ul&gt;
36    &lt;/nav&gt;
37    &lt;main role=&quot;main&quot; id=&quot;main&quot;&gt;
38        {{.ParsedMain}}
39    &lt;/main&gt;
40    &lt;footer role=&quot;contentinfo&quot; id=&quot;footer&quot;&gt;
41        &lt;form id=&quot;contact-form&quot; role=&quot;form&quot;&gt;
42        &lt;address&gt;
43            Contact me by &lt;a id=&quot;my-email&quot; href=&quot;mailto:antonhibl11@gmail.com&quot; class=&quot;my-email&quot;&gt;e-mail&lt;/a&gt;
44        &lt;/address&gt;
45        &lt;/form&gt;
46    &lt;/footer&gt;
47&lt;script defer src=&quot;/blogtemplate.js&quot;&gt;
48&lt;/script&gt;
49&lt;/body&gt;
50&lt;/html&gt;
51package main
52
53import (
54    &quot;encoding/json&quot;
55    &quot;html/template&quot;
56    &quot;log&quot;
57    &quot;net/http&quot;
58    &quot;os&quot;
59    &quot;regexp&quot;
60    &quot;strings&quot;
61)
62
63type BlogPost struct {
64    Title      string   `json:&quot;title&quot;`
65    Timestamp  string   `json:&quot;timestamp&quot;`
66    Main       []string `json:&quot;main&quot;`
67    ParsedMain string
68}
69
70// this did not seem to work when I tried to implement it below
71var re = regexp.MustCompile(`\r\n|[\r\n\v\f\x{0085}\x{2028}\x{2029}]`)
72func replaceRegexp(s string) string {
73    return re.ReplaceAllString(s, &quot;&lt;br&gt;\n&quot;)
74}
75
76var blogTemplate = template.Must(template.ParseFiles(&quot;./assets/docs/blogtemplate.html&quot;))
77
78func blogHandler(w http.ResponseWriter, r *http.Request) {
79    blogstr := r.URL.Path[len(&quot;/blog/&quot;):] + &quot;.json&quot;
80
81    f, err := os.Open(&quot;db/&quot; + blogstr)
82    if err != nil {
83        http.Error(w, err.Error(), http.StatusNotFound)
84        return
85    }
86    defer f.Close()
87
88    var post BlogPost
89    if err := json.NewDecoder(f).Decode(&amp;post); err != nil {
90        http.Error(w, err.Error(), http.StatusInternalServerError)
91        return
92    }
93
94    post.ParsedMain = strings.Join(post.Main, &quot;&quot;)
95
96    // post.ParsedMain = replaceRegexp(post.ParsedMain)
97
98    if err := blogTemplate.Execute(w, post); err != nil {
99        log.Println(err)
100    }
101}
102
103func teapotHandler(w http.ResponseWriter, r *http.Request) {
104    w.WriteHeader(http.StatusTeapot)
105    w.Write([]byte(&quot;&lt;html&gt;&lt;h1&gt;&lt;a href='https://datatracker.ietf.org/doc/html/rfc2324/'&gt;HTCPTP&lt;/h1&gt;&lt;img src='https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftaooftea.com%2Fwp-content%2Fuploads%2F2015%2F12%2Fyixing-dark-brown-small.jpg&amp;f=1&amp;nofb=1' alt='Im a teapot'&gt;&lt;html&gt;&quot;))
106}
107
108func faviconHandler(w http.ResponseWriter, r *http.Request) {
109    http.ServeFile(w, r, &quot;./assets/art/favicon.ico&quot;)
110}
111
112func main() {
113    http.Handle(&quot;/&quot;, http.FileServer(http.Dir(&quot;/assets/docs&quot;)))
114    http.HandleFunc(&quot;/blog/&quot;, blogHandler)
115    http.HandleFunc(&quot;/favicon.ico&quot;, faviconHandler)
116    http.HandleFunc(&quot;/teapot&quot;, teapotHandler)
117    log.Fatal(http.ListenAndServe(&quot;:8080&quot;, nil))
118}
119
120{
121    &quot;title&quot; : &quot;Finished My First Blog App&quot;,
122    &quot;timestamp&quot;: &quot;Friday, March 18th, 11:39 AM&quot;,
123    &quot;main&quot;: [
124        &quot;It took me awhile to tidy everything up but I finally finished creating my first &quot;,
125        &quot;blog app using Go along with JSON for my database. I plan on using this to document &quot;,
126        &quot;my own thoughts and experiences as a programmer and cybersecurity researcher; things &quot;,
127        &quot;like tutorials, thought-pieces, and journals on my own projects progress will be &quot;,
128        &quot;posted here. I look forward to getting more used to writing and sharing my own story, &quot;,
129        &quot;I think it will help me learn from doing and also hearing feedback from others.\\n\\n&quot;,
130        &quot;I utilized a handler function to dynamically read from my JSON database and template &quot;,
131        &quot;data into my HTML template using the go html/template package as well as the encoding/json &quot;,
132        &quot;to handling reading those objects. Next I had to make sure my CSS and JavaScript assets &quot;,
133        &quot;would be served alongside this finished template in order for my styling to be output into &quot;,
134        &quot;the browser. For this I used a FileServer function which allowed for me to serve linked &quot;,
135        &quot;resources in my HTML boilerplate and have the server still locate blog resources dynamically. &quot;,
136        &quot;Going forward I am looking to add better styling, more JavaScript elements to the page, and &quot;,
137        &quot;more functionality to how my JSON data is encoded and parsed in order to create more complex &quot;,
138        &quot;looking pages and blog posts.&quot;
139    ]
140}
141&lt;!DOCTYPE html&gt;
142&lt;html lang=&quot;en&quot;&gt;
143&lt;head&gt;
144    &lt;meta charset=&quot;UTF-8&quot;&gt;
145    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
146    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
147    &lt;title&gt;Dynamic JSON Events&lt;/title&gt;
148    &lt;link rel=&quot;stylesheet&quot; href=&quot;/blogtemplate.css&quot;&gt;&lt;/style&gt;
149&lt;/head&gt;
150&lt;body&gt;
151    &lt;section id=&quot;title&quot;&gt;
152        &lt;h1 id=&quot;text-title&quot;&gt;{{.Title}}&lt;/h1&gt;
153        &lt;time id=&quot;timestamp&quot;&gt;
154            {{.Timestamp}}
155        &lt;/time&gt;
156    &lt;/section&gt;
157    &lt;nav role=&quot;navigation&quot; id=&quot;site-nav&quot;&gt;
158        &lt;ul id=&quot;sitemap&quot;&gt;
159        &lt;/ul&gt;
160    &lt;/nav&gt;
161    &lt;main role=&quot;main&quot; id=&quot;main&quot;&gt;
162        {{range $element := .Main}} &lt;p&gt;{{$element}}&lt;/p&gt; {{end}}
163    &lt;/main&gt;
164    &lt;footer role=&quot;contentinfo&quot; id=&quot;footer&quot;&gt;
165        &lt;form id=&quot;contact-form&quot; role=&quot;form&quot;&gt;
166        &lt;address&gt;
167            Contact me by &lt;a id=&quot;my-email&quot; href=&quot;mailto:antonhibl11@gmail.com&quot; class=&quot;my-email&quot;&gt;e-mail&lt;/a&gt;
168        &lt;/address&gt;
169        &lt;/form&gt;
170    &lt;/footer&gt;
171&lt;script defer src=&quot;/blogtemplate.js&quot;&gt;
172&lt;/script&gt;
173&lt;/body&gt;
174&lt;/html&gt;
175

Source https://stackoverflow.com/questions/71535674

QUESTION

Php Dynamic Sitemap After 50K Url

Asked 2022-Mar-13 at 06:54

Hello I Need some help with dynamic sitemap using PHP This is my code

1&lt;?php
2header('Content-type: application/xml; charset=&quot;ISO-8859-1&quot;', true);
3$dataAll1 = scandir('cache-data');
4unset($dataAll1[0]);
5unset($dataAll1[1]);
6unset($dataAll1[2]);
7$sitemap = '&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
8           &lt;urlset xmlns=&quot;'.PROTOCOL.'://www.sitemaps.org/schemas/sitemap/0.9&quot;&gt;';
9
10$sitemap .= '&lt;url&gt;
11                        &lt;loc&gt;' . SITE_HOST . '&lt;/loc&gt;
12                        &lt;priority&gt;1.0&lt;/priority&gt;
13                     &lt;/url&gt;';
14
15foreach($dataAll1 as $val){
16    $data = json_decode(file_get_contents('cache-data/'.$val),1);
17    if($val=='index.php'){
18        continue;
19    }
20    $sitemap .= '&lt;url&gt;
21                   &lt;loc&gt;'.SITE_HOST . '/job-detail/' . $data['jk'].'jktk'.$data['tk'] . '-' . $service-&gt;slugify($data['title']).'&lt;/loc&gt;
22                        &lt;priority&gt;0.9&lt;/priority&gt;
23                        &lt;changefreq&gt;daily&lt;/changefreq&gt;
24                     &lt;/url&gt;';
25}
26
27$sitemap.='&lt;/urlset&gt;';
28echo $sitemap;
29

this code success build sitemap file but after 50K this code wont make new file sitemap, so how to make this code want make new file sitemap after 50K Url?

I really appreciate any help

ANSWER

Answered 2022-Mar-13 at 00:49

You should start the array generated from the scandir with the 50001, but it would be better to split it into several scripts with a crontab, so you don't exhaust the server with excessive runtime; otherwise, increase the runtime of PHP scripts.

Source https://stackoverflow.com/questions/71453516

QUESTION

Unable to parse any XML input. Error on line 5: The reference to entity "utm_medium"

Asked 2022-Mar-11 at 20:58

I am getting an XML parsing error:

Unable to parse any XML input. Error on line 5: The reference to entity utm_medium must end with the ; delimiter. You most likely forgot to escape & into &

with the following, the error is with the xhtml:link tag, URL, I tried changing & to & but it won't work.

1&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
2&lt;urlset xmlns=&quot;http://www.sitemaps.org/schemas/sitemap/0.9&quot; xmlns:xhtml=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
3   &lt;url&gt;
4      &lt;loc&gt;https://www.com/financing/?utm_source=website&amp;amp;utm_medium=banner&amp;amp;utm_campaign=YBF&amp;amp;utm_id=Yellow+Bar+Financing&lt;/loc&gt;
5      &lt;xhtml:link rel=&quot;alternate&quot; hreflang=&quot;en&quot; href=&quot;https://www..com/financing/?utm_source=website&amp;utm_medium=banner&amp;utm_campaign=YBF&amp;utm_id=Yellow+Bar+Financing&quot; /&gt;
6      &lt;lastmod&gt;20015-04-01&lt;/lastmod&gt;
7      &lt;changefreq&gt;weekly&lt;/changefreq&gt;
8      &lt;priority&gt;0.5&lt;/priority&gt;
9   &lt;/url&gt;
10&lt;/urlset&gt;
11&lt;xml&gt;
12

ANSWER

Answered 2022-Mar-11 at 20:58

There is another &utm_medium on the next line that you missed, along with several other & characters that similarly must be changed to &.

Here's your XML with all & properly replaced:

1&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
2&lt;urlset xmlns=&quot;http://www.sitemaps.org/schemas/sitemap/0.9&quot; xmlns:xhtml=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
3   &lt;url&gt;
4      &lt;loc&gt;https://www.com/financing/?utm_source=website&amp;amp;utm_medium=banner&amp;amp;utm_campaign=YBF&amp;amp;utm_id=Yellow+Bar+Financing&lt;/loc&gt;
5      &lt;xhtml:link rel=&quot;alternate&quot; hreflang=&quot;en&quot; href=&quot;https://www..com/financing/?utm_source=website&amp;utm_medium=banner&amp;utm_campaign=YBF&amp;utm_id=Yellow+Bar+Financing&quot; /&gt;
6      &lt;lastmod&gt;20015-04-01&lt;/lastmod&gt;
7      &lt;changefreq&gt;weekly&lt;/changefreq&gt;
8      &lt;priority&gt;0.5&lt;/priority&gt;
9   &lt;/url&gt;
10&lt;/urlset&gt;
11&lt;xml&gt;
12&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
13&lt;urlset xmlns=&quot;http://www.sitemaps.org/schemas/sitemap/0.9&quot; xmlns:xhtml=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
14  &lt;url&gt;
15    &lt;loc&gt;https://www.com/financing/?utm_source=website&amp;amp;utm_medium=banner&amp;amp;utm_campaign=YBF&amp;amp;utm_id=Yellow+Bar+Financing&lt;/loc&gt;
16    &lt;xhtml:link rel=&quot;alternate&quot; hreflang=&quot;en&quot; href=&quot;https://www..com/financing/?utm_source=website&amp;amp;utm_medium=banner&amp;amp;utm_campaign=YBF&amp;amp;utm_id=Yellow+Bar+Financing&quot; /&gt;
17    &lt;lastmod&gt;20015-04-01&lt;/lastmod&gt;
18    &lt;changefreq&gt;weekly&lt;/changefreq&gt;
19    &lt;priority&gt;0.5&lt;/priority&gt;
20  &lt;/url&gt;
21&lt;/urlset&gt;
22

The above XML is now well-formed.

Note that there is, at least in your posted XML, and extraneous <xml> open tag at the end of your document.

Source https://stackoverflow.com/questions/71444094

QUESTION

.htaccess Open main page if file or folder doesn't exist, but keep URL + URL Routing

Asked 2022-Mar-11 at 01:39

I read through a lot of similar topics, but didn't find the right answer, so please help me.

Let's say the user types in a non-existing sub directory to my webpage:

1www.example.com/subpage-1
2

What I want to achieve:

I want my mainpage (www.example.com - actually with hidden index.html) to open, but keep the URL unchanged with the non-existing subpage (www.example.com/subpage-1).

The reason why I need it: I have the website only with the main site (index.html), and everything is controlled via JavaScript dynamically.

I want to introduce sub pages - but I want to use only my main index.html site with JS to control it. (Just like a single page application.)

So when the user enters the URL www.example.com/subpage-1, my main site opens, but since the URL is kept unchanged, the JS script can check the URL, see, that subpage-1 is requested, and generate the right content for it (if subpage-1 is supported, of course).

Also that could be a SEO-friendly solution, since I could provide Google a sitemap with the available subpages as well - however everything would be controlled via the same index.html and JS.

How can I achieve it?

What I found so far:

1www.example.com/subpage-1
2RewriteCond %{REQUEST_FILENAME} !-d
3RewriteCond %{REQUEST_FILENAME} !-f
4RewriteRule ^(.+)$ index.html?url=$1 [QSA,L]
5

My problem with this is that it opens the main page every time, I can't find the query (?url=) anywhere, so I can't use it.

Also a problem what I don't know how to handle: Let's say the user enters www.example.com/subpage-1 and it's working fine since my JS script handles "subpage-1".

But what if

1www.example.com/subpage-1
2RewriteCond %{REQUEST_FILENAME} !-d
3RewriteCond %{REQUEST_FILENAME} !-f
4RewriteRule ^(.+)$ index.html?url=$1 [QSA,L]
5www.example.com/non-existing-subpage 
6

is entered? With the solution above it would open the main page again, but JS can't load any content for it. I still want 404 for all of the non existing subpages. How can I achieve it?

ANSWER

Answered 2022-Mar-11 at 01:39

1www.example.com/subpage-1
2RewriteCond %{REQUEST_FILENAME} !-d
3RewriteCond %{REQUEST_FILENAME} !-f
4RewriteRule ^(.+)$ index.html?url=$1 [QSA,L]
5www.example.com/non-existing-subpage 
6RewriteCond %{REQUEST_FILENAME} !-d
7RewriteCond %{REQUEST_FILENAME} !-f
8RewriteRule ^(.+)$ index.html?url=$1 [QSA,L]
9

My problem with this that however it opens the main page every time, I can't find the query (?url=) anywhere, so I can't use it.

This is an internal rewrite on the server. Consequently, the url URL parameter (present only on the internal rewrite) is only available to a server-side script, not client-side JavaScript. The browser/client only sees the response from the server - it is not aware of what file produced that response. However, client-side JavaScript can see what is present in the browser's address bar, which is accessible via the window.location object.

So, you can instead simplify the RewriteRule directive:

1www.example.com/subpage-1
2RewriteCond %{REQUEST_FILENAME} !-d
3RewriteCond %{REQUEST_FILENAME} !-f
4RewriteRule ^(.+)$ index.html?url=$1 [QSA,L]
5www.example.com/non-existing-subpage 
6RewriteCond %{REQUEST_FILENAME} !-d
7RewriteCond %{REQUEST_FILENAME} !-f
8RewriteRule ^(.+)$ index.html?url=$1 [QSA,L]
9RewriteRule . index.html [L]
10

And in your JS you can read the requested URL-path from the window.location.pathname property. For example, if you request example.com/foo then the pathname property contains /foo (with a slash prefix) for you to act on accordingly in your script.

I still want 404 for all of the non existing subpages. How can I achieve it?

You can't if you are only using client-side JavaScript. A "404 Not Found" status is an HTTP response sent from the server.

The best you can do in client-side JS is to display what looks-like a "404 Not Found" message to the user and make sure you have a robots meta tag that prevents indexing. But this is still served with a 200 OK HTTP status. Search engines (ie. Google) will likely see this as a soft-404 (ie. a page that looks like a 404, but is served with a 200 OK status).

If you want to serve a 404 HTTP response status then the server would need to be aware of which are valid/invalid URLs.

Source https://stackoverflow.com/questions/71427248

QUESTION

How to res.sendFile() a file that is in a different directory for Express.js webapp?

Asked 2022-Mar-01 at 08:04

I have this inside controllers folder:

1//controler.js
2exports.serve_sitemap = (req, res) =&gt; {
3  res.sendFile(&quot;../../sitemap.xml&quot;);
4  // or
5  // res.send(__dirname + &quot;./sitemap.xml&quot;)
6  // But neither of these work
7};
8

This exported function is imported in a file inside the routes directory

1//controler.js
2exports.serve_sitemap = (req, res) =&gt; {
3  res.sendFile(&quot;../../sitemap.xml&quot;);
4  // or
5  // res.send(__dirname + &quot;./sitemap.xml&quot;)
6  // But neither of these work
7};
8const { serve_sitemap } = require('../controllers/indexer')
9
10var router = require('express').Router()
11
12router.get(&quot;/sitemap&quot;, serve_sitemap)
13
14module.exports = router
15

Currently I am getting a 404 error when I try to get the sitmap at localhost:3000/sitemap

Folder Structure:

Before, I had the same thing in index.js which is the entry point.

1//controler.js
2exports.serve_sitemap = (req, res) =&gt; {
3  res.sendFile(&quot;../../sitemap.xml&quot;);
4  // or
5  // res.send(__dirname + &quot;./sitemap.xml&quot;)
6  // But neither of these work
7};
8const { serve_sitemap } = require('../controllers/indexer')
9
10var router = require('express').Router()
11
12router.get(&quot;/sitemap&quot;, serve_sitemap)
13
14module.exports = router
15app.get(&quot;/sitemap&quot;, (req, res) =&gt; {
16   res.sendFile(__dirname + &quot;/sitemap.xml&quot;);
17});
18

This was working perfectly, until I decided to restructure the project

How can I refer to the sitemap.xml file that is located in the root directory from a file that is in a sub-directory when using res.send()?
How can I get the absolute path to the root of the project directory, then I can append the file name to the path. This can solve the issse

I maybe missing something obvious. In that case, please help me out.

Any suggestion gratefully accepted. Thanks in advance

ANSWER

Answered 2022-Mar-01 at 08:04

Why do you think that res.sendFile(__dirname + "./sitemap.xml") would work?

First of all __dirname + "./sitemap.xml" is not how paths should be concatenated you should use join instead especially if your second path starts with ./. And there is no file sitemap.xml in the directory of the controller: __dirname + "./sitemap.xml" would result in something like /path/to/project/src/controller/./sitemap.xml

And why should "../../sitemap.xml" work. If you only have "../../sitemap.xml" it is relative to the working directory which is the one where (i guess) index.js is located. So "../../sitemap.xml" will be resolved based on /path/to/project, so /path/to/project/../../sitemap.xml.

Due to that is either res.sendFile("./sitemap.xml") (relative to index.js) or res.sendFile(path.join(__dirname, "../../sitemap.xml")) (relative to the controller).

Source https://stackoverflow.com/questions/71305142

QUESTION

How to benefit from tree-shaking and code-splitting while loading JSON in Nuxt?

Asked 2021-Dec-22 at 16:13

I have a nuxt-app, where I have a lot of posts. I recently refactored the project and I won't generate all posts anymore, as it is just taking too much time to do that.

Instead I have a page where I would fetch the matching post content via url query: www.mypage.com/posts/?post=my-post-slug

Because the content is lying in static json files, for example in:

1/static/data/posts/my-post-slug.json
2/static/data/posts/my-post-slug_2.json
3/static/data/posts/my-post-slug_3.json
4/static/data/posts/my-post-slug_n.json
5

I read the post https://github.com/nuxt/nuxt.js/issues/123 about how to load json in the best way.

I decided to do something like this in the fetch() hook:

1/static/data/posts/my-post-slug.json
2/static/data/posts/my-post-slug_2.json
3/static/data/posts/my-post-slug_3.json
4/static/data/posts/my-post-slug_n.json
5// ... simplified code
6async fetch() {
7  let postSlug = this.$route.query.post
8  
9  const post = this.$axios
10    .get(`/posts/posts.de.${postSlug}.json`)
11    .then((data) =&gt; {
12      return data?.data
13    })
14    .catch((error) =&gt; {
15      console.error('error: ', error)
16      const code = parseInt(error.response &amp;&amp; error.response.status)
17      if (code === 404) {
18        this.$nuxt.error({ statusCode: 404, message: 'Post not found' })
19      }
20    })
21
22
23  this.activePost = post?.items?.[0] || false
24}
25

As already said, I do not generate the actual posts, but I generate all post urls in my sitemap.xml.

When running the generate in analyze mode I have now a huuuuge bundle size (app.js), and I can't understand why... -> Check out the attached image. (Note: app.js has a ridiculous size of 34MB!!!!😕)

I don't understand why all my post jsons appear in the static and the dist part of the bundle???
I don't understand at all why they appear in there. I want them to just lie in the static folder, but not be included in the app bundle. (you can see that there are files like events.bundle.de.json included. I need those to fetch a list of all posts for example. I do that also within my fetch hook only.

I would be very happy if somebody could point out why those files are included (twice)!

ANSWER

Answered 2021-Dec-21 at 10:55

Those files are not included "twice". You need them, so you do have them locally in your static folder.

Meanwhile, you should probably put them inside of your src directory if you don't want/need to have them exposed publicly and benefit from code-splitting thanks to Webpack as explained in the post you've linked (which is still valid even if it's a 2017 one!).

Here, since you're making an axios call and using target: 'static', it will bundle your whole thing to work even without JS and it does that ahead of time. So, in order to have all the possibilities, it includes all in the final bundle I think.

If you want to only load what is needed while not shipping a big static directory, you should import them dynamically. You can use a dynamic import: load only the needed JSON by passing the actual postSlug.

PS: style-wise, prefer using async/await (.then is deprecated) and maybe also $axios.$get.

Source https://stackoverflow.com/questions/70429562

QUESTION

How to set Home page and static files in same path

Asked 2021-Dec-18 at 20:09

if I run the URL http://localhost:8080/ I want to run the Index function and If I run http://localhost:8080/robot.txt it should show static folder files

1func main() {
2    http.HandleFunc(&quot;/&quot;, Index)
3    http.Handle(&quot;/&quot;, http.StripPrefix(&quot;/&quot;, http.FileServer(http.Dir(&quot;static&quot;))))
4    http.ListenAndServe(&quot;:8080&quot;, nil)
5}
6
7func Index(w http.ResponseWriter, r *http.Request) {
8    fmt.Fprintln(w, &quot;Index&quot;)
9}
10

How to do this.

Currently, I'm getting this error

panic: http: multiple registrations for /

This is my directory structure

1func main() {
2    http.HandleFunc(&quot;/&quot;, Index)
3    http.Handle(&quot;/&quot;, http.StripPrefix(&quot;/&quot;, http.FileServer(http.Dir(&quot;static&quot;))))
4    http.ListenAndServe(&quot;:8080&quot;, nil)
5}
6
7func Index(w http.ResponseWriter, r *http.Request) {
8    fmt.Fprintln(w, &quot;Index&quot;)
9}
10main.go
11static\
12  | robot.txt
13  | favicon.ico
14  | sitemap.xml
15

ANSWER

Answered 2021-Dec-18 at 20:09

Delegate to the file server from the index handler:

1func main() {
2    http.HandleFunc(&quot;/&quot;, Index)
3    http.Handle(&quot;/&quot;, http.StripPrefix(&quot;/&quot;, http.FileServer(http.Dir(&quot;static&quot;))))
4    http.ListenAndServe(&quot;:8080&quot;, nil)
5}
6
7func Index(w http.ResponseWriter, r *http.Request) {
8    fmt.Fprintln(w, &quot;Index&quot;)
9}
10main.go
11static\
12  | robot.txt
13  | favicon.ico
14  | sitemap.xml
15func main() {
16    http.HandleFunc(&quot;/&quot;, Index)
17    http.ListenAndServe(&quot;:8080&quot;, nil)
18}
19
20var fserve = http.StripPrefix(&quot;/&quot;, http.FileServer(http.Dir(&quot;static&quot;))))
21
22func Index(w http.ResponseWriter, r *http.Request) {
23    if r.URL.Path != “/“ {
24        fserve.ServeHTTP(w, r)
25        return
26    }
27    fmt.Fprintln(w, &quot;Index&quot;)
28}
29

Source https://stackoverflow.com/questions/70406720

QUESTION

How do I make my fixed sidebar scroll up as the footer comes up

Asked 2021-Dec-12 at 16:20

My problem is that the sidebar shouldn't be fixed once the footer enters the viewport.

I have found dozens of questions regarding the fixed sidebar, but the answers I found here are not solving my problem.

I found something similar here but my problem is, I am not able to apply this solution as my HTML structure is different. I would also prefer it if your answers were in pure js and not jquery

1a {
2  text-decoration: none;
3  transition: all 0.3s;
4  color: black;
5  font-family: 'Montserrat', sans-serif;
6  cursor: pointer;
7}
8
9ul,
10ol {
11  list-style: none;
12  font-family: 'Montserrat', sans-serif;
13}
14
15.menu.container {
16  padding: 1vw;
17  font-family: 'Montserrat', sans-serif;
18}
19
20.menu ul li {
21  display: inline-block;
22  padding: 1vw;
23}
24
25.menu ul li a {
26  padding: 1vw;
27  font-size: 1.3vw;
28}
29
30.menu ul li a:hover {
31  border-bottom: .2em solid black;
32}
33
34.title.container {
35  width: 100%;
36  position: fixed;
37  top: 0;
38  display: flex;
39  justify-content: space-between;
40  align-items: center;
41  background-color: #fff;
42  /* border-top: 1px solid #cfab53; */
43  border-bottom: 1px solid #cfab53;
44  z-index: 2;
45  /* margin-top: 2vw; */
46  /* box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
47    -webkit-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
48    -moz-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58); */
49}
50
51.title .logo {
52  padding: 1vw;
53}
54
55.title .logo h1 {
56  font-family: 'GFS Didot', serif;
57  color: #cfab53;
58  font-size: 2.5vw;
59  cursor: pointer;
60}
61
62.title .logo h3 {
63  font-family: 'Dancing Script', cursive;
64  /* color: #a1919e; */
65  font-size: 1.3vw;
66  font-weight: 400;
67}
68
69.sidebar.container {
70  position: fixed;
71  bottom: 0;
72  left: 0;
73  top: 6.7vw;
74  width: 20%;
75  z-index: 1;
76  text-transform: uppercase;
77  /* overflow-y: scroll; */
78  padding: 1vw;
79}
80
81.sidebar .inner .categories * {
82  padding: .5vw;
83}
84
85.sidebar .inner .categories h5 {
86  font-size: 15px;
87  font-weight: 400;
88}
89
90.sidebar .inner .categories p {
91  font-size: 13px;
92  text-indent: 1vw;
93}
94
95.sidebar .inner .categories h5 a:hover,
96.sidebar .inner .categories p a:hover {
97  color: #cfab53;
98}
99
100.main.container {
101  /* right: 0;
102    bottom: 0;
103    left: 20%;
104    top: 0vw;
105    position: absolute; */
106  width: 100%;
107  padding: 1vw;
108  z-index: 0;
109  display: flex;
110  flex-direction: column;
111  align-items: flex-end;
112}
113
114.main .category {
115  padding-top: 6.7vw;
116  width: 80%;
117}
118
119.main .category h2 {
120  padding: 1vw;
121}
122
123.main .category hr {
124  border: none;
125  border-top: .1vw solid #cfab53;
126  width: 50%;
127  margin-left: 1vw;
128  margin-bottom: 1vw;
129}
130
131.main .category .products {
132  display: flex;
133  flex-wrap: wrap;
134}
135
136.main .category .products .card {
137  width: 30%;
138  margin: 1vw;
139  padding: 1vw;
140  /* border: 1px solid #cfab53; */
141  position: relative;
142  min-height: 28vw;
143}
144
145.main .category .products .card .prodimg img {
146  width: 100%;
147  position: absolute;
148  top: 0;
149  left: 0;
150  background-color: #cfab53;
151  min-height: 20vw;
152}
153
154.main .category .products .card .prodimg img.primary {
155  z-index: 1;
156}
157
158.main .category .products .card .prodimg:hover img.primary {
159  display: none;
160}
161
162.main .category .products .card .desc {
163  display: flex;
164  justify-content: space-between;
165  width: 100%;
166  position: absolute;
167  left: 0;
168  bottom: 2vw;
169}
170
171.main .category .products .card .desc h3 a:hover {
172  color: #cfab53;
173}
174
175.main .category .products .card .type {
176  display: flex;
177  width: 100%;
178  position: absolute;
179  left: 0;
180  bottom: 0;
181  align-items: center;
182}
183
184.main .category .products .card .type .border {
185  border-radius: 10000px;
186  border: 1px solid #bdbdbd;
187  padding: 2px;
188  margin-right: 5px;
189}
190
191.main .category .products .card .type .border .color {
192  border-radius: 10000px;
193  width: 13px;
194  height: 13px;
195  background-color: #cfab53;
196}
197
198.footer.container {
199  /* position: absolute;
200    bottom: 0;
201    left: 0;
202    right: 0; */
203  width: 100%;
204  border-top: 1px solid #cfab53;
205  background-color: white;
206}
207
208.footer .top {
209  display: flex;
210  padding: 1vw;
211  justify-content: space-between;
212  align-items: flex-start;
213}
214
215.footer .top .column {
216  width: 25%;
217  padding: 1vw;
218}
219
220.footer .top .column h1 {
221  font-size: 23px;
222  letter-spacing: -2px;
223  padding: .5vw;
224}
225
226.footer .top .column p {
227  letter-spacing: -1px;
228  font-size: 15px;
229}
230
231.footer .top .column a {
232  letter-spacing: -1px;
233  font-size: 15px;
234}
235
236.footer .top .column a:hover {
237  color: #cfab53;
238}
239
240.footer .logo {
241  padding: 1vw 2vw 0vw;
242}
243
244.footer .logo h1 {
245  font-family: 'GFS Didot', serif;
246  color: #cfab53;
247  font-size: 35px;
248  letter-spacing: normal;
249  cursor: pointer;
250}
251
252.footer .top .site h3 {
253  font-family: 'Dancing Script', cursive;
254  font-size: 30px;
255  font-weight: 400;
256}
257
258.footer .top .site p {
259  font-size: 15px;
260  padding: 1vw 0vw;
261  font-weight: 600;
262  letter-spacing: normal;
263}
264
265.footer .top .customer ul li {
266  padding: .3vw .5vw;
267}
268
269.footer .top .customer ul li a {
270  letter-spacing: -1px;
271  font-size: 15px;
272}
273
274.footer .top .contact p,
275.footer .top .contact a {
276  padding: .3vw .5vw;
277}
278
279.footer .top .contact .email {
280  display: flex;
281  flex-direction: column;
282}
283
284.footer .top .sign p {
285  padding: .5vw 0;
286}
287
288.footer .top .sign .input {
289  display: flex;
290  flex-wrap: nowrap;
291  align-items: center;
292  border: 1px solid #cfab53;
293  margin: 1vw 0vw;
294}
295
296.footer .top .sign .input .fa-envelope {
297  color: #cfab53;
298  padding: 0vw 0vw 0vw .5vw;
299  width: 10%;
300}
301
302.footer .top .sign .input input {
303  border: none;
304  padding: 0vw .5vw;
305  margin: 0vw 0vw 0vw 0vw;
306  width: 80%;
307}
308
309.footer .top .sign .input i.fa-chevron-right {
310  background-color: #cfab53;
311  color: white;
312  padding: 5px;
313  width: 10%;
314  text-align: center;
315  cursor: pointer;
316}
317
318.footer .top .sign .input i.fa-chevron-right:hover {
319  background-color: #bb9c4d;
320}
321
322.footer .bottom {
323  display: flex;
324  justify-content: flex-end;
325  align-items: center;
326}
327
328.footer .socials {
329  display: flex;
330  justify-content: flex-end;
331  align-items: center;
332}
333
334.footer .socials * {
335  padding: .5vw;
336  font-size: 12px;
337  letter-spacing: -1px;
338}
339
340.footer .socials a:hover {
341  color: #cfab53;
342}
343
344.footer .socials .icons i {
345  font-size: 18px;
346  font-weight: 700;
347}
348
349.footer .socials .icons i.fa-instagram:hover {
350  color: #bc2a8d;
351}
352
353.footer .socials .icons i.fa-pinterest:hover {
354  color: #bd081c;
355}
356
357.footer .socials .icons i.fa-twitter:hover {
358  color: #1DA1F2;
359}

1a {
2  text-decoration: none;
3  transition: all 0.3s;
4  color: black;
5  font-family: 'Montserrat', sans-serif;
6  cursor: pointer;
7}
8
9ul,
10ol {
11  list-style: none;
12  font-family: 'Montserrat', sans-serif;
13}
14
15.menu.container {
16  padding: 1vw;
17  font-family: 'Montserrat', sans-serif;
18}
19
20.menu ul li {
21  display: inline-block;
22  padding: 1vw;
23}
24
25.menu ul li a {
26  padding: 1vw;
27  font-size: 1.3vw;
28}
29
30.menu ul li a:hover {
31  border-bottom: .2em solid black;
32}
33
34.title.container {
35  width: 100%;
36  position: fixed;
37  top: 0;
38  display: flex;
39  justify-content: space-between;
40  align-items: center;
41  background-color: #fff;
42  /* border-top: 1px solid #cfab53; */
43  border-bottom: 1px solid #cfab53;
44  z-index: 2;
45  /* margin-top: 2vw; */
46  /* box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
47    -webkit-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
48    -moz-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58); */
49}
50
51.title .logo {
52  padding: 1vw;
53}
54
55.title .logo h1 {
56  font-family: 'GFS Didot', serif;
57  color: #cfab53;
58  font-size: 2.5vw;
59  cursor: pointer;
60}
61
62.title .logo h3 {
63  font-family: 'Dancing Script', cursive;
64  /* color: #a1919e; */
65  font-size: 1.3vw;
66  font-weight: 400;
67}
68
69.sidebar.container {
70  position: fixed;
71  bottom: 0;
72  left: 0;
73  top: 6.7vw;
74  width: 20%;
75  z-index: 1;
76  text-transform: uppercase;
77  /* overflow-y: scroll; */
78  padding: 1vw;
79}
80
81.sidebar .inner .categories * {
82  padding: .5vw;
83}
84
85.sidebar .inner .categories h5 {
86  font-size: 15px;
87  font-weight: 400;
88}
89
90.sidebar .inner .categories p {
91  font-size: 13px;
92  text-indent: 1vw;
93}
94
95.sidebar .inner .categories h5 a:hover,
96.sidebar .inner .categories p a:hover {
97  color: #cfab53;
98}
99
100.main.container {
101  /* right: 0;
102    bottom: 0;
103    left: 20%;
104    top: 0vw;
105    position: absolute; */
106  width: 100%;
107  padding: 1vw;
108  z-index: 0;
109  display: flex;
110  flex-direction: column;
111  align-items: flex-end;
112}
113
114.main .category {
115  padding-top: 6.7vw;
116  width: 80%;
117}
118
119.main .category h2 {
120  padding: 1vw;
121}
122
123.main .category hr {
124  border: none;
125  border-top: .1vw solid #cfab53;
126  width: 50%;
127  margin-left: 1vw;
128  margin-bottom: 1vw;
129}
130
131.main .category .products {
132  display: flex;
133  flex-wrap: wrap;
134}
135
136.main .category .products .card {
137  width: 30%;
138  margin: 1vw;
139  padding: 1vw;
140  /* border: 1px solid #cfab53; */
141  position: relative;
142  min-height: 28vw;
143}
144
145.main .category .products .card .prodimg img {
146  width: 100%;
147  position: absolute;
148  top: 0;
149  left: 0;
150  background-color: #cfab53;
151  min-height: 20vw;
152}
153
154.main .category .products .card .prodimg img.primary {
155  z-index: 1;
156}
157
158.main .category .products .card .prodimg:hover img.primary {
159  display: none;
160}
161
162.main .category .products .card .desc {
163  display: flex;
164  justify-content: space-between;
165  width: 100%;
166  position: absolute;
167  left: 0;
168  bottom: 2vw;
169}
170
171.main .category .products .card .desc h3 a:hover {
172  color: #cfab53;
173}
174
175.main .category .products .card .type {
176  display: flex;
177  width: 100%;
178  position: absolute;
179  left: 0;
180  bottom: 0;
181  align-items: center;
182}
183
184.main .category .products .card .type .border {
185  border-radius: 10000px;
186  border: 1px solid #bdbdbd;
187  padding: 2px;
188  margin-right: 5px;
189}
190
191.main .category .products .card .type .border .color {
192  border-radius: 10000px;
193  width: 13px;
194  height: 13px;
195  background-color: #cfab53;
196}
197
198.footer.container {
199  /* position: absolute;
200    bottom: 0;
201    left: 0;
202    right: 0; */
203  width: 100%;
204  border-top: 1px solid #cfab53;
205  background-color: white;
206}
207
208.footer .top {
209  display: flex;
210  padding: 1vw;
211  justify-content: space-between;
212  align-items: flex-start;
213}
214
215.footer .top .column {
216  width: 25%;
217  padding: 1vw;
218}
219
220.footer .top .column h1 {
221  font-size: 23px;
222  letter-spacing: -2px;
223  padding: .5vw;
224}
225
226.footer .top .column p {
227  letter-spacing: -1px;
228  font-size: 15px;
229}
230
231.footer .top .column a {
232  letter-spacing: -1px;
233  font-size: 15px;
234}
235
236.footer .top .column a:hover {
237  color: #cfab53;
238}
239
240.footer .logo {
241  padding: 1vw 2vw 0vw;
242}
243
244.footer .logo h1 {
245  font-family: 'GFS Didot', serif;
246  color: #cfab53;
247  font-size: 35px;
248  letter-spacing: normal;
249  cursor: pointer;
250}
251
252.footer .top .site h3 {
253  font-family: 'Dancing Script', cursive;
254  font-size: 30px;
255  font-weight: 400;
256}
257
258.footer .top .site p {
259  font-size: 15px;
260  padding: 1vw 0vw;
261  font-weight: 600;
262  letter-spacing: normal;
263}
264
265.footer .top .customer ul li {
266  padding: .3vw .5vw;
267}
268
269.footer .top .customer ul li a {
270  letter-spacing: -1px;
271  font-size: 15px;
272}
273
274.footer .top .contact p,
275.footer .top .contact a {
276  padding: .3vw .5vw;
277}
278
279.footer .top .contact .email {
280  display: flex;
281  flex-direction: column;
282}
283
284.footer .top .sign p {
285  padding: .5vw 0;
286}
287
288.footer .top .sign .input {
289  display: flex;
290  flex-wrap: nowrap;
291  align-items: center;
292  border: 1px solid #cfab53;
293  margin: 1vw 0vw;
294}
295
296.footer .top .sign .input .fa-envelope {
297  color: #cfab53;
298  padding: 0vw 0vw 0vw .5vw;
299  width: 10%;
300}
301
302.footer .top .sign .input input {
303  border: none;
304  padding: 0vw .5vw;
305  margin: 0vw 0vw 0vw 0vw;
306  width: 80%;
307}
308
309.footer .top .sign .input i.fa-chevron-right {
310  background-color: #cfab53;
311  color: white;
312  padding: 5px;
313  width: 10%;
314  text-align: center;
315  cursor: pointer;
316}
317
318.footer .top .sign .input i.fa-chevron-right:hover {
319  background-color: #bb9c4d;
320}
321
322.footer .bottom {
323  display: flex;
324  justify-content: flex-end;
325  align-items: center;
326}
327
328.footer .socials {
329  display: flex;
330  justify-content: flex-end;
331  align-items: center;
332}
333
334.footer .socials * {
335  padding: .5vw;
336  font-size: 12px;
337  letter-spacing: -1px;
338}
339
340.footer .socials a:hover {
341  color: #cfab53;
342}
343
344.footer .socials .icons i {
345  font-size: 18px;
346  font-weight: 700;
347}
348
349.footer .socials .icons i.fa-instagram:hover {
350  color: #bc2a8d;
351}
352
353.footer .socials .icons i.fa-pinterest:hover {
354  color: #bd081c;
355}
356
357.footer .socials .icons i.fa-twitter:hover {
358  color: #1DA1F2;
359}&lt;div class="title container" id="menu"&gt;
360  &lt;div class="logo container"&gt;
361    &lt;h1&gt;κοσμήματα&lt;/h1&gt;
362    &lt;h3&gt;kosmimata jewelry&lt;/h3&gt;
363  &lt;/div&gt;
364  &lt;div class="menu container"&gt;
365    &lt;ul&gt;
366      &lt;li&gt;&lt;a href="../pages/index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
367      &lt;li&gt;&lt;a id="shop"&gt;Shop&lt;/a&gt;&lt;/li&gt;
368      &lt;li&gt;&lt;a href="../pages/blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
369      &lt;li&gt;&lt;a id="search"&gt;&lt;i class="fas fa-search"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
370      &lt;li&gt;&lt;a id="cart"&gt;&lt;i class="fas fa-shopping-cart"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
371    &lt;/ul&gt;
372  &lt;/div&gt;
373&lt;/div&gt;
374&lt;div class="sidebar container"&gt;
375  &lt;div class="inner"&gt;
376    &lt;div class="categories"&gt;
377      &lt;h5&gt;&lt;a href="./product-display-bracelets-and-anklets.html"&gt;Bracelets + Anklets&lt;/a&gt;&lt;/h5&gt;
378      &lt;p&gt;&lt;a href="#bracelets"&gt;Bracelets&lt;/a&gt;&lt;/p&gt;
379      &lt;p&gt;&lt;a href="#chain"&gt;Chain Bracelets&lt;/a&gt;&lt;/p&gt;
380      &lt;p&gt;&lt;a href="#cuff"&gt;Cuffs And Bangles&lt;/a&gt;&lt;/p&gt;
381      &lt;p&gt;&lt;a href="#zodaic"&gt;Zodiac Bracelets&lt;/a&gt;&lt;/p&gt;
382      &lt;p&gt;&lt;a href="#mens"&gt;Men's Bracelets&lt;/a&gt;&lt;/p&gt;
383      &lt;p&gt;&lt;a href="#anklets"&gt;Anklets&lt;/a&gt;&lt;/p&gt;
384    &lt;/div&gt;
385    &lt;div class="categories"&gt;
386      &lt;h5&gt;&lt;a href="./product-display-wedding.html"&gt;Wedding&lt;/a&gt;&lt;/h5&gt;
387    &lt;/div&gt;
388    &lt;div class="categories"&gt;
389      &lt;h5&gt;&lt;a href="./product-display-mens.html"&gt;Men's&lt;/a&gt;&lt;/h5&gt;
390    &lt;/div&gt;
391  &lt;/div&gt;
392&lt;/div&gt;
393
394&lt;div class="main container"&gt;
395  &lt;div id="bracelets" class="category container"&gt;
396    &lt;h2&gt;Bracelets&lt;/h2&gt;
397    &lt;hr&gt;
398    &lt;div class="products"&gt;
399      &lt;div class="card"&gt;
400        &lt;div class="prodimg"&gt;
401          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
402          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
403        &lt;/div&gt;
404        &lt;div class="desc"&gt;
405          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
406          &lt;p&gt;$120.00&lt;/p&gt;
407        &lt;/div&gt;
408        &lt;div class="type"&gt;
409          &lt;div class="border"&gt;
410            &lt;div class="color"&gt;&lt;/div&gt;
411          &lt;/div&gt;
412          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
413        &lt;/div&gt;
414      &lt;/div&gt;
415      &lt;div class="card"&gt;
416        &lt;div class="prodimg"&gt;
417          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
418          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
419        &lt;/div&gt;
420        &lt;div class="desc"&gt;
421          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
422          &lt;p&gt;$120.00&lt;/p&gt;
423        &lt;/div&gt;
424        &lt;div class="type"&gt;
425          &lt;div class="border"&gt;
426            &lt;div class="color"&gt;&lt;/div&gt;
427          &lt;/div&gt;
428          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
429        &lt;/div&gt;
430      &lt;/div&gt;
431      &lt;div class="card"&gt;
432        &lt;div class="prodimg"&gt;
433          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
434          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
435        &lt;/div&gt;
436        &lt;div class="desc"&gt;
437          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
438          &lt;p&gt;$120.00&lt;/p&gt;
439        &lt;/div&gt;
440        &lt;div class="type"&gt;
441          &lt;div class="border"&gt;
442            &lt;div class="color"&gt;&lt;/div&gt;
443          &lt;/div&gt;
444          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
445        &lt;/div&gt;
446      &lt;/div&gt;
447      &lt;div class="card"&gt;
448        &lt;div class="prodimg"&gt;
449          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
450          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
451        &lt;/div&gt;
452        &lt;div class="desc"&gt;
453          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
454          &lt;p&gt;$120.00&lt;/p&gt;
455        &lt;/div&gt;
456        &lt;div class="type"&gt;
457          &lt;div class="border"&gt;
458            &lt;div class="color"&gt;&lt;/div&gt;
459          &lt;/div&gt;
460          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
461        &lt;/div&gt;
462      &lt;/div&gt;
463      &lt;div class="card"&gt;
464        &lt;div class="prodimg"&gt;
465          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
466          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
467        &lt;/div&gt;
468        &lt;div class="desc"&gt;
469          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
470          &lt;p&gt;$120.00&lt;/p&gt;
471        &lt;/div&gt;
472        &lt;div class="type"&gt;
473          &lt;div class="border"&gt;
474            &lt;div class="color"&gt;&lt;/div&gt;
475          &lt;/div&gt;
476          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
477        &lt;/div&gt;
478      &lt;/div&gt;
479    &lt;/div&gt;
480  &lt;/div&gt;
481  &lt;div id="chain" class="category container"&gt;
482    &lt;h2&gt;Chain Bracelets&lt;/h2&gt;
483    &lt;hr&gt;
484    &lt;div class="products"&gt;
485      &lt;div class="card"&gt;
486        &lt;div class="prodimg"&gt;
487          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
488          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
489        &lt;/div&gt;
490        &lt;div class="desc"&gt;
491          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
492          &lt;p&gt;$120.00&lt;/p&gt;
493        &lt;/div&gt;
494        &lt;div class="type"&gt;
495          &lt;div class="border"&gt;
496            &lt;div class="color"&gt;&lt;/div&gt;
497          &lt;/div&gt;
498          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
499        &lt;/div&gt;
500      &lt;/div&gt;
501      &lt;div class="card"&gt;
502        &lt;div class="prodimg"&gt;
503          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
504          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
505        &lt;/div&gt;
506        &lt;div class="desc"&gt;
507          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
508          &lt;p&gt;$120.00&lt;/p&gt;
509        &lt;/div&gt;
510        &lt;div class="type"&gt;
511          &lt;div class="border"&gt;
512            &lt;div class="color"&gt;&lt;/div&gt;
513          &lt;/div&gt;
514          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
515        &lt;/div&gt;
516      &lt;/div&gt;
517      &lt;div class="card"&gt;
518        &lt;div class="prodimg"&gt;
519          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
520          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
521        &lt;/div&gt;
522        &lt;div class="desc"&gt;
523          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
524          &lt;p&gt;$120.00&lt;/p&gt;
525        &lt;/div&gt;
526        &lt;div class="type"&gt;
527          &lt;div class="border"&gt;
528            &lt;div class="color"&gt;&lt;/div&gt;
529          &lt;/div&gt;
530          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
531        &lt;/div&gt;
532      &lt;/div&gt;
533      &lt;div class="card"&gt;
534        &lt;div class="prodimg"&gt;
535          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
536          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
537        &lt;/div&gt;
538        &lt;div class="desc"&gt;
539          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
540          &lt;p&gt;$120.00&lt;/p&gt;
541        &lt;/div&gt;
542        &lt;div class="type"&gt;
543          &lt;div class="border"&gt;
544            &lt;div class="color"&gt;&lt;/div&gt;
545          &lt;/div&gt;
546          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
547        &lt;/div&gt;
548      &lt;/div&gt;
549      &lt;div class="card"&gt;
550        &lt;div class="prodimg"&gt;
551          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
552          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
553        &lt;/div&gt;
554        &lt;div class="desc"&gt;
555          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
556          &lt;p&gt;$120.00&lt;/p&gt;
557        &lt;/div&gt;
558        &lt;div class="type"&gt;
559          &lt;div class="border"&gt;
560            &lt;div class="color"&gt;&lt;/div&gt;
561          &lt;/div&gt;
562          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
563        &lt;/div&gt;
564      &lt;/div&gt;
565    &lt;/div&gt;
566  &lt;/div&gt;
567  &lt;div id="cuff" class="category container"&gt;
568    &lt;h2&gt;Cuffs And Bangles&lt;/h2&gt;
569    &lt;hr&gt;
570    &lt;div class="products"&gt;
571      &lt;div class="card"&gt;
572        &lt;div class="prodimg"&gt;
573          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
574          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
575        &lt;/div&gt;
576        &lt;div class="desc"&gt;
577          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
578          &lt;p&gt;$120.00&lt;/p&gt;
579        &lt;/div&gt;
580        &lt;div class="type"&gt;
581          &lt;div class="border"&gt;
582            &lt;div class="color"&gt;&lt;/div&gt;
583          &lt;/div&gt;
584          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
585        &lt;/div&gt;
586      &lt;/div&gt;
587      &lt;div class="card"&gt;
588        &lt;div class="prodimg"&gt;
589          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
590          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
591        &lt;/div&gt;
592        &lt;div class="desc"&gt;
593          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
594          &lt;p&gt;$120.00&lt;/p&gt;
595        &lt;/div&gt;
596        &lt;div class="type"&gt;
597          &lt;div class="border"&gt;
598            &lt;div class="color"&gt;&lt;/div&gt;
599          &lt;/div&gt;
600          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
601        &lt;/div&gt;
602      &lt;/div&gt;
603      &lt;div class="card"&gt;
604        &lt;div class="prodimg"&gt;
605          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
606          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
607        &lt;/div&gt;
608        &lt;div class="desc"&gt;
609          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
610          &lt;p&gt;$120.00&lt;/p&gt;
611        &lt;/div&gt;
612        &lt;div class="type"&gt;
613          &lt;div class="border"&gt;
614            &lt;div class="color"&gt;&lt;/div&gt;
615          &lt;/div&gt;
616          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
617        &lt;/div&gt;
618      &lt;/div&gt;
619      &lt;div class="card"&gt;
620        &lt;div class="prodimg"&gt;
621          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
622          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
623        &lt;/div&gt;
624        &lt;div class="desc"&gt;
625          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
626          &lt;p&gt;$120.00&lt;/p&gt;
627        &lt;/div&gt;
628        &lt;div class="type"&gt;
629          &lt;div class="border"&gt;
630            &lt;div class="color"&gt;&lt;/div&gt;
631          &lt;/div&gt;
632          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
633        &lt;/div&gt;
634      &lt;/div&gt;
635      &lt;div class="card"&gt;
636        &lt;div class="prodimg"&gt;
637          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
638          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
639        &lt;/div&gt;
640        &lt;div class="desc"&gt;
641          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
642          &lt;p&gt;$120.00&lt;/p&gt;
643        &lt;/div&gt;
644        &lt;div class="type"&gt;
645          &lt;div class="border"&gt;
646            &lt;div class="color"&gt;&lt;/div&gt;
647          &lt;/div&gt;
648          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
649        &lt;/div&gt;
650      &lt;/div&gt;
651    &lt;/div&gt;
652  &lt;/div&gt;
653
654&lt;/div&gt;
655
656&lt;div id="foot" class="footer container"&gt;
657  &lt;div class="logo container"&gt;
658    &lt;h1&gt;κοσμήματα&lt;/h1&gt;
659  &lt;/div&gt;
660  &lt;div class="top"&gt;
661    &lt;div class="site column"&gt;
662      &lt;h3&gt;Kosmimata jewelry&lt;/h3&gt;
663      &lt;p&gt;Accessorise yourself with the best there is&lt;/p&gt;
664    &lt;/div&gt;
665    &lt;div class="customer column"&gt;
666      &lt;h1&gt;Customer Care&lt;/h1&gt;
667      &lt;ul&gt;
668        &lt;li&gt;&lt;a href="./faq.html#shipping"&gt;Shipping &amp; Returns&lt;/a&gt;&lt;/li&gt;
669        &lt;li&gt;&lt;a href="./order-status.html"&gt;Order Status&lt;/a&gt;&lt;/li&gt;
670        &lt;li&gt;&lt;a href="./faq.html#payment"&gt;Payment Methods&lt;/a&gt;&lt;/li&gt;
671        &lt;li&gt;&lt;a href="./ring-sizer.html"&gt;Ring Sizer&lt;/a&gt;&lt;/li&gt;
672      &lt;/ul&gt;
673    &lt;/div&gt;
674    &lt;div class="contact column"&gt;
675      &lt;div class="address"&gt;
676        &lt;h1&gt;Visit&lt;/h1&gt;
677        &lt;p&gt;1985 Bel Meadow Drive,&lt;/p&gt;
678        &lt;p&gt;Los Angeles, California&lt;/p&gt;
679        &lt;p&gt;90017&lt;/p&gt;
680      &lt;/div&gt;
681      &lt;div class="email"&gt;
682        &lt;a href="mailto:info@kosmimata.com"&gt;info@kosmimata.com&lt;/a&gt;
683        &lt;a href="tel:+1 213-829-0743"&gt;213-829-0743&lt;/a&gt;
684      &lt;/div&gt;
685    &lt;/div&gt;
686    &lt;div class="sign column"&gt;
687      &lt;p&gt;Sign up to have insider info on new arrivals, early access and more.&lt;/p&gt;
688      &lt;div class="input"&gt;
689        &lt;i class="far fa-envelope"&gt;&lt;/i&gt;
690        &lt;input type="email" placeholder="Your Email"&gt;
691        &lt;i class="fas fa-chevron-right"&gt;&lt;/i&gt;
692      &lt;/div&gt;
693    &lt;/div&gt;
694  &lt;/div&gt;
695  &lt;div class="bottom"&gt;
696    &lt;div class="socials"&gt;
697      &lt;a href="./terms&amp;conditions.html"&gt;Terms and Conditions&lt;/a&gt;
698      &lt;a href="./privacy-policy.html"&gt;Privacy Policy&lt;/a&gt;
699      &lt;a href="./sitemap.html"&gt;Site Map&lt;/a&gt;
700      &lt;p&gt;&amp;copy;Kosmimata Inc.&lt;/p&gt;
701      &lt;div class="icons"&gt;
702        &lt;a href=""&gt;&lt;i class="fab fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=""&gt;&lt;i class="fab fa-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=""&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
703      &lt;/div&gt;
704    &lt;/div&gt;
705  &lt;/div&gt;
706&lt;/div&gt;

ANSWER

Answered 2021-Dec-07 at 15:43

It looks like you are trying to have the sidebar follow the content until there's not enough space, then it locks in place. You could do this with JS, but it's far easier with CSS position:sticky;

Here's MDN's documentation

Sticky

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

1a {
2  text-decoration: none;
3  transition: all 0.3s;
4  color: black;
5  font-family: 'Montserrat', sans-serif;
6  cursor: pointer;
7}
8
9ul,
10ol {
11  list-style: none;
12  font-family: 'Montserrat', sans-serif;
13}
14
15.menu.container {
16  padding: 1vw;
17  font-family: 'Montserrat', sans-serif;
18}
19
20.menu ul li {
21  display: inline-block;
22  padding: 1vw;
23}
24
25.menu ul li a {
26  padding: 1vw;
27  font-size: 1.3vw;
28}
29
30.menu ul li a:hover {
31  border-bottom: .2em solid black;
32}
33
34.title.container {
35  width: 100%;
36  position: fixed;
37  top: 0;
38  display: flex;
39  justify-content: space-between;
40  align-items: center;
41  background-color: #fff;
42  /* border-top: 1px solid #cfab53; */
43  border-bottom: 1px solid #cfab53;
44  z-index: 2;
45  /* margin-top: 2vw; */
46  /* box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
47    -webkit-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
48    -moz-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58); */
49}
50
51.title .logo {
52  padding: 1vw;
53}
54
55.title .logo h1 {
56  font-family: 'GFS Didot', serif;
57  color: #cfab53;
58  font-size: 2.5vw;
59  cursor: pointer;
60}
61
62.title .logo h3 {
63  font-family: 'Dancing Script', cursive;
64  /* color: #a1919e; */
65  font-size: 1.3vw;
66  font-weight: 400;
67}
68
69.sidebar.container {
70  position: fixed;
71  bottom: 0;
72  left: 0;
73  top: 6.7vw;
74  width: 20%;
75  z-index: 1;
76  text-transform: uppercase;
77  /* overflow-y: scroll; */
78  padding: 1vw;
79}
80
81.sidebar .inner .categories * {
82  padding: .5vw;
83}
84
85.sidebar .inner .categories h5 {
86  font-size: 15px;
87  font-weight: 400;
88}
89
90.sidebar .inner .categories p {
91  font-size: 13px;
92  text-indent: 1vw;
93}
94
95.sidebar .inner .categories h5 a:hover,
96.sidebar .inner .categories p a:hover {
97  color: #cfab53;
98}
99
100.main.container {
101  /* right: 0;
102    bottom: 0;
103    left: 20%;
104    top: 0vw;
105    position: absolute; */
106  width: 100%;
107  padding: 1vw;
108  z-index: 0;
109  display: flex;
110  flex-direction: column;
111  align-items: flex-end;
112}
113
114.main .category {
115  padding-top: 6.7vw;
116  width: 80%;
117}
118
119.main .category h2 {
120  padding: 1vw;
121}
122
123.main .category hr {
124  border: none;
125  border-top: .1vw solid #cfab53;
126  width: 50%;
127  margin-left: 1vw;
128  margin-bottom: 1vw;
129}
130
131.main .category .products {
132  display: flex;
133  flex-wrap: wrap;
134}
135
136.main .category .products .card {
137  width: 30%;
138  margin: 1vw;
139  padding: 1vw;
140  /* border: 1px solid #cfab53; */
141  position: relative;
142  min-height: 28vw;
143}
144
145.main .category .products .card .prodimg img {
146  width: 100%;
147  position: absolute;
148  top: 0;
149  left: 0;
150  background-color: #cfab53;
151  min-height: 20vw;
152}
153
154.main .category .products .card .prodimg img.primary {
155  z-index: 1;
156}
157
158.main .category .products .card .prodimg:hover img.primary {
159  display: none;
160}
161
162.main .category .products .card .desc {
163  display: flex;
164  justify-content: space-between;
165  width: 100%;
166  position: absolute;
167  left: 0;
168  bottom: 2vw;
169}
170
171.main .category .products .card .desc h3 a:hover {
172  color: #cfab53;
173}
174
175.main .category .products .card .type {
176  display: flex;
177  width: 100%;
178  position: absolute;
179  left: 0;
180  bottom: 0;
181  align-items: center;
182}
183
184.main .category .products .card .type .border {
185  border-radius: 10000px;
186  border: 1px solid #bdbdbd;
187  padding: 2px;
188  margin-right: 5px;
189}
190
191.main .category .products .card .type .border .color {
192  border-radius: 10000px;
193  width: 13px;
194  height: 13px;
195  background-color: #cfab53;
196}
197
198.footer.container {
199  /* position: absolute;
200    bottom: 0;
201    left: 0;
202    right: 0; */
203  width: 100%;
204  border-top: 1px solid #cfab53;
205  background-color: white;
206}
207
208.footer .top {
209  display: flex;
210  padding: 1vw;
211  justify-content: space-between;
212  align-items: flex-start;
213}
214
215.footer .top .column {
216  width: 25%;
217  padding: 1vw;
218}
219
220.footer .top .column h1 {
221  font-size: 23px;
222  letter-spacing: -2px;
223  padding: .5vw;
224}
225
226.footer .top .column p {
227  letter-spacing: -1px;
228  font-size: 15px;
229}
230
231.footer .top .column a {
232  letter-spacing: -1px;
233  font-size: 15px;
234}
235
236.footer .top .column a:hover {
237  color: #cfab53;
238}
239
240.footer .logo {
241  padding: 1vw 2vw 0vw;
242}
243
244.footer .logo h1 {
245  font-family: 'GFS Didot', serif;
246  color: #cfab53;
247  font-size: 35px;
248  letter-spacing: normal;
249  cursor: pointer;
250}
251
252.footer .top .site h3 {
253  font-family: 'Dancing Script', cursive;
254  font-size: 30px;
255  font-weight: 400;
256}
257
258.footer .top .site p {
259  font-size: 15px;
260  padding: 1vw 0vw;
261  font-weight: 600;
262  letter-spacing: normal;
263}
264
265.footer .top .customer ul li {
266  padding: .3vw .5vw;
267}
268
269.footer .top .customer ul li a {
270  letter-spacing: -1px;
271  font-size: 15px;
272}
273
274.footer .top .contact p,
275.footer .top .contact a {
276  padding: .3vw .5vw;
277}
278
279.footer .top .contact .email {
280  display: flex;
281  flex-direction: column;
282}
283
284.footer .top .sign p {
285  padding: .5vw 0;
286}
287
288.footer .top .sign .input {
289  display: flex;
290  flex-wrap: nowrap;
291  align-items: center;
292  border: 1px solid #cfab53;
293  margin: 1vw 0vw;
294}
295
296.footer .top .sign .input .fa-envelope {
297  color: #cfab53;
298  padding: 0vw 0vw 0vw .5vw;
299  width: 10%;
300}
301
302.footer .top .sign .input input {
303  border: none;
304  padding: 0vw .5vw;
305  margin: 0vw 0vw 0vw 0vw;
306  width: 80%;
307}
308
309.footer .top .sign .input i.fa-chevron-right {
310  background-color: #cfab53;
311  color: white;
312  padding: 5px;
313  width: 10%;
314  text-align: center;
315  cursor: pointer;
316}
317
318.footer .top .sign .input i.fa-chevron-right:hover {
319  background-color: #bb9c4d;
320}
321
322.footer .bottom {
323  display: flex;
324  justify-content: flex-end;
325  align-items: center;
326}
327
328.footer .socials {
329  display: flex;
330  justify-content: flex-end;
331  align-items: center;
332}
333
334.footer .socials * {
335  padding: .5vw;
336  font-size: 12px;
337  letter-spacing: -1px;
338}
339
340.footer .socials a:hover {
341  color: #cfab53;
342}
343
344.footer .socials .icons i {
345  font-size: 18px;
346  font-weight: 700;
347}
348
349.footer .socials .icons i.fa-instagram:hover {
350  color: #bc2a8d;
351}
352
353.footer .socials .icons i.fa-pinterest:hover {
354  color: #bd081c;
355}
356
357.footer .socials .icons i.fa-twitter:hover {
358  color: #1DA1F2;
359}&lt;div class="title container" id="menu"&gt;
360  &lt;div class="logo container"&gt;
361    &lt;h1&gt;κοσμήματα&lt;/h1&gt;
362    &lt;h3&gt;kosmimata jewelry&lt;/h3&gt;
363  &lt;/div&gt;
364  &lt;div class="menu container"&gt;
365    &lt;ul&gt;
366      &lt;li&gt;&lt;a href="../pages/index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
367      &lt;li&gt;&lt;a id="shop"&gt;Shop&lt;/a&gt;&lt;/li&gt;
368      &lt;li&gt;&lt;a href="../pages/blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
369      &lt;li&gt;&lt;a id="search"&gt;&lt;i class="fas fa-search"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
370      &lt;li&gt;&lt;a id="cart"&gt;&lt;i class="fas fa-shopping-cart"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
371    &lt;/ul&gt;
372  &lt;/div&gt;
373&lt;/div&gt;
374&lt;div class="sidebar container"&gt;
375  &lt;div class="inner"&gt;
376    &lt;div class="categories"&gt;
377      &lt;h5&gt;&lt;a href="./product-display-bracelets-and-anklets.html"&gt;Bracelets + Anklets&lt;/a&gt;&lt;/h5&gt;
378      &lt;p&gt;&lt;a href="#bracelets"&gt;Bracelets&lt;/a&gt;&lt;/p&gt;
379      &lt;p&gt;&lt;a href="#chain"&gt;Chain Bracelets&lt;/a&gt;&lt;/p&gt;
380      &lt;p&gt;&lt;a href="#cuff"&gt;Cuffs And Bangles&lt;/a&gt;&lt;/p&gt;
381      &lt;p&gt;&lt;a href="#zodaic"&gt;Zodiac Bracelets&lt;/a&gt;&lt;/p&gt;
382      &lt;p&gt;&lt;a href="#mens"&gt;Men's Bracelets&lt;/a&gt;&lt;/p&gt;
383      &lt;p&gt;&lt;a href="#anklets"&gt;Anklets&lt;/a&gt;&lt;/p&gt;
384    &lt;/div&gt;
385    &lt;div class="categories"&gt;
386      &lt;h5&gt;&lt;a href="./product-display-wedding.html"&gt;Wedding&lt;/a&gt;&lt;/h5&gt;
387    &lt;/div&gt;
388    &lt;div class="categories"&gt;
389      &lt;h5&gt;&lt;a href="./product-display-mens.html"&gt;Men's&lt;/a&gt;&lt;/h5&gt;
390    &lt;/div&gt;
391  &lt;/div&gt;
392&lt;/div&gt;
393
394&lt;div class="main container"&gt;
395  &lt;div id="bracelets" class="category container"&gt;
396    &lt;h2&gt;Bracelets&lt;/h2&gt;
397    &lt;hr&gt;
398    &lt;div class="products"&gt;
399      &lt;div class="card"&gt;
400        &lt;div class="prodimg"&gt;
401          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
402          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
403        &lt;/div&gt;
404        &lt;div class="desc"&gt;
405          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
406          &lt;p&gt;$120.00&lt;/p&gt;
407        &lt;/div&gt;
408        &lt;div class="type"&gt;
409          &lt;div class="border"&gt;
410            &lt;div class="color"&gt;&lt;/div&gt;
411          &lt;/div&gt;
412          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
413        &lt;/div&gt;
414      &lt;/div&gt;
415      &lt;div class="card"&gt;
416        &lt;div class="prodimg"&gt;
417          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
418          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
419        &lt;/div&gt;
420        &lt;div class="desc"&gt;
421          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
422          &lt;p&gt;$120.00&lt;/p&gt;
423        &lt;/div&gt;
424        &lt;div class="type"&gt;
425          &lt;div class="border"&gt;
426            &lt;div class="color"&gt;&lt;/div&gt;
427          &lt;/div&gt;
428          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
429        &lt;/div&gt;
430      &lt;/div&gt;
431      &lt;div class="card"&gt;
432        &lt;div class="prodimg"&gt;
433          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
434          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
435        &lt;/div&gt;
436        &lt;div class="desc"&gt;
437          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
438          &lt;p&gt;$120.00&lt;/p&gt;
439        &lt;/div&gt;
440        &lt;div class="type"&gt;
441          &lt;div class="border"&gt;
442            &lt;div class="color"&gt;&lt;/div&gt;
443          &lt;/div&gt;
444          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
445        &lt;/div&gt;
446      &lt;/div&gt;
447      &lt;div class="card"&gt;
448        &lt;div class="prodimg"&gt;
449          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
450          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
451        &lt;/div&gt;
452        &lt;div class="desc"&gt;
453          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
454          &lt;p&gt;$120.00&lt;/p&gt;
455        &lt;/div&gt;
456        &lt;div class="type"&gt;
457          &lt;div class="border"&gt;
458            &lt;div class="color"&gt;&lt;/div&gt;
459          &lt;/div&gt;
460          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
461        &lt;/div&gt;
462      &lt;/div&gt;
463      &lt;div class="card"&gt;
464        &lt;div class="prodimg"&gt;
465          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
466          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
467        &lt;/div&gt;
468        &lt;div class="desc"&gt;
469          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
470          &lt;p&gt;$120.00&lt;/p&gt;
471        &lt;/div&gt;
472        &lt;div class="type"&gt;
473          &lt;div class="border"&gt;
474            &lt;div class="color"&gt;&lt;/div&gt;
475          &lt;/div&gt;
476          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
477        &lt;/div&gt;
478      &lt;/div&gt;
479    &lt;/div&gt;
480  &lt;/div&gt;
481  &lt;div id="chain" class="category container"&gt;
482    &lt;h2&gt;Chain Bracelets&lt;/h2&gt;
483    &lt;hr&gt;
484    &lt;div class="products"&gt;
485      &lt;div class="card"&gt;
486        &lt;div class="prodimg"&gt;
487          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
488          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
489        &lt;/div&gt;
490        &lt;div class="desc"&gt;
491          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
492          &lt;p&gt;$120.00&lt;/p&gt;
493        &lt;/div&gt;
494        &lt;div class="type"&gt;
495          &lt;div class="border"&gt;
496            &lt;div class="color"&gt;&lt;/div&gt;
497          &lt;/div&gt;
498          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
499        &lt;/div&gt;
500      &lt;/div&gt;
501      &lt;div class="card"&gt;
502        &lt;div class="prodimg"&gt;
503          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
504          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
505        &lt;/div&gt;
506        &lt;div class="desc"&gt;
507          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
508          &lt;p&gt;$120.00&lt;/p&gt;
509        &lt;/div&gt;
510        &lt;div class="type"&gt;
511          &lt;div class="border"&gt;
512            &lt;div class="color"&gt;&lt;/div&gt;
513          &lt;/div&gt;
514          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
515        &lt;/div&gt;
516      &lt;/div&gt;
517      &lt;div class="card"&gt;
518        &lt;div class="prodimg"&gt;
519          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
520          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
521        &lt;/div&gt;
522        &lt;div class="desc"&gt;
523          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
524          &lt;p&gt;$120.00&lt;/p&gt;
525        &lt;/div&gt;
526        &lt;div class="type"&gt;
527          &lt;div class="border"&gt;
528            &lt;div class="color"&gt;&lt;/div&gt;
529          &lt;/div&gt;
530          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
531        &lt;/div&gt;
532      &lt;/div&gt;
533      &lt;div class="card"&gt;
534        &lt;div class="prodimg"&gt;
535          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
536          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
537        &lt;/div&gt;
538        &lt;div class="desc"&gt;
539          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
540          &lt;p&gt;$120.00&lt;/p&gt;
541        &lt;/div&gt;
542        &lt;div class="type"&gt;
543          &lt;div class="border"&gt;
544            &lt;div class="color"&gt;&lt;/div&gt;
545          &lt;/div&gt;
546          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
547        &lt;/div&gt;
548      &lt;/div&gt;
549      &lt;div class="card"&gt;
550        &lt;div class="prodimg"&gt;
551          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
552          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
553        &lt;/div&gt;
554        &lt;div class="desc"&gt;
555          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
556          &lt;p&gt;$120.00&lt;/p&gt;
557        &lt;/div&gt;
558        &lt;div class="type"&gt;
559          &lt;div class="border"&gt;
560            &lt;div class="color"&gt;&lt;/div&gt;
561          &lt;/div&gt;
562          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
563        &lt;/div&gt;
564      &lt;/div&gt;
565    &lt;/div&gt;
566  &lt;/div&gt;
567  &lt;div id="cuff" class="category container"&gt;
568    &lt;h2&gt;Cuffs And Bangles&lt;/h2&gt;
569    &lt;hr&gt;
570    &lt;div class="products"&gt;
571      &lt;div class="card"&gt;
572        &lt;div class="prodimg"&gt;
573          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
574          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
575        &lt;/div&gt;
576        &lt;div class="desc"&gt;
577          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
578          &lt;p&gt;$120.00&lt;/p&gt;
579        &lt;/div&gt;
580        &lt;div class="type"&gt;
581          &lt;div class="border"&gt;
582            &lt;div class="color"&gt;&lt;/div&gt;
583          &lt;/div&gt;
584          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
585        &lt;/div&gt;
586      &lt;/div&gt;
587      &lt;div class="card"&gt;
588        &lt;div class="prodimg"&gt;
589          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
590          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
591        &lt;/div&gt;
592        &lt;div class="desc"&gt;
593          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
594          &lt;p&gt;$120.00&lt;/p&gt;
595        &lt;/div&gt;
596        &lt;div class="type"&gt;
597          &lt;div class="border"&gt;
598            &lt;div class="color"&gt;&lt;/div&gt;
599          &lt;/div&gt;
600          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
601        &lt;/div&gt;
602      &lt;/div&gt;
603      &lt;div class="card"&gt;
604        &lt;div class="prodimg"&gt;
605          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
606          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
607        &lt;/div&gt;
608        &lt;div class="desc"&gt;
609          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
610          &lt;p&gt;$120.00&lt;/p&gt;
611        &lt;/div&gt;
612        &lt;div class="type"&gt;
613          &lt;div class="border"&gt;
614            &lt;div class="color"&gt;&lt;/div&gt;
615          &lt;/div&gt;
616          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
617        &lt;/div&gt;
618      &lt;/div&gt;
619      &lt;div class="card"&gt;
620        &lt;div class="prodimg"&gt;
621          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
622          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
623        &lt;/div&gt;
624        &lt;div class="desc"&gt;
625          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
626          &lt;p&gt;$120.00&lt;/p&gt;
627        &lt;/div&gt;
628        &lt;div class="type"&gt;
629          &lt;div class="border"&gt;
630            &lt;div class="color"&gt;&lt;/div&gt;
631          &lt;/div&gt;
632          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
633        &lt;/div&gt;
634      &lt;/div&gt;
635      &lt;div class="card"&gt;
636        &lt;div class="prodimg"&gt;
637          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
638          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
639        &lt;/div&gt;
640        &lt;div class="desc"&gt;
641          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
642          &lt;p&gt;$120.00&lt;/p&gt;
643        &lt;/div&gt;
644        &lt;div class="type"&gt;
645          &lt;div class="border"&gt;
646            &lt;div class="color"&gt;&lt;/div&gt;
647          &lt;/div&gt;
648          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
649        &lt;/div&gt;
650      &lt;/div&gt;
651    &lt;/div&gt;
652  &lt;/div&gt;
653
654&lt;/div&gt;
655
656&lt;div id="foot" class="footer container"&gt;
657  &lt;div class="logo container"&gt;
658    &lt;h1&gt;κοσμήματα&lt;/h1&gt;
659  &lt;/div&gt;
660  &lt;div class="top"&gt;
661    &lt;div class="site column"&gt;
662      &lt;h3&gt;Kosmimata jewelry&lt;/h3&gt;
663      &lt;p&gt;Accessorise yourself with the best there is&lt;/p&gt;
664    &lt;/div&gt;
665    &lt;div class="customer column"&gt;
666      &lt;h1&gt;Customer Care&lt;/h1&gt;
667      &lt;ul&gt;
668        &lt;li&gt;&lt;a href="./faq.html#shipping"&gt;Shipping &amp; Returns&lt;/a&gt;&lt;/li&gt;
669        &lt;li&gt;&lt;a href="./order-status.html"&gt;Order Status&lt;/a&gt;&lt;/li&gt;
670        &lt;li&gt;&lt;a href="./faq.html#payment"&gt;Payment Methods&lt;/a&gt;&lt;/li&gt;
671        &lt;li&gt;&lt;a href="./ring-sizer.html"&gt;Ring Sizer&lt;/a&gt;&lt;/li&gt;
672      &lt;/ul&gt;
673    &lt;/div&gt;
674    &lt;div class="contact column"&gt;
675      &lt;div class="address"&gt;
676        &lt;h1&gt;Visit&lt;/h1&gt;
677        &lt;p&gt;1985 Bel Meadow Drive,&lt;/p&gt;
678        &lt;p&gt;Los Angeles, California&lt;/p&gt;
679        &lt;p&gt;90017&lt;/p&gt;
680      &lt;/div&gt;
681      &lt;div class="email"&gt;
682        &lt;a href="mailto:info@kosmimata.com"&gt;info@kosmimata.com&lt;/a&gt;
683        &lt;a href="tel:+1 213-829-0743"&gt;213-829-0743&lt;/a&gt;
684      &lt;/div&gt;
685    &lt;/div&gt;
686    &lt;div class="sign column"&gt;
687      &lt;p&gt;Sign up to have insider info on new arrivals, early access and more.&lt;/p&gt;
688      &lt;div class="input"&gt;
689        &lt;i class="far fa-envelope"&gt;&lt;/i&gt;
690        &lt;input type="email" placeholder="Your Email"&gt;
691        &lt;i class="fas fa-chevron-right"&gt;&lt;/i&gt;
692      &lt;/div&gt;
693    &lt;/div&gt;
694  &lt;/div&gt;
695  &lt;div class="bottom"&gt;
696    &lt;div class="socials"&gt;
697      &lt;a href="./terms&amp;conditions.html"&gt;Terms and Conditions&lt;/a&gt;
698      &lt;a href="./privacy-policy.html"&gt;Privacy Policy&lt;/a&gt;
699      &lt;a href="./sitemap.html"&gt;Site Map&lt;/a&gt;
700      &lt;p&gt;&amp;copy;Kosmimata Inc.&lt;/p&gt;
701      &lt;div class="icons"&gt;
702        &lt;a href=""&gt;&lt;i class="fab fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=""&gt;&lt;i class="fab fa-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=""&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
703      &lt;/div&gt;
704    &lt;/div&gt;
705  &lt;/div&gt;
706&lt;/div&gt;position: -webkit-sticky;
707position: sticky;
708top: 20px;
709

You will need to tweak the HTML so that the sidebar and main content are in the same container for this to work. There are also a few CSS changes that I made as well.

Try this:

1a {
2  text-decoration: none;
3  transition: all 0.3s;
4  color: black;
5  font-family: 'Montserrat', sans-serif;
6  cursor: pointer;
7}
8
9ul,
10ol {
11  list-style: none;
12  font-family: 'Montserrat', sans-serif;
13}
14
15.menu.container {
16  padding: 1vw;
17  font-family: 'Montserrat', sans-serif;
18}
19
20.menu ul li {
21  display: inline-block;
22  padding: 1vw;
23}
24
25.menu ul li a {
26  padding: 1vw;
27  font-size: 1.3vw;
28}
29
30.menu ul li a:hover {
31  border-bottom: .2em solid black;
32}
33
34.title.container {
35  width: 100%;
36  position: fixed;
37  top: 0;
38  display: flex;
39  justify-content: space-between;
40  align-items: center;
41  background-color: #fff;
42  /* border-top: 1px solid #cfab53; */
43  border-bottom: 1px solid #cfab53;
44  z-index: 2;
45  /* margin-top: 2vw; */
46  /* box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
47    -webkit-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
48    -moz-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58); */
49}
50
51.title .logo {
52  padding: 1vw;
53}
54
55.title .logo h1 {
56  font-family: 'GFS Didot', serif;
57  color: #cfab53;
58  font-size: 2.5vw;
59  cursor: pointer;
60}
61
62.title .logo h3 {
63  font-family: 'Dancing Script', cursive;
64  /* color: #a1919e; */
65  font-size: 1.3vw;
66  font-weight: 400;
67}
68
69.sidebar.container {
70  position: fixed;
71  bottom: 0;
72  left: 0;
73  top: 6.7vw;
74  width: 20%;
75  z-index: 1;
76  text-transform: uppercase;
77  /* overflow-y: scroll; */
78  padding: 1vw;
79}
80
81.sidebar .inner .categories * {
82  padding: .5vw;
83}
84
85.sidebar .inner .categories h5 {
86  font-size: 15px;
87  font-weight: 400;
88}
89
90.sidebar .inner .categories p {
91  font-size: 13px;
92  text-indent: 1vw;
93}
94
95.sidebar .inner .categories h5 a:hover,
96.sidebar .inner .categories p a:hover {
97  color: #cfab53;
98}
99
100.main.container {
101  /* right: 0;
102    bottom: 0;
103    left: 20%;
104    top: 0vw;
105    position: absolute; */
106  width: 100%;
107  padding: 1vw;
108  z-index: 0;
109  display: flex;
110  flex-direction: column;
111  align-items: flex-end;
112}
113
114.main .category {
115  padding-top: 6.7vw;
116  width: 80%;
117}
118
119.main .category h2 {
120  padding: 1vw;
121}
122
123.main .category hr {
124  border: none;
125  border-top: .1vw solid #cfab53;
126  width: 50%;
127  margin-left: 1vw;
128  margin-bottom: 1vw;
129}
130
131.main .category .products {
132  display: flex;
133  flex-wrap: wrap;
134}
135
136.main .category .products .card {
137  width: 30%;
138  margin: 1vw;
139  padding: 1vw;
140  /* border: 1px solid #cfab53; */
141  position: relative;
142  min-height: 28vw;
143}
144
145.main .category .products .card .prodimg img {
146  width: 100%;
147  position: absolute;
148  top: 0;
149  left: 0;
150  background-color: #cfab53;
151  min-height: 20vw;
152}
153
154.main .category .products .card .prodimg img.primary {
155  z-index: 1;
156}
157
158.main .category .products .card .prodimg:hover img.primary {
159  display: none;
160}
161
162.main .category .products .card .desc {
163  display: flex;
164  justify-content: space-between;
165  width: 100%;
166  position: absolute;
167  left: 0;
168  bottom: 2vw;
169}
170
171.main .category .products .card .desc h3 a:hover {
172  color: #cfab53;
173}
174
175.main .category .products .card .type {
176  display: flex;
177  width: 100%;
178  position: absolute;
179  left: 0;
180  bottom: 0;
181  align-items: center;
182}
183
184.main .category .products .card .type .border {
185  border-radius: 10000px;
186  border: 1px solid #bdbdbd;
187  padding: 2px;
188  margin-right: 5px;
189}
190
191.main .category .products .card .type .border .color {
192  border-radius: 10000px;
193  width: 13px;
194  height: 13px;
195  background-color: #cfab53;
196}
197
198.footer.container {
199  /* position: absolute;
200    bottom: 0;
201    left: 0;
202    right: 0; */
203  width: 100%;
204  border-top: 1px solid #cfab53;
205  background-color: white;
206}
207
208.footer .top {
209  display: flex;
210  padding: 1vw;
211  justify-content: space-between;
212  align-items: flex-start;
213}
214
215.footer .top .column {
216  width: 25%;
217  padding: 1vw;
218}
219
220.footer .top .column h1 {
221  font-size: 23px;
222  letter-spacing: -2px;
223  padding: .5vw;
224}
225
226.footer .top .column p {
227  letter-spacing: -1px;
228  font-size: 15px;
229}
230
231.footer .top .column a {
232  letter-spacing: -1px;
233  font-size: 15px;
234}
235
236.footer .top .column a:hover {
237  color: #cfab53;
238}
239
240.footer .logo {
241  padding: 1vw 2vw 0vw;
242}
243
244.footer .logo h1 {
245  font-family: 'GFS Didot', serif;
246  color: #cfab53;
247  font-size: 35px;
248  letter-spacing: normal;
249  cursor: pointer;
250}
251
252.footer .top .site h3 {
253  font-family: 'Dancing Script', cursive;
254  font-size: 30px;
255  font-weight: 400;
256}
257
258.footer .top .site p {
259  font-size: 15px;
260  padding: 1vw 0vw;
261  font-weight: 600;
262  letter-spacing: normal;
263}
264
265.footer .top .customer ul li {
266  padding: .3vw .5vw;
267}
268
269.footer .top .customer ul li a {
270  letter-spacing: -1px;
271  font-size: 15px;
272}
273
274.footer .top .contact p,
275.footer .top .contact a {
276  padding: .3vw .5vw;
277}
278
279.footer .top .contact .email {
280  display: flex;
281  flex-direction: column;
282}
283
284.footer .top .sign p {
285  padding: .5vw 0;
286}
287
288.footer .top .sign .input {
289  display: flex;
290  flex-wrap: nowrap;
291  align-items: center;
292  border: 1px solid #cfab53;
293  margin: 1vw 0vw;
294}
295
296.footer .top .sign .input .fa-envelope {
297  color: #cfab53;
298  padding: 0vw 0vw 0vw .5vw;
299  width: 10%;
300}
301
302.footer .top .sign .input input {
303  border: none;
304  padding: 0vw .5vw;
305  margin: 0vw 0vw 0vw 0vw;
306  width: 80%;
307}
308
309.footer .top .sign .input i.fa-chevron-right {
310  background-color: #cfab53;
311  color: white;
312  padding: 5px;
313  width: 10%;
314  text-align: center;
315  cursor: pointer;
316}
317
318.footer .top .sign .input i.fa-chevron-right:hover {
319  background-color: #bb9c4d;
320}
321
322.footer .bottom {
323  display: flex;
324  justify-content: flex-end;
325  align-items: center;
326}
327
328.footer .socials {
329  display: flex;
330  justify-content: flex-end;
331  align-items: center;
332}
333
334.footer .socials * {
335  padding: .5vw;
336  font-size: 12px;
337  letter-spacing: -1px;
338}
339
340.footer .socials a:hover {
341  color: #cfab53;
342}
343
344.footer .socials .icons i {
345  font-size: 18px;
346  font-weight: 700;
347}
348
349.footer .socials .icons i.fa-instagram:hover {
350  color: #bc2a8d;
351}
352
353.footer .socials .icons i.fa-pinterest:hover {
354  color: #bd081c;
355}
356
357.footer .socials .icons i.fa-twitter:hover {
358  color: #1DA1F2;
359}&lt;div class="title container" id="menu"&gt;
360  &lt;div class="logo container"&gt;
361    &lt;h1&gt;κοσμήματα&lt;/h1&gt;
362    &lt;h3&gt;kosmimata jewelry&lt;/h3&gt;
363  &lt;/div&gt;
364  &lt;div class="menu container"&gt;
365    &lt;ul&gt;
366      &lt;li&gt;&lt;a href="../pages/index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
367      &lt;li&gt;&lt;a id="shop"&gt;Shop&lt;/a&gt;&lt;/li&gt;
368      &lt;li&gt;&lt;a href="../pages/blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
369      &lt;li&gt;&lt;a id="search"&gt;&lt;i class="fas fa-search"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
370      &lt;li&gt;&lt;a id="cart"&gt;&lt;i class="fas fa-shopping-cart"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
371    &lt;/ul&gt;
372  &lt;/div&gt;
373&lt;/div&gt;
374&lt;div class="sidebar container"&gt;
375  &lt;div class="inner"&gt;
376    &lt;div class="categories"&gt;
377      &lt;h5&gt;&lt;a href="./product-display-bracelets-and-anklets.html"&gt;Bracelets + Anklets&lt;/a&gt;&lt;/h5&gt;
378      &lt;p&gt;&lt;a href="#bracelets"&gt;Bracelets&lt;/a&gt;&lt;/p&gt;
379      &lt;p&gt;&lt;a href="#chain"&gt;Chain Bracelets&lt;/a&gt;&lt;/p&gt;
380      &lt;p&gt;&lt;a href="#cuff"&gt;Cuffs And Bangles&lt;/a&gt;&lt;/p&gt;
381      &lt;p&gt;&lt;a href="#zodaic"&gt;Zodiac Bracelets&lt;/a&gt;&lt;/p&gt;
382      &lt;p&gt;&lt;a href="#mens"&gt;Men's Bracelets&lt;/a&gt;&lt;/p&gt;
383      &lt;p&gt;&lt;a href="#anklets"&gt;Anklets&lt;/a&gt;&lt;/p&gt;
384    &lt;/div&gt;
385    &lt;div class="categories"&gt;
386      &lt;h5&gt;&lt;a href="./product-display-wedding.html"&gt;Wedding&lt;/a&gt;&lt;/h5&gt;
387    &lt;/div&gt;
388    &lt;div class="categories"&gt;
389      &lt;h5&gt;&lt;a href="./product-display-mens.html"&gt;Men's&lt;/a&gt;&lt;/h5&gt;
390    &lt;/div&gt;
391  &lt;/div&gt;
392&lt;/div&gt;
393
394&lt;div class="main container"&gt;
395  &lt;div id="bracelets" class="category container"&gt;
396    &lt;h2&gt;Bracelets&lt;/h2&gt;
397    &lt;hr&gt;
398    &lt;div class="products"&gt;
399      &lt;div class="card"&gt;
400        &lt;div class="prodimg"&gt;
401          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
402          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
403        &lt;/div&gt;
404        &lt;div class="desc"&gt;
405          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
406          &lt;p&gt;$120.00&lt;/p&gt;
407        &lt;/div&gt;
408        &lt;div class="type"&gt;
409          &lt;div class="border"&gt;
410            &lt;div class="color"&gt;&lt;/div&gt;
411          &lt;/div&gt;
412          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
413        &lt;/div&gt;
414      &lt;/div&gt;
415      &lt;div class="card"&gt;
416        &lt;div class="prodimg"&gt;
417          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
418          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
419        &lt;/div&gt;
420        &lt;div class="desc"&gt;
421          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
422          &lt;p&gt;$120.00&lt;/p&gt;
423        &lt;/div&gt;
424        &lt;div class="type"&gt;
425          &lt;div class="border"&gt;
426            &lt;div class="color"&gt;&lt;/div&gt;
427          &lt;/div&gt;
428          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
429        &lt;/div&gt;
430      &lt;/div&gt;
431      &lt;div class="card"&gt;
432        &lt;div class="prodimg"&gt;
433          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
434          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
435        &lt;/div&gt;
436        &lt;div class="desc"&gt;
437          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
438          &lt;p&gt;$120.00&lt;/p&gt;
439        &lt;/div&gt;
440        &lt;div class="type"&gt;
441          &lt;div class="border"&gt;
442            &lt;div class="color"&gt;&lt;/div&gt;
443          &lt;/div&gt;
444          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
445        &lt;/div&gt;
446      &lt;/div&gt;
447      &lt;div class="card"&gt;
448        &lt;div class="prodimg"&gt;
449          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
450          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
451        &lt;/div&gt;
452        &lt;div class="desc"&gt;
453          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
454          &lt;p&gt;$120.00&lt;/p&gt;
455        &lt;/div&gt;
456        &lt;div class="type"&gt;
457          &lt;div class="border"&gt;
458            &lt;div class="color"&gt;&lt;/div&gt;
459          &lt;/div&gt;
460          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
461        &lt;/div&gt;
462      &lt;/div&gt;
463      &lt;div class="card"&gt;
464        &lt;div class="prodimg"&gt;
465          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
466          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
467        &lt;/div&gt;
468        &lt;div class="desc"&gt;
469          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
470          &lt;p&gt;$120.00&lt;/p&gt;
471        &lt;/div&gt;
472        &lt;div class="type"&gt;
473          &lt;div class="border"&gt;
474            &lt;div class="color"&gt;&lt;/div&gt;
475          &lt;/div&gt;
476          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
477        &lt;/div&gt;
478      &lt;/div&gt;
479    &lt;/div&gt;
480  &lt;/div&gt;
481  &lt;div id="chain" class="category container"&gt;
482    &lt;h2&gt;Chain Bracelets&lt;/h2&gt;
483    &lt;hr&gt;
484    &lt;div class="products"&gt;
485      &lt;div class="card"&gt;
486        &lt;div class="prodimg"&gt;
487          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
488          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
489        &lt;/div&gt;
490        &lt;div class="desc"&gt;
491          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
492          &lt;p&gt;$120.00&lt;/p&gt;
493        &lt;/div&gt;
494        &lt;div class="type"&gt;
495          &lt;div class="border"&gt;
496            &lt;div class="color"&gt;&lt;/div&gt;
497          &lt;/div&gt;
498          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
499        &lt;/div&gt;
500      &lt;/div&gt;
501      &lt;div class="card"&gt;
502        &lt;div class="prodimg"&gt;
503          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
504          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
505        &lt;/div&gt;
506        &lt;div class="desc"&gt;
507          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
508          &lt;p&gt;$120.00&lt;/p&gt;
509        &lt;/div&gt;
510        &lt;div class="type"&gt;
511          &lt;div class="border"&gt;
512            &lt;div class="color"&gt;&lt;/div&gt;
513          &lt;/div&gt;
514          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
515        &lt;/div&gt;
516      &lt;/div&gt;
517      &lt;div class="card"&gt;
518        &lt;div class="prodimg"&gt;
519          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
520          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
521        &lt;/div&gt;
522        &lt;div class="desc"&gt;
523          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
524          &lt;p&gt;$120.00&lt;/p&gt;
525        &lt;/div&gt;
526        &lt;div class="type"&gt;
527          &lt;div class="border"&gt;
528            &lt;div class="color"&gt;&lt;/div&gt;
529          &lt;/div&gt;
530          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
531        &lt;/div&gt;
532      &lt;/div&gt;
533      &lt;div class="card"&gt;
534        &lt;div class="prodimg"&gt;
535          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
536          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
537        &lt;/div&gt;
538        &lt;div class="desc"&gt;
539          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
540          &lt;p&gt;$120.00&lt;/p&gt;
541        &lt;/div&gt;
542        &lt;div class="type"&gt;
543          &lt;div class="border"&gt;
544            &lt;div class="color"&gt;&lt;/div&gt;
545          &lt;/div&gt;
546          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
547        &lt;/div&gt;
548      &lt;/div&gt;
549      &lt;div class="card"&gt;
550        &lt;div class="prodimg"&gt;
551          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
552          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
553        &lt;/div&gt;
554        &lt;div class="desc"&gt;
555          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
556          &lt;p&gt;$120.00&lt;/p&gt;
557        &lt;/div&gt;
558        &lt;div class="type"&gt;
559          &lt;div class="border"&gt;
560            &lt;div class="color"&gt;&lt;/div&gt;
561          &lt;/div&gt;
562          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
563        &lt;/div&gt;
564      &lt;/div&gt;
565    &lt;/div&gt;
566  &lt;/div&gt;
567  &lt;div id="cuff" class="category container"&gt;
568    &lt;h2&gt;Cuffs And Bangles&lt;/h2&gt;
569    &lt;hr&gt;
570    &lt;div class="products"&gt;
571      &lt;div class="card"&gt;
572        &lt;div class="prodimg"&gt;
573          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
574          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
575        &lt;/div&gt;
576        &lt;div class="desc"&gt;
577          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
578          &lt;p&gt;$120.00&lt;/p&gt;
579        &lt;/div&gt;
580        &lt;div class="type"&gt;
581          &lt;div class="border"&gt;
582            &lt;div class="color"&gt;&lt;/div&gt;
583          &lt;/div&gt;
584          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
585        &lt;/div&gt;
586      &lt;/div&gt;
587      &lt;div class="card"&gt;
588        &lt;div class="prodimg"&gt;
589          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
590          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
591        &lt;/div&gt;
592        &lt;div class="desc"&gt;
593          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
594          &lt;p&gt;$120.00&lt;/p&gt;
595        &lt;/div&gt;
596        &lt;div class="type"&gt;
597          &lt;div class="border"&gt;
598            &lt;div class="color"&gt;&lt;/div&gt;
599          &lt;/div&gt;
600          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
601        &lt;/div&gt;
602      &lt;/div&gt;
603      &lt;div class="card"&gt;
604        &lt;div class="prodimg"&gt;
605          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
606          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
607        &lt;/div&gt;
608        &lt;div class="desc"&gt;
609          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
610          &lt;p&gt;$120.00&lt;/p&gt;
611        &lt;/div&gt;
612        &lt;div class="type"&gt;
613          &lt;div class="border"&gt;
614            &lt;div class="color"&gt;&lt;/div&gt;
615          &lt;/div&gt;
616          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
617        &lt;/div&gt;
618      &lt;/div&gt;
619      &lt;div class="card"&gt;
620        &lt;div class="prodimg"&gt;
621          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
622          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
623        &lt;/div&gt;
624        &lt;div class="desc"&gt;
625          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
626          &lt;p&gt;$120.00&lt;/p&gt;
627        &lt;/div&gt;
628        &lt;div class="type"&gt;
629          &lt;div class="border"&gt;
630            &lt;div class="color"&gt;&lt;/div&gt;
631          &lt;/div&gt;
632          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
633        &lt;/div&gt;
634      &lt;/div&gt;
635      &lt;div class="card"&gt;
636        &lt;div class="prodimg"&gt;
637          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
638          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
639        &lt;/div&gt;
640        &lt;div class="desc"&gt;
641          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
642          &lt;p&gt;$120.00&lt;/p&gt;
643        &lt;/div&gt;
644        &lt;div class="type"&gt;
645          &lt;div class="border"&gt;
646            &lt;div class="color"&gt;&lt;/div&gt;
647          &lt;/div&gt;
648          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
649        &lt;/div&gt;
650      &lt;/div&gt;
651    &lt;/div&gt;
652  &lt;/div&gt;
653
654&lt;/div&gt;
655
656&lt;div id="foot" class="footer container"&gt;
657  &lt;div class="logo container"&gt;
658    &lt;h1&gt;κοσμήματα&lt;/h1&gt;
659  &lt;/div&gt;
660  &lt;div class="top"&gt;
661    &lt;div class="site column"&gt;
662      &lt;h3&gt;Kosmimata jewelry&lt;/h3&gt;
663      &lt;p&gt;Accessorise yourself with the best there is&lt;/p&gt;
664    &lt;/div&gt;
665    &lt;div class="customer column"&gt;
666      &lt;h1&gt;Customer Care&lt;/h1&gt;
667      &lt;ul&gt;
668        &lt;li&gt;&lt;a href="./faq.html#shipping"&gt;Shipping &amp; Returns&lt;/a&gt;&lt;/li&gt;
669        &lt;li&gt;&lt;a href="./order-status.html"&gt;Order Status&lt;/a&gt;&lt;/li&gt;
670        &lt;li&gt;&lt;a href="./faq.html#payment"&gt;Payment Methods&lt;/a&gt;&lt;/li&gt;
671        &lt;li&gt;&lt;a href="./ring-sizer.html"&gt;Ring Sizer&lt;/a&gt;&lt;/li&gt;
672      &lt;/ul&gt;
673    &lt;/div&gt;
674    &lt;div class="contact column"&gt;
675      &lt;div class="address"&gt;
676        &lt;h1&gt;Visit&lt;/h1&gt;
677        &lt;p&gt;1985 Bel Meadow Drive,&lt;/p&gt;
678        &lt;p&gt;Los Angeles, California&lt;/p&gt;
679        &lt;p&gt;90017&lt;/p&gt;
680      &lt;/div&gt;
681      &lt;div class="email"&gt;
682        &lt;a href="mailto:info@kosmimata.com"&gt;info@kosmimata.com&lt;/a&gt;
683        &lt;a href="tel:+1 213-829-0743"&gt;213-829-0743&lt;/a&gt;
684      &lt;/div&gt;
685    &lt;/div&gt;
686    &lt;div class="sign column"&gt;
687      &lt;p&gt;Sign up to have insider info on new arrivals, early access and more.&lt;/p&gt;
688      &lt;div class="input"&gt;
689        &lt;i class="far fa-envelope"&gt;&lt;/i&gt;
690        &lt;input type="email" placeholder="Your Email"&gt;
691        &lt;i class="fas fa-chevron-right"&gt;&lt;/i&gt;
692      &lt;/div&gt;
693    &lt;/div&gt;
694  &lt;/div&gt;
695  &lt;div class="bottom"&gt;
696    &lt;div class="socials"&gt;
697      &lt;a href="./terms&amp;conditions.html"&gt;Terms and Conditions&lt;/a&gt;
698      &lt;a href="./privacy-policy.html"&gt;Privacy Policy&lt;/a&gt;
699      &lt;a href="./sitemap.html"&gt;Site Map&lt;/a&gt;
700      &lt;p&gt;&amp;copy;Kosmimata Inc.&lt;/p&gt;
701      &lt;div class="icons"&gt;
702        &lt;a href=""&gt;&lt;i class="fab fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=""&gt;&lt;i class="fab fa-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=""&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
703      &lt;/div&gt;
704    &lt;/div&gt;
705  &lt;/div&gt;
706&lt;/div&gt;position: -webkit-sticky;
707position: sticky;
708top: 20px;
709.trueContainer {
710  display:flex;
711  align-items: flex-start;
712  padding-top:6.7vw
713}
714
715a {
716  text-decoration: none;
717  transition: all 0.3s;
718  color: black;
719  font-family: 'Montserrat', sans-serif;
720  cursor: pointer;
721}
722
723.sidebar.container {
724  position: sticky;
725  top:0;
726  left:0;
727  width: 20%;
728  z-index: 1;
729  text-transform: uppercase;
730  /* overflow-y: scroll; */
731  padding: 1vw;
732}
733
734.sidebar .inner .categories * {
735  padding: .5vw;
736}
737
738.sidebar .inner .categories h5 {
739  font-size: 15px;
740  font-weight: 400;
741}
742
743.sidebar .inner .categories p {
744  font-size: 13px;
745  text-indent: 1vw;
746}
747
748.sidebar .inner .categories h5 a:hover,
749.sidebar .inner .categories p a:hover {
750  color: #cfab53;
751}
752
753.main.container {
754  /* right: 0;
755    bottom: 0;
756    left: 20%;
757    top: 0vw;
758    position: absolute; */
759  width: 80%;
760  padding: 1vw;
761  z-index: 0;
762  display: flex;
763  flex-direction: column;
764  align-items: flex-end;
765}
766
767.main .category {
768  /* padding-top: 6.7vw; */
769  width: 100%;
770}
771
772.main .category h2 {
773  padding: 1vw;
774}
775
776.main .category hr {
777  border: none;
778  border-top: .1vw solid #cfab53;
779  width: 50%;
780  margin-left: 1vw;
781  margin-bottom: 1vw;
782}
783
784.main .category .products {
785  display: flex;
786  flex-wrap: wrap;
787}
788
789.main .category .products .card {
790  width: 30%;
791  margin: 1vw;
792  padding: 1vw;
793  /* border: 1px solid #cfab53; */
794  position: relative;
795  min-height: 28vw;
796}
797
798.main .category .products .card .prodimg img {
799  width: 100%;
800  position: absolute;
801  top: 0;
802  left: 0;
803  background-color: #cfab53;
804  min-height: 20vw;
805}
806
807.main .category .products .card .prodimg img.primary {
808  z-index: 1;
809}
810
811.main .category .products .card .prodimg:hover img.primary {
812  display: none;
813}
814
815.main .category .products .card .desc {
816  display: flex;
817  justify-content: space-between;
818  width: 100%;
819  position: absolute;
820  left: 0;
821  bottom: 2vw;
822}
823
824.main .category .products .card .desc h3 a:hover {
825  color: #cfab53;
826}
827
828.main .category .products .card .type {
829  display: flex;
830  width: 100%;
831  position: absolute;
832  left: 0;
833  bottom: 0;
834  align-items: center;
835}
836
837.main .category .products .card .type .border {
838  border-radius: 10000px;
839  border: 1px solid #bdbdbd;
840  padding: 2px;
841  margin-right: 5px;
842}
843
844.main .category .products .card .type .border .color {
845  border-radius: 10000px;
846  width: 13px;
847  height: 13px;
848  background-color: #cfab53;
849}
850
851.footer.container {
852  /* position: absolute;
853    bottom: 0;
854    left: 0;
855    right: 0; */
856  width: 100%;
857  border-top: 1px solid #cfab53;
858  background-color: white;
859}
860
861.footer .top {
862  display: flex;
863  padding: 1vw;
864  justify-content: space-between;
865  align-items: flex-start;
866}
867
868.footer .top .column {
869  width: 25%;
870  padding: 1vw;
871}
872
873.footer .top .column h1 {
874  font-size: 23px;
875  letter-spacing: -2px;
876  padding: .5vw;
877}
878
879.footer .top .column p {
880  letter-spacing: -1px;
881  font-size: 15px;
882}
883
884.footer .top .column a {
885  letter-spacing: -1px;
886  font-size: 15px;
887}
888
889.footer .top .column a:hover {
890  color: #cfab53;
891}
892
893.footer .logo {
894  padding: 1vw 2vw 0vw;
895}
896
897.footer .logo h1 {
898  font-family: 'GFS Didot', serif;
899  color: #cfab53;
900  font-size: 35px;
901  letter-spacing: normal;
902  cursor: pointer;
903}
904
905.footer .top .site h3 {
906  font-family: 'Dancing Script', cursive;
907  font-size: 30px;
908  font-weight: 400;
909}
910
911.footer .top .site p {
912  font-size: 15px;
913  padding: 1vw 0vw;
914  font-weight: 600;
915  letter-spacing: normal;
916}
917
918.footer .top .customer ul li {
919  padding: .3vw .5vw;
920}
921
922.footer .top .customer ul li a {
923  letter-spacing: -1px;
924  font-size: 15px;
925}
926
927.footer .top .contact p,
928.footer .top .contact a {
929  padding: .3vw .5vw;
930}
931
932.footer .top .contact .email {
933  display: flex;
934  flex-direction: column;
935}
936
937.footer .top .sign p {
938  padding: .5vw 0;
939}
940
941.footer .top .sign .input {
942  display: flex;
943  flex-wrap: nowrap;
944  align-items: center;
945  border: 1px solid #cfab53;
946  margin: 1vw 0vw;
947}
948
949.footer .top .sign .input .fa-envelope {
950  color: #cfab53;
951  padding: 0vw 0vw 0vw .5vw;
952  width: 10%;
953}
954
955.footer .top .sign .input input {
956  border: none;
957  padding: 0vw .5vw;
958  margin: 0vw 0vw 0vw 0vw;
959  width: 80%;
960}
961
962.footer .top .sign .input i.fa-chevron-right {
963  background-color: #cfab53;
964  color: white;
965  padding: 5px;
966  width: 10%;
967  text-align: center;
968  cursor: pointer;
969}
970
971.footer .top .sign .input i.fa-chevron-right:hover {
972  background-color: #bb9c4d;
973}
974
975.footer .bottom {
976  display: flex;
977  justify-content: flex-end;
978  align-items: center;
979}
980
981.footer .socials {
982  display: flex;
983  justify-content: flex-end;
984  align-items: center;
985}
986
987.footer .socials * {
988  padding: .5vw;
989  font-size: 12px;
990  letter-spacing: -1px;
991}
992
993.footer .socials a:hover {
994  color: #cfab53;
995}
996
997.footer .socials .icons i {
998  font-size: 18px;
999  font-weight: 700;
1000}
1001
1002.footer .socials .icons i.fa-instagram:hover {
1003  color: #bc2a8d;
1004}
1005
1006.footer .socials .icons i.fa-pinterest:hover {
1007  color: #bd081c;
1008}
1009
1010.footer .socials .icons i.fa-twitter:hover {
1011  color: #1DA1F2;
1012}

1a {
2  text-decoration: none;
3  transition: all 0.3s;
4  color: black;
5  font-family: 'Montserrat', sans-serif;
6  cursor: pointer;
7}
8
9ul,
10ol {
11  list-style: none;
12  font-family: 'Montserrat', sans-serif;
13}
14
15.menu.container {
16  padding: 1vw;
17  font-family: 'Montserrat', sans-serif;
18}
19
20.menu ul li {
21  display: inline-block;
22  padding: 1vw;
23}
24
25.menu ul li a {
26  padding: 1vw;
27  font-size: 1.3vw;
28}
29
30.menu ul li a:hover {
31  border-bottom: .2em solid black;
32}
33
34.title.container {
35  width: 100%;
36  position: fixed;
37  top: 0;
38  display: flex;
39  justify-content: space-between;
40  align-items: center;
41  background-color: #fff;
42  /* border-top: 1px solid #cfab53; */
43  border-bottom: 1px solid #cfab53;
44  z-index: 2;
45  /* margin-top: 2vw; */
46  /* box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
47    -webkit-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58);
48    -moz-box-shadow: 0px 5px 5px 1px rgba(0,0,0,0.58); */
49}
50
51.title .logo {
52  padding: 1vw;
53}
54
55.title .logo h1 {
56  font-family: 'GFS Didot', serif;
57  color: #cfab53;
58  font-size: 2.5vw;
59  cursor: pointer;
60}
61
62.title .logo h3 {
63  font-family: 'Dancing Script', cursive;
64  /* color: #a1919e; */
65  font-size: 1.3vw;
66  font-weight: 400;
67}
68
69.sidebar.container {
70  position: fixed;
71  bottom: 0;
72  left: 0;
73  top: 6.7vw;
74  width: 20%;
75  z-index: 1;
76  text-transform: uppercase;
77  /* overflow-y: scroll; */
78  padding: 1vw;
79}
80
81.sidebar .inner .categories * {
82  padding: .5vw;
83}
84
85.sidebar .inner .categories h5 {
86  font-size: 15px;
87  font-weight: 400;
88}
89
90.sidebar .inner .categories p {
91  font-size: 13px;
92  text-indent: 1vw;
93}
94
95.sidebar .inner .categories h5 a:hover,
96.sidebar .inner .categories p a:hover {
97  color: #cfab53;
98}
99
100.main.container {
101  /* right: 0;
102    bottom: 0;
103    left: 20%;
104    top: 0vw;
105    position: absolute; */
106  width: 100%;
107  padding: 1vw;
108  z-index: 0;
109  display: flex;
110  flex-direction: column;
111  align-items: flex-end;
112}
113
114.main .category {
115  padding-top: 6.7vw;
116  width: 80%;
117}
118
119.main .category h2 {
120  padding: 1vw;
121}
122
123.main .category hr {
124  border: none;
125  border-top: .1vw solid #cfab53;
126  width: 50%;
127  margin-left: 1vw;
128  margin-bottom: 1vw;
129}
130
131.main .category .products {
132  display: flex;
133  flex-wrap: wrap;
134}
135
136.main .category .products .card {
137  width: 30%;
138  margin: 1vw;
139  padding: 1vw;
140  /* border: 1px solid #cfab53; */
141  position: relative;
142  min-height: 28vw;
143}
144
145.main .category .products .card .prodimg img {
146  width: 100%;
147  position: absolute;
148  top: 0;
149  left: 0;
150  background-color: #cfab53;
151  min-height: 20vw;
152}
153
154.main .category .products .card .prodimg img.primary {
155  z-index: 1;
156}
157
158.main .category .products .card .prodimg:hover img.primary {
159  display: none;
160}
161
162.main .category .products .card .desc {
163  display: flex;
164  justify-content: space-between;
165  width: 100%;
166  position: absolute;
167  left: 0;
168  bottom: 2vw;
169}
170
171.main .category .products .card .desc h3 a:hover {
172  color: #cfab53;
173}
174
175.main .category .products .card .type {
176  display: flex;
177  width: 100%;
178  position: absolute;
179  left: 0;
180  bottom: 0;
181  align-items: center;
182}
183
184.main .category .products .card .type .border {
185  border-radius: 10000px;
186  border: 1px solid #bdbdbd;
187  padding: 2px;
188  margin-right: 5px;
189}
190
191.main .category .products .card .type .border .color {
192  border-radius: 10000px;
193  width: 13px;
194  height: 13px;
195  background-color: #cfab53;
196}
197
198.footer.container {
199  /* position: absolute;
200    bottom: 0;
201    left: 0;
202    right: 0; */
203  width: 100%;
204  border-top: 1px solid #cfab53;
205  background-color: white;
206}
207
208.footer .top {
209  display: flex;
210  padding: 1vw;
211  justify-content: space-between;
212  align-items: flex-start;
213}
214
215.footer .top .column {
216  width: 25%;
217  padding: 1vw;
218}
219
220.footer .top .column h1 {
221  font-size: 23px;
222  letter-spacing: -2px;
223  padding: .5vw;
224}
225
226.footer .top .column p {
227  letter-spacing: -1px;
228  font-size: 15px;
229}
230
231.footer .top .column a {
232  letter-spacing: -1px;
233  font-size: 15px;
234}
235
236.footer .top .column a:hover {
237  color: #cfab53;
238}
239
240.footer .logo {
241  padding: 1vw 2vw 0vw;
242}
243
244.footer .logo h1 {
245  font-family: 'GFS Didot', serif;
246  color: #cfab53;
247  font-size: 35px;
248  letter-spacing: normal;
249  cursor: pointer;
250}
251
252.footer .top .site h3 {
253  font-family: 'Dancing Script', cursive;
254  font-size: 30px;
255  font-weight: 400;
256}
257
258.footer .top .site p {
259  font-size: 15px;
260  padding: 1vw 0vw;
261  font-weight: 600;
262  letter-spacing: normal;
263}
264
265.footer .top .customer ul li {
266  padding: .3vw .5vw;
267}
268
269.footer .top .customer ul li a {
270  letter-spacing: -1px;
271  font-size: 15px;
272}
273
274.footer .top .contact p,
275.footer .top .contact a {
276  padding: .3vw .5vw;
277}
278
279.footer .top .contact .email {
280  display: flex;
281  flex-direction: column;
282}
283
284.footer .top .sign p {
285  padding: .5vw 0;
286}
287
288.footer .top .sign .input {
289  display: flex;
290  flex-wrap: nowrap;
291  align-items: center;
292  border: 1px solid #cfab53;
293  margin: 1vw 0vw;
294}
295
296.footer .top .sign .input .fa-envelope {
297  color: #cfab53;
298  padding: 0vw 0vw 0vw .5vw;
299  width: 10%;
300}
301
302.footer .top .sign .input input {
303  border: none;
304  padding: 0vw .5vw;
305  margin: 0vw 0vw 0vw 0vw;
306  width: 80%;
307}
308
309.footer .top .sign .input i.fa-chevron-right {
310  background-color: #cfab53;
311  color: white;
312  padding: 5px;
313  width: 10%;
314  text-align: center;
315  cursor: pointer;
316}
317
318.footer .top .sign .input i.fa-chevron-right:hover {
319  background-color: #bb9c4d;
320}
321
322.footer .bottom {
323  display: flex;
324  justify-content: flex-end;
325  align-items: center;
326}
327
328.footer .socials {
329  display: flex;
330  justify-content: flex-end;
331  align-items: center;
332}
333
334.footer .socials * {
335  padding: .5vw;
336  font-size: 12px;
337  letter-spacing: -1px;
338}
339
340.footer .socials a:hover {
341  color: #cfab53;
342}
343
344.footer .socials .icons i {
345  font-size: 18px;
346  font-weight: 700;
347}
348
349.footer .socials .icons i.fa-instagram:hover {
350  color: #bc2a8d;
351}
352
353.footer .socials .icons i.fa-pinterest:hover {
354  color: #bd081c;
355}
356
357.footer .socials .icons i.fa-twitter:hover {
358  color: #1DA1F2;
359}&lt;div class="title container" id="menu"&gt;
360  &lt;div class="logo container"&gt;
361    &lt;h1&gt;κοσμήματα&lt;/h1&gt;
362    &lt;h3&gt;kosmimata jewelry&lt;/h3&gt;
363  &lt;/div&gt;
364  &lt;div class="menu container"&gt;
365    &lt;ul&gt;
366      &lt;li&gt;&lt;a href="../pages/index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
367      &lt;li&gt;&lt;a id="shop"&gt;Shop&lt;/a&gt;&lt;/li&gt;
368      &lt;li&gt;&lt;a href="../pages/blog.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
369      &lt;li&gt;&lt;a id="search"&gt;&lt;i class="fas fa-search"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
370      &lt;li&gt;&lt;a id="cart"&gt;&lt;i class="fas fa-shopping-cart"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
371    &lt;/ul&gt;
372  &lt;/div&gt;
373&lt;/div&gt;
374&lt;div class="sidebar container"&gt;
375  &lt;div class="inner"&gt;
376    &lt;div class="categories"&gt;
377      &lt;h5&gt;&lt;a href="./product-display-bracelets-and-anklets.html"&gt;Bracelets + Anklets&lt;/a&gt;&lt;/h5&gt;
378      &lt;p&gt;&lt;a href="#bracelets"&gt;Bracelets&lt;/a&gt;&lt;/p&gt;
379      &lt;p&gt;&lt;a href="#chain"&gt;Chain Bracelets&lt;/a&gt;&lt;/p&gt;
380      &lt;p&gt;&lt;a href="#cuff"&gt;Cuffs And Bangles&lt;/a&gt;&lt;/p&gt;
381      &lt;p&gt;&lt;a href="#zodaic"&gt;Zodiac Bracelets&lt;/a&gt;&lt;/p&gt;
382      &lt;p&gt;&lt;a href="#mens"&gt;Men's Bracelets&lt;/a&gt;&lt;/p&gt;
383      &lt;p&gt;&lt;a href="#anklets"&gt;Anklets&lt;/a&gt;&lt;/p&gt;
384    &lt;/div&gt;
385    &lt;div class="categories"&gt;
386      &lt;h5&gt;&lt;a href="./product-display-wedding.html"&gt;Wedding&lt;/a&gt;&lt;/h5&gt;
387    &lt;/div&gt;
388    &lt;div class="categories"&gt;
389      &lt;h5&gt;&lt;a href="./product-display-mens.html"&gt;Men's&lt;/a&gt;&lt;/h5&gt;
390    &lt;/div&gt;
391  &lt;/div&gt;
392&lt;/div&gt;
393
394&lt;div class="main container"&gt;
395  &lt;div id="bracelets" class="category container"&gt;
396    &lt;h2&gt;Bracelets&lt;/h2&gt;
397    &lt;hr&gt;
398    &lt;div class="products"&gt;
399      &lt;div class="card"&gt;
400        &lt;div class="prodimg"&gt;
401          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
402          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
403        &lt;/div&gt;
404        &lt;div class="desc"&gt;
405          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
406          &lt;p&gt;$120.00&lt;/p&gt;
407        &lt;/div&gt;
408        &lt;div class="type"&gt;
409          &lt;div class="border"&gt;
410            &lt;div class="color"&gt;&lt;/div&gt;
411          &lt;/div&gt;
412          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
413        &lt;/div&gt;
414      &lt;/div&gt;
415      &lt;div class="card"&gt;
416        &lt;div class="prodimg"&gt;
417          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
418          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
419        &lt;/div&gt;
420        &lt;div class="desc"&gt;
421          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
422          &lt;p&gt;$120.00&lt;/p&gt;
423        &lt;/div&gt;
424        &lt;div class="type"&gt;
425          &lt;div class="border"&gt;
426            &lt;div class="color"&gt;&lt;/div&gt;
427          &lt;/div&gt;
428          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
429        &lt;/div&gt;
430      &lt;/div&gt;
431      &lt;div class="card"&gt;
432        &lt;div class="prodimg"&gt;
433          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
434          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
435        &lt;/div&gt;
436        &lt;div class="desc"&gt;
437          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
438          &lt;p&gt;$120.00&lt;/p&gt;
439        &lt;/div&gt;
440        &lt;div class="type"&gt;
441          &lt;div class="border"&gt;
442            &lt;div class="color"&gt;&lt;/div&gt;
443          &lt;/div&gt;
444          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
445        &lt;/div&gt;
446      &lt;/div&gt;
447      &lt;div class="card"&gt;
448        &lt;div class="prodimg"&gt;
449          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
450          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
451        &lt;/div&gt;
452        &lt;div class="desc"&gt;
453          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
454          &lt;p&gt;$120.00&lt;/p&gt;
455        &lt;/div&gt;
456        &lt;div class="type"&gt;
457          &lt;div class="border"&gt;
458            &lt;div class="color"&gt;&lt;/div&gt;
459          &lt;/div&gt;
460          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
461        &lt;/div&gt;
462      &lt;/div&gt;
463      &lt;div class="card"&gt;
464        &lt;div class="prodimg"&gt;
465          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
466          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
467        &lt;/div&gt;
468        &lt;div class="desc"&gt;
469          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
470          &lt;p&gt;$120.00&lt;/p&gt;
471        &lt;/div&gt;
472        &lt;div class="type"&gt;
473          &lt;div class="border"&gt;
474            &lt;div class="color"&gt;&lt;/div&gt;
475          &lt;/div&gt;
476          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
477        &lt;/div&gt;
478      &lt;/div&gt;
479    &lt;/div&gt;
480  &lt;/div&gt;
481  &lt;div id="chain" class="category container"&gt;
482    &lt;h2&gt;Chain Bracelets&lt;/h2&gt;
483    &lt;hr&gt;
484    &lt;div class="products"&gt;
485      &lt;div class="card"&gt;
486        &lt;div class="prodimg"&gt;
487          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
488          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
489        &lt;/div&gt;
490        &lt;div class="desc"&gt;
491          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
492          &lt;p&gt;$120.00&lt;/p&gt;
493        &lt;/div&gt;
494        &lt;div class="type"&gt;
495          &lt;div class="border"&gt;
496            &lt;div class="color"&gt;&lt;/div&gt;
497          &lt;/div&gt;
498          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
499        &lt;/div&gt;
500      &lt;/div&gt;
501      &lt;div class="card"&gt;
502        &lt;div class="prodimg"&gt;
503          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
504          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
505        &lt;/div&gt;
506        &lt;div class="desc"&gt;
507          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
508          &lt;p&gt;$120.00&lt;/p&gt;
509        &lt;/div&gt;
510        &lt;div class="type"&gt;
511          &lt;div class="border"&gt;
512            &lt;div class="color"&gt;&lt;/div&gt;
513          &lt;/div&gt;
514          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
515        &lt;/div&gt;
516      &lt;/div&gt;
517      &lt;div class="card"&gt;
518        &lt;div class="prodimg"&gt;
519          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
520          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
521        &lt;/div&gt;
522        &lt;div class="desc"&gt;
523          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
524          &lt;p&gt;$120.00&lt;/p&gt;
525        &lt;/div&gt;
526        &lt;div class="type"&gt;
527          &lt;div class="border"&gt;
528            &lt;div class="color"&gt;&lt;/div&gt;
529          &lt;/div&gt;
530          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
531        &lt;/div&gt;
532      &lt;/div&gt;
533      &lt;div class="card"&gt;
534        &lt;div class="prodimg"&gt;
535          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
536          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
537        &lt;/div&gt;
538        &lt;div class="desc"&gt;
539          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
540          &lt;p&gt;$120.00&lt;/p&gt;
541        &lt;/div&gt;
542        &lt;div class="type"&gt;
543          &lt;div class="border"&gt;
544            &lt;div class="color"&gt;&lt;/div&gt;
545          &lt;/div&gt;
546          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
547        &lt;/div&gt;
548      &lt;/div&gt;
549      &lt;div class="card"&gt;
550        &lt;div class="prodimg"&gt;
551          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
552          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
553        &lt;/div&gt;
554        &lt;div class="desc"&gt;
555          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
556          &lt;p&gt;$120.00&lt;/p&gt;
557        &lt;/div&gt;
558        &lt;div class="type"&gt;
559          &lt;div class="border"&gt;
560            &lt;div class="color"&gt;&lt;/div&gt;
561          &lt;/div&gt;
562          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
563        &lt;/div&gt;
564      &lt;/div&gt;
565    &lt;/div&gt;
566  &lt;/div&gt;
567  &lt;div id="cuff" class="category container"&gt;
568    &lt;h2&gt;Cuffs And Bangles&lt;/h2&gt;
569    &lt;hr&gt;
570    &lt;div class="products"&gt;
571      &lt;div class="card"&gt;
572        &lt;div class="prodimg"&gt;
573          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
574          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
575        &lt;/div&gt;
576        &lt;div class="desc"&gt;
577          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
578          &lt;p&gt;$120.00&lt;/p&gt;
579        &lt;/div&gt;
580        &lt;div class="type"&gt;
581          &lt;div class="border"&gt;
582            &lt;div class="color"&gt;&lt;/div&gt;
583          &lt;/div&gt;
584          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
585        &lt;/div&gt;
586      &lt;/div&gt;
587      &lt;div class="card"&gt;
588        &lt;div class="prodimg"&gt;
589          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
590          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
591        &lt;/div&gt;
592        &lt;div class="desc"&gt;
593          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
594          &lt;p&gt;$120.00&lt;/p&gt;
595        &lt;/div&gt;
596        &lt;div class="type"&gt;
597          &lt;div class="border"&gt;
598            &lt;div class="color"&gt;&lt;/div&gt;
599          &lt;/div&gt;
600          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
601        &lt;/div&gt;
602      &lt;/div&gt;
603      &lt;div class="card"&gt;
604        &lt;div class="prodimg"&gt;
605          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
606          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
607        &lt;/div&gt;
608        &lt;div class="desc"&gt;
609          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
610          &lt;p&gt;$120.00&lt;/p&gt;
611        &lt;/div&gt;
612        &lt;div class="type"&gt;
613          &lt;div class="border"&gt;
614            &lt;div class="color"&gt;&lt;/div&gt;
615          &lt;/div&gt;
616          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
617        &lt;/div&gt;
618      &lt;/div&gt;
619      &lt;div class="card"&gt;
620        &lt;div class="prodimg"&gt;
621          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
622          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
623        &lt;/div&gt;
624        &lt;div class="desc"&gt;
625          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
626          &lt;p&gt;$120.00&lt;/p&gt;
627        &lt;/div&gt;
628        &lt;div class="type"&gt;
629          &lt;div class="border"&gt;
630            &lt;div class="color"&gt;&lt;/div&gt;
631          &lt;/div&gt;
632          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
633        &lt;/div&gt;
634      &lt;/div&gt;
635      &lt;div class="card"&gt;
636        &lt;div class="prodimg"&gt;
637          &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
638          &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
639        &lt;/div&gt;
640        &lt;div class="desc"&gt;
641          &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
642          &lt;p&gt;$120.00&lt;/p&gt;
643        &lt;/div&gt;
644        &lt;div class="type"&gt;
645          &lt;div class="border"&gt;
646            &lt;div class="color"&gt;&lt;/div&gt;
647          &lt;/div&gt;
648          &lt;p&gt;14k Yellow Gold&lt;/p&gt;
649        &lt;/div&gt;
650      &lt;/div&gt;
651    &lt;/div&gt;
652  &lt;/div&gt;
653
654&lt;/div&gt;
655
656&lt;div id="foot" class="footer container"&gt;
657  &lt;div class="logo container"&gt;
658    &lt;h1&gt;κοσμήματα&lt;/h1&gt;
659  &lt;/div&gt;
660  &lt;div class="top"&gt;
661    &lt;div class="site column"&gt;
662      &lt;h3&gt;Kosmimata jewelry&lt;/h3&gt;
663      &lt;p&gt;Accessorise yourself with the best there is&lt;/p&gt;
664    &lt;/div&gt;
665    &lt;div class="customer column"&gt;
666      &lt;h1&gt;Customer Care&lt;/h1&gt;
667      &lt;ul&gt;
668        &lt;li&gt;&lt;a href="./faq.html#shipping"&gt;Shipping &amp; Returns&lt;/a&gt;&lt;/li&gt;
669        &lt;li&gt;&lt;a href="./order-status.html"&gt;Order Status&lt;/a&gt;&lt;/li&gt;
670        &lt;li&gt;&lt;a href="./faq.html#payment"&gt;Payment Methods&lt;/a&gt;&lt;/li&gt;
671        &lt;li&gt;&lt;a href="./ring-sizer.html"&gt;Ring Sizer&lt;/a&gt;&lt;/li&gt;
672      &lt;/ul&gt;
673    &lt;/div&gt;
674    &lt;div class="contact column"&gt;
675      &lt;div class="address"&gt;
676        &lt;h1&gt;Visit&lt;/h1&gt;
677        &lt;p&gt;1985 Bel Meadow Drive,&lt;/p&gt;
678        &lt;p&gt;Los Angeles, California&lt;/p&gt;
679        &lt;p&gt;90017&lt;/p&gt;
680      &lt;/div&gt;
681      &lt;div class="email"&gt;
682        &lt;a href="mailto:info@kosmimata.com"&gt;info@kosmimata.com&lt;/a&gt;
683        &lt;a href="tel:+1 213-829-0743"&gt;213-829-0743&lt;/a&gt;
684      &lt;/div&gt;
685    &lt;/div&gt;
686    &lt;div class="sign column"&gt;
687      &lt;p&gt;Sign up to have insider info on new arrivals, early access and more.&lt;/p&gt;
688      &lt;div class="input"&gt;
689        &lt;i class="far fa-envelope"&gt;&lt;/i&gt;
690        &lt;input type="email" placeholder="Your Email"&gt;
691        &lt;i class="fas fa-chevron-right"&gt;&lt;/i&gt;
692      &lt;/div&gt;
693    &lt;/div&gt;
694  &lt;/div&gt;
695  &lt;div class="bottom"&gt;
696    &lt;div class="socials"&gt;
697      &lt;a href="./terms&amp;conditions.html"&gt;Terms and Conditions&lt;/a&gt;
698      &lt;a href="./privacy-policy.html"&gt;Privacy Policy&lt;/a&gt;
699      &lt;a href="./sitemap.html"&gt;Site Map&lt;/a&gt;
700      &lt;p&gt;&amp;copy;Kosmimata Inc.&lt;/p&gt;
701      &lt;div class="icons"&gt;
702        &lt;a href=""&gt;&lt;i class="fab fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=""&gt;&lt;i class="fab fa-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=""&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
703      &lt;/div&gt;
704    &lt;/div&gt;
705  &lt;/div&gt;
706&lt;/div&gt;position: -webkit-sticky;
707position: sticky;
708top: 20px;
709.trueContainer {
710  display:flex;
711  align-items: flex-start;
712  padding-top:6.7vw
713}
714
715a {
716  text-decoration: none;
717  transition: all 0.3s;
718  color: black;
719  font-family: 'Montserrat', sans-serif;
720  cursor: pointer;
721}
722
723.sidebar.container {
724  position: sticky;
725  top:0;
726  left:0;
727  width: 20%;
728  z-index: 1;
729  text-transform: uppercase;
730  /* overflow-y: scroll; */
731  padding: 1vw;
732}
733
734.sidebar .inner .categories * {
735  padding: .5vw;
736}
737
738.sidebar .inner .categories h5 {
739  font-size: 15px;
740  font-weight: 400;
741}
742
743.sidebar .inner .categories p {
744  font-size: 13px;
745  text-indent: 1vw;
746}
747
748.sidebar .inner .categories h5 a:hover,
749.sidebar .inner .categories p a:hover {
750  color: #cfab53;
751}
752
753.main.container {
754  /* right: 0;
755    bottom: 0;
756    left: 20%;
757    top: 0vw;
758    position: absolute; */
759  width: 80%;
760  padding: 1vw;
761  z-index: 0;
762  display: flex;
763  flex-direction: column;
764  align-items: flex-end;
765}
766
767.main .category {
768  /* padding-top: 6.7vw; */
769  width: 100%;
770}
771
772.main .category h2 {
773  padding: 1vw;
774}
775
776.main .category hr {
777  border: none;
778  border-top: .1vw solid #cfab53;
779  width: 50%;
780  margin-left: 1vw;
781  margin-bottom: 1vw;
782}
783
784.main .category .products {
785  display: flex;
786  flex-wrap: wrap;
787}
788
789.main .category .products .card {
790  width: 30%;
791  margin: 1vw;
792  padding: 1vw;
793  /* border: 1px solid #cfab53; */
794  position: relative;
795  min-height: 28vw;
796}
797
798.main .category .products .card .prodimg img {
799  width: 100%;
800  position: absolute;
801  top: 0;
802  left: 0;
803  background-color: #cfab53;
804  min-height: 20vw;
805}
806
807.main .category .products .card .prodimg img.primary {
808  z-index: 1;
809}
810
811.main .category .products .card .prodimg:hover img.primary {
812  display: none;
813}
814
815.main .category .products .card .desc {
816  display: flex;
817  justify-content: space-between;
818  width: 100%;
819  position: absolute;
820  left: 0;
821  bottom: 2vw;
822}
823
824.main .category .products .card .desc h3 a:hover {
825  color: #cfab53;
826}
827
828.main .category .products .card .type {
829  display: flex;
830  width: 100%;
831  position: absolute;
832  left: 0;
833  bottom: 0;
834  align-items: center;
835}
836
837.main .category .products .card .type .border {
838  border-radius: 10000px;
839  border: 1px solid #bdbdbd;
840  padding: 2px;
841  margin-right: 5px;
842}
843
844.main .category .products .card .type .border .color {
845  border-radius: 10000px;
846  width: 13px;
847  height: 13px;
848  background-color: #cfab53;
849}
850
851.footer.container {
852  /* position: absolute;
853    bottom: 0;
854    left: 0;
855    right: 0; */
856  width: 100%;
857  border-top: 1px solid #cfab53;
858  background-color: white;
859}
860
861.footer .top {
862  display: flex;
863  padding: 1vw;
864  justify-content: space-between;
865  align-items: flex-start;
866}
867
868.footer .top .column {
869  width: 25%;
870  padding: 1vw;
871}
872
873.footer .top .column h1 {
874  font-size: 23px;
875  letter-spacing: -2px;
876  padding: .5vw;
877}
878
879.footer .top .column p {
880  letter-spacing: -1px;
881  font-size: 15px;
882}
883
884.footer .top .column a {
885  letter-spacing: -1px;
886  font-size: 15px;
887}
888
889.footer .top .column a:hover {
890  color: #cfab53;
891}
892
893.footer .logo {
894  padding: 1vw 2vw 0vw;
895}
896
897.footer .logo h1 {
898  font-family: 'GFS Didot', serif;
899  color: #cfab53;
900  font-size: 35px;
901  letter-spacing: normal;
902  cursor: pointer;
903}
904
905.footer .top .site h3 {
906  font-family: 'Dancing Script', cursive;
907  font-size: 30px;
908  font-weight: 400;
909}
910
911.footer .top .site p {
912  font-size: 15px;
913  padding: 1vw 0vw;
914  font-weight: 600;
915  letter-spacing: normal;
916}
917
918.footer .top .customer ul li {
919  padding: .3vw .5vw;
920}
921
922.footer .top .customer ul li a {
923  letter-spacing: -1px;
924  font-size: 15px;
925}
926
927.footer .top .contact p,
928.footer .top .contact a {
929  padding: .3vw .5vw;
930}
931
932.footer .top .contact .email {
933  display: flex;
934  flex-direction: column;
935}
936
937.footer .top .sign p {
938  padding: .5vw 0;
939}
940
941.footer .top .sign .input {
942  display: flex;
943  flex-wrap: nowrap;
944  align-items: center;
945  border: 1px solid #cfab53;
946  margin: 1vw 0vw;
947}
948
949.footer .top .sign .input .fa-envelope {
950  color: #cfab53;
951  padding: 0vw 0vw 0vw .5vw;
952  width: 10%;
953}
954
955.footer .top .sign .input input {
956  border: none;
957  padding: 0vw .5vw;
958  margin: 0vw 0vw 0vw 0vw;
959  width: 80%;
960}
961
962.footer .top .sign .input i.fa-chevron-right {
963  background-color: #cfab53;
964  color: white;
965  padding: 5px;
966  width: 10%;
967  text-align: center;
968  cursor: pointer;
969}
970
971.footer .top .sign .input i.fa-chevron-right:hover {
972  background-color: #bb9c4d;
973}
974
975.footer .bottom {
976  display: flex;
977  justify-content: flex-end;
978  align-items: center;
979}
980
981.footer .socials {
982  display: flex;
983  justify-content: flex-end;
984  align-items: center;
985}
986
987.footer .socials * {
988  padding: .5vw;
989  font-size: 12px;
990  letter-spacing: -1px;
991}
992
993.footer .socials a:hover {
994  color: #cfab53;
995}
996
997.footer .socials .icons i {
998  font-size: 18px;
999  font-weight: 700;
1000}
1001
1002.footer .socials .icons i.fa-instagram:hover {
1003  color: #bc2a8d;
1004}
1005
1006.footer .socials .icons i.fa-pinterest:hover {
1007  color: #bd081c;
1008}
1009
1010.footer .socials .icons i.fa-twitter:hover {
1011  color: #1DA1F2;
1012}&lt;section class="trueContainer"&gt;
1013  &lt;div class="sidebar container"&gt;
1014    &lt;div class="inner"&gt;
1015      &lt;div class="categories"&gt;
1016        &lt;h5&gt;&lt;a href="./product-display-bracelets-and-anklets.html"&gt;Bracelets + Anklets&lt;/a&gt;&lt;/h5&gt;
1017        &lt;p&gt;&lt;a href="#bracelets"&gt;Bracelets&lt;/a&gt;&lt;/p&gt;
1018        &lt;p&gt;&lt;a href="#chain"&gt;Chain Bracelets&lt;/a&gt;&lt;/p&gt;
1019        &lt;p&gt;&lt;a href="#cuff"&gt;Cuffs And Bangles&lt;/a&gt;&lt;/p&gt;
1020        &lt;p&gt;&lt;a href="#zodaic"&gt;Zodiac Bracelets&lt;/a&gt;&lt;/p&gt;
1021        &lt;p&gt;&lt;a href="#mens"&gt;Men's Bracelets&lt;/a&gt;&lt;/p&gt;
1022        &lt;p&gt;&lt;a href="#anklets"&gt;Anklets&lt;/a&gt;&lt;/p&gt;
1023      &lt;/div&gt;
1024      &lt;div class="categories"&gt;
1025        &lt;h5&gt;&lt;a href="./product-display-wedding.html"&gt;Wedding&lt;/a&gt;&lt;/h5&gt;
1026      &lt;/div&gt;
1027      &lt;div class="categories"&gt;
1028        &lt;h5&gt;&lt;a href="./product-display-mens.html"&gt;Men's&lt;/a&gt;&lt;/h5&gt;
1029      &lt;/div&gt;
1030    &lt;/div&gt;
1031  &lt;/div&gt;
1032
1033  &lt;div class="main container"&gt;
1034    &lt;div id="bracelets" class="category container"&gt;
1035      &lt;h2&gt;Bracelets&lt;/h2&gt;
1036      &lt;hr&gt;
1037      &lt;div class="products"&gt;
1038        &lt;div class="card"&gt;
1039          &lt;div class="prodimg"&gt;
1040            &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
1041            &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
1042          &lt;/div&gt;
1043          &lt;div class="desc"&gt;
1044            &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
1045            &lt;p&gt;$120.00&lt;/p&gt;
1046          &lt;/div&gt;
1047          &lt;div class="type"&gt;
1048            &lt;div class="border"&gt;
1049              &lt;div class="color"&gt;&lt;/div&gt;
1050            &lt;/div&gt;
1051            &lt;p&gt;14k Yellow Gold&lt;/p&gt;
1052          &lt;/div&gt;
1053        &lt;/div&gt;
1054        &lt;div class="card"&gt;
1055          &lt;div class="prodimg"&gt;
1056            &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
1057            &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
1058          &lt;/div&gt;
1059          &lt;div class="desc"&gt;
1060            &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
1061            &lt;p&gt;$120.00&lt;/p&gt;
1062          &lt;/div&gt;
1063          &lt;div class="type"&gt;
1064            &lt;div class="border"&gt;
1065              &lt;div class="color"&gt;&lt;/div&gt;
1066            &lt;/div&gt;
1067            &lt;p&gt;14k Yellow Gold&lt;/p&gt;
1068          &lt;/div&gt;
1069        &lt;/div&gt;
1070        &lt;div class="card"&gt;
1071          &lt;div class="prodimg"&gt;
1072            &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
1073            &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
1074          &lt;/div&gt;
1075          &lt;div class="desc"&gt;
1076            &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
1077            &lt;p&gt;$120.00&lt;/p&gt;
1078          &lt;/div&gt;
1079          &lt;div class="type"&gt;
1080            &lt;div class="border"&gt;
1081              &lt;div class="color"&gt;&lt;/div&gt;
1082            &lt;/div&gt;
1083            &lt;p&gt;14k Yellow Gold&lt;/p&gt;
1084          &lt;/div&gt;
1085        &lt;/div&gt;
1086        &lt;div class="card"&gt;
1087          &lt;div class="prodimg"&gt;
1088            &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
1089            &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
1090          &lt;/div&gt;
1091          &lt;div class="desc"&gt;
1092            &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
1093            &lt;p&gt;$120.00&lt;/p&gt;
1094          &lt;/div&gt;
1095          &lt;div class="type"&gt;
1096            &lt;div class="border"&gt;
1097              &lt;div class="color"&gt;&lt;/div&gt;
1098            &lt;/div&gt;
1099            &lt;p&gt;14k Yellow Gold&lt;/p&gt;
1100          &lt;/div&gt;
1101        &lt;/div&gt;
1102        &lt;div class="card"&gt;
1103          &lt;div class="prodimg"&gt;
1104            &lt;img class="primary" src="../assets/img/products/bracelets/solo-diamond/SoloDiamond_bracelet_yg_hero_(1).jpg" alt=""&gt;
1105            &lt;img src="../assets/img/products/bracelets/solo-diamond/solodiamondbracelet.jpg" alt=""&gt;
1106          &lt;/div&gt;
1107          &lt;div class="desc"&gt;
1108            &lt;h3&gt;&lt;a&gt;Circle Bracelet&lt;/a&gt;&lt;/h3&gt;
1109            &lt;p&gt;$120.00&lt;/p&gt;
1110          &lt;/div&gt;
1111          &lt;div class="type"&gt;
1112            &lt;div class="border"&gt;
1113              &lt;div class="color"&gt;&lt;/div&gt;
1114            &lt;/div&gt;
1115            &lt;p&gt;14k Yellow Gold&lt;/p&gt;
1116          &lt;/div&gt;
1117        &lt;/div&gt;
1118      &lt;/div&gt;
1119    &lt;/div&gt;
1120  &lt;/div&gt;
1121  
1122&lt;/section&gt;
1123
1124&lt;div id="foot" class="footer container"&gt;
1125  &lt;div class="logo container"&gt;
1126    &lt;h1&gt;κοσμήματα&lt;/h1&gt;
1127  &lt;/div&gt;
1128  &lt;div class="top"&gt;
1129    &lt;div class="site column"&gt;
1130      &lt;h3&gt;Kosmimata jewelry&lt;/h3&gt;
1131      &lt;p&gt;Accessorise yourself with the best there is&lt;/p&gt;
1132    &lt;/div&gt;
1133    &lt;div class="customer column"&gt;
1134      &lt;h1&gt;Customer Care&lt;/h1&gt;
1135      &lt;ul&gt;
1136        &lt;li&gt;&lt;a href="./faq.html#shipping"&gt;Shipping &amp; Returns&lt;/a&gt;&lt;/li&gt;
1137        &lt;li&gt;&lt;a href="./order-status.html"&gt;Order Status&lt;/a&gt;&lt;/li&gt;
1138        &lt;li&gt;&lt;a href="./faq.html#payment"&gt;Payment Methods&lt;/a&gt;&lt;/li&gt;
1139        &lt;li&gt;&lt;a href="./ring-sizer.html"&gt;Ring Sizer&lt;/a&gt;&lt;/li&gt;
1140      &lt;/ul&gt;
1141    &lt;/div&gt;
1142    &lt;div class="contact column"&gt;
1143      &lt;div class="address"&gt;
1144        &lt;h1&gt;Visit&lt;/h1&gt;
1145        &lt;p&gt;1985 Bel Meadow Drive,&lt;/p&gt;
1146        &lt;p&gt;Los Angeles, California&lt;/p&gt;
1147        &lt;p&gt;90017&lt;/p&gt;
1148      &lt;/div&gt;
1149      &lt;div class="email"&gt;
1150        &lt;a href="mailto:info@kosmimata.com"&gt;info@kosmimata.com&lt;/a&gt;
1151        &lt;a href="tel:+1 213-829-0743"&gt;213-829-0743&lt;/a&gt;
1152      &lt;/div&gt;
1153    &lt;/div&gt;
1154    &lt;div class="sign column"&gt;
1155      &lt;p&gt;Sign up to have insider info on new arrivals, early access and more.&lt;/p&gt;
1156      &lt;div class="input"&gt;
1157        &lt;i class="far fa-envelope"&gt;&lt;/i&gt;
1158        &lt;input type="email" placeholder="Your Email"&gt;
1159        &lt;i class="fas fa-chevron-right"&gt;&lt;/i&gt;
1160      &lt;/div&gt;
1161    &lt;/div&gt;
1162  &lt;/div&gt;
1163  &lt;div class="bottom"&gt;
1164    &lt;div class="socials"&gt;
1165      &lt;a href="./terms&amp;conditions.html"&gt;Terms and Conditions&lt;/a&gt;
1166      &lt;a href="./privacy-policy.html"&gt;Privacy Policy&lt;/a&gt;
1167      &lt;a href="./sitemap.html"&gt;Site Map&lt;/a&gt;
1168      &lt;p&gt;&amp;copy;Kosmimata Inc.&lt;/p&gt;
1169      &lt;div class="icons"&gt;
1170        &lt;a href=""&gt;&lt;i class="fab fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=""&gt;&lt;i class="fab fa-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=""&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
1171      &lt;/div&gt;
1172    &lt;/div&gt;
1173  &lt;/div&gt;
1174&lt;/div&gt;

Source https://stackoverflow.com/questions/70262533

QUESTION

Nginx Php-fpm 7.3 Can't read PHP files from a particular folder

Asked 2021-Dec-08 at 02:38

We have a Magento 2 website. For some reason our Nginx/PHP-FPM is unable to read files from MAGEROOT/pub/ folder other than index.php.

We are getting the following error in Nginx Log "Unable to open primary script: /home/goodprice/public_html/releases/current/pub/get.php (No such file or directory)" and the browser shows No input file specified.

Here is the partial Nginx config file.

1# Run Magento (behind Varnish)
2server {
3    listen 8088;
4
5    server_name {{website name}}.com.au www.{{website name}}.com.au m2.{{website name}}.com.au;
6
7    set $MAGE_ROOT /home/goodprice/public_html/releases/current;
8
9    index index.php;
10    root $MAGE_ROOT/pub;
11    set $code default;
12
13    location /sitemap.xml {
14        root $MAGE_ROOT/pub/media;
15        autoindex off;
16    }
17
18    # Rewrites for edm
19    include /etc/nginx/global/rewrites.conf;
20
21    location / {
22        try_files $uri $uri/ /index.php?$args;
23    }
24
25    # Serve media under /pub/media/
26    location /pub/ {
27        location ~ ^/pub/media/(downloadable|customer|import|theme_customization/.*\.xml) {
28            deny all;
29        }
30        alias $MAGE_ROOT/pub/;
31        add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
32    }
33
34    # Rewrite signed static files
35    rewrite ^/static/(version\d*/)?(.*)$ /static/$2 last;
36
37    # Static assets
38    location ~ ^/static/(version\d*/)?(.*)$ {
39        tcp_nodelay on;
40
41        # Images, CSS, JS
42        location ~* \.(jpg|jpeg|png|gif|svg|js|css|ico|txt)$ {
43                expires max;
44                log_not_found off;
45                access_log off;
46                add_header ETag &quot;&quot;;
47                add_header Access-Control-Allow-Origin &quot;*&quot;;
48                add_header Cache-Control &quot;public&quot;;
49                try_files $uri $uri/ @static;
50        }
51
52        # Fonts
53        location ~* \.(swf|eot|ttf|otf|woff|woff2)$ {
54                expires max;
55                log_not_found off;
56                access_log off;
57                add_header ETag &quot;&quot;;
58                add_header Access-Control-Allow-Origin &quot;*&quot;;
59                add_header Cache-Control &quot;public&quot;;
60                try_files $uri $uri/ @static;
61        }
62
63        # Catch all
64        try_files $uri $uri/ @static;
65    }
66
67    # Media assets
68    location /media/ {
69        tcp_nodelay on;
70        autoindex off;
71
72        # Images, CSS, JS
73        location ~* \.(jpg|jpeg|png|gif|svg|js|css|ico|txt)$ {
74                expires max;
75                log_not_found off;
76                access_log off;
77                add_header ETag &quot;&quot;;
78                add_header Access-Control-Allow-Origin &quot;*&quot;;
79                add_header Cache-Control &quot;public&quot;;
80                try_files $uri $uri/ @media;
81        }
82
83        # Fonts
84        location ~* \.(swf|eot|ttf|otf|woff|woff2)$ {
85                expires max;
86                log_not_found off;
87                access_log off;
88                add_header ETag &quot;&quot;;
89                add_header Access-Control-Allow-Origin &quot;*&quot;;
90                add_header Cache-Control &quot;public&quot;;
91                try_files $uri $uri/ @media;
92        }
93
94        # Catch all
95        try_files $uri $uri/ @media;
96    }
97
98    # Password paths
99    location /media/order_attachments {
100        auth_basic &quot;Restricted&quot;;
101        auth_basic_user_file /etc/nginx/htpasswd;
102    }
103    location /media/convert {
104        auth_basic &quot;Restricted&quot;;
105        auth_basic_user_file /etc/nginx/htpasswd;
106    }
107    # Below prescriptions dir does not contain actual prescriptions
108    #location /media/prescriptions {
109    #    auth_basic &quot;Restricted&quot;;
110    #    auth_basic_user_file /etc/nginx/htpasswd;
111    #}
112    location /media/webforms {
113        auth_basic &quot;Restricted&quot;;
114        auth_basic_user_file /etc/nginx/htpasswd;
115    }
116    location /media/raveinfosys/exporter {
117        auth_basic &quot;Restricted&quot;;
118        auth_basic_user_file /etc/nginx/htpasswd;
119    }
120
121    location @static { rewrite /static/(version\d*/)?(.*)$ /static.php?resource=$2 last; }
122    location @media { try_files $uri $uri/ /get.php$is_args$args; }
123
124    # PHP entry point for setup application
125    location ~* ^/setup($|/) {
126        root $MAGE_ROOT;
127        location ~ ^/setup/index.php {
128            fastcgi_pass fastcgi_backend;
129
130            fastcgi_param  PHP_FLAG  &quot;session.auto_start=off \n suhosin.session.cryptua=off&quot;;
131            fastcgi_param  PHP_VALUE &quot;memory_limit=756M \n max_execution_time=600&quot;;
132            fastcgi_read_timeout 300s;
133            fastcgi_connect_timeout 300s;
134
135            fastcgi_index  index.php;
136            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
137            include        fastcgi_params;
138        }
139
140        location ~ ^/setup/(?!pub/). {
141            deny all;
142        }
143
144        location ~ ^/setup/pub/ {
145            add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
146        }
147    }
148
149    # PHP entry point for update application
150    location ~* ^/update($|/) {
151        root $MAGE_ROOT;
152
153        location ~ ^/update/index.php {
154            fastcgi_split_path_info ^(/update/index.php)(/.+)$;
155            fastcgi_pass fastcgi_backend;
156            fastcgi_index  index.php;
157            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
158            fastcgi_param  PATH_INFO        $fastcgi_path_info;
159            include        fastcgi_params;
160        }
161
162        # Deny everything but index.php
163        location ~ ^/update/(?!pub/). {
164            deny all;
165        }
166
167        location ~ ^/update/pub/ {
168            add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
169        }
170    }
171
172    # Main PHP
173    location ~ (index|get|static|report|404|503|health_check|deploy_clear_opcache)\.php$ {
174        try_files $uri =404;
175
176        fastcgi_pass fastcgi_backend;
177
178        fastcgi_param  PHP_FLAG      &quot;session.auto_start=off \n suhosin.session.cryptua=off&quot;;
179        fastcgi_read_timeout         300s;
180        fastcgi_connect_timeout      300s;
181
182        # fastcgi_param  MAGE_MODE     $MAGE_MODE;
183        fastcgi_param  MAGE_RUN_CODE $code;
184        fastcgi_param  MAGE_RUN_TYPE store;
185
186        # Increase fastcgi buffer size to stop nginx errors on large posts
187        fastcgi_buffers 32 256k;
188        fastcgi_buffer_size 512k;
189
190        fastcgi_index  index.php;
191        fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
192        include        fastcgi_params;
193
194        fastcgi_hide_header  'X-Powered-By';
195    }
196
197    # Return 503 if the maintenance flag is found
198#    if (-f $MAGE_ROOT/var/.maintenance.flag) {
199#        return 503;
200#    }
201#
202#    # Custom 503 error page
203#    error_page 503 @maintenance;
204#
205#    location @maintenance {
206#        root /home/goodprice/public_html/maintenance;
207#        rewrite ^(.*)$ /503.html break;
208#    }
209
210    # Use Magento 403 404 page
211    error_page 403 404 /errors/404.php;
212
213   # Banned locations (only reached if the earlier PHP entry point regexes don't match)
214    location ~* (\.php$|\.htaccess$|\.git) {
215    deny all;
216    }
217}
218

This causes a few problems. One is Magento 2 can't serve the place holder image as it need to execute get.php. It's not a permission issue as index.php is being executed. Can anybody help fix the problem in the above mentioned Nginx config? Any help will much appreciated.

ls -la from pub dir following

1# Run Magento (behind Varnish)
2server {
3    listen 8088;
4
5    server_name {{website name}}.com.au www.{{website name}}.com.au m2.{{website name}}.com.au;
6
7    set $MAGE_ROOT /home/goodprice/public_html/releases/current;
8
9    index index.php;
10    root $MAGE_ROOT/pub;
11    set $code default;
12
13    location /sitemap.xml {
14        root $MAGE_ROOT/pub/media;
15        autoindex off;
16    }
17
18    # Rewrites for edm
19    include /etc/nginx/global/rewrites.conf;
20
21    location / {
22        try_files $uri $uri/ /index.php?$args;
23    }
24
25    # Serve media under /pub/media/
26    location /pub/ {
27        location ~ ^/pub/media/(downloadable|customer|import|theme_customization/.*\.xml) {
28            deny all;
29        }
30        alias $MAGE_ROOT/pub/;
31        add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
32    }
33
34    # Rewrite signed static files
35    rewrite ^/static/(version\d*/)?(.*)$ /static/$2 last;
36
37    # Static assets
38    location ~ ^/static/(version\d*/)?(.*)$ {
39        tcp_nodelay on;
40
41        # Images, CSS, JS
42        location ~* \.(jpg|jpeg|png|gif|svg|js|css|ico|txt)$ {
43                expires max;
44                log_not_found off;
45                access_log off;
46                add_header ETag &quot;&quot;;
47                add_header Access-Control-Allow-Origin &quot;*&quot;;
48                add_header Cache-Control &quot;public&quot;;
49                try_files $uri $uri/ @static;
50        }
51
52        # Fonts
53        location ~* \.(swf|eot|ttf|otf|woff|woff2)$ {
54                expires max;
55                log_not_found off;
56                access_log off;
57                add_header ETag &quot;&quot;;
58                add_header Access-Control-Allow-Origin &quot;*&quot;;
59                add_header Cache-Control &quot;public&quot;;
60                try_files $uri $uri/ @static;
61        }
62
63        # Catch all
64        try_files $uri $uri/ @static;
65    }
66
67    # Media assets
68    location /media/ {
69        tcp_nodelay on;
70        autoindex off;
71
72        # Images, CSS, JS
73        location ~* \.(jpg|jpeg|png|gif|svg|js|css|ico|txt)$ {
74                expires max;
75                log_not_found off;
76                access_log off;
77                add_header ETag &quot;&quot;;
78                add_header Access-Control-Allow-Origin &quot;*&quot;;
79                add_header Cache-Control &quot;public&quot;;
80                try_files $uri $uri/ @media;
81        }
82
83        # Fonts
84        location ~* \.(swf|eot|ttf|otf|woff|woff2)$ {
85                expires max;
86                log_not_found off;
87                access_log off;
88                add_header ETag &quot;&quot;;
89                add_header Access-Control-Allow-Origin &quot;*&quot;;
90                add_header Cache-Control &quot;public&quot;;
91                try_files $uri $uri/ @media;
92        }
93
94        # Catch all
95        try_files $uri $uri/ @media;
96    }
97
98    # Password paths
99    location /media/order_attachments {
100        auth_basic &quot;Restricted&quot;;
101        auth_basic_user_file /etc/nginx/htpasswd;
102    }
103    location /media/convert {
104        auth_basic &quot;Restricted&quot;;
105        auth_basic_user_file /etc/nginx/htpasswd;
106    }
107    # Below prescriptions dir does not contain actual prescriptions
108    #location /media/prescriptions {
109    #    auth_basic &quot;Restricted&quot;;
110    #    auth_basic_user_file /etc/nginx/htpasswd;
111    #}
112    location /media/webforms {
113        auth_basic &quot;Restricted&quot;;
114        auth_basic_user_file /etc/nginx/htpasswd;
115    }
116    location /media/raveinfosys/exporter {
117        auth_basic &quot;Restricted&quot;;
118        auth_basic_user_file /etc/nginx/htpasswd;
119    }
120
121    location @static { rewrite /static/(version\d*/)?(.*)$ /static.php?resource=$2 last; }
122    location @media { try_files $uri $uri/ /get.php$is_args$args; }
123
124    # PHP entry point for setup application
125    location ~* ^/setup($|/) {
126        root $MAGE_ROOT;
127        location ~ ^/setup/index.php {
128            fastcgi_pass fastcgi_backend;
129
130            fastcgi_param  PHP_FLAG  &quot;session.auto_start=off \n suhosin.session.cryptua=off&quot;;
131            fastcgi_param  PHP_VALUE &quot;memory_limit=756M \n max_execution_time=600&quot;;
132            fastcgi_read_timeout 300s;
133            fastcgi_connect_timeout 300s;
134
135            fastcgi_index  index.php;
136            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
137            include        fastcgi_params;
138        }
139
140        location ~ ^/setup/(?!pub/). {
141            deny all;
142        }
143
144        location ~ ^/setup/pub/ {
145            add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
146        }
147    }
148
149    # PHP entry point for update application
150    location ~* ^/update($|/) {
151        root $MAGE_ROOT;
152
153        location ~ ^/update/index.php {
154            fastcgi_split_path_info ^(/update/index.php)(/.+)$;
155            fastcgi_pass fastcgi_backend;
156            fastcgi_index  index.php;
157            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
158            fastcgi_param  PATH_INFO        $fastcgi_path_info;
159            include        fastcgi_params;
160        }
161
162        # Deny everything but index.php
163        location ~ ^/update/(?!pub/). {
164            deny all;
165        }
166
167        location ~ ^/update/pub/ {
168            add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
169        }
170    }
171
172    # Main PHP
173    location ~ (index|get|static|report|404|503|health_check|deploy_clear_opcache)\.php$ {
174        try_files $uri =404;
175
176        fastcgi_pass fastcgi_backend;
177
178        fastcgi_param  PHP_FLAG      &quot;session.auto_start=off \n suhosin.session.cryptua=off&quot;;
179        fastcgi_read_timeout         300s;
180        fastcgi_connect_timeout      300s;
181
182        # fastcgi_param  MAGE_MODE     $MAGE_MODE;
183        fastcgi_param  MAGE_RUN_CODE $code;
184        fastcgi_param  MAGE_RUN_TYPE store;
185
186        # Increase fastcgi buffer size to stop nginx errors on large posts
187        fastcgi_buffers 32 256k;
188        fastcgi_buffer_size 512k;
189
190        fastcgi_index  index.php;
191        fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
192        include        fastcgi_params;
193
194        fastcgi_hide_header  'X-Powered-By';
195    }
196
197    # Return 503 if the maintenance flag is found
198#    if (-f $MAGE_ROOT/var/.maintenance.flag) {
199#        return 503;
200#    }
201#
202#    # Custom 503 error page
203#    error_page 503 @maintenance;
204#
205#    location @maintenance {
206#        root /home/goodprice/public_html/maintenance;
207#        rewrite ^(.*)$ /503.html break;
208#    }
209
210    # Use Magento 403 404 page
211    error_page 403 404 /errors/404.php;
212
213   # Banned locations (only reached if the earlier PHP entry point regexes don't match)
214    location ~* (\.php$|\.htaccess$|\.git) {
215    deny all;
216    }
217}
218drwxr-xr-x  6 goodprice goodprice 4096 Nov 24 16:16 .
219drwxr-xr-x 16 goodprice goodprice 4096 Nov 30 12:11 ..
220-rw-rw-r--  1 goodprice goodprice 1038 Nov 11 01:12 cron.php
221-rwxrwxr-x  1 goodprice goodprice  102 Nov 10 23:04 deploy_clear_opcache.php
222drwxrwxr-x  3 goodprice goodprice 4096 Nov 11 01:12 errors
223-rw-rw-r--  1 goodprice goodprice 2775 Nov 24 16:16 get.php
224-rw-rw-r--  1 goodprice goodprice 3329 Nov 11 01:12 health_check.php
225-rw-rw-r--  1 goodprice goodprice 6206 Nov 11 01:12 .htaccess
226-rw-r--r--  1 goodprice goodprice 1360 Nov 12 11:49 index.php
227-rw-rw-r--  1 goodprice goodprice  169 Jan 10  2021 info.php
228drwxrwxr-x 67 goodprice goodprice 4096 Nov 29 00:01 media
229drwxrwxr-x  3 goodprice goodprice 4096 Nov 11 01:12 opt
230drwxr-xr-x  4 goodprice goodprice 4096 Nov 30 13:12 static
231-rw-rw-r--  1 goodprice goodprice  445 Nov 11 01:12 static.php
232-rw-rw-r--  1 goodprice goodprice  101 Nov 11 01:12 .user.ini
233

Php Fpm conf.d file extract users and groups.

1# Run Magento (behind Varnish)
2server {
3    listen 8088;
4
5    server_name {{website name}}.com.au www.{{website name}}.com.au m2.{{website name}}.com.au;
6
7    set $MAGE_ROOT /home/goodprice/public_html/releases/current;
8
9    index index.php;
10    root $MAGE_ROOT/pub;
11    set $code default;
12
13    location /sitemap.xml {
14        root $MAGE_ROOT/pub/media;
15        autoindex off;
16    }
17
18    # Rewrites for edm
19    include /etc/nginx/global/rewrites.conf;
20
21    location / {
22        try_files $uri $uri/ /index.php?$args;
23    }
24
25    # Serve media under /pub/media/
26    location /pub/ {
27        location ~ ^/pub/media/(downloadable|customer|import|theme_customization/.*\.xml) {
28            deny all;
29        }
30        alias $MAGE_ROOT/pub/;
31        add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
32    }
33
34    # Rewrite signed static files
35    rewrite ^/static/(version\d*/)?(.*)$ /static/$2 last;
36
37    # Static assets
38    location ~ ^/static/(version\d*/)?(.*)$ {
39        tcp_nodelay on;
40
41        # Images, CSS, JS
42        location ~* \.(jpg|jpeg|png|gif|svg|js|css|ico|txt)$ {
43                expires max;
44                log_not_found off;
45                access_log off;
46                add_header ETag &quot;&quot;;
47                add_header Access-Control-Allow-Origin &quot;*&quot;;
48                add_header Cache-Control &quot;public&quot;;
49                try_files $uri $uri/ @static;
50        }
51
52        # Fonts
53        location ~* \.(swf|eot|ttf|otf|woff|woff2)$ {
54                expires max;
55                log_not_found off;
56                access_log off;
57                add_header ETag &quot;&quot;;
58                add_header Access-Control-Allow-Origin &quot;*&quot;;
59                add_header Cache-Control &quot;public&quot;;
60                try_files $uri $uri/ @static;
61        }
62
63        # Catch all
64        try_files $uri $uri/ @static;
65    }
66
67    # Media assets
68    location /media/ {
69        tcp_nodelay on;
70        autoindex off;
71
72        # Images, CSS, JS
73        location ~* \.(jpg|jpeg|png|gif|svg|js|css|ico|txt)$ {
74                expires max;
75                log_not_found off;
76                access_log off;
77                add_header ETag &quot;&quot;;
78                add_header Access-Control-Allow-Origin &quot;*&quot;;
79                add_header Cache-Control &quot;public&quot;;
80                try_files $uri $uri/ @media;
81        }
82
83        # Fonts
84        location ~* \.(swf|eot|ttf|otf|woff|woff2)$ {
85                expires max;
86                log_not_found off;
87                access_log off;
88                add_header ETag &quot;&quot;;
89                add_header Access-Control-Allow-Origin &quot;*&quot;;
90                add_header Cache-Control &quot;public&quot;;
91                try_files $uri $uri/ @media;
92        }
93
94        # Catch all
95        try_files $uri $uri/ @media;
96    }
97
98    # Password paths
99    location /media/order_attachments {
100        auth_basic &quot;Restricted&quot;;
101        auth_basic_user_file /etc/nginx/htpasswd;
102    }
103    location /media/convert {
104        auth_basic &quot;Restricted&quot;;
105        auth_basic_user_file /etc/nginx/htpasswd;
106    }
107    # Below prescriptions dir does not contain actual prescriptions
108    #location /media/prescriptions {
109    #    auth_basic &quot;Restricted&quot;;
110    #    auth_basic_user_file /etc/nginx/htpasswd;
111    #}
112    location /media/webforms {
113        auth_basic &quot;Restricted&quot;;
114        auth_basic_user_file /etc/nginx/htpasswd;
115    }
116    location /media/raveinfosys/exporter {
117        auth_basic &quot;Restricted&quot;;
118        auth_basic_user_file /etc/nginx/htpasswd;
119    }
120
121    location @static { rewrite /static/(version\d*/)?(.*)$ /static.php?resource=$2 last; }
122    location @media { try_files $uri $uri/ /get.php$is_args$args; }
123
124    # PHP entry point for setup application
125    location ~* ^/setup($|/) {
126        root $MAGE_ROOT;
127        location ~ ^/setup/index.php {
128            fastcgi_pass fastcgi_backend;
129
130            fastcgi_param  PHP_FLAG  &quot;session.auto_start=off \n suhosin.session.cryptua=off&quot;;
131            fastcgi_param  PHP_VALUE &quot;memory_limit=756M \n max_execution_time=600&quot;;
132            fastcgi_read_timeout 300s;
133            fastcgi_connect_timeout 300s;
134
135            fastcgi_index  index.php;
136            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
137            include        fastcgi_params;
138        }
139
140        location ~ ^/setup/(?!pub/). {
141            deny all;
142        }
143
144        location ~ ^/setup/pub/ {
145            add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
146        }
147    }
148
149    # PHP entry point for update application
150    location ~* ^/update($|/) {
151        root $MAGE_ROOT;
152
153        location ~ ^/update/index.php {
154            fastcgi_split_path_info ^(/update/index.php)(/.+)$;
155            fastcgi_pass fastcgi_backend;
156            fastcgi_index  index.php;
157            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
158            fastcgi_param  PATH_INFO        $fastcgi_path_info;
159            include        fastcgi_params;
160        }
161
162        # Deny everything but index.php
163        location ~ ^/update/(?!pub/). {
164            deny all;
165        }
166
167        location ~ ^/update/pub/ {
168            add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
169        }
170    }
171
172    # Main PHP
173    location ~ (index|get|static|report|404|503|health_check|deploy_clear_opcache)\.php$ {
174        try_files $uri =404;
175
176        fastcgi_pass fastcgi_backend;
177
178        fastcgi_param  PHP_FLAG      &quot;session.auto_start=off \n suhosin.session.cryptua=off&quot;;
179        fastcgi_read_timeout         300s;
180        fastcgi_connect_timeout      300s;
181
182        # fastcgi_param  MAGE_MODE     $MAGE_MODE;
183        fastcgi_param  MAGE_RUN_CODE $code;
184        fastcgi_param  MAGE_RUN_TYPE store;
185
186        # Increase fastcgi buffer size to stop nginx errors on large posts
187        fastcgi_buffers 32 256k;
188        fastcgi_buffer_size 512k;
189
190        fastcgi_index  index.php;
191        fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
192        include        fastcgi_params;
193
194        fastcgi_hide_header  'X-Powered-By';
195    }
196
197    # Return 503 if the maintenance flag is found
198#    if (-f $MAGE_ROOT/var/.maintenance.flag) {
199#        return 503;
200#    }
201#
202#    # Custom 503 error page
203#    error_page 503 @maintenance;
204#
205#    location @maintenance {
206#        root /home/goodprice/public_html/maintenance;
207#        rewrite ^(.*)$ /503.html break;
208#    }
209
210    # Use Magento 403 404 page
211    error_page 403 404 /errors/404.php;
212
213   # Banned locations (only reached if the earlier PHP entry point regexes don't match)
214    location ~* (\.php$|\.htaccess$|\.git) {
215    deny all;
216    }
217}
218drwxr-xr-x  6 goodprice goodprice 4096 Nov 24 16:16 .
219drwxr-xr-x 16 goodprice goodprice 4096 Nov 30 12:11 ..
220-rw-rw-r--  1 goodprice goodprice 1038 Nov 11 01:12 cron.php
221-rwxrwxr-x  1 goodprice goodprice  102 Nov 10 23:04 deploy_clear_opcache.php
222drwxrwxr-x  3 goodprice goodprice 4096 Nov 11 01:12 errors
223-rw-rw-r--  1 goodprice goodprice 2775 Nov 24 16:16 get.php
224-rw-rw-r--  1 goodprice goodprice 3329 Nov 11 01:12 health_check.php
225-rw-rw-r--  1 goodprice goodprice 6206 Nov 11 01:12 .htaccess
226-rw-r--r--  1 goodprice goodprice 1360 Nov 12 11:49 index.php
227-rw-rw-r--  1 goodprice goodprice  169 Jan 10  2021 info.php
228drwxrwxr-x 67 goodprice goodprice 4096 Nov 29 00:01 media
229drwxrwxr-x  3 goodprice goodprice 4096 Nov 11 01:12 opt
230drwxr-xr-x  4 goodprice goodprice 4096 Nov 30 13:12 static
231-rw-rw-r--  1 goodprice goodprice  445 Nov 11 01:12 static.php
232-rw-rw-r--  1 goodprice goodprice  101 Nov 11 01:12 .user.ini
233group = &quot;goodprice&quot;
234listen.group = &quot;nobody&quot;
235listen.mode = 0660
236listen.owner = &quot;goodprice&quot;
237user = &quot;goodprice&quot;
238

nginx.conf as following

1# Run Magento (behind Varnish)
2server {
3    listen 8088;
4
5    server_name {{website name}}.com.au www.{{website name}}.com.au m2.{{website name}}.com.au;
6
7    set $MAGE_ROOT /home/goodprice/public_html/releases/current;
8
9    index index.php;
10    root $MAGE_ROOT/pub;
11    set $code default;
12
13    location /sitemap.xml {
14        root $MAGE_ROOT/pub/media;
15        autoindex off;
16    }
17
18    # Rewrites for edm
19    include /etc/nginx/global/rewrites.conf;
20
21    location / {
22        try_files $uri $uri/ /index.php?$args;
23    }
24
25    # Serve media under /pub/media/
26    location /pub/ {
27        location ~ ^/pub/media/(downloadable|customer|import|theme_customization/.*\.xml) {
28            deny all;
29        }
30        alias $MAGE_ROOT/pub/;
31        add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
32    }
33
34    # Rewrite signed static files
35    rewrite ^/static/(version\d*/)?(.*)$ /static/$2 last;
36
37    # Static assets
38    location ~ ^/static/(version\d*/)?(.*)$ {
39        tcp_nodelay on;
40
41        # Images, CSS, JS
42        location ~* \.(jpg|jpeg|png|gif|svg|js|css|ico|txt)$ {
43                expires max;
44                log_not_found off;
45                access_log off;
46                add_header ETag &quot;&quot;;
47                add_header Access-Control-Allow-Origin &quot;*&quot;;
48                add_header Cache-Control &quot;public&quot;;
49                try_files $uri $uri/ @static;
50        }
51
52        # Fonts
53        location ~* \.(swf|eot|ttf|otf|woff|woff2)$ {
54                expires max;
55                log_not_found off;
56                access_log off;
57                add_header ETag &quot;&quot;;
58                add_header Access-Control-Allow-Origin &quot;*&quot;;
59                add_header Cache-Control &quot;public&quot;;
60                try_files $uri $uri/ @static;
61        }
62
63        # Catch all
64        try_files $uri $uri/ @static;
65    }
66
67    # Media assets
68    location /media/ {
69        tcp_nodelay on;
70        autoindex off;
71
72        # Images, CSS, JS
73        location ~* \.(jpg|jpeg|png|gif|svg|js|css|ico|txt)$ {
74                expires max;
75                log_not_found off;
76                access_log off;
77                add_header ETag &quot;&quot;;
78                add_header Access-Control-Allow-Origin &quot;*&quot;;
79                add_header Cache-Control &quot;public&quot;;
80                try_files $uri $uri/ @media;
81        }
82
83        # Fonts
84        location ~* \.(swf|eot|ttf|otf|woff|woff2)$ {
85                expires max;
86                log_not_found off;
87                access_log off;
88                add_header ETag &quot;&quot;;
89                add_header Access-Control-Allow-Origin &quot;*&quot;;
90                add_header Cache-Control &quot;public&quot;;
91                try_files $uri $uri/ @media;
92        }
93
94        # Catch all
95        try_files $uri $uri/ @media;
96    }
97
98    # Password paths
99    location /media/order_attachments {
100        auth_basic &quot;Restricted&quot;;
101        auth_basic_user_file /etc/nginx/htpasswd;
102    }
103    location /media/convert {
104        auth_basic &quot;Restricted&quot;;
105        auth_basic_user_file /etc/nginx/htpasswd;
106    }
107    # Below prescriptions dir does not contain actual prescriptions
108    #location /media/prescriptions {
109    #    auth_basic &quot;Restricted&quot;;
110    #    auth_basic_user_file /etc/nginx/htpasswd;
111    #}
112    location /media/webforms {
113        auth_basic &quot;Restricted&quot;;
114        auth_basic_user_file /etc/nginx/htpasswd;
115    }
116    location /media/raveinfosys/exporter {
117        auth_basic &quot;Restricted&quot;;
118        auth_basic_user_file /etc/nginx/htpasswd;
119    }
120
121    location @static { rewrite /static/(version\d*/)?(.*)$ /static.php?resource=$2 last; }
122    location @media { try_files $uri $uri/ /get.php$is_args$args; }
123
124    # PHP entry point for setup application
125    location ~* ^/setup($|/) {
126        root $MAGE_ROOT;
127        location ~ ^/setup/index.php {
128            fastcgi_pass fastcgi_backend;
129
130            fastcgi_param  PHP_FLAG  &quot;session.auto_start=off \n suhosin.session.cryptua=off&quot;;
131            fastcgi_param  PHP_VALUE &quot;memory_limit=756M \n max_execution_time=600&quot;;
132            fastcgi_read_timeout 300s;
133            fastcgi_connect_timeout 300s;
134
135            fastcgi_index  index.php;
136            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
137            include        fastcgi_params;
138        }
139
140        location ~ ^/setup/(?!pub/). {
141            deny all;
142        }
143
144        location ~ ^/setup/pub/ {
145            add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
146        }
147    }
148
149    # PHP entry point for update application
150    location ~* ^/update($|/) {
151        root $MAGE_ROOT;
152
153        location ~ ^/update/index.php {
154            fastcgi_split_path_info ^(/update/index.php)(/.+)$;
155            fastcgi_pass fastcgi_backend;
156            fastcgi_index  index.php;
157            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
158            fastcgi_param  PATH_INFO        $fastcgi_path_info;
159            include        fastcgi_params;
160        }
161
162        # Deny everything but index.php
163        location ~ ^/update/(?!pub/). {
164            deny all;
165        }
166
167        location ~ ^/update/pub/ {
168            add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
169        }
170    }
171
172    # Main PHP
173    location ~ (index|get|static|report|404|503|health_check|deploy_clear_opcache)\.php$ {
174        try_files $uri =404;
175
176        fastcgi_pass fastcgi_backend;
177
178        fastcgi_param  PHP_FLAG      &quot;session.auto_start=off \n suhosin.session.cryptua=off&quot;;
179        fastcgi_read_timeout         300s;
180        fastcgi_connect_timeout      300s;
181
182        # fastcgi_param  MAGE_MODE     $MAGE_MODE;
183        fastcgi_param  MAGE_RUN_CODE $code;
184        fastcgi_param  MAGE_RUN_TYPE store;
185
186        # Increase fastcgi buffer size to stop nginx errors on large posts
187        fastcgi_buffers 32 256k;
188        fastcgi_buffer_size 512k;
189
190        fastcgi_index  index.php;
191        fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
192        include        fastcgi_params;
193
194        fastcgi_hide_header  'X-Powered-By';
195    }
196
197    # Return 503 if the maintenance flag is found
198#    if (-f $MAGE_ROOT/var/.maintenance.flag) {
199#        return 503;
200#    }
201#
202#    # Custom 503 error page
203#    error_page 503 @maintenance;
204#
205#    location @maintenance {
206#        root /home/goodprice/public_html/maintenance;
207#        rewrite ^(.*)$ /503.html break;
208#    }
209
210    # Use Magento 403 404 page
211    error_page 403 404 /errors/404.php;
212
213   # Banned locations (only reached if the earlier PHP entry point regexes don't match)
214    location ~* (\.php$|\.htaccess$|\.git) {
215    deny all;
216    }
217}
218drwxr-xr-x  6 goodprice goodprice 4096 Nov 24 16:16 .
219drwxr-xr-x 16 goodprice goodprice 4096 Nov 30 12:11 ..
220-rw-rw-r--  1 goodprice goodprice 1038 Nov 11 01:12 cron.php
221-rwxrwxr-x  1 goodprice goodprice  102 Nov 10 23:04 deploy_clear_opcache.php
222drwxrwxr-x  3 goodprice goodprice 4096 Nov 11 01:12 errors
223-rw-rw-r--  1 goodprice goodprice 2775 Nov 24 16:16 get.php
224-rw-rw-r--  1 goodprice goodprice 3329 Nov 11 01:12 health_check.php
225-rw-rw-r--  1 goodprice goodprice 6206 Nov 11 01:12 .htaccess
226-rw-r--r--  1 goodprice goodprice 1360 Nov 12 11:49 index.php
227-rw-rw-r--  1 goodprice goodprice  169 Jan 10  2021 info.php
228drwxrwxr-x 67 goodprice goodprice 4096 Nov 29 00:01 media
229drwxrwxr-x  3 goodprice goodprice 4096 Nov 11 01:12 opt
230drwxr-xr-x  4 goodprice goodprice 4096 Nov 30 13:12 static
231-rw-rw-r--  1 goodprice goodprice  445 Nov 11 01:12 static.php
232-rw-rw-r--  1 goodprice goodprice  101 Nov 11 01:12 .user.ini
233group = &quot;goodprice&quot;
234listen.group = &quot;nobody&quot;
235listen.mode = 0660
236listen.owner = &quot;goodprice&quot;
237user = &quot;goodprice&quot;
238include /etc/nginx/conf.d/modules/*.conf;
239
240user nobody;
241
242worker_processes  1;
243worker_rlimit_nofile 16384;
244
245error_log  /var/log/nginx/error.log warn;
246pid        /var/run/nginx.pid;
247
248
249events {
250    worker_connections  1024;
251}
252
253
254http {
255    include       /etc/nginx/mime.types;
256    default_type  application/octet-stream;
257
258    log_format  main  '$remote_addr - $remote_user [$time_local] &quot;$request&quot; '
259                      '$status $body_bytes_sent &quot;$http_referer&quot; '
260                      '&quot;$http_user_agent&quot; &quot;$http_x_forwarded_for&quot;';
261
262    access_log  /var/log/nginx/access.log  main;
263
264    sendfile        on;
265    #tcp_nopush     on;
266
267    keepalive_timeout  65;
268
269    #gzip  on;
270
271    include /etc/nginx/conf.d/*.conf;
272    include /etc/nginx/conf.d-custom/*.conf;
273}
274

ANSWER

Answered 2021-Dec-05 at 07:13

change the file permissions to

1# Run Magento (behind Varnish)
2server {
3    listen 8088;
4
5    server_name {{website name}}.com.au www.{{website name}}.com.au m2.{{website name}}.com.au;
6
7    set $MAGE_ROOT /home/goodprice/public_html/releases/current;
8
9    index index.php;
10    root $MAGE_ROOT/pub;
11    set $code default;
12
13    location /sitemap.xml {
14        root $MAGE_ROOT/pub/media;
15        autoindex off;
16    }
17
18    # Rewrites for edm
19    include /etc/nginx/global/rewrites.conf;
20
21    location / {
22        try_files $uri $uri/ /index.php?$args;
23    }
24
25    # Serve media under /pub/media/
26    location /pub/ {
27        location ~ ^/pub/media/(downloadable|customer|import|theme_customization/.*\.xml) {
28            deny all;
29        }
30        alias $MAGE_ROOT/pub/;
31        add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
32    }
33
34    # Rewrite signed static files
35    rewrite ^/static/(version\d*/)?(.*)$ /static/$2 last;
36
37    # Static assets
38    location ~ ^/static/(version\d*/)?(.*)$ {
39        tcp_nodelay on;
40
41        # Images, CSS, JS
42        location ~* \.(jpg|jpeg|png|gif|svg|js|css|ico|txt)$ {
43                expires max;
44                log_not_found off;
45                access_log off;
46                add_header ETag &quot;&quot;;
47                add_header Access-Control-Allow-Origin &quot;*&quot;;
48                add_header Cache-Control &quot;public&quot;;
49                try_files $uri $uri/ @static;
50        }
51
52        # Fonts
53        location ~* \.(swf|eot|ttf|otf|woff|woff2)$ {
54                expires max;
55                log_not_found off;
56                access_log off;
57                add_header ETag &quot;&quot;;
58                add_header Access-Control-Allow-Origin &quot;*&quot;;
59                add_header Cache-Control &quot;public&quot;;
60                try_files $uri $uri/ @static;
61        }
62
63        # Catch all
64        try_files $uri $uri/ @static;
65    }
66
67    # Media assets
68    location /media/ {
69        tcp_nodelay on;
70        autoindex off;
71
72        # Images, CSS, JS
73        location ~* \.(jpg|jpeg|png|gif|svg|js|css|ico|txt)$ {
74                expires max;
75                log_not_found off;
76                access_log off;
77                add_header ETag &quot;&quot;;
78                add_header Access-Control-Allow-Origin &quot;*&quot;;
79                add_header Cache-Control &quot;public&quot;;
80                try_files $uri $uri/ @media;
81        }
82
83        # Fonts
84        location ~* \.(swf|eot|ttf|otf|woff|woff2)$ {
85                expires max;
86                log_not_found off;
87                access_log off;
88                add_header ETag &quot;&quot;;
89                add_header Access-Control-Allow-Origin &quot;*&quot;;
90                add_header Cache-Control &quot;public&quot;;
91                try_files $uri $uri/ @media;
92        }
93
94        # Catch all
95        try_files $uri $uri/ @media;
96    }
97
98    # Password paths
99    location /media/order_attachments {
100        auth_basic &quot;Restricted&quot;;
101        auth_basic_user_file /etc/nginx/htpasswd;
102    }
103    location /media/convert {
104        auth_basic &quot;Restricted&quot;;
105        auth_basic_user_file /etc/nginx/htpasswd;
106    }
107    # Below prescriptions dir does not contain actual prescriptions
108    #location /media/prescriptions {
109    #    auth_basic &quot;Restricted&quot;;
110    #    auth_basic_user_file /etc/nginx/htpasswd;
111    #}
112    location /media/webforms {
113        auth_basic &quot;Restricted&quot;;
114        auth_basic_user_file /etc/nginx/htpasswd;
115    }
116    location /media/raveinfosys/exporter {
117        auth_basic &quot;Restricted&quot;;
118        auth_basic_user_file /etc/nginx/htpasswd;
119    }
120
121    location @static { rewrite /static/(version\d*/)?(.*)$ /static.php?resource=$2 last; }
122    location @media { try_files $uri $uri/ /get.php$is_args$args; }
123
124    # PHP entry point for setup application
125    location ~* ^/setup($|/) {
126        root $MAGE_ROOT;
127        location ~ ^/setup/index.php {
128            fastcgi_pass fastcgi_backend;
129
130            fastcgi_param  PHP_FLAG  &quot;session.auto_start=off \n suhosin.session.cryptua=off&quot;;
131            fastcgi_param  PHP_VALUE &quot;memory_limit=756M \n max_execution_time=600&quot;;
132            fastcgi_read_timeout 300s;
133            fastcgi_connect_timeout 300s;
134
135            fastcgi_index  index.php;
136            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
137            include        fastcgi_params;
138        }
139
140        location ~ ^/setup/(?!pub/). {
141            deny all;
142        }
143
144        location ~ ^/setup/pub/ {
145            add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
146        }
147    }
148
149    # PHP entry point for update application
150    location ~* ^/update($|/) {
151        root $MAGE_ROOT;
152
153        location ~ ^/update/index.php {
154            fastcgi_split_path_info ^(/update/index.php)(/.+)$;
155            fastcgi_pass fastcgi_backend;
156            fastcgi_index  index.php;
157            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
158            fastcgi_param  PATH_INFO        $fastcgi_path_info;
159            include        fastcgi_params;
160        }
161
162        # Deny everything but index.php
163        location ~ ^/update/(?!pub/). {
164            deny all;
165        }
166
167        location ~ ^/update/pub/ {
168            add_header X-Frame-Options &quot;SAMEORIGIN&quot;;
169        }
170    }
171
172    # Main PHP
173    location ~ (index|get|static|report|404|503|health_check|deploy_clear_opcache)\.php$ {
174        try_files $uri =404;
175
176        fastcgi_pass fastcgi_backend;
177
178        fastcgi_param  PHP_FLAG      &quot;session.auto_start=off \n suhosin.session.cryptua=off&quot;;
179        fastcgi_read_timeout         300s;
180        fastcgi_connect_timeout      300s;
181
182        # fastcgi_param  MAGE_MODE     $MAGE_MODE;
183        fastcgi_param  MAGE_RUN_CODE $code;
184        fastcgi_param  MAGE_RUN_TYPE store;
185
186        # Increase fastcgi buffer size to stop nginx errors on large posts
187        fastcgi_buffers 32 256k;
188        fastcgi_buffer_size 512k;
189
190        fastcgi_index  index.php;
191        fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
192        include        fastcgi_params;
193
194        fastcgi_hide_header  'X-Powered-By';
195    }
196
197    # Return 503 if the maintenance flag is found
198#    if (-f $MAGE_ROOT/var/.maintenance.flag) {
199#        return 503;
200#    }
201#
202#    # Custom 503 error page
203#    error_page 503 @maintenance;
204#
205#    location @maintenance {
206#        root /home/goodprice/public_html/maintenance;
207#        rewrite ^(.*)$ /503.html break;
208#    }
209
210    # Use Magento 403 404 page
211    error_page 403 404 /errors/404.php;
212
213   # Banned locations (only reached if the earlier PHP entry point regexes don't match)
214    location ~* (\.php$|\.htaccess$|\.git) {
215    deny all;
216    }
217}
218drwxr-xr-x  6 goodprice goodprice 4096 Nov 24 16:16 .
219drwxr-xr-x 16 goodprice goodprice 4096 Nov 30 12:11 ..
220-rw-rw-r--  1 goodprice goodprice 1038 Nov 11 01:12 cron.php
221-rwxrwxr-x  1 goodprice goodprice  102 Nov 10 23:04 deploy_clear_opcache.php
222drwxrwxr-x  3 goodprice goodprice 4096 Nov 11 01:12 errors
223-rw-rw-r--  1 goodprice goodprice 2775 Nov 24 16:16 get.php
224-rw-rw-r--  1 goodprice goodprice 3329 Nov 11 01:12 health_check.php
225-rw-rw-r--  1 goodprice goodprice 6206 Nov 11 01:12 .htaccess
226-rw-r--r--  1 goodprice goodprice 1360 Nov 12 11:49 index.php
227-rw-rw-r--  1 goodprice goodprice  169 Jan 10  2021 info.php
228drwxrwxr-x 67 goodprice goodprice 4096 Nov 29 00:01 media
229drwxrwxr-x  3 goodprice goodprice 4096 Nov 11 01:12 opt
230drwxr-xr-x  4 goodprice goodprice 4096 Nov 30 13:12 static
231-rw-rw-r--  1 goodprice goodprice  445 Nov 11 01:12 static.php
232-rw-rw-r--  1 goodprice goodprice  101 Nov 11 01:12 .user.ini
233group = &quot;goodprice&quot;
234listen.group = &quot;nobody&quot;
235listen.mode = 0660
236listen.owner = &quot;goodprice&quot;
237user = &quot;goodprice&quot;
238include /etc/nginx/conf.d/modules/*.conf;
239
240user nobody;
241
242worker_processes  1;
243worker_rlimit_nofile 16384;
244
245error_log  /var/log/nginx/error.log warn;
246pid        /var/run/nginx.pid;
247
248
249events {
250    worker_connections  1024;
251}
252
253
254http {
255    include       /etc/nginx/mime.types;
256    default_type  application/octet-stream;
257
258    log_format  main  '$remote_addr - $remote_user [$time_local] &quot;$request&quot; '
259                      '$status $body_bytes_sent &quot;$http_referer&quot; '
260                      '&quot;$http_user_agent&quot; &quot;$http_x_forwarded_for&quot;';
261
262    access_log  /var/log/nginx/access.log  main;
263
264    sendfile        on;
265    #tcp_nopush     on;
266
267    keepalive_timeout  65;
268
269    #gzip  on;
270
271    include /etc/nginx/conf.d/*.conf;
272    include /etc/nginx/conf.d-custom/*.conf;
273}
274-rw-r-xr-x  1 goodprice goodprice 2775 Nov 24 16:16 get.php
275
276chmod 755
277

BTW, if this is a parked domain then your issue will have a different twist to it because NginX does not behave as smoothly has Apache in multiple domains.

Source https://stackoverflow.com/questions/70111124

Community Discussions contain sources that include Stack Exchange Network