ayo/blog
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add subscription message speech bubble

Browse source
This commit is contained in:
Ayo 2018-02-06 18:10:02 +08:00
parent 439362b45e
commit c5493a4fcb
3 changed files with 55 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
_layouts/default-home.html
View file

@ -28,6 +28,15 @@
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address..." required> <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address..." required>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_85102052c447ce8a8bba06f24_2366f7f35a" tabindex="-1" value=""></div> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_85102052c447ce8a8bba06f24_2366f7f35a" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div> <div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
<div class="subscription-message-div">
<div class="subscription-message-thumb float-left">
<img src="../assets/images/ayo.jpg" alt="Free exclusive web development tips!" />
</div>
<div class="subscription-message-text float-right">
<p>Learn practical methods to improve your web dev skills!</p>
</div>
<div class="clear-both"></div>
</div>
</div> </div>
</form> </form>
</div> </div>

0
assets/images/hmm2-2.jpg → assets/images/ayo.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

46
assets/main.scss
View file

@ -196,6 +196,52 @@ article .post-content p {
text-align: center; text-align: center;
} }
.subscription-message-text p {
margin: 20px 5px;
font-size: 16px;
}
.subscription-message-text {
width: 270px;
}
.subscription-message-div:after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom-color: #80ae3c;
border-top: 0;
border-left: 0;
margin-left: -10px;
margin-top: -20px;
}
.subscription-message-div {
color: #ffffff;
background-color: #80ae3c;
width: 350px;
text-align: left;
margin: 50px auto 0;
position: relative;
border: 1px solid transparent;
border-bottom-left-radius: 2.5rem;
border-top-left-radius: 2.5rem;
border-bottom-right-radius: 2.5rem;
border-top-right-radius: 2.5rem;
}
.subscription-message-thumb {
width: 72px;
}
.subscription-message-thumb img {
border: 5px solid #80ae3c;
border-radius: 50%;
}
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.post-thumb { .post-thumb {
width: 100%; width: 100%;