Skip to content

Improve HTML structure, accessibility, and user experience for mailin… #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vamshikiran065-jpg wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Improve HTML structure, accessibility, and user experience for mailin… #3

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 52 additions & 38 deletions home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,78 +2,92 @@
<html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>List name</title>
<title>Mailing List Signup</title>

<!-- SEO Meta -->
<meta name="description" content="Subscribe to receive updates and get the latest list directly in your inbox.">
<meta name="author" content="Your Name">

<!-- Bootstrap core CSS -->
<!-- Bootstrap -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Merriweather:400,700" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/list-theme.min.css" rel="stylesheet">
<!-- Icons -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/list-theme.min.css" rel="stylesheet">
</head>

<body>

<!-- Background -->
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<video autoplay muted loop playsinline aria-hidden="true">
<source src="mp4/bg.mp4" type="video/mp4">
</video>

<div class="masthead">
<!-- Main Section -->
<main class="masthead">
<div class="masthead-bg"></div>
<div class="container h-100">
<div class="row h-100">
<div class="col-12 my-auto">
<div class="masthead-content text-white py-5 py-md-0">
<h1 class="mb-3">List Name</h1>
<p class="mb-5"> You can get the list on your mail by typing your mail id
<strong>text</strong> Show the list</p>
<div class="input-group input-group-newsletter">
<input type="email" class="form-control" placeholder="Enter email..." aria-label="Enter email..." aria-describedby="basic-addon">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">Text me!</button>
</div>
</div>

<div class="container h-100 d-flex align-items-center">
<div class="w-100 text-center text-white">

<h1 class="mb-3">Join Our Mailing List</h1>

<p class="mb-4">
Enter your email to receive the latest updates and curated lists directly in your inbox.
</p>

<!-- Form -->
<form class="input-group input-group-newsletter" onsubmit="return false;">
<input
type="email"
class="form-control"
placeholder="Enter your email"
required
aria-label="Email address"
>

<div class="input-group-append">
<button class="btn btn-primary" type="submit">
Subscribe
</button>
</div>
</div>
</form>

</div>
</div>
</div>
</main>

<div class="social-icons">
<!-- Social Icons -->
<footer class="social-icons">
<ul class="list-unstyled text-center mb-0">
<li class="list-unstyled-item">
<a href="#">
<li class="list-inline-item">
<a href="#" aria-label="Twitter">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<li class="list-inline-item">
<a href="#" aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
</li>
</ul>
</div>
</footer>

<!-- Bootstrap core JavaScript -->
<!-- Scripts -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Custom scripts for this template -->
<script src="js/coming-soon.min.js"></script>

</body>

</html>