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-02 02:23:30 +00:00
parent a5b92973b4
commit a477fc711d
9 changed files with 884 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,4 @@
/* Style each tag in an html */
/* describe to chatgpt what you want, good at css, or css reference */
/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap");
*,
*::before,
*::after {
@@ -53,121 +50,392 @@ h6 {
isolation: isolate;
}
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 20px;
grid-row-gap: 20px;
/* Style each tag in an html */
/* describe to chatgpt what you want, good at css, or css reference */
/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
@keyframes buttonEntry {
0% {
opacity: 0; /* Start invisible */
transform: translateY(30px); /* Start below the viewport */
}
100% {
opacity: 1; /* Fully visible */
transform: translateY(0); /* End at its normal position */
}
}
body {
margin: 0px;
background: linear-gradient(to top right, #3b3561, rgb(191.3, 187.1, 217.9));
height: 100vh;
overflow: hidden;
}
.div1 {
grid-area: 1/1/2/3;
}
.div1 body {
margin: 0;
font-family: "Montserrat", serif;
background-color: #020122;
}
.div1 .container {
padding: 20px;
}
.div1 .intro {
text-align: left;
margin-bottom: 50px;
}
.div1 .intro h1 {
font-size: 2rem;
margin-bottom: 10px;
color: #ddbdd5;
font-family: "Lora", serif;
}
.div1 .intro p {
font-size: 1.1rem;
margin-bottom: 20px;
color: #f7ebec;
font-family: "Montserrat", serif;
}
.div1 .intro .read-more {
background-color: #ddbdd5;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
.div1 .intro .read-more:hover {
background-color: #443850;
}
.div2 {
grid-area: 1/3/2/4;
}
.div2 .intro h5 {
font-size: 2rem;
margin-bottom: 10px;
color: #f7ebec;
font-family: "Lora", serif;
}
.div2 .intro p {
font-size: 1.1rem;
margin-bottom: 20px;
color: #020122;
font-family: "Montserrat", serif;
}
.div2 .parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.div2 .div1 {
grid-area: 1/1/2/2;
}
.div2 .div2 {
grid-area: 1/2/2/3;
}
.div2 .div3 {
grid-area: 1/3/2/4;
}
.div2 .div4 {
grid-area: 2/1/3/2;
}
.div2 .div5 {
grid-area: 2/2/3/3;
}
.div2 .div6 {
grid-area: 2/3/3/4;
}
.div2 .feature {
background-color: #ddbdd5;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
.blog {
text-align: center;
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;
}
.div2 .feature h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #6e8387;
.blog .div1 {
grid-area: 1/1/3/3;
padding-top: 160px;
display: flex;
flex-direction: column;
align-items: center;
padding: 200px 0px 0px 0px;
/* General button styling */
}
.div2 .feature p {
font-size: 1rem;
margin-bottom: 20px;
.blog .div1 h1 {
font-size: 60px;
color: #f7ebec;
font-family: "Lexend", serif;
font-weight: 300;
padding-bottom: 20px;
}
.div2 .feature .more {
background-color: #ddbdd5;
color: #fff;
padding: 10px 15px;
.blog .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 */
padding: 10px 20px; /* Button padding */
font-family: "Space Grotesk", monospace; /* Font style */
font-size: 16px; /* Font size */
font-weight: bold; /* Bold text */
color: #3b3561; /* Text color */
border: 2px solid #3b3561; /* Button border */
border-radius: 30px; /* Rounded edges for the button */
background-color: #f7ebec; /* Transparent background */
cursor: pointer; /* Pointer cursor on hover */
transition: all 0.3s ease; /* Smooth transition on hover */
}
.blog .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 {
display: flex; /* Flex for the icon */
align-items: center;
justify-content: center;
margin-left: 10px; /* Space between text and icon */
width: 20px; /* Icon circle width */
height: 20px; /* Icon circle height */
background-color: #3b3561; /* Circle background color */
color: #f7ebec; /* Arrow color */
border-radius: 50%; /* Make the icon circular */
transition: all 0.3s ease; /* Smooth transition on hover */
}
.blog .div1 .read-more-btn:hover .icon {
background-color: #f7ebec; /* Change circle background on hover */
color: #3b3561; /* Change arrow color on hover */
}
.blog .div1 .buttons {
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
gap: 10px;
padding: 20px;
padding-right: 85px;
margin-top: 20px;
}
.blog .div1 .buttons button {
padding: 3.5px 23px;
margin: 80px;
font-size: 16px;
font-family: "Space Grotesk", monospace;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.div2 .feature .more:hover {
background-color: #443850;
.blog .div1 .buttons button.psyc-button {
background-color: #ddbdd5;
color: #3b3561;
margin: 0px 0px 0px 70px;
}
.blog .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 {
background-color: #4b8f8c;
color: white;
margin: 0px 0px 0px 70px;
}
.blog .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 {
background-color: #dd614a;
color: white;
margin: 0px 0px 0px 70px;
}
.blog .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;
}
.blog .div1 .buttons button.spirit-button:hover {
background-color: rgb(209, 206, 206);
transform: scale(1.05);
}
.blog .div2 {
padding-top: 30px;
height: 200px; /* Set desired height */
width: 300px;
}
.blog .div2 .entrya {
grid-area: 1/3/2/4;
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;
transition: transform 0.3s ease;
animation: buttonEntry 1s ease-in-out;
}
.blog .div2 .entrya 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 .div2 .entrya p {
padding-top: 20px;
color: #3b3561;
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 .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/pages/index.scss","../../../src/styles/_reset.scss","../../../src/styles/_variable.scss"],"names":[],"mappings":"AAIA;AACA;AAEA;AAEQ;ACRR;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;;;ADtCD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;AACA;EACC;EACA,aEjBU;EFkBV,kBExBO;;AF2BR;EACC;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA,OErCI;EFsCJ,aElCW;;AFqCZ;EACC;EACA;EACA,OE3CK;EF4CL,aExCS;;AF2CV;EACC,kBEjDI;EFkDJ;EACA;EACA;EACA;EACA;;AAEA;EACC,kBEvDK;;;AF4DT;EACC;;AAEC;EACC;EACA;EACA,OEnEK;EFoEL,aEjEW;;AFoEZ;EACC;EACA;EACA,OE5EM;EF6EN,aEvES;;AF2EX;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAGD;EACC,kBE5GK;EF6GL;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA,OElHK;;AFqHN;EACC;EACA;EACA,OE1HK;;AF6HN;EACC,kBE/HI;EFgIJ;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,kBEtIK","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;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"}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 370 KiB

BIN
nodeJS/Learning/07/app/public/images/test.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

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

@@ -0,0 +1,28 @@
// 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);