Skip to content

Commit

Permalink
Merge pull request #208 from Teradata/DEVPORTAL-840-quickstarts-add-t…
Browse files Browse the repository at this point in the history 
…he-possible-event-banner
  • Loading branch information
@ObedVega
ObedVega authored Jul 4, 2024
2 parents 690354c + cafd4a7 commit 7e02a6f
Show file tree
Hide file tree
Showing 4 changed files with 262 additions and 0 deletions.
3 changes: 3 additions & 0 deletions supplemental_ui/partials/lang/landing-en.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@
<div class="search-input-container">
<input id="search-input" type="text" placeholder="Search Getting Started">
</div>
<!--Posible Banner-->
{{> possible-banner }}
<!--Posible Banner-->
<div class="tile-container">
<div class="tile-section">
<div class="tile-section-title" id="browse-content">Tutorials</div>
Expand Down
3 changes: 3 additions & 0 deletions supplemental_ui/partials/lang/landing-es.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@
<div class="search-input-container">
<input id="search-input" type="text" placeholder="Buscar">
</div>
<!--Posible Banner-->
{{> possible-banner}}
<!--Posible Banner-->
<div class="tile-container">
<div class="tile-section">
<div class="tile-section-title" id="browse-content">Tutoriales</div>
Expand Down
3 changes: 3 additions & 0 deletions supplemental_ui/partials/lang/landing-ja.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@
<div class="search-input-container">
<input id="search-input" type="text" placeholder="スタートガイドを検索">
</div>
<!--Posible Banner-->
{{> possible-banner}}
<!--Posible Banner-->
<div class="tile-container">
<div class="tile-section">
<div class="tile-section-title" id="browse-content">チュートリアル</div>
Expand Down
253 changes: 253 additions & 0 deletions supplemental_ui/partials/possible-banner.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,253 @@


<div class="downloads-container mx-5 mx-lg-auto row">
<div class="possible-banner-container">
<div class="possible-banner-wrapper">
<a
class="possible-banner-link"
href="https://www.teradata.com/events/possible"
target="_blank"
aria-label="If you imagine it, envision it, create it... Teradata makes it Possible. Join us."
data-gtm-category="banner"
data-gtm-action="leaderboard"
data-gtm-label="Register now"
data-intellimize-exp-417218923="true"
>
<div class="possible-banner-image-wrapper">
<img
src="https://marvel-b1-cdn.bc0a.com/f00000000151999/www.teradata.com/getmedia/fee7f169-ae6a-4a8c-8b6a-2d88931e2ed1/og_image-possible_2024.jpg?origin=fd"
alt="If you imagine it, envision it, create it... Teradata makes it Possible. Join us. promotional image"
class="possible-banner-image"
loading="lazy"
/>
</div>
<section class="possible-banner-description">
<div class="possible-banner-content">
<header class="possible-banner-title-wrapper">
<span class="possible-banner-caption" id="title"></span>
<h3 class="possible-banner-title" id="description"></h3>
</header>
<p class="possible-banner-action cta-textLink" id="register"></p>
</div>
</section>
</a>
</div>
</div>
</div>

<script>
window.onload = function() {
possible(language);
};
function possible(language) {
if (language === 'en'){
document.getElementById("title") && (document.getElementById("title").textContent = 'Featured event');
document.getElementById("description") && (document.getElementById("description").textContent = 'If you imagine it, envision it, create it... Teradata makes it Possible. Join us.');
document.getElementById("register") && (document.getElementById("register").textContent = 'Register now');
}
if (language === 'es'){
document.getElementById("title") && (document.getElementById("title").textContent = 'Evento especial');
document.getElementById("description") && (document.getElementById("description").textContent = 'Si lo puedes imaginar, visualizar, crear... Teradata lo hace posible. Acompáñanos.');
document.getElementById("register") && (document.getElementById("register").textContent = 'Registrate aqui');
}
if (language === 'ja'){
document.getElementById("title") && (document.getElementById("title").textContent = '注目のイベント');
document.getElementById("description") && (document.getElementById("description").textContent = 'イメージして、想像して、創造する… テラデータが実現します。私たちと一緒に参加しよう。');
document.getElementById("register") && (document.getElementById("register").textContent = '今すぐ登録');
}
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
:root {
--font-family: 'Inter', sans-serif;
--font-size: 20px;
--line-height: 28px;
--letter-spacing: 0;
--primary-color: #005eb8;
}
.cta-textLink:after {
content: "east";
font-family: 'Material Symbols Outlined';
margin-left: .5rem;
pointer-events: none;
position: relative;
transition: transform .25s ease-in-out;
}
.possible-banner-container {
/* background-color: #fff; */
padding: 2rem 0;
}
.possible-banner-wrapper {
display: flex;
justify-content: center;
margin: 0 auto;
width: 100%;
}
.possible-banner-link {
display: flex;
flex-direction: row;
text-decoration: none;
color: inherit;
border: 1px solid #e1e1e1;
border-radius: 8px;
overflow: hidden;
background-color: #fff;
width: 100%;
height: 200px;
position: relative;
transition: box-shadow 0.25s;
}
.possible-banner-image-wrapper {
flex: 0 0 350px;
aspect-ratio: 2 / 1;
overflow: hidden;
}
.possible-banner-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.possible-banner-description {
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px;
flex: 1;
}
.possible-banner-content {
display: flex;
justify-content: space-between;
flex-direction: column;
flex-grow: 1;
}
.possible-banner-title-wrapper {
margin-bottom: 16px;
}
.possible-banner-title {
font-size: 1.5rem;
margin: 0;
color: var(--primary-color);
}
.possible-banner-action {
font-size: 1rem;
color: var(--primary-color);
}
.possible-banner-caption {
letter-spacing: 0;
font-family: Inter, sans-serif;
text-align: left;
cursor: pointer;
box-sizing: border-box;
pointer-events: none;
margin-bottom: 0.5rem !important;
color: #5e7484;
font-size: 16px;
line-height: 20px;
font-weight: 600;
}
.possible-banner-title {
font-family: Inter, sans-serif;
text-align: left;
cursor: pointer;
box-sizing: border-box;
pointer-events: none;
color: #00233c;
font-size: 24px;
font-weight: 600;
letter-spacing: -0.03125rem;
line-height: 34px;
margin-block-end: 0;
margin-block-start: 0;
margin-bottom: 0;
margin-inline-end: 0;
margin-inline-start: 0;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
padding-bottom: 0;
}
.possible-banner-action {
align-items: center;
color: #00233c;
display: inline-flex;
font-weight: 600;
text-decoration: none;
transition: 0.25s;
font-size: 20px;
font-family: Inter, sans-serif;
}
.possible-banner-action:after {
content: "east"/ "";
font-family: Material Symbols Outlined;
margin-left: 0.5rem;
pointer-events: none;
position: relative;
transition: transform 0.25s ease-in-out;
}
.possible-banner-link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #ff5f02;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.25s ease-in-out;
}
.possible-banner-link:hover::after {
transform: scaleX(1);
}
.possible-banner-link:hover {
text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
@media screen and (max-width: 750px) {
.possible-banner-image-wrapper {
aspect-ratio: 1 / 1;
}
.possible-banner-link {
flex-direction: column !important;
height: auto !important;
}
.possible-banner-caption {
font-size: 15px;
line-height: 19px;
}
.possible-banner-title {
font-size: 18px;
line-height: 28px;
}
}
.mx-5 {
margin-right: auto !important;
margin-left: auto !important;
}
</style>

0 comments on commit 7e02a6f

Please sign in to comment.