Merge pull request #216 from thecoding-society/bronze

Workshop ready to deploy

css/style2.css

@@ -530,7 +530,7 @@ pre,
 # Workshop
 --------------------------------------------------------------*/
 .days-des{
-	height: 300px;
+	height: 275px;
 }
 .days-buttons {
 	display: flex;
@@ -563,6 +563,8 @@ pre,
     opacity: 0;
     transform: translateY(10px);
     transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
+	font-family: 'Teko', sans-serif;
+
 }
 
 .event-card {
@@ -604,36 +606,23 @@ pre,
 .day-5-events.show,
 .day-6-events.show,
 .day-7-events.show {
-  display: block; /* Show only the selected day's events */
   visibility: visible;
   opacity: 1;
   transform: translateY(0);
 }
 .ag-format-container {
 	width: 1142px;
-	margin: 0 auto;
   }
   .ag-courses_box {
-	display: -webkit-box;
-	display: -ms-flexbox;
-	display: flex;
-	-webkit-box-align: start;
-	-ms-flex-align: start;
-	align-items: flex-start;
-	-ms-flex-wrap: wrap;
-	flex-wrap: wrap;
 	width: 100%;
-	padding: 50px 0;
   }
   .ag-courses_item {
-    flex: 1 1 calc(33.33333% - 30px); /* Each item takes up 1/3rd of the row space */
-    margin: 0 15px 30px;
     overflow: hidden;
     border-radius: 28px;
 }
   .ag-courses-item_link {
 	display: block;
-	height: 200px;
+	height: 230px;
 	padding: 30px 20px;
 	background-color: #121212;
 	overflow: hidden;
@@ -642,7 +631,7 @@ pre,
   .ag-courses-item_link:hover,
   .ag-courses-item_link:hover .ag-courses-item_date {
 	text-decoration: none;
-	color: #FFF;
+	color: black;
   }
   .ag-courses-item_link:hover .ag-courses-item_bg {
 	-webkit-transform: scale(10);
@@ -659,6 +648,9 @@ pre,
 	z-index: 2;
 	position: relative;
   }
+  .ag-courses-item_title:hover{
+	color: black;
+  }
   .ag-courses-item_title p{
 	font-size: 1.3rem !important;
   }
@@ -675,9 +667,9 @@ pre,
 	-o-transition: color .5s ease;
 	transition: color .5s ease
   }
-  .ag-courses-item_bg {
-	height: 128px;
-	width: 128px;
+  .ag-courses-item_bg, .day_2 , .day_3, .day_4 , .day_5, .day_6 {
+	height: 200px;
+	width: 250px;
 	background-color: #f9b234;
 	z-index: 1;
 	position: absolute;
@@ -688,21 +680,34 @@ pre,
 	-o-transition: all .5s ease;
 	transition: all .5s ease;
   }
-  .ag-courses_item:nth-child(2n) .ag-courses-item_bg {
+  .day_2{
 	background-color: #3ecd5e;
   }
-  .ag-courses_item:nth-child(3n) .ag-courses-item_bg {
+  .day_3{
 	background-color: #e44002;
   }
-  .ag-courses_item:nth-child(4n) .ag-courses-item_bg {
+  .day_4{
 	background-color: #952aff;
   }
-  .ag-courses_item:nth-child(5n) .ag-courses-item_bg {
+  .day_5{
 	background-color: #cd3e94;
   }
-  .ag-courses_item:nth-child(6n) .ag-courses-item_bg {
+  .day_6{
 	background-color: #4c49ea;
   }
+  .des_con{
+	margin: 15px 0px 8px 0px !important;
+  }
+  .new{
+	width: 150px !important;
+	font-family: 'Teko', sans-serif !important;
+  }
+  .bx-spin{
+	margin-left: 10px !important
+  }
+  .ag-courses-item_date-box i{
+	margin: 0px 5px;
+  }
 /*--------------------------------------------------------------
 # Our Team
 --------------------------------------------------------------*/
@@ -1233,42 +1238,6 @@ div .contact_name .name {
 		left: 0%;
 	}
 }
-/*--------------------------------------------------------------
-# Workshops
---------------------------------------------------------------*/
-@media only screen and (max-width: 979px) {
-	.ag-courses_item {
-	  -ms-flex-preferred-size: calc(50% - 30px);
-	  flex-basis: calc(50% - 30px);
-	}
-	.ag-courses-item_title {
-	  font-size: 24px;
-	}
-  }
-  @media only screen and (max-width: 767px) {
-	.ag-format-container {
-	  width: 96%;
-	}
-  }
-  @media only screen and (max-width: 639px) {
-	.ag-courses_item {
-	  -ms-flex-preferred-size: 100%;
-	  flex-basis: 100%;
-	}
-	.ag-courses-item_title {
-	  min-height: 72px;
-	  line-height: 1;
-
-	  font-size: 24px;
-	}
-	.ag-courses-item_link {
-	  padding: 22px 40px;
-	}
-	.ag-courses-item_date-box {
-	  font-size: 16px;
-	}
-  }
-
 /*--------------------------------------------------------------
 # Prices
 --------------------------------------------------------------*/
@@ -1513,6 +1482,75 @@ div .contact_name .name {
 	}
 }
 /*--------------------------------------------------------------
+# Workshop
+--------------------------------------------------------------*/
+@media (max-width: 1150px) {
+	.ag-courses-item_link{
+		width: 900px;
+		border-radius: 25px;
+	}
+	.ag-courses_item {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}
+@media (max-width: 900px) {
+	.ag-courses-item_link{
+		width: 750px;
+		height: 245px;
+	}
+}
+@media (max-width: 768px) {
+	.ag-courses-item_link{
+		width: 520px;
+		height: 305px;
+	}
+	.days-des{
+		height: 300px !important;
+	}
+}
+@media (max-width: 530px) {
+	.ag-courses-item_link{
+		width: 400px;
+		height: 300px;
+	}
+	.ag-courses-item_title{
+		font-size: 21px;
+	}
+}
+@media (max-width: 425px) {
+	.ag-courses-item_link{
+		width: 290px;
+		height: 270px;
+	}
+	.ag-courses-item_title{
+		font-size: 18px;
+	}
+	.ag-courses-item_title p{
+		font-size: 1rem !important;
+	}
+	.ag-courses-item_date span{
+		font-size: 15px;
+	}
+	.bx{
+		font-size: 15px !important;
+	}
+	.days-buttons {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		grid-auto-rows: auto;
+		grid-auto-columns: auto;
+	}
+	.days-buttons button{
+		font-size: 16px !important;
+		justify-self: center;
+	}
+	.new{
+		font-size: .8rem !important;
+	}
+}
+/*--------------------------------------------------------------
 # Partner With us
 --------------------------------------------------------------*/
 @media(max-width: 900px) {
@@ -1560,9 +1598,6 @@ div .contact_name .name {
 		margin-left: auto;
 		margin-right: auto;
 	}
-	.card__container > :nth-child(10){
-		grid-area: 4 / 2 / 5 / 3;
-	}
 	.card {
 		padding: 0;
 	}