HTML+CSS+JAVASCRIPT Template Design

 Mobile UI design:-

HTML CODE:-

<center>
<div>
  <svg width="2em" height="2em" viewBox="0 0 16 16" class="main_icon" fill="white" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1H5.5z"/>
    <path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
  </svg>

<p id="text">Hello this is <span id="changeText">Great--</span> application</p>
<p class="subText">Create audio with a modern and incredibly intuitive tool</p>
<input type="text" name="Email" id="EmailBox" placeholder="Your email">
<button id="btn">Get early access</button><br>

<!-- Fast icon -->
<svg width="2em" height="2em" viewBox="0 0 16 16" class="Fast_icon" fill="white" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>
</svg>
<h5 class="Fast">Fast and intuitive</h5>
<p class="Fast_para">Apply effects efficient through an intuitive interface
   where everything is at a glance.
</p><br>
<!-- chat icon -->
<svg width="2em" height="2em" viewBox="0 0 16 16" class="Chat_icon" fill="white" xmlns="http://www.w3.org/2000/svg">
  <path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z"/>
</svg>
<h5 class="chat">Contextual feedback</h5>
<p class="chat_p">Invite your team to give feedback to specific parts of your audio file.</p><br>

<!-- cloud icon -->
<svg width="2em" height="2em" viewBox="0 0 16 16" class="cloud_icon" fill="white" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>
</svg>
<h5 class="cloud_h">Cloud storage</h5>
<p class="cloud_p">Save your files and audio clips in the cloud, and access them from anywhere.</p>

<!-- menu bar -->

<svg width="2em" height="2em" viewBox="0 0 16 16" class="menu_icon" fill="white" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M0 1.5A1.5 1.5 0 0 1 1.5 0h2A1.5 1.5 0 0 1 5 1.5v2A1.5 1.5 0 0 1 3.5 5h-2A1.5 1.5 0 0 1 0 3.5v-2zM14 7H2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1zM2 6a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H2z"/>
  <path fill-rule="evenodd" d="M15 11H1v-1h14v1zM2 12.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5z"/>
</svg>
<h5 class="menu_h">Well-integrated</h5>
<p class="menu_p">Export directly to different platforms, browse content libraries, and mich more.</p><br>

<h2 class="Get_access">Get early access</h2>
<p class="Get_p">Sign up  to the waitlist to be the first to try out Sonuum and stay in the loop</p><br>

<!-- again email -->
<input type="text" name="Email" id="EmailBox" placeholder="Your email">
<button id="btn">Get early access</button><br>
<hr class="hr_style"><br>
<!-- Navigation -->
<nav>

  <p class="p1"><a href="Features"  style="color:rgb(182, 162, 162); text-decoration: none;">Features</a></p>
  <p class="p2"><a href="Twitter"  style="color:rgb(182, 162, 162); text-decoration: none;">Twitter</a></p>
  <p class="p3"><a href="Preview"  style="color:rgb(182, 162, 162); text-decoration: none;">Preview</a></p>
  <p class="p4"><a href="Privacy Policy" style="color:rgb(182, 162, 162); text-decoration: none;">Privacy Policy</a></p>

<nav>

  <svg width="1em" height="1em" viewBox="0 0 16 16" class="footer_icon" fill="white" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1H5.5z"/>
    <path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
  </svg><h7 style="color: rgb(182, 162, 162); font-size: 12.5px;">Sonuum - By Alyssa X</h7><br><br>





</div>
</center>



CSS CODE:-
body {
    background-colorwhite;
    margin0;
    
    
}


div{
    background-colorblack;
    positionrelative;;
    width270px;
    height500px;
    border-radius10px;
    overflow-yscroll;
    scroll-snap-type:smooth;
    margin-top50px;


}
#text{
  
text-aligncenter;
colorwhite;
padding25px 25px 0px 25px;
font-size35px;
font-weight:900;
}

span{
    colorrgb(139053);
}
.subText{
    positionrelative;
    color:gray;
}
#EmailBox{
    background-colorrgb(484343);
    margin-top15px;
   padding:7px 26px;
   margin-bottom13px;
   border-radius5px;
   border-bottom-colordarkmagenta;
   border-right-colordarkmagenta;
   border-top-color:rgb(170162162);
  colorwhite;
}

::placeholder{
    color:rgb(204195195);
}
#btn{
    background-colorrgb(139053);
padding:7px 55px;
border-radius5px;
colorwhite;
cursorpointer;

}

*:focus{
    outlinenone;
}
::-webkit-scrollbar{
    width1px;
    border-radius10px;
 
}

.main_icon{
    margin-top:20px ;
}
/* Fast_icon - icon and texts */
.Fast_icon{
    margin-top70px;
    margin-right200px;
    margin-bottom15px;
    background-colordarkmagenta;
    padding5px;
    border-radius5px;
}
.Fast{
    colorwhite;
    margin-right80px;
    
}
.Fast_para{
    color:rgb(172166166);
    font-size12px;
    margin-right:10px ;
    margin-top10px;
}

/* chat icon */

.Chat_icon{

    
    margin-right200px;
    margin-bottom15px;
    background-colordarkmagenta;
    padding5px;
    border-radius5px;
}


.chat{

    colorwhite;
    margin-right46px;
   
}

.chat_p{

    color:rgb(172166166);
    font-size11px;
    margin-left:12px ;
    margin-top10px;
}

/* cloud icon */

.cloud_icon{

    margin-right200px;
    margin-bottom15px;
    background-colordarkmagenta;
    padding5px;
    border-radius5px;
}

.cloud_h{

    colorwhite;
    margin-right104px;
}

.cloud_p{

    color:rgb(172166166);
    font-size12px;
    margin-left:18px ;
    margin-top10px;
}
/* Menu_icon */

.menu_icon{

    margin-right200px;
    margin-bottom15px;
    background-colordarkmagenta;
    padding5px;
    border-radius5px;
}

.menu_h{
    colorwhite;
    margin-right85px;

}
.menu_p{

    
    color:rgb(172166166);
    font-size12px;
    margin-left:10px ;
    margin-top10px;
}

.Get_access{
    colorwhite;
    margin-bottom20px;
    font-weight700;
}

.Get_p{
    color:rgb(172166166);
    font-size12px
}
.hr_style{
    margin-top60px;
    border0.1px;
    height1px;
    backgroundrgb(1339999);
    width225px;
    margin-bottom0em;

}
a{
    font-size12px;
}
.p1.p2.p3.p4{
    margin-bottom5px;
}
.footer_icon{
    margin-right7px;

}
 /* a:link:hover{
    background-color: indigo;
 } */
 a:visited{
     color#333399;
 }



JAVASCRIPT CODE:-
<script>
  var text = ["Osammm""Fabulous""marvalous""supub""minimal"];
  var counter = 0;
  var element = document.getElementById("changeText");
  var timer = setInterval(Change2000);

  function Change() {
    element.innerHTML = text[counter];
    counter++;
    if(counter >= text.length) {
      counter = 0;
    }
  }
</script>


OUTPUT:-





Comments

Popular Posts