<div class="banner-main">
<a href="/download/attachments/2326667/AWS_EdStart_Web_Banner_home.png"></img></a>
</div>

<style>
/*BANNER STYLING*/

.banner-main {
    max-height:200px;
    width: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.banner-main img {
    image-size: contain;
    width:100%;
}


a.inactivelink {
    color: #000000!important;
    text-decoration:none!important;
    cursor:unset!important;
}

.event-title-list[_ngcontent-c1] {
    font-size: 16px;
}

div.event-list {
    border-radius: 5px;
    margin: 10px 5px 10px 5px;
    box-shadow: -2.9px 4px 2.4px 0.2px rgba(0, 0, 0, 0.08);
}

.event-list-row {
    border-top: unset !important;
}

.ddate {
    font-family: AmazonEmberLight;
}

.dmonth {
    font-family: AmazonEmberLight;
}
</style>



<div class="banner">
    <div class="textholder">
        <div class="title">AWS EdStart Community Portal</div>
        <div class="subtitle">Welcome to the AWS EdStart Community Portal</div>
    </div>
</div>

<style>
/*BANNER STYLING*/

.textholder {
    align-items:center;
    justify-content:center;
}

.banner {
    background-image: url("/download/attachments/2326667/awsedstartbanner.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    color: white;
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.banner img {
    width:100%; height:200px;
}

.title {
    font-size:40px;
}
.subtitle {
    width:42%;
    font-size:18px;
    margin:auto;
}


a.inactivelink {
    color: #000000!important;
    text-decoration:none!important;
    cursor:unset!important;
}

.rw_background_image {
    margin-top:-13px;
}

.rw_formatting_item > .rw_background_image {
    background-size: contain;
    height:200px!important;
    background-repeat: no-repeat;
}

.event-title-list[_ngcontent-c1] {
    font-size: 16px;
}
</style>



Announcements




<style>

.aui-buttons {
    display: flex;
    font-size: 0;
    justify-content: center;
}

.searchBar form div {
    width: 300px;
    margin: auto;
}

p.confiforms-no-items {
    text-align: center;
    margin: 20px 0px;
}

#comments-section { 
   display: none; 
}

.announcementcard {
    display: flex;
    padding: 10px;
    background-color: #fdfdfd;
    border-radius: 16px;
    width: 900px;
    height: 250px;
    box-shadow: -2.9px 4px 2.4px 0.2px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    margin: auto;
    margin-bottom: 20px;
}
.announcementcard:hover{
  box-shadow: -2.9px 4px 10px 0 rgba(0, 0, 0, 0.18);
}

.a-card-title {
  color: #0B7FBA;
  font-size: 20px;
  font-weight: 600;
  padding: 15px 0px 0px 0px;
  text-align:left;
}
.a-card-date {
  font-size: 15px;
  font-weight: 600;
  padding: 15px 0px 0px 0px;
}
.a-card-description {
  font-size: 15px;
  font-weight: 200;
  color: #000000;
  padding: 20px 10px 0px 0px;
}
.a-card-specifics {
  font-size: 15px;
  font-weight: 600;
  padding: 10px 0px 0px 0px;
}
.announcementcard img {
    width: 100%;
    height: 225px;
    object-fit: cover;
    padding-top: 13px;
}
div.text-container {
  display: flex;
  flex-direction: column;
}
div.link-container {
  display: flex;
  flex-direction: column;
  padding: 10px 0px 0px 0px;
}
div.text-encompasser {
    display: flex;
    width: 55%;
    flex-direction: column;
    padding: 0px 0px 0px 10px;
}
.imgalign {
    display: flex;
    flex-direction: column;
    width: 45%;
    height: 300px;
}
.date-container {
    position: relative;
    top: -225px;
    width: 45%;
    left: 0px;
    padding: 10px;
    text-align: center;
    background-color: #eb9029;
    display:none;
}

/* carousel styling */
/* Slideshow container */
#announcements-wrapper {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.announcementcard {
  display: none;
}

/* Next previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 8px;
    color: var(--primary-color) !important;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 3px;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: var(--mobile-menu-background);
    text-decoration: none !important;
}

/* The dots/bullets/indicators */
.cdot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: var(--primary-color);
    opacity: .5;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .cdot:hover {
    background-color: var(--primary-color);
    opacity: 1;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@media only screen and (max-width: 480px) and (min-width: 320px){
.announcementcard {
    flex-direction: column;
    height: 600px;
    width: 75%;
}

.imgalign {
    width: 100%;
	height: 250px;
}
.date-container {
    width: 50%;
}
div.text-encompasser {
	width: 100%;
}
}
</style>




<script>
function goToLink(cardLink){
	if(cardLink){
		window.open(cardLink, '_blank')
	}
}
</script>


<div class="announcementcard fade" onclick="goToLink('[entry.cardLink]')">
	<div class="imgalign"> 
		<img src="/download/attachments/2326667/[entry.image.asAttachment]"></img>
		<div class="date-container"><font class="a-card-date">[entry.date.formatDate(MMM-dd-yy h:mm a)] </font></div>
 	</div>
	<div class="text-encompasser">
		<div class="text-container">
			<font class="a-card-title">[entry.title] </font>
		</div>
		<div class="text-container">
			<font class="a-card-description">[entry.description] </font>
		</div>
		<div class="link-container">
			<a href="[entry.specificsLink1]" target="_blank" class="[entry.linkStyle]"><font class="a-card-specifics">[entry.specifics1] </font></a>
		</div>
		<div class="link-container">
			<a href="[entry.specificsLink2]" target="_blank" class="[entry.linkStyle]"><font class="a-card-specifics">[entry.specifics2] </font></a>
		</div>
	</div>
</div>


<a class="prev" onclick="plusSlides(-1)">❮</a><a class="next" onclick="plusSlides(1)">❯</a>



<div style="text-align:center" id="dot-container" > </div>
<script>
// add dots
var dotParents = document.getElementsByClassName("announcementcard");
for(var i = 0; i < dotParents.length; i++){
	var index = i+1;
    document.getElementById("dot-container").innerHTML += "<span class='cdot' onclick='currentSlide("+ index +")'> </span>";
}
window.mobilecheck = function() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};
var onMobile = mobilecheck();
/* carousel */
var slideIndex = 1;
showSlides(slideIndex);
var myvar;

if(!onMobile){
 myvar = window.setInterval(function(){slideIndex += 1; showSlides(slideIndex);}, 3000);
}

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

// Stop interval
$( ".announcementcard" )
  .mouseenter(function() {
    console.log('clear interval')
    window.clearInterval(myvar);
  })
  .mouseleave(function(){
    if(!onMobile){
      myvar = window.setInterval(function(){slideIndex += 1; showSlides(slideIndex);}, 3000);
    }
  })


function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("announcementcard");
  var dots = document.getElementsByClassName("cdot");
  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 = "flex"; 
  dots[slideIndex-1].className += " active";
} 
</script>



<style>
#cf_messages {
  height: 200px;
  width: 632px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.button-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
}

.carousel {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: flex;
  position: absolute;
  left: 0;
  transition: all 1s ease;
}

.card {
  background: black;
  min-width: 200px;
  height: 200px;
  margin-right: 1rem;
  display: inline-block;
}
</style>

<script>
// Select the carousel you'll need to manipulate and the buttons you'll add events to
const carousel = document.getElementsByClassName("cf_announcements_list")[0];
const card = document.querySelector("[data-target='card']");
const leftButton = document.querySelector("[data-action='slideLeft']");
const rightButton = document.querySelector("[data-action='slideRight']");

// Prepare to limit the direction in which the carousel can slide, 
// and to control how much the carousel advances by each time.
// In order to slide the carousel so that only three cards are perfectly visible each time,
// you need to know the carousel width, and the margin placed on a given card in the carousel
const carouselWidth = carousel.offsetWidth;
const cardStyle = card.currentStyle || window.getComputedStyle(card)
const cardMarginRight = Number(cardStyle.marginRight.match(/\d+/g)[0]);

// Count the number of total cards you have
const cardCount = carousel.querySelectorAll("[data-target='card']").length;

// Define an offset property to dynamically update by clicking the button controls
// as well as a maxX property so the carousel knows when to stop at the upper limit
let offset = 0;
const maxX = -((cardCount / 3) * carouselWidth + 
               (cardMarginRight * (cardCount / 3)) - 
               carouselWidth - cardMarginRight);


// Add the click events
leftButton.addEventListener("click", function() {
  if (offset !== 0) {
    offset += carouselWidth + cardMarginRight;
    carousel.style.transform = `translateX(${offset}px)`;
    }
})
  
rightButton.addEventListener("click", function() {
  if (offset !== maxX) {
    offset -= carouselWidth + cardMarginRight;
    carousel.style.transform = `translateX(${offset}px)`;
  }
})
</script>