Skip to content

Commit

Permalink
changing some style
Browse files Browse the repository at this point in the history
  • Loading branch information
@Git21221
Git21221 committed Jul 15, 2023
1 parent 80b01d3 commit f994c5a
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 70 deletions.
72 changes: 37 additions & 35 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900;1000&display=swap');

* {
margin: 0;
padding: 0;
Expand All @@ -7,6 +9,9 @@
body {
overflow-y: scroll;
overflow-x: hidden;
font-family: 'Outfit', sans-serif;
font-weight: 400;
background-color: #010109;
}

.navbar {
Expand All @@ -18,28 +23,27 @@ body {
z-index: 999;
color: #fff;
background-color: black;
height: 3.5em;
width: 100%;
}

.navbar-logo img {
padding: 10%;
width: 60px;
height: 60px;
.navbar-logo-and-text {
display: flex;
align-items: center;
justify-content: flex-start;
column-gap: 20px;
font-size: 1.2rem;
}
.navbar-logo p {
position: absolute;
margin-top: 1%;
margin-left: 4%;
font-size: 22px;

.navbar-logo-and-text img {
width: 10%;
}

.navbar-links a {
margin-left: 10px;
color: #fff;
text-decoration: none;
padding: 0.3em 1.5em;
font-size: 1.5em;
font-size: 1.2em;
margin: 5px;
border-radius: 30px;
}
Expand Down Expand Up @@ -67,6 +71,7 @@ body {
0% {
transform: scale(1);
}

50% {
transform: scale(1.2);
}
Expand Down Expand Up @@ -101,9 +106,11 @@ span::before {
transform: rotate(315deg) translateX(0);
opacity: 1;
}

70% {
opacity: 1;
}

100% {
transform: rotate(315deg) translateX(-1000px);
opacity: 0;
Expand Down Expand Up @@ -212,10 +219,8 @@ span:nth-child(10) {
border-radius: 20px;
color: #fff;
background-color: transparent;
background-image: linear-gradient(
rgba(255, 255, 255, 0.4),
rgba(255, 255, 255, 0.2)
);
background-image: linear-gradient(rgba(255, 255, 255, 0.4),
rgba(255, 255, 255, 0.2));
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
z-index: 1;
Expand Down Expand Up @@ -260,46 +265,45 @@ span:nth-child(10) {
text-align: center;
}

#second #txt {
#second #txt, #third #txt {
color: white;
text-align: center;
margin-top: 5%;
font-size: 20px;
font-weight: 400;
font-family: 'Outfit', sans-serif;
margin: 8% 0 4% 0;
font-size: 3rem;
}

#second #video{
width: 100%;
#second #video {
width: 80%;
height: 75%;
margin-top: 25px;
background-color: red;
background-color: rgb(54, 54, 54);
border-radius: 30px;
}

#third{
#third {
height: 100vh;
width: 100vw;
position: absolute;
top: 200%;
padding-left: 4%;
background: #010109;
}

#third h2{
color: white;
text-align: center;
font-size: 30px;
.allCards{
display: flex;
align-items: center;
justify-content: center;
}

#cards{
#cards {
width: 350px;
height: 500px;
background-color: #414141;
display: inline-block;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
border-radius: 5px;
overflow: hidden;
margin: 60px;
margin: 60px;
box-shadow: 10px 10px 20px rgba(255, 255, 255, 0.5);
color: rgb(210, 210, 210);
}
Expand All @@ -320,11 +324,11 @@ span:nth-child(10) {
text-align: center;
}

#cards-text h2{
#cards-text h2 {
padding: 10px;
}

#cards-text p{
#cards-text p {
font-size: 18px;
}

Expand All @@ -336,11 +340,9 @@ span:nth-child(10) {
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 30px;
margin-top: 30px;
}

#cards-text button:hover {
background-color: #0056b3;
}


74 changes: 39 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@
<body>
<!-- <canvas id="mouse"> -->
<nav class="navbar">
<div class="navbar-logo">
<p>GOAT Elitte Coders</p>
<img src="img/logo.png" alt="Logo" />
<div class="navbar-logo-and-text">
<img src="img/logo.png" alt="Logo" />
GOAT Elitte Coders
</div>
<div class="navbar-links">
<a href="#">Home</a>
Expand All @@ -59,48 +59,52 @@

<section id="second">
<div id="txt">
<h1>Immersive Virtual Exploration</h1>
<h1 style="font-weight: 200;">Immersive Virtual Exploration</h1>
</div>
<div id="video">
<video src="" autoplay></video>
</div>
</section>

<section id="third">
<h2>More About Space</h2>
<div id="cards">
<div id="cards-img">
<img src="/img/iss.jpg" alt="img">
</div>
<div id="cards-text">
<h2>ISS</h2>
<p> The International Space Station (ISS) is a habitable space laboratory that orbits Earth. It serves as a
platform for scientific research and international collaboration, advancing our understanding of space and
enabling exploration beyond our planet.</p>
<button>Read More</button>
</div>
<div id="txt">
<h2 style="font-weight: 200;">More About Space</h2>
</div>
<div id="cards">
<div id="cards-img">
<img src="/img/asteroid.jpg" alt="img">
<div class="allcards">
<div id="cards">
<div id="cards-img">
<img src="/img/iss.jpg" alt="img">
</div>
<div id="cards-text">
<h2>ISS</h2>
<p> The International Space Station (ISS) is a habitable space laboratory that orbits Earth. It serves as a
platform for scientific research and international collaboration, advancing our understanding of space and
enabling exploration beyond our planet.</p>
<button>Read More</button>
</div>
</div>
<div id="cards-text">
<h2>Asteroid</h2>
<p> An asteroid is a rocky object that orbits the Sun. Ranging in size from small boulders to massive bodies,
they offer insights into the early solar system and pose potential threats to Earth's impact events.</p>
<button>Read More</button>
</div>
</div>
<div id="cards">
<div id="cards-img">
<img src="/img/spiral-galaxy.jpg" alt="img">
<div id="cards">
<div id="cards-img">
<img src="/img/asteroid.jpg" alt="img">
</div>
<div id="cards-text">
<h2>Asteroid</h2>
<p> An asteroid is a rocky object that orbits the Sun. Ranging in size from small boulders to massive bodies,
they offer insights into the early solar system and pose potential threats to Earth's impact events.</p>
<button>Read More</button>
</div>
</div>
<div id="cards-text">
<h2>Spiral Galaxy</h2>
<p> A spiral galaxy is a vast cosmic structure characterized by spiral arms extending from a central nucleus.
These mesmerizing formations contain billions of stars, dust, and gas, showcasing the captivating beauty of
the universe.</p>
<button>Read More</button>
<div id="cards">
<div id="cards-img">
<img src="/img/spiral-galaxy.jpg" alt="img">
</div>
<div id="cards-text">
<h2>Spiral Galaxy</h2>
<p> A spiral galaxy is a vast cosmic structure characterized by spiral arms extending from a central nucleus.
These mesmerizing formations contain billions of stars, dust, and gas, showcasing the captivating beauty of
the universe.</p>
<button>Read More</button>
</div>
</div>
</div>
</section>
Expand Down

0 comments on commit f994c5a

Please sign in to comment.