Appendix B: Codes Used

(CSS)
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
overflow: scroll;
background-color:;

}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 200%;
overflow-y: scroll;
z-index: 1000;
}

.navbar h1{
float: left;
color: #e2b72a;
margin: 18px;
}

.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: #333;
color: #fff;
margin: 15px;

.navbar a:hover {
background-color: #222221;
}

.hero-text {
text-align: center;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

.hero-text p{
border-style: solid;
border-radius: 20px;
margin: 30px;
padding: 10px;
}

.hero-text a:hover {
background-color: #3f3f3f;
font-style: italic;
}

.hero-image {
 background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(94, 93, 93, 0.75)), url(jeepneycover.png) ;
background-size: cover;
height: 780px;
position: center;
}

.history {
text-align: center;
font-size: 50px;
color: #000000;
text-shadow: 1px 1px 2px rgb(206, 206, 206), 0 0 25px rgb(19, 18, 18), 0 0 5px rgb(61, 52, 52)

.history-text {
margin: 50px;
padding: 20px;
border-radius: 30px;
background-image: linear-gradient(rgba(122, 121, 121, 0.75), rgba(153, 152, 152, 0.75)), url(j.jpg);
box-shadow: 18px 18px 35px #141414,
-18px -18px 35px #3f3f3f;

.history-text h1{
text-align: left;
color: #ffffff;
font-size: 40px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-shadow: 1px 1px 2px black, 0 0 25px rgb(13, 13, 14), 0 0 5px rgb(23, 24, 26);
}

.gallery{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100%;
gap: 20px;
}

.gallery-item:nth-child(1){
transform: translateX(60px);
z-index: 3;
}

.gallery-item:nth-child(2) {
z-index: 2;
}

.gallery-item:nth-child(3) {
transform: translateX(-40px);
}

.gallery-item {
width: 300px;
height: 350px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
overflow: hidden;
transition: all 0.6s ease-in-out;
cursor: pointer;
}
.gallery-item:hover {
transform: scale(1.1);
transform: translate(0px, -60px);
z-index: 4;
}

.gallery-item:not(:hover) {
filter: grayscale(100%);
}

.Modern {
text-align: center;
color:rgb(30, 59, 59);
font-size: 45px;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 2px black, 0 0 25px rgb(25, 26, 27), 0 0 5px rgb(28, 30, 32);
}

.Modern-text {
margin: 30px;
padding: 30px;
border-radius: 30px;
background: #e0e0e0;
box-shadow: 18px 18px 35px #141414,
-18px -18px 35px #3f3f3f;
background-color: #8b9c9b;
}

.ejeep{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100%;
gap: 20px;
}

.s-item {
width: 300px;
height: 350px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
overflow: hidden;
transition: all 0.6s ease-in-out;
cursor: pointer;
}

.s-item:hover {
transform: scale(1.1);
transform: translate(0px, -60px);
z-index: 4;
}

.s-item:not(:hover) {
filter: grayscale(100%);
}

.ejeep {
display: flex;
overflow: auto;
scroll-snap-type: x mandatory;
padding: 15px;
gap: 5px;
}

.ejeep > img {

width: 10px
 height: 10px;
flex: 0 0 30%;
scroll-snap-align: center;
}

.bgjeep /*for background*/ {

background: linear-gradient(rgba(133, 132, 132, 0.75), rgba(160, 157, 157, 0.699)), url(jeep_ejeep.jpg) ;
background-size: cover;
height: 800px;
position: relative;
}

.Pros-cons {
text-align: center;
color:rgb(214, 214, 214);
font-size: 40px;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 2px black, 0 0 25px rgb(25, 26, 27), 0 0 5px rgb(28, 30, 32);
}

.body1 {
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
margin: 0;
background-image: ;
}

.jeepboxes {
display: flex;
}

.square {
padding: 20px;
background: rgb(209, 194, 183);
border-radius: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
width: 330px;
height: 420px;
cursor: pointer;
transition: all 0.3s ease-in-out;
margin: 5px;

}
.square:hover {
box-shadow: whitesmoke;
scale: 1.04;
background: rgb(199, 151, 61);
}

.square p {
margin: 2px;
line-height: 90%;
}

.problem-text {
text-align: center;
color:rgb(2, 13, 61);
font-size: 40px;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 2px black, 0 0 25px rgb(25, 26, 27), 0 0 5px rgb(28, 30, 32);

.body3 {
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
 margin: 0;
}

.bgprob /*for background*/ {

background: linear-gradient(rgba(22, 22, 22, 0.75), rgba(43, 43, 43, 0.699)), url(jeep_ejeep1.jpg) ;
background-size: cover;
height: 800px;
position: relative;
}

.prob1 {
padding: 20px;
background: rgb(185, 185, 185);
border-radius: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
width: 400px;
height:350px;
cursor: pointer;
transition: all 0.3s ease-in-out;
margin: 20px;
border-radius: 19px;
background-image: rgb(224, 206, 178);
}

.prob1:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
scale: 1.04;
background: rgba(252, 249, 249, 0.615);
font-size: 19px;
}

.prob1 h1{
text-align: left;
color: rgb(5, 29, 82);
}

.prob1 p{
text-align: left;
}

.problem-text {
text-align: center;
color:rgb(167, 167, 167);
font-size: 40px;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 2px black, 0 0 25px rgb(25, 26, 27), 0 0 5px rgb(28, 30, 32);

.body4 {
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
margin: 0;
}

.bgsol /*for background*/ {

background: linear-gradient(rgba(22, 22, 22, 0.75), rgba(43, 43, 43, 0.699)), url(jeep_ejeep.jpg) ;
width: 100%;
height: 85vh;
background-size: cover;
position: relative;
}

.body5 {
display: flex;
justify-content: center;
align-items: center;
 height: 60vh;
margin: 0;
}

.sol1 /* OTHER */ {
padding: 20px;
background: rgb(185, 185, 185);
border-radius: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
width: 360px;
height:330px;
cursor: pointer;
transition: all 0.3s ease-in-out;
margin: 20px;
border-radius: 19px;
background-image: rgb(224, 206, 178);
}

.sol1:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
scale: 1.04;
background: rgba(252, 249, 249, 0.615);
font-size: 20px;
}

.sol1 h1{
text-align: left;
color: rgb(5, 29, 82);
}

.sol1 p{
text-align: left;
}

.solution-text {
text-align: center;
color:aliceblue
}

.bgsol /*for background*/ {

background: linear-gradient(rgba(22, 22, 22, 0.75), rgba(43, 43, 43, 0.699)), url(jeep_ejeep.jpg) ;
background-size: cover;
height: 100% ;
width: 100%
position: relative;
}

.YO-text h1 {
text-align: center;
font-size: 35px;
}

.YO-text p {
text-align: center;
font-size: 20px;
}

.buttons {
text-align: center;
}

.buttons a{
text-decoration: none;
display: inline-block;
}

.card /* OTHER */ {
padding: 20px;
background: rgb(219, 218, 218);
border-radius: 15px;
 box-shadow: 0 0 10px rgba(51, 51, 51, 0.918);
width: 255px;
height: 155px;
margin: 15px;
border-radius: 19px;
background-image: rgb(224, 206, 178);
justify-content: top;
border-color: rgb(3, 36, 107);
border-style: solid;
margin-bottom: auto;
}

.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.856);
transition: all 0.3s ease-in-out;
cursor: pointer;
}

.card h1 /*TEXT */{

text-align: left;
margin-bottom: auto;
color: rgb(5, 29, 82);
font-size: 15px;

.card p /*TEXT */{

text-align: left;
font-size: 90%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.bgYO {
background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(94, 93, 93, 0.75)), url(jeep_ejeep.jpg);
background-size: cover;
height: 100% ;
width: 100%
position: relative;

.YO-text h1{
font-size: 35px;
color: #ffffff;
}

.YO-text p{
font-size: 30px;
color: #ffffff;
}
.buttons a {
text-decoration: none;
color: #fff;
font-size: 20px;
border: 2px solid #fff;
padding: 14px 70px;
border-radius: 50px;
margin-top: 50px;
justify-content: center;
}

.buttons a:hover {
background-color: rgb(38, 53, 48);
}

.footer{
padding: 12px;
bottom: 0;
background-color: #3d3d3b;
width: 100%;
 text-align: center;
color: #e2b72a;