lesson 9
This commit is contained in:
parent
a5b92973b4
commit
a477fc711d
@ -1,7 +1,4 @@
|
|||||||
/* Style each tag in an html */
|
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap");
|
||||||
/* 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");
|
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
@ -53,121 +50,392 @@ h6 {
|
|||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
}
|
}
|
||||||
|
|
||||||
.parent {
|
/* Style each tag in an html */
|
||||||
display: grid;
|
/* describe to chatgpt what you want, good at css, or css reference */
|
||||||
grid-template-columns: repeat(3, 1fr);
|
/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
|
||||||
grid-template-rows: 1fr;
|
@keyframes buttonEntry {
|
||||||
grid-column-gap: 20px;
|
0% {
|
||||||
grid-row-gap: 20px;
|
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 {
|
.blog {
|
||||||
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);
|
|
||||||
text-align: center;
|
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 {
|
.blog .div1 {
|
||||||
font-size: 1.5rem;
|
grid-area: 1/1/3/3;
|
||||||
margin-bottom: 10px;
|
padding-top: 160px;
|
||||||
color: #6e8387;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 200px 0px 0px 0px;
|
||||||
|
/* General button styling */
|
||||||
}
|
}
|
||||||
.div2 .feature p {
|
.blog .div1 h1 {
|
||||||
font-size: 1rem;
|
font-size: 60px;
|
||||||
margin-bottom: 20px;
|
|
||||||
color: #f7ebec;
|
color: #f7ebec;
|
||||||
|
font-family: "Lexend", serif;
|
||||||
|
font-weight: 300;
|
||||||
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
.div2 .feature .more {
|
.blog .div1 .read-more-btn {
|
||||||
background-color: #ddbdd5;
|
display: inline-flex; /* Flex container for text and icon */
|
||||||
color: #fff;
|
align-items: center; /* Center text and icon vertically */
|
||||||
padding: 10px 15px;
|
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: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.9rem;
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||||
}
|
}
|
||||||
.div2 .feature .more:hover {
|
.blog .div1 .buttons button.psyc-button {
|
||||||
background-color: #443850;
|
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 */
|
/*# sourceMappingURL=index.css.map */
|
||||||
|
|||||||
@ -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
BIN
nodeJS/Learning/07/app/public/images/peeking.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 370 KiB |
BIN
nodeJS/Learning/07/app/public/images/test.png
Normal file
BIN
nodeJS/Learning/07/app/public/images/test.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
28
nodeJS/Learning/07/app/public/js/index.js
Normal file
28
nodeJS/Learning/07/app/public/js/index.js
Normal 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);
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import dotenv from "dotenv";
|
import dotenv from "dotenv";
|
||||||
dotenv.config({ path: ".env" });
|
dotenv.config({ path: ".env" });
|
||||||
|
|
||||||
import express, { Application } from "express";
|
import express, { Application, Request, Response } from "express";
|
||||||
|
|
||||||
const app: Application = express();
|
const app: Application = express();
|
||||||
const port: number = parseInt(process.env.PORT as string) || 3000;
|
const port: number = parseInt(process.env.PORT as string) || 3000;
|
||||||
@ -14,6 +14,23 @@ app.use(express.urlencoded({ extended: true }));
|
|||||||
app.set("views", `./src/views`);
|
app.set("views", `./src/views`);
|
||||||
app.set("view engine", "ejs");
|
app.set("view engine", "ejs");
|
||||||
|
|
||||||
|
//Get strapi data
|
||||||
|
app.get("/api/articles", async (_req: Request, res: Response) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch("http://localhost:1337/api/articles");
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Strapi API responded with status ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
res.json(data); // Pass through Strapi data
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching articles from Strapi:", error);
|
||||||
|
res.status(500).json({ error: "Failed to fetch data from Strapi" });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
//Static route
|
//Static route
|
||||||
app.use(express.static(`${__dirname}/../public`));
|
app.use(express.static(`${__dirname}/../public`));
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,9 @@
|
|||||||
$oxford: #020122;
|
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap");
|
||||||
|
|
||||||
|
$blue: #3b3561;
|
||||||
$pink: #ddbdd5;
|
$pink: #ddbdd5;
|
||||||
$white: #f7ebec;
|
$white: #f7ebec;
|
||||||
$violet: #443850;
|
$green: #4b8f8c;
|
||||||
$green: #6e8387;
|
$orange: #dd614a;
|
||||||
$font-header: "Lora", serif;
|
$font-header: "Lexend", serif;
|
||||||
$font-body: "Montserrat", serif;
|
$font-body: "Space Grotesk", monospace;
|
||||||
|
|||||||
@ -7,135 +7,426 @@
|
|||||||
|
|
||||||
/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
|
/* 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");
|
@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 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.parent {
|
body {
|
||||||
|
margin: 0px;
|
||||||
|
background: linear-gradient(
|
||||||
|
to top right,
|
||||||
|
variable.$blue,
|
||||||
|
lighten(variable.$blue, 50%)
|
||||||
|
);
|
||||||
|
height: 100vh; // Ensure the gradient covers the entire viewport height
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog {
|
||||||
|
text-align: center;
|
||||||
|
display: flex; // Use flexbox for alignment
|
||||||
|
justify-content: center; // Center horizontally
|
||||||
|
margin-bottom: 50px;
|
||||||
|
margin: 0px 50px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
grid-template-rows: 1fr;
|
grid-template-rows: repeat(2, 1fr);
|
||||||
grid-column-gap: 20px;
|
gap: 20px;
|
||||||
grid-row-gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.div1 {
|
|
||||||
grid-area: 1 / 1 / 2 / 3;
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: variable.$font-body;
|
|
||||||
background-color: variable.$oxford;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro {
|
|
||||||
text-align: left;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: variable.$pink;
|
|
||||||
font-family: variable.$font-header;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: variable.$white;
|
|
||||||
font-family: variable.$font-body;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-more {
|
|
||||||
background-color: variable.$pink;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: variable.$violet;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.div2 {
|
|
||||||
grid-area: 1 / 3 / 2 / 4;
|
|
||||||
.intro {
|
|
||||||
h5 {
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: variable.$white;
|
|
||||||
font-family: variable.$font-header;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: variable.$oxford;
|
|
||||||
font-family: variable.$font-body;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.parent {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
grid-template-rows: repeat(2, 1fr);
|
|
||||||
grid-column-gap: 20px;
|
|
||||||
grid-row-gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.div1 {
|
.div1 {
|
||||||
grid-area: 1 / 1 / 2 / 2;
|
grid-area: 1 / 1 / 3 / 3;
|
||||||
}
|
padding-top: 160px;
|
||||||
.div2 {
|
display: flex;
|
||||||
grid-area: 1 / 2 / 2 / 3;
|
flex-direction: column;
|
||||||
}
|
align-items: center;
|
||||||
.div3 {
|
padding: 200px 0px 0px 00px;
|
||||||
grid-area: 1 / 3 / 2 / 4;
|
|
||||||
}
|
|
||||||
.div4 {
|
|
||||||
grid-area: 2 / 1 / 3 / 2;
|
|
||||||
}
|
|
||||||
.div5 {
|
|
||||||
grid-area: 2 / 2 / 3 / 3;
|
|
||||||
}
|
|
||||||
.div6 {
|
|
||||||
grid-area: 2 / 3 / 3 / 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature {
|
h1 {
|
||||||
background-color: variable.$pink;
|
font-size: 60px;
|
||||||
border-radius: 10px;
|
|
||||||
padding: 20px;
|
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: variable.$green;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 1rem;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: variable.$white;
|
color: variable.$white;
|
||||||
|
font-family: variable.$font-header;
|
||||||
|
font-weight: 300;
|
||||||
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more {
|
.read-more-btn {
|
||||||
background-color: variable.$pink;
|
display: inline-flex; /* Flex container for text and icon */
|
||||||
color: #fff;
|
align-items: center; /* Center text and icon vertically */
|
||||||
padding: 10px 15px;
|
justify-content: center; /* Center content horizontally */
|
||||||
border: none;
|
padding: 10px 20px; /* Button padding */
|
||||||
border-radius: 5px;
|
font-family: variable.$font-body; /* Font style */
|
||||||
cursor: pointer;
|
font-size: 16px; /* Font size */
|
||||||
font-size: 0.9rem;
|
font-weight: bold; /* Bold text */
|
||||||
|
color: variable.$blue; /* Text color */
|
||||||
|
border: 2px solid variable.$blue; /* Button border */
|
||||||
|
border-radius: 30px; /* Rounded edges for the button */
|
||||||
|
background-color: variable.$white; /* Transparent background */
|
||||||
|
cursor: pointer; /* Pointer cursor on hover */
|
||||||
|
transition: all 0.3s ease; /* Smooth transition on hover */
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: variable.$violet;
|
background-color: variable.$blue; /* Change background color on hover */
|
||||||
|
color: variable.$white; /* Change text color on hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: variable.$blue; /* Circle background color */
|
||||||
|
color: variable.$white; /* Arrow color */
|
||||||
|
border-radius: 50%; /* Make the icon circular */
|
||||||
|
transition: all 0.3s ease; /* Smooth transition on hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .icon {
|
||||||
|
background-color: variable.$white; /* Change circle background on hover */
|
||||||
|
color: variable.$blue; /* Change arrow color on hover */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* General button styling */
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: left;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
padding-right: 85px;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 3.5px 23px;
|
||||||
|
margin: 80px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: variable.$font-body;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||||
|
|
||||||
|
&.psyc-button {
|
||||||
|
background-color: variable.$pink;
|
||||||
|
color: variable.$blue;
|
||||||
|
margin: 0px 0px 0px 70px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: darken(variable.$pink, 10%);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.imp-button {
|
||||||
|
background-color: variable.$green;
|
||||||
|
color: white;
|
||||||
|
margin: 0px 0px 0px 70px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: darken(variable.$green, 10%);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.code-button {
|
||||||
|
background-color: variable.$orange;
|
||||||
|
color: white;
|
||||||
|
margin: 0px 0px 0px 70px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: darken(variable.$orange, 10%);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.spirit-button {
|
||||||
|
background-color: variable.$white;
|
||||||
|
color: variable.$blue;
|
||||||
|
margin: 0px 0px 0px 70px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgb(209, 206, 206);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.div2 {
|
||||||
|
padding-top: 30px;
|
||||||
|
height: 200px; /* Set desired height */
|
||||||
|
width: 300px;
|
||||||
|
.entrya {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
background-color: variable.$pink;
|
||||||
|
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;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
color: variable.$blue;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-family: variable.$font-header;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding-top: 20px;
|
||||||
|
color: variable.$blue;
|
||||||
|
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: variable.$font-body;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translate(60px, 0px);
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.div2 {
|
||||||
|
.entrya {
|
||||||
|
animation: buttonEntry 1s ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.div3 {
|
||||||
|
grid-area: 1 / 4 / 2 / 5;
|
||||||
|
padding-top: 30px;
|
||||||
|
width: 300px;
|
||||||
|
.entryb {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
background-color: variable.$green;
|
||||||
|
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;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
color: variable.$blue;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-family: variable.$font-header;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding-top: 20px;
|
||||||
|
color: variable.$white;
|
||||||
|
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: variable.$font-body;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.div4 {
|
||||||
|
grid-area: 2 / 3 / 3 / 4;
|
||||||
|
width: 300px;
|
||||||
|
.entryc {
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: variable.$orange;
|
||||||
|
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;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
color: variable.$blue;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-family: variable.$font-header;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding-top: 20px;
|
||||||
|
color: variable.$white;
|
||||||
|
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: variable.$font-body;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.div5 {
|
||||||
|
grid-area: 2 / 4 / 3 / 5;
|
||||||
|
width: 300px;
|
||||||
|
.entryd {
|
||||||
|
grid-area: 1 / 3 / 2 / 4;
|
||||||
|
background-color: variable.$white;
|
||||||
|
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;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
color: variable.$blue;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-family: variable.$font-header;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding-top: 20px;
|
||||||
|
color: variable.$blue;
|
||||||
|
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: variable.$font-body;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -12,34 +12,51 @@
|
|||||||
|
|
||||||
<!-- https://cssgrid-generator.netlify.app/ -->
|
<!-- https://cssgrid-generator.netlify.app/ -->
|
||||||
<body>
|
<body>
|
||||||
<div class="parent">
|
<section class="blog">
|
||||||
<div class="div1"></div>
|
|
||||||
<section class="intro">
|
|
||||||
<h1>My Blog Page</h1>
|
|
||||||
<p>
|
|
||||||
Within these pages, you will find carefully curated content that
|
|
||||||
reflects my expertise, creativity, and passion for continuous growth.
|
|
||||||
Whether you seek inspiration, a nuanced perspective, or just want to
|
|
||||||
know more about me, I invite you to explore and engage with the ideas
|
|
||||||
that define my work and vision.
|
|
||||||
</p>
|
|
||||||
<button class="read-more">Read More</button>
|
|
||||||
</section>
|
|
||||||
<div class="div2"></div>
|
|
||||||
<p>Author: Tiffany</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="parent">
|
|
||||||
<div class="div1">
|
<div class="div1">
|
||||||
<h3>Testing</h3>
|
<h1>This is my blog page.</h1>
|
||||||
<p>I am testing this out.</p>
|
<button class="read-more-btn">read more.<span class="icon">→</span></button>
|
||||||
<button class="more">More</button>
|
<div class="buttons">
|
||||||
|
<button class="psyc-button">Psychology</button>
|
||||||
|
<button class="imp-button">Implementation Science</button>
|
||||||
|
<button class="code-button">Coding</button>
|
||||||
|
<button class="spirit-button">Spirituality</button>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="div2"></div>
|
<div class="div2">
|
||||||
<div class="div3"></div>
|
<button class="entrya">
|
||||||
<div class="div4"></div>
|
<h2>Test header 1</h2>
|
||||||
<div class="div5"></div>
|
<img src="images/test.png">
|
||||||
<div class="div6"></div>
|
<p>Amidst the quiet hum of a bustling city, a small coffee shop stood tucked between towering buildings, its warm amber glow spilling onto the cobblestone street. Inside, the aroma of freshly ground beans mingled with the faint scent of vanilla candles, creating an inviting haven for dreamers and wanderers alike. Patrons sipped their steaming cups, some lost in the pages of weathered books, others immersed in conversations that seemed to carry the weight of untold stories. At a corner table, an artist sketched furiously, capturing the essence of the world beyond the shop’s rain-streaked window. The scene felt timeless, a perfect blend of tranquility and vibrant energy, as if the space itself whispered promises of inspiration to all who entered.</p>
|
||||||
</div>
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="div3" >
|
||||||
|
<button class="entryb">
|
||||||
|
<h2>Test header 2</h2>
|
||||||
|
<img src="images/test.png"/>
|
||||||
|
<p>Amidst the quiet hum of a bustling city, a small coffee shop stood tucked between towering buildings, its warm amber glow spilling onto the cobblestone street. Inside, the aroma of freshly ground beans mingled with the faint scent of vanilla candles, creating an inviting haven for dreamers and wanderers alike. Patrons sipped their steaming cups, some lost in the pages of weathered books, others immersed in conversations that seemed to carry the weight of untold stories. At a corner table, an artist sketched furiously, capturing the essence of the world beyond the shop’s rain-streaked window. The scene felt timeless, a perfect blend of tranquility and vibrant energy, as if the space itself whispered promises of inspiration to all who entered.</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="div4" >
|
||||||
|
<button class="entryc">
|
||||||
|
<h2>try this now</h2>
|
||||||
|
<img src="images/test.png"/>
|
||||||
|
<p>Certainly! Here's a randomly generated paragraph:
|
||||||
|
|
||||||
|
Amidst the quiet hum of a bustling city, a small coffee shop stood tucked between towering buildings, its warm amber glow spilling onto the cobblestone street. Inside, the aroma of freshly ground beans mingled with the faint scent of vanilla candles, creating an inviting haven for dreamers and wanderers alike. Patrons sipped their steaming cups, some lost in the pages of weathered books, others immersed in conversations that seemed to carry the weight of untold stories. At a corner table, an artist sketched furiously, capturing the essence of the world beyond the shop’s rain-streaked window. The scene felt timeless, a perfect blend of tranquility and vibrant energy, as if the space itself whispered promises of inspiration to all who entered.</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="div5" >
|
||||||
|
<button class="entryd">
|
||||||
|
<h2>this is a very long title for me to test things out</h2>
|
||||||
|
<img src="images/test.png">
|
||||||
|
<p>Certainly! Here's a randomly generated paragraph:
|
||||||
|
|
||||||
|
Amidst the quiet hum of a bustling city, a small coffee shop stood tucked between towering buildings, its warm amber glow spilling onto the cobblestone street. Inside, the aroma of freshly ground beans mingled with the faint scent of vanilla candles, creating an inviting haven for dreamers and wanderers alike. Patrons sipped their steaming cups, some lost in the pages of weathered books, others immersed in conversations that seemed to carry the weight of untold stories. At a corner table, an artist sketched furiously, capturing the essence of the world beyond the shop’s rain-streaked window. The scene felt timeless, a perfect blend of tranquility and vibrant energy, as if the space itself whispered promises of inspiration to all who entered.</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<script src="js/index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user