notes

Icons: 
email fb insta linkedin github 
/*carousel styling */
.carousel-inner { 
    text-align: center;
}
.carousel .item .img {
  display: inline-block;
  width: 80%;
  height: 80%;
  margin-left: auto;
  margin-right: auto;
	align-content: center;
	size: 90%;
	border: 4px;
	border: #FFF9;
  border-radius: 30px;
  max-width: 80%;
  max-height: 80%;
}
* {box-shadow: border-box;}
.item {
  display: none;
}
/*
a.right.carousel-control {
  background: none;
}

a.left.carousel-control{
  background: none;
}
.slideshow-container {
  max-width: 100px;
  position: relative;
  margin: auto;
}*/

/* Next & previous buttons */
.left, .right {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* On hover, add a grey background color */
.left:hover, .right:hover {
  background-color: #f1f1f1;
  color: black;
}

<div class="carousel">
            <div id="myCarousel" class="carousel slide w-75 mx-auto" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>
              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="images/Jack_Ferver_Baranova-5566.jpg" alt="Everything is Imaginable" style="width:100%;">
                </div>
                <div class="item">
                  <img src="images/171207_FreshTracks_Brendan_Drake_008.jpg" alt="Dance" style="width:100%;">
                </div>
          
                <div class="item">
                  <img src="images/FreshTracks_0595_web.jpg" alt="Fresh Tracks" style="width:100%;">
                </div>
              </div>
              <!-- Left and right controls -->
              <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>


<div
        class="Lauren bg-gradient-to-r from-indigo-300 via-pink-100 to-blue shadow-2xl mx-10 grid md:grid-rows-1 grid-flow-col gap-5">
        <div class="md:row-span-1 md:row-start-1">
            <img src="images/LaurenHeadshots002.jpg" alt="image of Lauren">
            </img>
        </div>
        <div class="md:col-span-2 md:col-start-2 md:row-start-1">
            <p>Like many people at the beginning of quarantine, I tried making sourdough. After burning my first loaf, I
                decided to swap out my cooking apron and learn to code. I started by self-learning and as I gained more
                skills I realized this was something I wanted to pursue more than a hobby. I wanted more formal training
                and enrolled in a bootcamp. I’m looking to continue learning and gain new skills in a professional
                environment. I think my passion for coding comes from my experience as a lighting designer, I was using
                technology to create something aesthetically pleasing and functional. I receive the same excitement and
                pride when I deploy my code as when I see one of my designs on stage. I hope to continue my coding
                journey in a community to help myself and others grow while working on real challenges. As a creative
                thinkerand maker I'm extied to create functional things that are aesthetically pleasing. You can see
                that reflected in my work as a lighting designer and developer.
            </p> 
 
 <a xlink href="https://www.linkedin.com/in/lauren-libretti/"
            class="fa">
            <img src="https://img.icons8.com/ios/100/000000/linkedin.png"/>
        </a>
       
        <a xlink href="https://www.instagram.com/lalibretti/" class="in insta-instagram col-start-2">
            <img src="https://img.icons8.com/carbon-copy/100/000000/instagram-new.png" />
        </a>
       
        <a xlink href="https://www.laurenlibretti.com/" class="lights light-lighting col-start-3">
            <img src="https://img.icons8.com/wired/64/000000/light.png" />
        </a>

        var slideIndex = 1;
          showSlides(slideIndex);

          function plusSlides(n) {
            showSlides(slideIndex += n);
          }

          function currentSlide(n) {
            showSlides(slideIndex = n);
          }

          function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) { slideIndex = 1 }
            if (n < 1) { slideIndex = slides.length }
            for (i = 0; i < slides.length; i++) {
              slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
              dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";
          }