LeafPig/Web-Dev-Old
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lesson 9

Browse Source
This commit is contained in:
tuffahni
2025-01-03 17:45:23 +00:00
parent a477fc711d
commit a95a0e5ad0
1564 changed files with 1315 additions and 747 deletions
Download Patch File Download Diff File Expand all files Collapse all files

344
nodeJS/Learning/07/app/public/css/pages/index.css
View File

@@ -63,41 +63,49 @@ h6 {
transform: translateY(0); /* End at its normal position */
}
}
body {
margin: 0px;
body,
html {
margin: 0;
padding: 0;
box-sizing: border-box;
background: linear-gradient(to top right, #3b3561, rgb(191.3, 187.1, 217.9));
height: 100vh;
overflow: hidden;
}
.blog {
text-align: center;
body .container,
html .container {
display: flex;
justify-content: center;
margin-bottom: 50px;
margin: 0px 50px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 20px;
height: 100vh;
}
.blog .div1 {
grid-area: 1/1/3/3;
padding-top: 160px;
body .container .div1,
html .container .div1 {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
padding: 200px 0px 0px 0px;
justify-content: center;
flex-direction: column;
/* General button styling */
}
.blog .div1 h1 {
body .container .div1 h1,
html .container .div1 h1 {
font-size: 60px;
color: #f7ebec;
font-family: "Lexend", serif;
font-weight: 300;
padding-bottom: 20px;
padding: 80px 0px 0px 45px;
}
.blog .div1 .read-more-btn {
body .container .div1 p,
html .container .div1 p {
font-family: "Space Grotesk", monospace;
color: #3b3561;
font-size: 13px;
text-align: center;
max-width: 560px;
margin-top: 20px;
padding: 0px 0px 0px 50px;
}
body .container .div1 .read-more-btn,
html .container .div1 .read-more-btn {
display: inline-flex; /* Flex container for text and icon */
align-items: center; /* Center text and icon vertically */
justify-content: center; /* Center content horizontally */
@@ -111,12 +119,15 @@ body {
background-color: #f7ebec; /* Transparent background */
cursor: pointer; /* Pointer cursor on hover */
transition: all 0.3s ease; /* Smooth transition on hover */
margin-top: 25px; /* Space between text and next element */
}
.blog .div1 .read-more-btn:hover {
body .container .div1 .read-more-btn:hover,
html .container .div1 .read-more-btn:hover {
background-color: #3b3561; /* Change background color on hover */
color: #f7ebec; /* Change text color on hover */
}
.blog .div1 .read-more-btn .icon {
body .container .div1 .read-more-btn .icon,
html .container .div1 .read-more-btn .icon {
display: flex; /* Flex for the icon */
align-items: center;
justify-content: center;
@@ -128,11 +139,13 @@ body {
border-radius: 50%; /* Make the icon circular */
transition: all 0.3s ease; /* Smooth transition on hover */
}
.blog .div1 .read-more-btn:hover .icon {
body .container .div1 .read-more-btn:hover .icon,
html .container .div1 .read-more-btn:hover .icon {
background-color: #f7ebec; /* Change circle background on hover */
color: #3b3561; /* Change arrow color on hover */
}
.blog .div1 .buttons {
body .container .div1 .buttons,
html .container .div1 .buttons {
display: flex;
flex-direction: column;
align-items: left;
@@ -142,76 +155,85 @@ body {
padding-right: 85px;
margin-top: 20px;
}
.blog .div1 .buttons button {
body .container .div1 .buttons button,
html .container .div1 .buttons button {
padding: 3.5px 23px;
margin: 80px;
font-size: 16px;
font-family: "Space Grotesk", monospace;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.blog .div1 .buttons button.psyc-button {
background-color: #ddbdd5;
color: #3b3561;
margin: 0px 0px 0px 70px;
}
.blog .div1 .buttons button.psyc-button:hover {
body .container .div1 .buttons button.psyc-button,
html .container .div1 .buttons button.psyc-button {
background-color: #ddbdd5;
color: #3b3561;
}
body .container .div1 .buttons button.psyc-button:hover,
html .container .div1 .buttons button.psyc-button:hover {
background-color: rgb(203.66, 155.34, 191.58);
transform: scale(1.05);
}
.blog .div1 .buttons button.imp-button {
body .container .div1 .buttons button.imp-button,
html .container .div1 .buttons button.imp-button {
background-color: #4b8f8c;
color: white;
margin: 0px 0px 0px 70px;
}
.blog .div1 .buttons button.imp-button:hover {
body .container .div1 .buttons button.imp-button:hover,
html .container .div1 .buttons button.imp-button:hover {
background-color: rgb(57.4541284404, 109.5458715596, 107.247706422);
transform: scale(1.05);
}
.blog .div1 .buttons button.code-button {
body .container .div1 .buttons button.spirit-button,
html .container .div1 .buttons button.spirit-button {
background-color: #f7ebec;
color: #3b3561;
}
body .container .div1 .buttons button.spirit-button:hover,
html .container .div1 .buttons button.spirit-button:hover {
background-color: rgb(222.24, 220.08, 235.92);
transform: scale(1.05);
}
body .container .div1 .buttons button.code-button,
html .container .div1 .buttons button.code-button {
background-color: #dd614a;
color: white;
margin: 0px 0px 0px 70px;
}
.blog .div1 .buttons button.code-button:hover {
body .container .div1 .buttons button.code-button:hover,
html .container .div1 .buttons button.code-button:hover {
background-color: rgb(205.4139534884, 64.688372093, 38.5860465116);
transform: scale(1.05);
}
.blog .div1 .buttons button.spirit-button {
background-color: #f7ebec;
color: #3b3561;
margin: 0px 0px 0px 70px;
body .container .div2,
html .container .div2 {
width: 50%;
padding-left: 30px;
display: flex;
flex-wrap: wrap;
}
.blog .div1 .buttons button.spirit-button:hover {
background-color: rgb(209, 206, 206);
transform: scale(1.05);
body .container .div2 a,
html .container .div2 a {
text-decoration: none;
}
.blog .div2 {
padding-top: 30px;
height: 200px; /* Set desired height */
width: 300px;
}
.blog .div2 .entrya {
grid-area: 1/3/2/4;
body .container .div2 .entrya,
html .container .div2 .entrya {
background-color: #ddbdd5;
color: black;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
border: none;
text-align: center;
cursor: pointer;
position: fixed;
right: 410px;
top: 40px;
height: 300px;
width: 300px;
margin: 32px 0px 0px 35px;
transition: transform 0.3s ease;
animation: buttonEntry 1s ease-in-out;
}
.blog .div2 .entrya h2 {
body .container .div2 .entrya h2,
html .container .div2 .entrya h2 {
font-size: 20px;
color: #3b3561;
margin-bottom: 10px;
@@ -224,9 +246,18 @@ body {
-webkit-line-clamp: 1; /* Limit to 2 lines */
-webkit-box-orient: vertical; /* Vertical text orientation */
white-space: normal; /* Allow wrapping within the box */
align-content: center;
}
.blog .div2 .entrya p {
body .container .div2 .entrya img,
html .container .div2 .entrya img {
max-width: 100%;
height: auto;
width: 200px; /* Set desired width */
border-radius: 10px; /* Optional: Rounded corners */
display: block; /* Ensures it's treated as a block element */
margin: 0 auto; /* Centers the image horizontally */
}
body .container .div2 .entrya p,
html .container .div2 .entrya p {
padding-top: 20px;
color: #3b3561;
font-size: 0.9rem;
@@ -239,203 +270,10 @@ body {
white-space: normal; /* Allow wrapping within the box */
font-family: "Space Grotesk", monospace;
}
.blog .div2 .entrya:hover {
body .container .div2 .entrya:hover,
html .container .div2 .entrya:hover {
transform: translate(60px, 0px);
transform: translateY(-5px);
}
.blog .div2 .entrya img {
max-width: 100%;
height: auto;
width: 200px; /* Set desired width */
border-radius: 10px; /* Optional: Rounded corners */
display: block; /* Ensures it's treated as a block element */
margin: 0 auto; /* Centers the image horizontally */
}
.blog .div2 .entrya {
animation: buttonEntry 1s ease-in-out;
}
.blog .div3 {
grid-area: 1/4/2/5;
padding-top: 30px;
width: 300px;
}
.blog .div3 .entryb {
grid-area: 1/3/2/4;
background-color: #4b8f8c;
color: black;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
border: none;
text-align: center;
cursor: pointer;
position: fixed;
right: 90px;
top: 40px;
height: 300px;
width: 300px;
transition: transform 0.3s ease;
animation: buttonEntry 1s ease-in-out;
}
.blog .div3 .entryb h2 {
font-size: 20px;
color: #3b3561;
margin-bottom: 10px;
font-family: "Lexend", serif;
font-weight: 500;
overflow: hidden; /* Hide overflowing text */
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
max-width: 250px; /* Restrict container width */
display: -webkit-box; /* Enables multi-line truncation */
-webkit-line-clamp: 1; /* Limit to 2 lines */
-webkit-box-orient: vertical; /* Vertical text orientation */
white-space: normal; /* Allow wrapping within the box */
align-content: center;
}
.blog .div3 .entryb p {
padding-top: 20px;
color: #f7ebec;
font-size: 0.9rem;
overflow: hidden; /* Hide overflowing text */
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
max-width: 300px; /* Restrict container width */
display: -webkit-box; /* Enables multi-line truncation */
-webkit-line-clamp: 2; /* Limit to 2 lines */
-webkit-box-orient: vertical; /* Vertical text orientation */
white-space: normal; /* Allow wrapping within the box */
font-family: "Space Grotesk", monospace;
}
.blog .div3 .entryb:hover {
transform: translateY(-5px);
}
.blog .div3 .entryb img {
max-width: 100%;
height: auto;
width: 200px; /* Set desired width */
border-radius: 10px; /* Optional: Rounded corners */
display: block; /* Ensures it's treated as a block element */
margin: 0 auto; /* Centers the image horizontally */
}
.blog .div4 {
grid-area: 2/3/3/4;
width: 300px;
}
.blog .div4 .entryc {
border-radius: 10px;
background-color: #dd614a;
color: black;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
border: none;
text-align: center;
cursor: pointer;
transition: transform 0.3s ease;
animation: buttonEntry 1s ease-in-out;
position: fixed;
right: 410px;
bottom: 35px;
height: 300px;
width: 300px;
}
.blog .div4 .entryc h2 {
font-size: 20px;
color: #3b3561;
margin-bottom: 10px;
font-family: "Lexend", serif;
font-weight: 500;
overflow: hidden; /* Hide overflowing text */
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
max-width: 250px; /* Restrict container width */
display: -webkit-box; /* Enables multi-line truncation */
-webkit-line-clamp: 1; /* Limit to 2 lines */
-webkit-box-orient: vertical; /* Vertical text orientation */
white-space: normal; /* Allow wrapping within the box */
align-content: center;
}
.blog .div4 .entryc p {
padding-top: 20px;
color: #f7ebec;
font-size: 0.9rem;
overflow: hidden; /* Hide overflowing text */
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
max-width: 300px; /* Restrict container width */
display: -webkit-box; /* Enables multi-line truncation */
-webkit-line-clamp: 2; /* Limit to 2 lines */
-webkit-box-orient: vertical; /* Vertical text orientation */
white-space: normal; /* Allow wrapping within the box */
font-family: "Space Grotesk", monospace;
}
.blog .div4 .entryc:hover {
transform: translateY(-5px);
}
.blog .div4 .entryc img {
max-width: 100%;
height: auto;
width: 200px; /* Set desired width */
border-radius: 10px; /* Optional: Rounded corners */
display: block; /* Ensures it's treated as a block element */
margin: 0 auto; /* Centers the image horizontally */
}
.blog .div5 {
grid-area: 2/4/3/5;
width: 300px;
}
.blog .div5 .entryd {
grid-area: 1/3/2/4;
background-color: #f7ebec;
color: black;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
border: none;
text-align: center;
cursor: pointer;
transition: transform 0.3s ease;
animation: buttonEntry 1s ease-in-out;
position: fixed;
right: 90px;
bottom: 35px;
height: 300px;
width: 300px;
}
.blog .div5 .entryd h2 {
font-size: 20px;
color: #3b3561;
margin-bottom: 10px;
font-family: "Lexend", serif;
font-weight: 500;
overflow: hidden; /* Hide overflowing text */
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
max-width: 250px; /* Restrict container width */
display: -webkit-box; /* Enables multi-line truncation */
-webkit-line-clamp: 1; /* Limit to 2 lines */
-webkit-box-orient: vertical; /* Vertical text orientation */
white-space: normal; /* Allow wrapping within the box */
align-content: center;
}
.blog .div5 .entryd p {
padding-top: 20px;
color: #3b3561;
font-size: 14px;
overflow: hidden; /* Hide overflowing text */
text-overflow: ellipsis; /* Add "..." at the end of truncated text */
max-width: 300px; /* Restrict container width */
display: -webkit-box; /* Enables multi-line truncation */
-webkit-line-clamp: 2; /* Limit to 2 lines */
-webkit-box-orient: vertical; /* Vertical text orientation */
white-space: normal; /* Allow wrapping within the box */
font-family: "Space Grotesk", monospace;
}
.blog .div5 .entryd:hover {
transform: translateY(-5px);
}
.blog .div5 .entryd img {
max-width: 100%;
height: auto;
width: 200px; /* Set desired width */
border-radius: 10px; /* Optional: Rounded corners */
display: block; /* Ensures it's treated as a block element */
margin: 0 auto; /* Centers the image horizontally */
}
/*# sourceMappingURL=index.css.map */

2
nodeJS/Learning/07/app/public/css/pages/index.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../src/styles/_variable.scss","../../../src/styles/_reset.scss","../../../src/styles/pages/index.scss"],"names":[],"mappings":"AAAQ;ACCR;AAAA;AAAA;EAGC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;;;AAGD;AAAA;EAEC;;;AC7CD;AACA;AAEA;AAEA;EACC;IACC;IACA;;EAED;IACC;IACA;;;AAIF;EACC;EACA;EAKA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;AAiDA;;AA/CA;EACC;EACA,OFhDK;EEiDL,aF9CW;EE+CX;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,aFvDS,4BEuDyB;EAClC;EACA;EACA,OFhEI,SEgEmB;EACvB;EACA;EACA,kBFjEK,SEiE8B;EACnC;EACA;;AAEA;EACC,kBFxEG,SEwE+B;EAClC,OFvEI,SEuEoB;;AAGzB;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBFnFG,SEmF+B;EAClC,OFlFI,SEkFoB;EACxB;EACA;;AAGD;EACC,kBFxFI,SEwF+B;EACnC,OF3FG,SE2FoB;;AAKzB;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,aFxGQ;EEyGR;EACA;EACA;EACA;;AAEA;EACC,kBFpHE;EEqHF,OFtHE;EEuHF;;AAEA;EACC;EACA;;AAIF;EACC,kBF7HG;EE8HH;EACA;;AAEA;EACC;EACA;;AAIF;EACC,kBFvII;EEwIJ;EACA;;AAEA;EACC;EACA;;AAGF;EACC,kBFnJG;EEoJH,OFtJE;EEuJF;;AAEA;EACC;EACA;;AAML;EACC;EACA;EACA;;AACA;EACC;EACA,kBFtKI;EEuKJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OFzLG;EE0LH;EACA,aFtLU;EEuLV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA,OFzMG;EE0MH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aF5MQ;;AE+MT;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAMF;EACC;;AAIF;EACC;EACA;EACA;;AACA;EACC;EACA,kBF9OK;EE+OL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OFnQG;EEoQH;EACA,aFhQU;EEiQV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA,OFjRI;EEkRJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFtRQ;;AEyRT;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAIH;EACC;EACA;;AACA;EACC;EACA,kBF9SM;EE+SN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OFnUG;EEoUH;EACA,aFhUU;EEiUV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA,OFjVI;EEkVJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFtVQ;;AEyVT;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAIH;EACC;EACA;;AACA;EACC;EACA,kBFhXK;EEiXL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OFpYG;EEqYH;EACA,aFjYU;EEkYV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA,OFpZG;EEqZH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFvZQ;;AE0ZT;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA","file":"index.css"}
{"version":3,"sourceRoot":"","sources":["../../../src/styles/_variable.scss","../../../src/styles/_reset.scss","../../../src/styles/pages/index.scss"],"names":[],"mappings":"AAAQ;ACCR;AAAA;AAAA;EAGC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;;;AAGD;AAAA;EAEC;;;AC7CD;AACA;AAEA;AAEA;EACC;IACC;IACA;;EAED;IACC;IACA;;;AAIF;AAAA;EAEC;EACA;EACA;EACA;EAKA;EACA;;AAEA;AAAA;EACC;EACA;;AAEA;AAAA;EACC;EACA;EACA;EACA;EACA;AA4DA;;AA1DA;AAAA;EACC;EACA,OF1CI;EE2CJ,aFxCU;EEyCV;EACA;;AAGD;AAAA;EACC,aF7CQ;EE8CR,OFpDG;EEqDH;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA,aF3DQ,4BE2D0B;EAClC;EACA;EACA,OFpEG,SEoEoB;EACvB;EACA;EACA,kBFrEI,SEqE+B;EACnC;EACA;EACA;;AAEA;AAAA;EACC,kBF7EE,SE6EgC;EAClC,OF5EG,SE4EqB;;AAGzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBFxFE,SEwFgC;EAClC,OFvFG,SEuFqB;EACxB;EACA;;AAGD;AAAA;EACC,kBF7FG,SE6FgC;EACnC,OFhGE,SEgGqB;;AAKzB;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA;EACA,aF5GO;EE6GP;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC,kBFzHC;EE0HD,OF3HC;;AE6HD;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFjIE;EEkIF;;AAEA;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBF5IE;EE6IF,OF/IC;;AEiJD;AAAA;EACC;EACA;;AAIF;AAAA;EACC,kBFpJG;EEqJH;;AAEA;AAAA;EACC;EACA;;AAML;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC,kBF7KG;EE8KH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;EACA,OF7LE;EE8LF;EACA,aF1LS;EE2LT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EACC;EACA,OFrNE;EEsNF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFxNO;;AE2NR;AAAA;EACC;EACA","file":"index.css"}

BIN
nodeJS/Learning/07/app/public/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 KiB

BIN
nodeJS/Learning/07/app/public/images/peeking.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 370 KiB

28
nodeJS/Learning/07/app/public/js/index.js
View File

@@ -1,28 +0,0 @@
// Function to fetch and display posts
async function fetchAndDisplayPosts() {
try {
const response = await fetch("http://localhost:1337/api/posts"); // Adjust URL to your Strapi server
const result = await response.json();
const postsContainer = document.getElementById("posts-container");
postsContainer.innerHTML = ""; // Clear any existing content
// Loop through the posts and create links
result.data.forEach((post) => {
const postElement = document.createElement("div");
const postLink = document.createElement("a");
// Link to the post (using slug or id for dynamic routes)
postLink.href = `/posts/${post.attributes.slug}`; // Adjust this to match your route
postLink.textContent = post.attributes.title;
postElement.appendChild(postLink);
postsContainer.appendChild(postElement);
});
} catch (error) {
console.error("Error fetching posts:", error);
}
}
// Fetch posts when the page loads
document.addEventListener("DOMContentLoaded", fetchAndDisplayPosts);