Skip to content

Commit caf726a

Browse files
hmillersarahhmillersarah
committed
create ad banner
1 parent c46b273 commit caf726a

4 files changed

Lines changed: 57 additions & 6 deletions

File tree

‎ims-education.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
<body>
8181
<nav-header></nav-header>
8282

83-
<main class="main-content">
83+
<main id="content" class="main-content">
8484
<!-- =========================== Hero =========================== -->
8585
<hero-section
8686
name="IMS courses"
@@ -106,7 +106,7 @@ <h2>Implementing IMS Security</h2>
106106
</section> -->
107107

108108
<!-- =========================== New courses =========================== -->
109-
<section class="blue-bg">
109+
<!-- <section class="blue-bg">
110110
<div class="section-header"><h2>Coming soon</h2></div>
111111
<course-card
112112
id="ims-security"
@@ -125,7 +125,7 @@ <h2>Implementing IMS Security</h2>
125125
class="pure-u-1"
126126
>
127127
</course-card>
128-
</section>
128+
</section> -->
129129

130130
<!-- =========================== Anchor links =========================== -->
131131
<div class="anchor-links pure-g white-bg">

‎web-components/hero-section/hero-section.css‎

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ section {
4242

4343
.hero {
4444
display: grid;
45-
grid-template-columns: 4em 2fr;
45+
grid-template-columns: 4em 1fr 1fr;
4646
/* grid-template-rows: 4em 4em 6em 1fr; */
4747
grid-template-rows: 4em repeat(3, 1fr);
4848
padding: 3em;
@@ -54,7 +54,7 @@ section {
5454
grid-template-rows: 4em repeat(2, 1fr);
5555
}
5656

57-
img {
57+
.image {
5858
grid-column: 1;
5959
grid-row: 2;
6060
max-width: 2em;
@@ -140,9 +140,41 @@ h6, p {
140140
background-color: var(--btn-scnd-hover);
141141
}
142142

143+
.highlight-card {
144+
grid-column: 3;
145+
grid-row: 1 / 6;
146+
background-color: white;
147+
padding: 2em 3em 2em 3em;
148+
margin: 1em;
149+
opacity: 0.9;
150+
display: flex;
151+
flex-flow: column wrap;
152+
gap: 1em;
153+
}
154+
155+
.highlight-card div {
156+
display: flex;
157+
flex-flow: row wrap;
158+
gap: 1em;
159+
}
160+
161+
.highlight-card h2 {
162+
font-weight: normal;
163+
font-size: 28px;
164+
}
165+
166+
.highlight-card h3 {
167+
font-weight: 600;
168+
}
169+
170+
.highlight-card a {
171+
color: #0f62fe;
172+
font-size: 1.125em;
173+
}
174+
143175
@media screen and (min-width: 90em) {
144176
.hero {
145-
grid-template-columns: 4em 4fr 1fr;
177+
grid-template-columns: 4em 1fr 1fr;
146178
}
147179
}
148180

‎web-components/hero-section/hero-section.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,13 @@ <h2 class="name"></h2>
1717
<span class="button-secondary-text"></span>
1818
</a>
1919
</div>
20+
<div class="highlight-card">
21+
<div>
22+
<img src="../../wp-content/icons/icon_event.svg" alt="">
23+
<h3>Coming soon</h3>
24+
</div>
25+
<h2 class="highlight">Implementing IMS Security</h2>
26+
<a class="highlight-link" rel="noopener noreferrer" href="#ims-security">See details</a>
27+
</div>
2028
</div>
2129
</section>

‎wp-content/icons/icon_event.svg‎

Lines changed: 11 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)