Product Landing Page - Build a Product Landing Page

[Ashimdevnath]

Tell us what’s happening:

`

Product-landing-page

Organcic Foods

• Features
• How it work?
• Pricing

Handcrafted, home-made masterpieces

Premium Materials

If you don't wan't to loss premium things you just come here and you will exprince a greate product which no one will can give you in any store

Fast Shipping

We make sure you recieve your product as soon as we have finished making it. We also provide free returns if you are not satisfied.

Quality Assurance

For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.

Chicken Dishes

• Amritsari Chicken Masala
• Teekha Murg
• Murg Malaiwala
• Kerala Chicken Roast

Paneer-Dishes

• Paneer Butter Masala
• Palak Paneer
• Chilli Paneer
• Paneer Tikka

Chinese Dishes

• Egg Roll
• Sesame Chicken
• Wonton Soup
• Sweet and Sour Chicken

Privacy

Terms

Contact

Copyright 2016, Original Trombones `

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

freeCodeCamp.org

[Ashimdevnath]

* {
  font-family: 'Oswald', sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: #A3C6FF;
  height:100vh;
  width: 100vw;
}

#header {
  position: fixed;
  top: 0;
  width:100%;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
}

#header-img {
  width: 100%;
  height: 100%;
  max-width: 60px;
  max-height: 60px;
  margin-left: -26rem;
  position: relative;
}

#tag-of-product {
  position: absolute;
  top: 16px;
  left: 9rem;
  font-family: 'Bebas Neue', cursive;
  font-size: 2rem;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

nav>ul {
  display: flex;
  position: absolute;
  left: 58rem;
  width: 44vw;
  flex-direction: row;
  justify-content: space-evenly;
}

#s2-main>div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
  flex-direction: column;
}

#email {
  width: 16rem;
  margin: 10px;
  padding: 5px;
}

#submit {
  width: 10rem;
  background-color: aquamarine;
  cursor: pointer;
  height: 2rem;
  border-radius: 5px;
  margin-top: -5px;
  border-color: transparent;
}

.info {
  display: flex;
  flex-direction: column;
  margin: 25px;
  justify-content: center;
  /* align-items:center; */
}

.info-1 {
  position: relative;
  left: 281px;
}

.info-2 {
  position: relative;
  left: 281px;

}

.info-3 {
  position: relative;
  left: 281px;
}

#video-of-product {
  margin-top: 65px;
}

#product-pricing {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width:25%;
  height:13rem;
  margin: 10px;
  border: 1px solid #000;
  border-radius: 3px;
  padding:44px;
}
#product-1  > h2 {
    background-color: #75BCFF; 
    width: 130%; 
    margin-top: -44px;
    margin-bottom: 20px;
} 
#product-2  > h2 {
    background-color: #75BCFF; 
    width: 130%; 
    margin-top: -44px;
    margin-bottom: 20px;
} 
#product-3    > h2 {
    background-color: #75BCFF; 
    width: 130%; 
    margin-top: -44px;
    margin-bottom: 20px;
} 
.select {
  width: 6rem;
  margin-top:8px;
  background-color:aquamarine;
}
#item-list-1 > li{
  margin: 10px;
}
#item-list-2 > li{
  margin: 10px;
}
#item-list-3 > li{
  margin: 10px;
}

#footer {
  width: 100%;
  height:15%;
  background-color:white;
}

#footer-content {
  display:flex;
  flex-direction:row;
  padding:15px;
  justify-content: flex-end;
  align-items: center;
}
.content-footer {
 padding:12px;
}
footer > span {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
  font-size: 0.9em;
  color: #444;
  position: relative;
  top:26px;
  right: 229px;
} 
@media (max-width:500px) and (min-width:250px) {
       #product-1  > h2 {
    background-color: #75BCFF; 
    width: 50%; 
    margin-top: -44px;
    margin-bottom: 20px;
} 
#product-2  > h2 {
    background-color: #75BCFF; 
    width: 50%; 
    margin-top: -44px;
    margin-bottom: 20px;
} 
#product-3    > h2 {
    background-color: #75BCFF; 
    width: 50%; 
    margin-top: -44px;
    margin-bottom: 20px;
} 
.select {
  width: 3rem;
  margin-top:8px;
  background-color:aquamarine;
}
#item-list-1 > li{
  margin: 1px;
}
#item-list-2 > li{
  margin: 1px;
}
#item-list-3 > li{
  margin: 1px;
}
}