<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Sign Up </title>
    <link rel="stylesheet" href="style.css">
    <!-- <link rel="stylesheet" href="bootstrap.min.css"> -->
    <link rel="stylesheet" href="bootstrap-5.3.3-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="font-awsome.css">
    <link rel="stylesheet" class="js-color-style" href="color-1.css">
    <style>

        .login-box {
            width: 100%;
            max-width: 400px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        h2 {
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        .form-control {
            height: 45px;
            font-size: 16px;
        }
        
        .btn-danger {
            background-color: #ff6b6b;
            border: none;
            height: 45px;
            font-size: 16px;
        }
        
        .btn-danger:hover {
            background-color: #ff4d4d;
        }
        
        a {
            text-decoration: none;
            color: #ff6b6b;
        }
        
        
    </style>
</head>
<body>

<!-- main wrapper start -->
<div class="main-wrapper">

<!-- header start -->
    <header class="header">
        <div class="container">
            <div class="header-main d-flex justify-content-between align-items-center">
                <div class="header-logo">
                    <a href="index.php" style="text-decoration: none;"><span>My</span>Study</a>
                </div>
                <button type="button" class="header-hamburger-btn js-header-menu-toggler">
                    <span></span>
                </button>
                    <div class="header-backdrop js-header-backdrop"></div>
                    <nav class="header-menu js-header-menu">
                        <button type="button" class="header-close-btn js-header-menu-toggler">
                            <i class="fas fa-times"></i>
                        </button>
                        <ul class="menu">
                            <li class="menu-item"><a href="index.php" style="text-decoration: none;">Home</a></li>
                            <li class="menu-item menu-item-has-children">
                                <a href="#" class="js-toggle-sub-menu" style="text-decoration: none;">Courses <i class="fas fa-chevron-down"></i></a>
                                <ul class="sub-menu js-sub-menu">
                                    <li class="sub-menu-item"><a href="Courses.php" style="text-decoration: none;">Course</a></li>
                                    <li class="sub-menu-item"><a href="Coursesdetails.php" style="text-decoration: none;">Courses details</a></li>
                                </ul>
                            </li>
                            <li class="menu-item menu-item-has-children">
                                <a href="#" class="js-toggle-sub-menu" style="text-decoration: none;">User <i class="fas fa-chevron-down"></i></a>
                                <ul class="sub-menu js-sub-menu">
                                    <li class="sub-menu-item"><a href="login.php" style="text-decoration: none;">log in</a></li>
                                    <li class="sub-menu-item"><a href="signup.php" style="text-decoration: none;">sign up</a></li>
                                </ul>
                            </li>
                            <li class="menu-item"><a href="contact.php" style="text-decoration: none;">Contact</a></li>
                        </ul>
                    </nav>
            </div>
        </div>
    </header>
<!-- header end -->

<!-- breadcrumb start -->
<div class="breadcrumb-nav">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
              <li class="breadcrumb-item"><a href="index.php" style="text-decoration: none; color: chocolate;">Home</a></li>
              <li class="breadcrumb-item active" aria-current="page">Sign Up</li>
            </ol>
          </nav>
    </div>
 </div>
<!-- breadcrumb end -->


<!-- sign up section start -->
<section class="container d-flex justify-content-center align-items-center vh-100">
    <div class="login-box">
        <h2 class="text-center">Create Your Account</h2>
        <form action="signUpCode.php" method="post">
            <div class="mb-3">
                <input type="text" class="form-control" name="fullname" placeholder="Full Name" required>
            </div>
            <div class="mb-3">
                <input type="email" class="form-control" name="email" placeholder="Email" required>
            </div>
            <div class="mb-3">
                <input type="password" class="form-control" name="password" placeholder="Password" required>
            </div>
            <div class="mt-4">
                <button type="submit" class="btn btn-danger w-100">Sing Up</button>
            </div>
            <div class="text-center mt-3">
                <p class="text-muted">Already have an account? <a href="login.php">Log In</a></p>
            </div>
        </form>
    </div>
</section>

<!-- sign up section end -->

<!-- footer start -->
<footer class="footer">
    <div class="footer-top">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-lg-3">
                    <div class="footer-item">
                        <h3 class="footer-logo"><span>My</span>Study</h3>
                        <ul>
                            <li><a href="#">about</a></li>
                            <li><a href="#">what we offer</a></li>
                            <li><a href="#">careers</a></li>
                            <li><a href="#">certificates</a></li>
                            <li><a href="#">blogs</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="footer-item">
                        <h3>learning</h3>
                        <ul>
                            <li><a href="#">get the app</a></li>
                            <li><a href="#">testimonials</a></li>
                            <li><a href="#">pricing</a></li>
                            <li><a href="#">FAQ</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="footer-item">
                        <h3>more</h3>
                        <ul>
                            <li><a href="#">affiliates</a></li>
                            <li><a href="#">become a course creater</a></li>
                            <li><a href="#">training webinars</a></li>
                            <li><a href="#">free personality test</a></li>
                            <li><a href="#">help and support</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="footer-item">
                        <h3>get in touch</h3>
                        <ul>
                            <li><a href="#"><i class="fab fa-facebook-f social-icon"></i> facebook</a></li>
                            <li><a href="#"><i class="fab fa-twitter social-icon"></i> twitter</a></li>
                            <li><a href="#"><i class="fab fa-instagram social-icon"></i> instagram</a></li>
                            <li><a href="#"><i class="fab fa-youtube social-icon"></i> youtube</a></li>
                            <li><a href="#"><i class="fab fa-linkedin-in social-icon"></i> linkedin</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <p class="m-0 py-4 text-center">Copyright &copy;2024 MyStudy</p>
        </div>
    </div>
 </footer>
<!-- footer end -->



</div>
<!-- main wrapper end -->

<script src="bootstrap.bundle.min.js"></script>
<script src="bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>