forked from github/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
product-sublanding.html
117 lines (108 loc) · 6.67 KB
/
product-sublanding.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!doctype html>
{% assign guideTypes = site.data.ui.product_sublanding.guide_types %}
<html lang="{{currentLanguage}}">
{% include head %}
<body class="d-lg-flex">
{% include sidebar %}
<main class="width-full overflow-auto">
{% include header %}
{% include deprecation-banner %}
<div class="bg-gray">
<div class="container-xl px-3 px-md-6 pt-3 pb-2">
<header class="d-flex gutter mb-6">
<div class="col-12">
<span class="text-mono text-gray text-uppercase">{% include breadcrumbs %}</span>
<h1 class="my-3 font-mktg">{% data ui.product_sublanding.guides %}</h1>
<div class="lead-mktg text-gray f4 description-text">{{ page.intro }}</div>
</div>
</header>
<!-- Featured track -->
<div class="mb-6 position-relative overflow-hidden mr-n3 ml-n3 px-3">
{% assign featuredTrack = page.learningTracks[0] %}
<ul class="list-style-none d-flex flex-nowrap overflow-x-scroll px-2 feature-track">
<li class="px-2 d-flex flex-shrink-0">
<div class="d-inline-block Box p-5 bg-gradient--blue-pink text-white">
<div class="circle text-white d-inline-flex" style="border: 2px white solid;">{% octicon "star-fill" height="24" class="v-align-middle m-2"%}</div>
<h3 class="font-mktg h3-mktg my-4">{{ featuredTrack.title }}</h3>
<div class="lead-mktg text-white f5 my-4">{{ featuredTrack.description }}</div>
<a class="d-inline-block border border-white text-white px-4 py-2 f5 no-underline text-bold" role="button" href="{{ featuredTrack.guides[0].href }}?learn={{ featuredTrack.trackName }}">
<span class="mr-2">{% octicon "arrow-right" height="20" %}</span>
{% data ui.product_sublanding.start_path %}
</a>
</div>
</li>
{% for guide in featuredTrack.guides %}
<li class="px-2 d-flex flex-shrink-0">
<a href="{{ guide.href }}?learn={{ featuredTrack.trackName }}" class="d-inline-block Box p-5 bg-white border-gray no-underline">
<div class="d-flex flex-justify-between flex-items-center">
<div class="circle bg-white text-blue border-gradient--pink-blue-dark d-inline-flex">
<span class="m-2 f2 lh-condensed-ultra text-center text-bold step-circle-text" style="width: 24px; height: 24px;">{{ forloop.index }}</span>
</div>
<div class="text-gray-light h6 text-uppercase">{{ guideTypes[guide.page.type] }}</div>
</div>
<h3 class="font-mktg h3-mktg my-4 text-gray-dark">{{ guide.title }}</h3>
<div class="lead-mktg text-gray f5 my-4 truncate-overflow-8">{{ guide.intro }}</div>
</a>
</li>
{% endfor %}
</ul>
<div class="position-absolute top-0 bottom-0 left-0 ml-3 pl-3" style="background: linear-gradient(to right, rgba(246,248,250,1), rgba(246,248,250,0));"></div>
<div class="position-absolute top-0 bottom-0 right-0 mr-3 pr-3" style="background: linear-gradient(to left, rgba(246,248,250,1), rgba(246,248,250,0));"></div>
</div>
<div class="border-top py-6">
<h2 class="mb-3 font-mktg">{% data ui.product_sublanding.learning_paths %}</h2>
<div class="lead-mktg text-gray f4 description-text">{% data ui.product_sublanding.learning_paths_desc %}</div>
<!-- Learning tracks -->
<div class="d-flex flex-wrap flex-items-start my-5 gutter">
{% for track in page.learningTracks offset:1 %}
<div class="my-3 px-4 col-12 col-md-6 learning-track">
<div class="Box js-show-more-container d-flex flex-column">
<div class="Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
<div class="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
<div class="my-xl-0 mr-xl-3">
<h5 class="mb-3 text-white font-mktg h3-mktg ">
{{ track.title }}
</h5>
<p class="text-white truncate-overflow-3 learning-track--description">{{ track.description }}</p>
</div>
</div>
<a class="d-inline-block border border-white text-white px-3 py-2 f5 no-underline text-bold no-wrap mt-3 mt-md-0" role="button" href="{{ track.guides[0].href }}?learn={{ track.trackName }}">
{% data ui.product_sublanding.start %}
<span class="ml-2">{% octicon "arrow-right" height="20" %}</span>
</a>
</div>
<div>
{% for guide in track.guides %}
<a class="Box-row d-flex flex-items-center text-gray-dark no-underline js-show-more-item {% if forloop.index > 4 %}d-none{% endif %}" href="{{ guide.href }}?learn={{ track.trackName }}">
<div class="circle bg-gray d-inline-flex mr-4">
<span class="m-2 f3 lh-condensed-ultra text-center text-bold step-circle-text" style="min-width: 20px; height: 20px;">{{ forloop.index }}</span>
</div>
<h5 class="flex-auto pr-2">{{ guide.title }}</h5>
<div class="text-gray-light h6 text-uppercase">{{ guideTypes[guide.page.type] }}</div>
</a>
{% endfor %}
</div>
{% if track.guides.size > 4 %}
<a class="Box-footer btn-link border-top-0 position-relative text-center text-bold text-blue pt-1 pb-3 col-12 js-show-more-button">
<div class="position-absolute left-0 right-0 py-5" style="background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0)); bottom: 50px;"></div>
<span>{{ track.guides.size | minus: 4 }} {% data ui.product_sublanding.more_guides %}</span>
</a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% if page.includeGuides %}
<div class="py-6 border-top border-gray">
{% include article-cards %}
</div>
{% endif %}
{% include support-section %}
{% include small-footer %}
{% include scroll-button %}
</main>
</body>
</html>