diff --git a/css/style.css b/css/style.css index f8b24ce..81a1087 100644 --- a/css/style.css +++ b/css/style.css @@ -5,8 +5,22 @@ margin: 0; padding: 0; } - - +/* Header styling */ +nav{ + width: 100%; + height: 8vh; +} +.header-div{ + width: 100%; + background-color: black; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + z-index: 1; +} +/* Logo styling */ .logo { width: 10rem; display: flex; @@ -18,37 +32,53 @@ border: 3px solid #ccc; border-radius: 50px; } -.nav-list { +/* List and search button styling */ +.main-menu { display: flex; - gap: 1rem; + justify-content: space-around; + align-items: center; } -.nav-list li { + +.menu a { list-style: none; - padding: 20px; - font-size: 1.1rem; -} -.nav-list li a { text-decoration: none; color: white; + padding: 0px 25px; + margin-top: 10px; + font-size: 20px; } -.nav-list li a:hover { - color: rgb(209, 209, 191); +.menu a:first-child { + font-size: 25px; } -.rightnav { - width: 50%; - /* background-color: cornflowerblue; */ - text-align: right; + +.menu a:hover { + font-size: 25px; + text-decoration: none; + color: white; +} +.main-menu input { + width: 70%; + padding: 5px; + border: none; + outline: none; + font-size: 15px; + border-radius: 8px; + left: 20px; } -#search { - font-size: 20px; - border: 2px solid black; - border-radius: 5px; - padding: 8px; - margin: 7px; +.main-menu button { + width: 20%; + background: white; + border: none; + margin-left: 2px; + outline: none; + font-size: 15px; + border-radius: 8px; } + + /* background styling */ .background { background: rgba(0, 0, 0, 0.7) url(../img/city.png); @@ -59,6 +89,7 @@ /* firstsection / hero section styling */ .firstsection { height: 100vh; + position: relative; } .box-main { @@ -88,6 +119,8 @@ border-radius: 150px; display: block; margin: auto; + position: relative; + margin-top: 30px; } .text-big { @@ -184,13 +217,75 @@ a { footer { background-color: black; color: white; - margin-bottom: -2rem; - width: 100vw; + width: 100%; + height: 60vh; } .foot { display: flex; - justify-content: center; + position: relative; +} +.bottom { + width: 80%; + border: 2px solid white; + display: flex; + position: absolute; + padding: 10px 20px; + margin: 50px 100px; + height: 27vh; + text-align: center; +} + +.newsletter { + width: 50%; + margin: 10px; + color: white; +} + +.newsletter h1 { + font-size: 2.5em; + margin-bottom: 10px; +} + +.newsletter p { + line-height: 10px; + font-size: 1em; +} + +.subscribe { + width: 40%; + margin: 10px; + margin-top: 30px; +} + +.subscribe input { + width: 40%; + margin-top: 20px; + padding: 10px; + border: none; + outline: none; + font-size: 15px; + border-radius: 8px; + color: gray; +} + +.subscribe button { + width: 25%; + padding: 10px; + color: white; + background-color: #e74c3c; + border: none; + outline: none; + font-size: 15px; + border-radius: 8px; +} + +.icons { + width: 100%; + position: absolute; + text-align: center; + margin: auto; + margin-top: 200px; } .fa-brands, @@ -199,9 +294,22 @@ footer { margin: 12px; padding: 2px; margin-top: 32px; + cursor: pointer; } footer ul { + + width: 100%; + margin: 10px; + margin-top: 300px; + font-weight: bold; + text-align: center; + font-size: 1.2em; + display: flex; + gap: 1rem; + list-style: none; + justify-content: center; + cursor: pointer; font-weight: bold; font-size: 1em; display: flex; @@ -242,6 +350,7 @@ footer ul { ::-webkit-scrollbar-thumb { background: #000000; border-radius: 5px; + } ::-webkit-scrollbar-thumb:hover { diff --git a/index.html b/index.html index 3013de8..a369b6f 100644 --- a/index.html +++ b/index.html @@ -38,66 +38,91 @@ - + + + + + +
+
+
+
+ -
- -
-
-
- -
-

The Shopping place for all needs!

-

- Come here and find all the products you need all at great discounts. - This is the future of shopping. -

-
+

The Shopping place for all needs!

+

+ Come here and find all the products you need all at great discounts. + This is the future of shopping. +

+
-
-
-
-

OCEAN LIFE FUNDAMENTALS

-

When speaking about our global environment, a common adage to hear is that “we know more about outer space than we do about the ocean.” In some ways, this statement is true! The oceans are vast, and exploring them is dangerous and difficult — in some ways, it’s even more difficult than exploring space. Still, our lack of knowledge about certain aspects of our oceans doesn’t mean we haven’t made an impact on them. This exclusive Faunalytics Fundamental examines our relationships with ocean life, exploring some of the most important issues facing fishes, aquatic mammals, and other species, based on the best available and current data. We hope you find the information useful in your advocacy, and in your day-to-day lives advocacy. Please be sure to check out all of the source links embedded in the text and infographics below, and be sure to check out the blog about what we included, and what we left out.

-
-
-
+
+
+
+

OCEAN LIFE FUNDAMENTALS

+

When speaking about our global environment, a common adage to hear is that “we + know more about outer space than we do about the ocean.” In some ways, this statement is true! The oceans are + vast, and exploring them is dangerous and difficult — in some ways, it’s even more difficult than exploring + space. Still, our lack of knowledge about certain aspects of our oceans doesn’t mean we haven’t made an impact + on them. This exclusive Faunalytics Fundamental examines our relationships with ocean life, exploring some of + the most important issues facing fishes, aquatic mammals, and other species, based on the best available and + current data. We hope you find the information useful in your advocacy, and in your day-to-day lives advocacy. + Please be sure to check out all of the source links embedded in the text and infographics below, and be sure to + check out the blog about what we included, and what we left out.

+
+
+
+
-
-
-

MEET THE ANIMALS

-

Unlike companion animals, certain kinds of wildlife, and even farmed animals, there are relatively few opportunities to “get to know” ocean life. As with farmed animals, many people only get close to or experience ocean creatures after they’ve already been killed, processed, and plated. In other cases, people may “meet” animals like whales, dolphins, and other species in situations of extreme and unnatural captivity, like zoos and aquariums. Even with activities like whale watching, it can be difficult to truly “know” the vast range of ocean life out there. Below, we look at different categories of ocean life and just how incredible they truly are.

+
+
+

MEET THE ANIMALS

+

Unlike companion animals, certain kinds of wildlife, and even farmed animals, + there are relatively few opportunities to “get to know” ocean life. As with farmed animals, many people only get + close to or experience ocean creatures after they’ve already been killed, processed, and plated. In other cases, + people may “meet” animals like whales, dolphins, and other species in situations of extreme and unnatural + captivity, like zoos and aquariums. Even with activities like whale watching, it can be difficult to truly + “know” the vast range of ocean life out there. Below, we look at different categories of ocean life and just how + incredible they truly are.

-
-
-
-
-
-

ATTITUDES

-

While most people don’t have a direct connection to ocean life, that doesn’t stop people from having opinions about it! Whether it’s trophy fishing, marine conservation, pescetarianism, or any other issue, all of us land-dwelling humans have a lot of ideas about the oceans, marine life, and what our responsibilities to these amazing creatures are. Below, we explore some of the key attitudes people have about the state of our oceans, and their protection.

+
+
+
+
+
+

ATTITUDES

+

While most people don’t have a direct connection to ocean life, that doesn’t + stop people from having opinions about it! Whether it’s trophy fishing, marine conservation, pescetarianism, or + any other issue, all of us land-dwelling humans have a lot of ideas about the oceans, marine life, and what our + responsibilities to these amazing creatures are. Below, we explore some of the key attitudes people have about + the state of our oceans, and their protection.

-
-
-
-
-
+
+
+
+
+

HUMANS BEST FRIEND : DOG

-

Through the ages, people have claimed dogs as one of their closest, and best, companions. Of all the domesticated animals, dogs serve the widest array of roles: protector, helper, lifesaver, and companion. Dogs are incredible friends to people, and they’ve been companions through centuries. The relationship between dogs and people is deep and old.

-
-
+

Through the ages, people have claimed dogs as one of their closest, and best, + companions. Of all the domesticated animals, dogs serve the widest array of roles: protector, helper, lifesaver, + and companion. Dogs are incredible friends to people, and they’ve been companions through centuries. The + relationship between dogs and people is deep and old.

+
+
-
-

Our Project Contributors

-
- -
+
+

Our Project Contributors

+
+ +

Names of contributors - 2022

+
    @@ -127,31 +152,45 @@

    Names of contributors - 2022

-
+
-
+ - + + \ No newline at end of file