index.html

<!DOCTYPE html>
<html>

  <head>
    <title>HELLO World: Meet Guin</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
    <link href="stylesheet.css" rel="stylesheet">
  </head>

  <body>
<div id="navigation">
<nav class="navbar navbar-expand-lg navbar-light bg-info fixed-top">
  <a class="navbar-brand" href="#">Hello World: Meet Guin<span class="sr-only">(current)</span></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
<!-- omit home menu item on navbar
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
-->      <li class="nav-item">
        <a class="nav-link" href="#about-me">About Me</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          More About Me
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#links">Links</a>
          <a class="dropdown-item" href="#hobby-list">Hobbies</a>
          <a class="dropdown-item" href="#movie-list">Fave Movies</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#carousel">Designs & Photos</a>
        </div>
<!-- omit navbar Search feature
     </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form> 
-->
  </div>
</nav>
</div>

<div id="images" class="flex-container">
  <div id="top-container">
    <h1 id="heading">GUIN WHITE</h1>
      <img class="head-img" src="IMAGES/cute-monster.png">
    <h3 id="heading3">Autodidactic // Ninja // Bigfoot Believer</h3>
  </div>
</div>    
<!-- omit old code // moved to About Me
  <div id="brief" class="">
    <p>I like learning new things, creating new and useful stuff, and helping people.</p>
    <p>I love hanging out with my husband, napping, watching movies and playing tennis.</p>
  </div>
-->
<div id="links">
    <a href="https:// bit.ly/guinwhite" target="_blank">CV</a>  
    <a href="https://instagram.com/guinwhite" target="_blank">Insta</a> 
    <a href="https://twitter.com/guinwhite" target="_blank">Twitter</a>
</div>

<div id="lists" class="container-lists center">
    <h4>Things I love to do</h4>
  <div id="hobby-list">
    <ol class="list-text">
      <li>Hanging out with my husband</li>
      <li>Napping</li>
      <li>Watching movies</li>
      <li>Playing tennis</li>
      <li>Coding!</li>
    </ol>
  </div>
    <h4>Movies I like</h4>
  <div id="movie-list"> 
    <ul class="list-text">
      <li>The Third Man</li>
      <li>Dawn of the Dead</li>
      <li>Star Wars Ep V: Empire Strikes Back</li>
      <li>When Harry Met Sally</li>
      <li>Three Days of the Condor</li>
      <li>Alien (all of them with a few exceptions)</li>
    </ul>
  </div>
</div>
<!--  deleted image credit // using text-only links instead
      </div>
         <p class="tiny-text">
          Instagram icon by Icons8
        </p> 
      </div>
-->
<!-- Bootstrap grid -->
<div class="container" id="about-me">
  <div class="row">
    <div class="col-3">
      <h6>About Me</h6>
    </div>
    <div class="col-9 grid-styles">
      <div class="body-text">Hello, World! I was born nearly 5 decades ago. Growing up in West Texas the child of educators, I now live my life -- sheltering at home and social distancing for the time being -- in beautiful New Mexico. I'm married to the love of my life who just happens to be an incredibly talented artist, writer, musician and well-known Youtuber. A semi-retired sales,  marketing, web and events specialist -- primarily in hospitality, real estate, Saas and non-profits, I'm teaching myself design and coding. I'm a total coding newb, and like many, have begun my journey with a classic stack: HTML/CSS/JavaScript. I'm learning everything I can on CodeCrushCrew, Codecademy and about a dozen other online-learning websites. As I hope to get into a coding bootcamp and learn UX/UI, I'm wondering whether my design sensibilites are up to snuff...we'll see. Whatever the case, I have adopted the 'beginner's mind,' and am willing to try (hard), work (hard), ask questions and network (like a trooper). I also like to sketch and would love to be a cartoonist (not a graphic novelist -- OG style like Peanuts). I'm learning SEO, to play the guitar, speak Spanish, and would like to understand the Forex markets. I'm intensely curious about learning new things, and know I would love creating new and useful tools that can help people. I love hanging out with my spouse, napping, watching movies, checking out art galleries and museums, riding my recumbent trike and playing tennis. That's me in a nutshell.</div>
    </div>
  </div>
</div>
<dir>
  <p></p>
</dir>
<!-- Bootstrap image carousel -->
<div id="carousel" class="carousel slide carousel-size center" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
    <li data-target="#carousel" data-slide-to="3"></li>    
    <li data-target="#carousel" data-slide-to="4"></li>
  </ol>
  <div class="carousel-inner center">
    <div class="carousel-item active">
      <img class="d-bloc center carousel-images" src="IMAGES\CAROUSEL\ACSIllustratorExample2.jpg" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
        <h6>Adobe Illustrator Design</h6>
        <p class="tiny-text">I designed this graphic using Adobe Illustrator</p>
        </div>
    </div>
      <div class="carousel-item">
        <img class="d-block center carousel-images" src="IMAGES\CAROUSEL\MoCNAGalleryGuideCvr.jpg" alt="Second slide">
        <div class="carousel-caption d-none d-md-block carouselcap-styles">
          <h6>Museum Gallery Guide</h6>
          <p class="tiny-text">I designed this gallery guide cover using Adobe Illustrator, Photoshop & InDesign</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block center carousel-images" src="IMAGES\CAROUSEL\PhotographyExample-StFrancisBasilia_SilvPrnt_framed.jpg" alt="Third slide">
        <div class="carousel-caption d-none d-md-block carouselcap-styles">
          <h6>St. Francis Basilica</h6>
          <p class="tiny-text">I did this framed-and-matted mock-up of a photo my spouse took of St. Francis Basilica Cathedral</p>
        </div>      
      </div>
      <div class="carousel-item">
      <img class="d-block center carousel-images" src="IMAGES\CAROUSEL\TurnKeyOwnerTestim1Sht.png" alt="Fourth slide">
        <div class="carousel-caption d-none d-md-block carouselcap-styles">
        <h6>Property Owner Testimonial</h6>
        <p class="tiny-text">I designed this one-sheet using Adobe Creative Suite when I worked for TurnKey</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block center carousel-images" src="IMAGES\CAROUSEL\TurnKeySFOnlineAd.jpg" alt="Fifth slide">
        <div class="carousel-caption d-none d-md-block carouselcap-styles">
          <h6>Online Advertisement</h6>
          <p class="tiny-text">I designed this ad using Adobe Creative Suite when I worked for TurnKey</p>
        </div>    
      </div>
    </div>
 <div>
  <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
 </div>
</div>
<div class="container" id="thanks">
  <div class="row">
    <div class="col-12">
      <p><h1 class="center">Thank You!</h1></p>
    </div>
    <div class="col-12 center">
      <p><a href="https://www.codecrushcrew.com/" target="_blank">This site was built with help from <strong>Code Crush Crew</strong></a>
      </p>
    </div>
    <div class="col-12 center">  
      <a href="#navigation" class="tiny-text">return to top</a>
    </div>
  </div>
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
      </body>
  </html>