<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Wireframes, Mockup and Prototypes</title> <!-- bootstrap css --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <!-- google font --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&display=swap" rel="stylesheet"> <!-- external css --> <link rel="stylesheet" type="text/css" href="./index.css"> </head> <body> <!--navbar--> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#" id="logo">LOGO</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ml-auto"> <a class="nav-link" href="#">About Me</a> <a class="nav-link" href="#">My Works</a> <a class="nav-link" href="#">Contact</a> </div> </div> </div> </nav> <!-- landing --> <div class="py-5 container-fluid" id="landing"> <div class="row my-5 py-5 justify-content-center"> <div class="col-md-8 pt-md-5 text-center"> <h1 id="title">Seeing the world through my lens</h1> <a href="" id="base" class="mt-5 d-inline-block text-decoration-none">View My Work</a> </div> </div> </div> <!-- about --> <div class="container-fluid py-md-5" id="about"> <div class="row justify-content-center py-md-5 my-md-5"> <div class="col-md-3 my-5 my-md-0"> <!-- image --> <img src="./images/about.png" class ="img-fluid"> </div> <div class="col-md-7"> <!-- text --> <h4 id="text-title" class="mt-md-5"> Hi! I'm John Doe. </h4> <p> I am a passionate photographer who loves capturing life's special moments. From candid shots of everyday life to capturing the beauty of nature, I strive to create beautiful images that will last a lifetime. I am always looking for new opportunities to create unique and inspiring photos that are sure to leave a lasting impression. </p> <p> I have been a photographer for many years and have had the privilege of working with some of the most talented professionals in the industry. I have had the opportunity to travel to some of the most beautiful places in the world and capture the essence of each location. I am constantly learning new techniques and expanding my knowledge of photography to ensure my images are of the highest quality. I am excited to share my passion with others and create memories that will last a lifetime. </p> </div> </div> </div> <!-- bootstrap js --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> </body> </html>