Skip to content

Commit

Permalink
second commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@samarium224
samarium224 authored Oct 5, 2023
1 parent a3063a3 commit 1d8c891
Show file tree
Hide file tree
Showing 12 changed files with 987 additions and 53 deletions.
185 changes: 185 additions & 0 deletions css/crouselStyle.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
/*----------modified stylesheet for slider drop down css-------------------*/
.carousel-caption {
margin-bottom: 0px;
margin-right: 0px;
}

.carousel .carousel-item {
height: 450px;
}

.carousel-item img {
position: absolute;
object-fit: cover;
top: 0;
left: 0;
min-height: 500px;
height: 450px;
filter: brightness(50%);

}

.carousel-caption {
position: absolute;
right: 15%;
bottom: 11rem;
left: 15%;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
color: #fff;
text-align: center;
}

.carousel-caption h2 {
font-size: 32px;
}

.carousel-caption h3 {
position: absolute;
right: 15%;
bottom: 11rem;
left: -10px;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
color: #fff;
text-align: left;
font-size: 32px;
}

.carousel-caption ul {
position: absolute;
top: -180px;
left: -25px;

}

.customTitle {
font-family: Microgme;
}

/* animated drop down */
.animatedrop {
opacity: 0;
margin-top: 10px;
text-align: left;
padding: 10px;
width: 400px;
background-color: #34495e;
}

.animatedrop:nth-child(1) {
-webkit-animation-name: menu1;
animation-name: menu1;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

.animatedrop:nth-child(2) {
-webkit-animation-name: menu1;
animation-name: menu1;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

.animatedrop:nth-child(3) {
-webkit-animation-name: menu1;
animation-name: menu1;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-delay: 2000ms;
animation-delay: 2000ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

.animatedrop:nth-child(4) {
-webkit-animation-name: menu1;
animation-name: menu1;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-delay: 3000ms;
animation-delay: 3000ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

.animatedrop:nth-child(5) {
-webkit-animation-name: menu1;
animation-name: menu1;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-delay: 4000ms;
animation-delay: 4000ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

.animatedrop:nth-child(6) {
-webkit-animation-name: menu1;
animation-name: menu1;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-delay: 5000ms;
animation-delay: 5000ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@-webkit-keyframes menu1 {
0% {
opacity: 0;
transform: rotateX(-90deg) translateY(0px);
}

100% {
opacity: 1;
transform: rotateX(0deg) translateY(30px);
}
}

@keyframes menu1 {
0% {
opacity: 0;
transform: rotateX(-90deg) translateY(0px);
}

100% {
opacity: 1;
transform: rotateX(0deg) translateY(30px);
}
}


@media (max-width:700px) {
.carousel-caption ul {
position: absolute;
top: -180px;
left: -35px;

}

.carousel-caption h2 {
font-size: 20px;
padding-left: 10px;
}
}
83 changes: 50 additions & 33 deletions css/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,50 @@
:root{
--sc-orange-color: #B27141;
:root {
--sc-orange-color: #B27141;
}

*{
margin: 0;
padding: 0;
* {
margin: 0;
padding: 0;
}

body{
background-color: black;
color: fff;
body {
background-color: black;
color: fff;
}

p{
color: fff;
p {
color: fff;
}

.main_app_logo{
margin: 60px 0px;
padding: 60px auto;
width: 60%;
.main_app_logo {
margin: 60px 0px;
padding: 60px auto;
width: 60%;
}

.img_container{
width: 100%;
.img_container {
width: 100%;

}

.hyperlinkblock, .hyperlinkblock::after, .hyperlinkblock::before, .hyperlinkblock:hover{
text-decoration: none;
.hyperlinkblock,
.hyperlinkblock::after,
.hyperlinkblock::before,
.hyperlinkblock:hover {
text-decoration: none;
}

.custom_card_text{
color: #4A54CE;
font-family: Lekton;
font-size: 26px;
font-weight: 700;
line-height: 26px;
letter-spacing: 5px;
.custom_card_text {
color: #4A54CE;
font-family: Lekton;
font-size: 26px;
font-weight: 700;
line-height: 26px;
letter-spacing: 5px;
}

.popping_text{
font-family: Poppins;
.popping_text {
font-family: Poppins;
}

.btn-org-primary {
Expand All @@ -51,7 +54,7 @@ p{
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #9f5927;
--bs-btn-hover-border-color: #9f5927;
--bs-btn-focus-shadow-rgb: 49,132,253;
--bs-btn-focus-shadow-rgb: 49, 132, 253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #B27141;
--bs-btn-active-border-color: #B27141;
Expand All @@ -68,7 +71,7 @@ p{
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #464B9B;
--bs-btn-hover-border-color: #464B9B;
--bs-btn-focus-shadow-rgb: 49,132,253;
--bs-btn-focus-shadow-rgb: 49, 132, 253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #464B9B;
--bs-btn-active-border-color: #464B9B;
Expand All @@ -78,18 +81,32 @@ p{
--bs-btn-disabled-border-color: #542f15;
}

.card_container{
height: 100%;
.card_container {
height: 100%;
}


@media only screen and (max-width: 680px) {
.main_app_conver{
.main_app_conver {
flex-direction: column;
}

.main_app_logo{
.main_app_logo {
margin: 40px 30px 0px;
}

}

/* space jump page */
.spacejump_container {
background-image: url(../img/space\ jumb\ bg.png);
background-repeat: no-repeat;
background-size: cover;

}


.form-control,
.form-select {
opacity: 70%;
}
Binary file added img/SJbgpc.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/space jumb bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<h1 class="text text-center text-white">Cosmo Cruise</h1>
<div class="p-4">
<h4 class="mb-3">Hello Traveller,</h4>
<p>Welcome to Cosmo Cruise. Here you can book your fligh to tour around the solar system and beyond.</p>
<p>Welcome to Cosmo Cruise. Here you can book your flight to tour around the solar system and beyond.</p>
</div>
</div>
</div>
Expand All @@ -36,23 +36,23 @@ <h4 class="mb-3">Hello Traveller,</h4>
<a href="travelplan.html" class="hyperlinkblock">
<img src="img/travel.jpg" class="card-img-top" alt="travel plan">
<div class="card-body">
<p class="card-text text-center text-white">Travel Plan</p>
<p class="card-text text-center text-white">Book Your Journey</p>
</a>
</div>
</div>
<div class="card mx-2 bg-black border-white" style="width: 18rem;">
<a href="space_wiki.html" class="hyperlinkblock">
<img src="img/globe.jpg" class="card-img-top p-3" alt="Space New">
<div class="card-body">
<p class="card-text text-center text-white">Space News</p>
<p class="card-text text-center text-white">Discover</p>
</a>
</div>
</div>
<div class="card mx-2 bg-black border-white" style="width: 18rem;">
<a href="exoplanet_travel.html" class="hyperlinkblock">
<img src="img/planet.jpg" class="card-img-top" alt="Space Wiki">
<div class="card-body">
<p class="card-text text-center text-white">Exoplanet Travel</p>
<p class="card-text text-center text-white">Exoplanet List</p>
</a>
</div>
</div>
Expand Down
Loading

0 comments on commit 1d8c891

Please sign in to comment.