Created
June 3, 2025 03:02
-
-
Save iam-gopi/b8fd4d720c3cd72197a02d1a99fddd85 to your computer and use it in GitHub Desktop.
bootstrap design
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Learning Design</title> | |
| <link | |
| href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | |
| rel="stylesheet" | |
| integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" | |
| crossorigin="anonymous" | |
| /> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | |
| integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" | |
| crossorigin="anonymous" | |
| ></script> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-lg bg-white"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="#"> | |
| <img src="./user1.png" class="img-fluid w-25" /> | |
| </a> | |
| <button | |
| class="navbar-toggler" | |
| type="button" | |
| data-bs-toggle="collapse" | |
| data-bs-target="#navbarSupportedContent" | |
| aria-controls="navbarSupportedContent" | |
| aria-expanded="false" | |
| aria-label="Toggle navigation" | |
| > | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
| <ul class="navbar-nav mx-auto mb-2 mb-lg-0 gap-4"> | |
| <li class="nav-item"> | |
| <a class="nav-link active" aria-current="page" href="#">About</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#">Work</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#">Service</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link">Contact</a> | |
| </li> | |
| </ul> | |
| <div class="gap-3"> | |
| <img src="./brand.png" class="img-fluid mx-1 nav-social-icon" /> | |
| <img src="./brand.png" class="img-fluid mx-1 nav-social-icon" /> | |
| <img src="./brand.png" class="img-fluid mx-1 nav-social-icon" /> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <header class="container py-3 my-md-5 p-md-5 bg-light rounded"> | |
| <section class="row d-flex"> | |
| <div class="col-sm-12 col-md-6 order-2 order-md-1"> | |
| <div class="d-flex flex-column"> | |
| <p class="text-capitalize fw-bold fs-2 fs-md-1"> | |
| building digital products and brands | |
| <span class="fw-bold fs-2 fs-md-1 text-primary">experience</span> | |
| </p> | |
| <p class="fw-medium"> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab | |
| explicabo reiciendis quaerat optio expedita et obcaecati. Pariatur | |
| neque itaque tenetur! | |
| </p> | |
| <form | |
| class="d-flex flex-column flex-lg-row justify-content-start my-4 gap-1" | |
| > | |
| <input | |
| type="text" | |
| placeholder="Email Address" | |
| class="form-control" | |
| /><button class="btn btn-primary">Connect with me</button> | |
| </form> | |
| </div> | |
| </div> | |
| <div | |
| class="col-sm-12 col-md-6 d-flex justify-content-center order-1 order-md-2 my-5 my-md-0" | |
| > | |
| <img src="./boy.png" class="img-fluid" /> | |
| </div> | |
| </section> | |
| </header> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); | |
| :root { | |
| --primary-color: #5E3BED; | |
| --secondary-color: #121222; | |
| --ff-primary: "Montserrat", sans-serif; | |
| } | |
| body { | |
| font-family: var(--ff-primary); | |
| } | |
| .nav-social-icon { | |
| width: 1.3rem; | |
| } | |
| .nav-social-icon:hover { | |
| background-color: var(--primary-color); | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color) !important; | |
| } | |
| .fs-1 { | |
| font-size: 2.9rem !important; | |
| } | |
| .fs-2 { | |
| font-size: 2.3rem !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment