Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Layout Rendering Issue in Spaces Page (#91) #92

Merged
merged 2 commits into from
Jan 11, 2025
Merged

Fix: Layout Rendering Issue in Spaces Page (#91) #92

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
41f0545
Fix: Updated blogpost4.html[Layout rendering issue]
Itz-Sidra Jan 8, 2025
632ba61
Fix: Updated blogpost4.html
Itz-Sidra Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
292 changes: 124 additions & 168 deletions blogpost4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -604,204 +604,160 @@ <h3 class="space-description-heading container slider-reveal">
</style>

<!-- PHILOSOPHY SECTION -->
<section class="section text-center philosophy-section">
<div class="philosophy-container">
<div class="curve-top">
<svg
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1200 120"
preserveAspectRatio="none"
>
<path
d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
class="shape-fill"
></path>
<section class="philosophy-section">
<div class="curve-top">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
<div class="card-container">
<div class="card">
<img
</div>
<img
src="assets/images/divider.jpg"
alt=""
class="card-heading-img"
/>
<h1 class="philosophy-heading">Deciding Factors In a Space</h1>
</div>
<h1 class="philosophy-heading">Deciding Factors In a Space</h1>
<div class="card-container">
<div class="card">
<img
<div class="divider"></div>
<img
src="assets/images/divider.jpg"
alt=""
class="card-heading-img"
/>
<h3 class="card-heading container">Functionality and Flow</h3>
<p class="card-content container">
Any space should promote effective workflows, allowing easy
transitions between various types of work, like collaboration,
focused work, and relaxation. The physical layout impacts
efficiency, and creating smooth transitions can reduce
friction and support creativity.
</p>
<h3 class="card-heading">Functionality and Flow</h3>
<p class="card-content">Any space should promote effective workflows, allowing easy transitions between various types of work, like collaboration, focused work, and relaxation. The physical layout impacts efficiency, and creating smooth transitions can reduce friction and support creativity.</p>
</div>
<div class="card">
<img
<div class="divider"></div>
<img
src="assets/images/divider.jpg"
alt=""
class="card-heading-img"
/>
<h3 class="card-heading container">Sustainability</h3>
<p class="card-content container">
Environmentally conscious design choices reflect a commitment
to sustainability. Using energy-efficient lighting, recyclable
materials, and indoor plants can reduce an office's ecological
footprint and align with values that attract environmentally
conscious employees.
</p>
<h3 class="card-heading">Sustainability</h3>
<p class="card-content">Environmentally conscious design choices reflect a commitment to sustainability. Using energy-efficient lighting, recyclable materials, and indoor plants can reduce an office's ecological footprint and align with values that attract environmentally conscious employees.</p>
</div>
<div class="card">
<img
<div class="divider"></div>
<img
src="assets/images/divider.jpg"
alt=""
class="card-heading-img"
/>
<h3 class="card-heading container">
Balance between technology and Humanity
</h3>
<p class="card-content container">
Integration between technology seamlessly into the workspace
to enhance productivity but shouldn’t overlook the human
experience. Thoughtful integration ensures tech enhances
rather than overwhelms, preserving human connection and
engagement in the process.
</p>
<h3 class="card-heading">Balance Between Technology and Humanity</h3>
<p class="card-content">Integration between technology and the workspace enhances productivity but shouldn’t overlook the human experience. Thoughtful integration ensures tech enhances rather than overwhelms, preserving human connection and engagement in the process.</p>
</div>
</div>
</div>

<div class="curve-bottom">
<svg
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1200 120"
preserveAspectRatio="none"
>
<path
d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
class="shape-fill"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M0,120 C300,80 600,160 1200,20 V120 H0 Z" class="shape-fill"></path>
</svg>
</div>
</section>

<style>
.card-container {
display: grid;
}
.card-container {
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.card-container {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 900px) {
.card-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.card-container {
grid-template-columns: repeat(4, 1fr);
}
}
.philosophy-section {
background-color: #2e3033;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.philosophy-container {
width: 95vw;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
</section>

<style>
.philosophy-section {
background-color: #2e3033;
position: relative;
padding: 100px 50px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}

.curve-top .shape-fill,
.curve-bottom .shape-fill {
fill: #1a1a1d;
}

.curve-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
}

.curve-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}

.philosophy-heading {
color: #dba562;
font-size: 36px;
font-weight: bold;
margin-bottom: 30px;
text-shadow:
1px 1px 0px #ffffff,
2px 2px 0px #dba562;
}

.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 30px;
max-width: 1200px;
margin-top: 50px;
}

.card {
background-color: #2e3033;
border-radius: 10px;
padding: 20px;
max-width: 300px;
color: #f1f1f1;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
text-align: center;
}

.divider {
width: 100%;
height: 30px;
margin: 10px auto 20px;
overflow: hidden;
}


.card-heading {
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
color: #dba562;
}

.card-content {
font-size: 16px;
line-height: 1.6;
color: #dcdcdc;
}
.card-heading-img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
@media (max-width: 768px) {
.philosophy-heading {
font-size: 3em;
font-weight: bold;
color: hsl(38, 61%, 55%);
text-shadow: 1px 0px 0px hsl(38, 61%, 50%),
4px 0px 0px hsl(38, 61%, 45%), 3px 0px 0px hsl(38, 61%, 40%),
5px 0px 0px hsl(38, 61%, 35%), 5px 0px 0px hsl(38, 61%, 30%),
6px 0px 0px hsl(38, 61%, 25%);
line-height: 1.25em;
display: flex;
justify-content: center;
align-items: center;
}
.curve-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
font-size: 28px;
}

.curve-top svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 200px;
transform: rotateY(180deg);
}

.curve-top .shape-fill {
fill: #161718;
}

.card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: transparent;
height: 50vh;
}

.card-heading {
color: hsl(38, 61%, 55%);
font-size: 2.5rem;
font-weight: bold;
}

.curve-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
z-index: -1;
}

.curve-bottom svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 200px;
transform: rotateY(180deg);

.card-container {
flex-direction: column;
align-items: center;
}
}
</style>

.curve-bottom .shape-fill {
fill: #212121;
}
</style>
<!-- MARKETING SECTION -->
<section class="section text-center marketing-section">
<div class="marketing-container container">
Expand Down
Loading