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-color: white;
margin: 0;
}
div{
background-color: black;
position: relative;;
width: 270px;
height: 500px;
border-radius: 10px;
overflow-y: scroll;
scroll-snap-type:smooth;
margin-top: 50px;
}
#text{
text-align: center;
color: white;
padding: 25px 25px 0px 25px;
font-size: 35px;
font-weight:900;
}
span{
color: rgb(139, 0, 53);
}
.subText{
position: relative;
color:gray;
}
#EmailBox{
background-color: rgb(48, 43, 43);
margin-top: 15px;
padding:7px 26px;
margin-bottom: 13px;
border-radius: 5px;
border-bottom-color: darkmagenta;
border-right-color: darkmagenta;
border-top-color:rgb(170, 162, 162);
color: white;
}
::placeholder{
color:rgb(204, 195, 195);
}
#btn{
background-color: rgb(139, 0, 53);
padding:7px 55px;
border-radius: 5px;
color: white;
cursor: pointer;
}
*:focus{
outline: none;
}
::-webkit-scrollbar{
width: 1px;
border-radius: 10px;
}
.main_icon{
margin-top:20px ;
}
/* Fast_icon - icon and texts */
.Fast_icon{
margin-top: 70px;
margin-right: 200px;
margin-bottom: 15px;
background-color: darkmagenta;
padding: 5px;
border-radius: 5px;
}
.Fast{
color: white;
margin-right: 80px;
}
.Fast_para{
color:rgb(172, 166, 166);
font-size: 12px;
margin-right:10px ;
margin-top: 10px;
}
/* chat icon */
.Chat_icon{
margin-right: 200px;
margin-bottom: 15px;
background-color: darkmagenta;
padding: 5px;
border-radius: 5px;
}
.chat{
color: white;
margin-right: 46px;
}
.chat_p{
color:rgb(172, 166, 166);
font-size: 11px;
margin-left:12px ;
margin-top: 10px;
}
/* cloud icon */
.cloud_icon{
margin-right: 200px;
margin-bottom: 15px;
background-color: darkmagenta;
padding: 5px;
border-radius: 5px;
}
.cloud_h{
color: white;
margin-right: 104px;
}
.cloud_p{
color:rgb(172, 166, 166);
font-size: 12px;
margin-left:18px ;
margin-top: 10px;
}
/* Menu_icon */
.menu_icon{
margin-right: 200px;
margin-bottom: 15px;
background-color: darkmagenta;
padding: 5px;
border-radius: 5px;
}
.menu_h{
color: white;
margin-right: 85px;
}
.menu_p{
color:rgb(172, 166, 166);
font-size: 12px;
margin-left:10px ;
margin-top: 10px;
}
.Get_access{
color: white;
margin-bottom: 20px;
font-weight: 700;
}
.Get_p{
color:rgb(172, 166, 166);
font-size: 12px;
}
.hr_style{
margin-top: 60px;
border: 0.1px;
height: 1px;
background: rgb(133, 99, 99);
width: 225px;
margin-bottom: 0em;
}
a{
font-size: 12px;
}
.p1, .p2, .p3, .p4{
margin-bottom: 5px;
}
.footer_icon{
margin-right: 7px;
}
/* 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(Change, 2000);
function Change() {
element.innerHTML = text[counter];
counter++;
if(counter >= text.length) {
counter = 0;
}
}
</script>
OUTPUT:-
Comments
Post a Comment
Please do not enter any spam link in the comment box.