[clemme]

I'm trying to make a website, HTML55 and CSS3. I would like to add a JavaScript nice, but do not know where should add. This is my body:

Code

<!DOCTYPE html>
<html lang="it">

<head>
    <title>Nome sito </title>
    <meta charset="utf-8"/>
  
    <link rel="stylesheet" href="style.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

</head>
<body class="body">
    <header class="mainHeader">
       <img src="logo.png" width="900" height="auto" align="center" >
      
       <nav><ul>
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">Contatti</a></li>
           <li><a href="#">Chi siamo?</a></li>
           <li><a href="#">nome</a></li>
           <li><a href="#">News</a></li>
      
       </ul></nav>
    </header>
  
    <div class="mainContent">
       <div class="content">
          <article class="topcontent">
             <header>
                <h2><a href="#" title="first post"></a></h2>
             </header>
          
             <footer>
             <p class="post-info">This is a post info</p>
             </footer>
            
             <content>
                
                
                 <p>
                      sdfasdfsdf
                 </p>
            
            
             </content>
           </article>
           <article class="bottomContent">
             <header>
                <h2><a href="#" title="Second post">Second post</a></h2>
             </header>
          
             <footer>
             <p class="post-info">This is the second post</p>
             </footer>
            
             <content>
                
                
                 <p> ciao ciao ciao
                 </p>
            
            
             </content>
          </article>
        </div>
    </div>
      <aside class="top-sidebar">
         <article>
             <h2>Top sidebar</h2>
             <p> Questo è un paragrafo.</p>
         </article>
    
     </aside>
     <aside class="middle-sidebar">
         <article>
             <h2>middle sidebar</h2>
             <p> Questo è un paragrafo.</p>
         </article>
         <aside class="bottom-sidebar">
         <article>
             <h2>bottom sidebar</h2>
             <p> Questo è un paragrafo.</p>
         </article>
    
     </aside>
    
     </aside>
       <footer class="mainfooter">
         <p> copyright &copy; 2016 <a href="#" title="Nikita Zanella">Nikita Zanella</a></p>
  

</body>

</html>

Hence my CSS:

Code

body {
    background-image: url('bg.png');
    color:#000000;
    font-size: 87.5%; /* base font size is 14 px */
    font-family: Arial, 'Lucida Sans Unicode' ;
    line-height: 3;
    text-align: left;
}

a {
    text-decoration: none;
}
a:link, a:visited {
}
a:hover, a:active {
  
}
.body {
    margin: 0 auto;
    width: 70%;
    clear: both;
  
}
.mainHeader img {
    width:100%;
    height: auto;
    margin:2% 0;
}

.mainHeader nav {
    background-color: #666;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  
  
}
.mainHeader nav ul {
     list-style: none;
     margin: 0 auto;
}

.mainHeader nav ul li {
    float: left;
    display: inline;
    }
.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #FFF;
    display: inline-block;
    padding: 10px 25px ;
    height: 20px;
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background-color: #CF5C3F;
    text-shadow: none;
}
.mainHeader nav lu li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.mainContent {
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.content {
    width: 70%;
    float: left;
}
.topContent {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
  
}
.bottomContent {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3%;
  
}
.top-sidebar {
    width: 21%;
    float: left;
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 2% 0 2% 3%;
    padding: 2% 3%;
}
.middle-sidebar {
    width: 21%;
    float: left;
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 2% 0 2% 3%;
    padding: 2% 3%;
}
.bottom-sidebar {
    width: 21%;
    float: left;
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 2% 0 2% 3%;
    padding: 2% 3%;
}

and this is the script that I would insert:

Code

var myName = "Nome";

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var letterColors = [red, orange, green, blue, purple];

drawName(myName, letterColors);


{
    bubbleShape = 'circle';
}

bounceBubbles();

Help me figure out where the hell I have to add. Nothing understand it is to be a day that we work.

[Kylos]

You can even just add it on bottom between script tags, else use the DOMContentLoaded event to execute it and include it on the header as a .js script

[Oscura]

There are two options:

1. Referencing to a .js file containing your script
   


2. Put the js code in your HTML (bottom of the body)
   

I'd suggest the second option as it is a very short script. Also notice: you're calling the bounceBubbles(); function which is not declared.

[clemme]

as I declare bounceBubbles ( myName ) ?
excuse me but I have a beautiful mess