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

made all changes regarding the alignment #111

Merged
merged 2 commits into from
Oct 3, 2024
Merged

made all changes regarding the alignment #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2624846
made all changes regarding the alignment
shivamv003 Oct 2, 2024
a8646d2
Merge branch 'main' into changing_alignment
shivamv003 Oct 3, 2024
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
28 changes: 21 additions & 7 deletions Css-files/content.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,31 @@ body {
margin-top: -5rem;
}

/* Base navbar styles */
.navbar {
padding: 8px 10px;
overflow: hidden;
transition: background-color 0.3s ease; /* Smooth transition for background */
}

/* Styles for scrolled navbar */
.navbar.scrolled {
background-color: rgba(20, 43, 93, 0.8); /* Darker background when scrolled */
}

/* Unchanged navbar styles */
.navbar ul {
overflow: hidden;
margin: 0; /* Reset margin */
padding: 0; /* Reset padding */
}

.navbar li {
float: left;
list-style: none;
padding: 8px 20px;
}

.navbar li:hover {
opacity: 0.7;
}
Expand All @@ -63,19 +76,20 @@ body {
color: white;
font-size: 1.3rem;
}

.navbarbg {
padding: 8px 0;
background-color: hsl(20, 43%, 93%);
text-align: left;
padding: 7px 0;
background-color: hsl(20, 43%, 93%);
text-align: left;
}

.navbarbg ul {
display: inline-block;
padding-left: 0;
display: inline-block;
padding-left: 0;
}

.navbarbg li {
display: inline-block;
display: inline-block;
list-style: none;
margin: 0 10px;
}
Expand All @@ -84,7 +98,7 @@ body {
padding: 5px 10px;
text-decoration: none;
color: white;
font-size: 1.3rem;
font-size: 1rem;
}

.navbarbg li:hover {
Expand Down
4 changes: 4 additions & 0 deletions Html-files/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1057,7 +1057,11 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
});
});
</script>



<script src="cart.js"></script>

</body>

</html>
37 changes: 20 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -434,26 +434,29 @@ <h2 class="h-secondary center" style="font-family: var(--ff-philosopher);">Whims

</section>

<section class="service_container" style="background-color: hsl(20, 43%, 93%);">
<div class="service">
<div class="box_main">
<h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Bringing happiness<br> to you</h1>
<p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Order your favourite vintage collections!</p>
</div>
<div class="box">
<h1 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);">Online Delivery</h1><br>
<a href="./Html-files/menu.html" style="font-family: var(--ff-poppins);color: white;">Order Online</a>

</div>
<div class="box">
<h1 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);">Click & Collect</h1><br>
<a href="./Html-files/cart.html" style="font-family: var(--ff-poppins);color: white;">Take out Order</a>
<section class="service_container">
<div class="service">
<!-- Text Column - 60% Width -->
<div class="service_text column"><br>
<h1>Bringing happiness<br> to you</h1>
<p>Order your favourite vintage collections!</p>
</div>

<!-- Buttons Column - 40% Width -->
<div class="service_buttons column">
<div class="button_row">
<div class="box">
<h2>Online Delivery</h2><br>
<a href="./Html-files/menu.html" class="order_btn">Order Online</a>
</div>
<div class="box">
<h2>Click & Collect</h2><br>
<a href="./Html-files/cart.html" class="order_btn">Take out Order</a>
</div>
</div>

</div>

</section>
</div>
</section>

<section class="menu_container">
<div class="mainhead">
Expand Down
172 changes: 120 additions & 52 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ body {
}

#about .box {
border: 2px solid brown;
border: 2px solid #000000;
padding: 34px;
margin: 2px 55px;
border-radius: 28px;
Expand Down Expand Up @@ -161,17 +161,104 @@ body {
text-align: center;
}

.service_container {
background-color: hsl(20, 43%, 93%);
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 0.5px solid black;
}

.service {
display: flex;
flex-wrap: wrap;
gap: 30px;
max-width: 1200px;
width: 100%;
}

.column {
display: flex;
flex-direction: column;
justify-content: center;
}

/* Text Column - 60% */
.service_text {
flex: 0 0 49%;
font-family: var(--ff-poppins);
color: hsl(203, 30%, 26%);
}

.service_text h1 {
font-family: var(--ff-philosopher);
font-size: 3rem;
line-height: 1.2;
margin-bottom: 15px;
}

.service_text p {
font-family: var(--ff-poppins);
font-size: 1.2rem;
color: hsl(208, 7%, 46%);
margin-bottom: 20px;
}

/* Buttons Column - 40% */
.service_buttons {
flex: 0 0 40%;
}

.button_row {
display: flex;
justify-content: space-between;
/*border: 1px solid black;*/
gap: 20px;
}

.box {
text-align: center;
flex: 1;
}

.box h2 {
font-family: var(--ff-philosopher);
color: hsl(357, 82%, 35%);
font-size: 1.5rem;
margin-bottom: 10px;
}

.order_btn {
font-family: var(--ff-poppins);
background-color: hsl(357, 82%, 35%);
color: white;
padding: 12px 30px;
font-size: 1rem;
text-decoration: none;
border-radius: 10px;
transition: background-color 0.3s ease;
}

.order_btn:hover {
background-color: hsl(357, 82%, 45%);
}



/*
.service_container {
display: flex;
flex-direction: column;
/* padding: 3px 200px; */
padding: 3px 200px;
height: 550px;
width: auto;
justify-content: center;
align-items: center;
color: white;
background-color: transparent;
}
*/

.service_container:before {
background-color: transparent;
Expand All @@ -180,7 +267,6 @@ body {

/*
height: 560px;
*/
height: 800px;
width: 100%;
/* justify-items: center; */
Expand All @@ -189,33 +275,44 @@ body {
/* background-repeat: no-repeat; */
}

/*
.service {
display: flex;
padding: 20px;
box-sizing: fixed;
}
*/

/*
.service .box_main {
padding-left: 20px;
padding-right: 40px;
}
*/

/*
.service .box_main h1 {
font-size: 4.5rem;
font-family: "Oswald", sans-serif;
}
*/
/*

.service .box_main p {
font-family: "Oswald", sans-serif;
}
*/
/*

.service .box {
padding: 140px 20px;
/* border:2px solid rgb(224, 224, 252); */
border:2px solid rgb(224, 224, 252);
text-align: center;
font-size: 1.3rem;
}
*/

/*
.service .box a {
text-decoration: none;
background-color: brown;
Expand All @@ -226,14 +323,18 @@ body {
color: white;
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}
*/

/*
.service .box a:hover {
background-color: #ffffff;
color: brown !important;
border: 3px solid rgb(165, 42, 42);
transform: scale(1.01);
animation: bounce 0.5s;
}
*/


@keyframes bounce {
0%, 100% {
Expand Down Expand Up @@ -657,55 +758,22 @@ textarea {
}

/* responsiveness */
@media (max-width: 768px) {
.service {
flex-direction: column;
text-align: center;
}

.service_text, .service_buttons {
flex: 1 1 100%;
}

.button_row {
flex-direction: column;
gap: 20px;
}
}

@media screen and (max-width: 1120px) {
#about {
/* margin: 34px; */
flex-direction: column-reverse;
}

.service {
flex-direction: column;
padding: 5px;
/* box-sizing: fixed; */
}

.service .box {
padding: 20px 20px;
/* border: 2px solid rgb(224, 224, 252); */
text-align: center;
font-size: 1.3rem;
}

.service_container {
height: fit-content;
/* height: 1000px; */
}

.service .box_main h1 {
font-size: 3.5rem;
}

.service_container:before {
/*
height: 560px;
*/
/* height: 800px; */
/* height: fit-content; */
background-size: cover;
width: 100%;
/* background-repeat: no-repeat; */
/* justify-items: center; */
opacity: 0.4;
z-index: -1;
/* background-repeat: no-repeat; */
}

.menu_items {
flex-direction: column;
align-items: center;
}
}

@media screen and (max-width: 780px) {
.app_download {
Expand Down