CREATE YOUR LOGO - HOME
DOCTYPE html><html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet"type="text/css"href="css/main.css"/>
<meta charset="UTF-8" />
<title>Create Your Logo</title>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header d-flex flex-column text-center">
<nav class="nav-container navbar-expand-lg primary d-flex flex-row p-2 align-items-end ">
<!-- Items -->
<div class="collapse navbar-collapse" id="topNavBar">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#" >
<span class="full-text" aria-hidden="true">
Home
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link"href="">
<span class="full-text" aria-hidden="true">
About
</span>
</a>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" data-toggle="dropdown"href="#"id="navbarDropdownMenuLink">
<span class="full-text"aria-hidden="true">
Logo examples
</span>
</a>
<ul class="dropdown-menu "aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-item">
<a href="">
<span class="full-text"aria-hidden="true">
Business
</span>
</a>
</li>
<li class="dropdown-item">
<a href="">
<span class="full-text"aria-hidden="true">
Education
</span>
</a>
</li>
<li class="dropdown-item">
<a href="">
<span class="full-text"aria-hidden="true">
Sport
</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Title and subtitle-->
<h1 class="text-center">Create Your Logo</h1>
<p class="text-center">Create a simple logo in seconds..</p>
<!-- Form for entering the name of the company or your name-->
<form>
<input type="text"id="logoname"name="logoname"><br>
<input type="submit"class="btn btn-danger"value="Submit Button">
</form>
</div> <!-- Header - end-->
<!-- Middle part of page -->
<div class="d-flex flex-column content">
<!-- Colored ribbon with steps to create a logo -->
<div class="ribbon d-flex flex-row justify-content-around">
<div class="p-2 field">
<h1>1. Choose a name</h1>
<p>Enter your name or the name of your company logo</p>
</div>
<div class="field">
<h1>2. Choose a logo</h1>
<p>Select the logo that the application was created at the start and if you want to make your own changes to it</p>
</div>
<div class="field">
<h1>3. Download logo</h1>
<p>Save the logo under your profile and download the file</p>
</div>
</div><!-- Colored ribbon with steps to create a logo - end-->
<!-- Examples of created logo -->
<div class="logo_example d-flex flex-column justify-content-around">
<h1 class="p-2">Primeri kreiranih logo-a</h1>
<div class=" d-flex flex-row justify-content-around">
<img src="images/logo_prim_1.png" class="rounded" alt="Computer">
<img src="images/logo_prim_2.png"class="rounded"alt="Need">
<img src="images/logo_prim_3.png"class="rounded"alt="Svet programiranja">
</div>
</div><!-- Examples of created logo - end-->
</div><!-- Middle part of page - end -->
<!-- Footer -->
<div class="footer d-flex flex-column">
<div class="d-flex flex-row justify-content-around">
<div class="d-flex flex-column linkovi">
<a href="http://rctpupin.edu.rs/">RCT Pupin</a>
<a href="https://petlja.org/">Petlja</a>
<a href="https://izprogramiranja.weebly.com/">Svet programiranja</a>
</div>
<div class="d-flex flex-column linkovi text-white text-center">
<a href="https://dms.rs/">DMS</a>
<a href="https://www.w3schools.com/">W3School</a>
<a href="https://getbootstrap.com/">Bootstrap</a>
</div>
</div>
<p class="text-center text-white">© Copyright 2020 Ime Prezime</p>
</div><!-- Footer - end -->
</div>
</body>
</html>
Suggestion for improvement of this page
Here are specific suggestions for improving accessibility, SEO optimization, user feedback, and input validation for your "Create Your Logo - Home" page:- Accessibility:
<!-- Other code remains the same -->
</nav>
<h1 class="text-center" aria-level="1"role="heading">Create Your Logo</h1>
<p class="text-center" aria-label="Subtitle for logo creation">Create a simple logo in seconds..</p>
<form aria-labelledby="logoForm">
<label for="logoname"class="visually-hidden">Enter your logo name</label>
<input type="text"id="logoname"name="logoname"aria-required="true"placeholder="Enter your logo name" />
<input type="submit" class="btn btn-danger" value="Submit" />
</form> 2. SEO Optimization:
Meta Descriptions and KeywordsInclude a meta description and keywords in the <head> section:<meta name="description"content="Create your own logo in just a few steps. Easy to use application with customizable options for businesses, education, and more.">
<meta name="keywords"content="logo creation, design your logo, customizable logos, business logos, educational logos, logo examples">
3. User Feedback:
Confirmation MessageImplement a confirmation message after the logo name submission. You can use JavaScript to handle this:<script>
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form submission
const logoName = document.getElementById('logoname').value;
if (logoName) {
alert(`Thank you! Your logo name "${logoName}" has been submitted.`);
// Optionally, you can clear the input field
document.getElementById('logoname').value = '';
} else {
alert('Please enter a logo name before submitting.');
}
});
</script>
4. Validation:
JavaScript Input ValidationAdd JavaScript validation to ensure users enter a valid logo name:<script>
document.querySelector('form').addEventListener('submit', function(event) {
const logoName = document.getElementById('logoname').value.trim();
if (logoName.length < 3) {
event.preventDefault(); // Prevent form submission
alert('Logo name must be at least 3 characters long.');
} else {
// Proceed with form submission or confirmation message
alert(`Thank you! Your logo name "${logoName}" has been submitted.`);
}
});
</script>
Summary
By incorporating these suggestions, you'll significantly enhance the accessibility, SEO, user interaction, and input validation for your logo creation website. This will help ensure a better experience for all users, including those with disabilities, as well as improve search engine visibility.Complete code:
<!DOCTYPE html><html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<meta charset="UTF-8" />
<meta name="description" content="Create your own logo in just a few steps. Easy to use application with customizable options for businesses, education, and more.">
<meta name="keywords" content="logo creation, design your logo, customizable logos, business logos, educational logos, logo examples">
<title>Create Your Logo</title>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header d-flex flex-column text-center">
<nav class="nav-container navbar-expand-lg primary d-flex flex-row p-2 align-items-end" role="navigation" aria-label="Main Navigation">
<div class="collapse navbar-collapse" id="topNavBar">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><span class="full-text" aria-hidden="true">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="full-text" aria-hidden="true">About</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdownMenuLink">
<span class="full-text" aria-hidden="true">Logo examples</span>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-item"><a href="#"><span class="full-text" aria-hidden="true">Business</span></a></li>
<li class="dropdown-item"><a href="#"><span class="full-text" aria-hidden="true">Education</span></a></li>
<li class="dropdown-item"><a href="#"><span class="full-text" aria-hidden="true">Sport</span></a></li>
</ul>
</li>
</ul>
</div>
</nav>
<h1 class="text-center" aria-level="1" role="heading">Create Your Logo</h1>
<p class="text-center">Create a simple logo in seconds..</p>
<!-- Form for entering the name of the company or your name -->
<form id="logoForm" aria-labelledby="logoForm">
<label for="logoname" class="visually-hidden">Enter your logo name</label>
<input type="text" id="logoname" name="logoname" aria-required="true" placeholder="Enter your logo name" />
<input type="submit" class="btn btn-danger" value="Submit" />
</form>
</div> <!-- Header - end -->
<!-- Middle part of page -->
<div class="d-flex flex-column content">
<div class="ribbon d-flex flex-row justify-content-around">
<div class="p-2 field">
<h1>1. Choose a name</h1>
<p>Enter your name or the name of your company logo</p>
</div>
<div class="field">
<h1>2. Choose a logo</h1>
<p>Select the logo that the application was created at the start and if you want to make your own changes to it</p>
</div>
<div class="field">
<h1>3. Download logo</h1>
<p>Save the logo under your profile and download the file</p>
</div>
</div> <!-- Colored ribbon with steps to create a logo - end -->
<!-- Examples of created logo -->
<div class="logo_example d-flex flex-column justify-content-around">
<h1 class="p-2">Primeri kreiranih logo-a</h1>
<div class="d-flex flex-row justify-content-around">
<img src="images/logo_prim_1.png" class="rounded" alt="Computer logo example">
<img src="images/logo_prim_2.png" class="rounded" alt="Need logo example">
<img src="images/logo_prim_3.png" class="rounded" alt="Svet programiranja logo example">
</div>
</div> <!-- Examples of created logo - end -->
</div> <!-- Middle part of page - end -->
<!-- Footer -->
<div class="footer d-flex flex-column">
<div class="d-flex flex-row justify-content-around">
<div class="d-flex flex-column linkovi">
<a href="http://rctpupin.edu.rs/">RCT Pupin</a>
<a href="https://petlja.org/">Petlja</a>
<a href="https://izprogramiranja.weebly.com/">Svet programiranja</a>
</div>
<div class="d-flex flex-column linkovi text-white text-center">
<a href="https://dms.rs/">DMS</a>
<a href="https://www.w3schools.com/">W3School</a>
<a href="https://getbootstrap.com/">Bootstrap</a>
</div>
</div>
<p class="text-center text-white">© Copyright 2020 Ime Prezime</p>
</div><!-- Footer - end -->
</div>
<script>
document.getElementById('logoForm').addEventListener('submit', function(event) {
const logoName = document.getElementById('logoname').value.trim();
if (logoName.length < 3) {
event.preventDefault(); // Prevent form submission
alert('Logo name must be at least 3 characters long.');
} else {
alert(`Thank you! Your logo name "${logoName}" has been submitted.`);
document.getElementById('logoname').value = ''; // Clear the input field
}
});
</script>
</body>
</html>