Web app

Hi there,i please need a help to proceed with my project,im working on a toy exchange web App,then a mobile version, can some one please help how i can link my navigation to the paragraphs associated to it,whereby when the nav is clicked,the content should popup,example when a ‘HOME or ABOUT US’ is clicked.secondly i have tried to create an image and a text logo but doesnt work as i wanted.
Thanks in advance!!!

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The toy exchange</title>
<link href= "style.css" type= "text/css" rel= "stylesheet">

    </head>
    <body>
<header>

        <h1 class= "logo">MyToys</h1>
        <nav>
     <ul id= "navigation">
<li><a href="#home.html">Home</a></li>
<li class = nav-item>
    <a class="nav-link" href="#about.html">About Us</a></li>
<li><a href="#terms.html">Terms & Conditions</a></li>
<li><a href="#Privacy policy.html">Privacy Policy</a></li>
<li><a href="#contact.html">Contact</a></li>
<li><a href="#faq.html">FAQs</a></li>
     </ul>   
    </nav>
</header>

<main>
<!-- Home section-->

<div class= "navigation">
    <div id = "home"><br>
       <br> <h2 id="intro">Number one toy exchange Application </h2>

       <div class= "image">
        <img src= "IMG-20200711-WA0005.jpg" alt= "">
    </div>
    
    <p href="Home">MyToys is a cheaper,innovative, educational platform that help families and the environment to reduce the huge boxes full of unused toys that are either in storage or thrown away by Swapping, giving or getting new used toy.</p>
</div>

<!--About section-->

<div id= "about" class= "about-app">
    <div class= "container">
        <div class= "row">
            <div class = "about app">
                <h2 class = "color-white"> About our App</h2>

    <p>MyToys will make it easy on you. Instead on stocking toys&nbsp;and then throwing them in order to get a new one you will exchange or give your unused toys. Where the kids start taking responsibility regarding their toys and engage together.MyToy provides its Users, Whatever the age or the type of toy the right environment to exchange, get or give by helping to fulfill their exact specifications and demands. Our application focuses on providing our users the suitable environment as for age and sex. We offer our user the Simplicity as an easy exchange through facilities. Our application provides a GPS locator in order to help our customer locate each other easily</p>
    <p>Our aim is to reduce the pollution,raise awareness and educatae kids the concept of value,and also to change the mentality about the unused toys by reviving the idea of giving the toys a second chance to draw a smile on another child's face.<br>
        <strong>(A new survey of parents discovered that, on average, a child loses interest in a toy within just 36 days. A fifth of parents said their child lost interest after 11 hours of play, while 8% said their children became bored in less than an hour.

        The figures also show that children have an average of four toys they’ve never even played with – which could add up to as many as 162 million unused toys in the UK alone, according to the charity’s analysis.)</strong></p>
   
             

            </div>

        </div>

    </div>
</div>

<!--FAQ section-->

<div id= "FAQ">

</div>

</main>

<!--footer section-->
<footer>
    <p>Contact:+49-17639375062</p>
    <p>Email:levikomi@yahoo.com</p>
    <p>Copyright infomation here</p>
    <P>Terms of use here</P>
    <p>Site maps here</p>
</footer>
    </body>
</html>

.logo{
    color:red;
    background-color:darkolivegreen;
    font-family:"sans-Serif";
    text-align:center;
    background:logo
    
}

#navigation{
    margin:10px;
    width:900px;
    font-family:san-serif;
    flex-direction:column;
}

#navigation li{
    display:block;
    width:120px;
    float:left;
    margin-left:2px;
    border:1px solid-black;
   
}
#navigation a{
display:block;
padding:3px;
text-decoration:none;
background-color:#fff;
color:#009;

}


#navigation a:hover{
    
    background-color:#009;
    color:#fff;
    transition:all 0.40s;

}

#intro{
    font-size:40px;
    font-family:Fantasy;
    color:green;
    text-align:center;
    background-color:yellowgreen;
}
.image{
    background-image: url("IMG-20200711-WA0005.jpg");
     background-size:cover;
     width:20px;
     height:50px;
     background-position:center;
     opacity:0.5;
}

Hello! Think about how one would use a link. How and where would you place the anchor tag?

Hint if you're stuck:
<a href="link to"><random_tag>random text</random_tag></a>
1 Like

Thanks for the response, i have tried how i understood the hint but, i couldn’t achieve my aim rather my paragraphs turned blue.
this is what i did.
<a href="Home"

text here

.
i have also tried linking to relative page internally but that opens a new window after clicking on the “Home” and or “About Us”
  • Home
  • in this case i have created a file called home.html where my paragraph is written.
    <a href ="Home"><p>text here</p></a>
    
    <li><a href="./home.html">Home</a></li>
    
    

    The attribute target = "_self" is used to open a page in the same tab.

    codeneutrino Help Desk (gold)
    September 29 |

    Thanks Aidan, I only know of the target =_“blank” which opens to another page…Learning by doing. I will try it.
    The attribute target = “_self” is used to open a page in the same tab.

    Visit Topic or reply to this email to respond.

    In Reply To

    levi1237
    September 28 |

    text here

  • Home

  • Visit Topic or reply to this email to respond.

    To unsubscribe from these emails, click here.

    1 Like