Needing help to know exactly where to place the HTML code? - html

I need to know exactly where to place the HTML code. I am putting (Credit Card logos) into the overall theme of my website with "Big Cartel." I need to put the code below my Copyright. I also have provided the Credit Card logo HTML code. could someone show me exactly where to type it in to make it work.
I know that the HTML code goes at the bottom below my Copyright, I typed that in after support showed me where to place it. But the new (Credit Card Logos)HTML code I need someone to show me.
The following HTML code is my websites code, where I need to place the (Credit Card Logos) I was told to place the (Credit Card Logos) below my Copyright. I just need to know exactly where to type it in and what that would look like. Also note below the website code is the new!(Credit Card Logos)HTML code. Could someone combine the two showing me where the new code goes.
Back to site
{% endif %}
<div id="badge"> <font size="2"> © {{ 'Today' | date: '%Y' }} Bellaiam. All Rights Reserved.</div>
<!--<div class="badge">{{ bigcartel_credit }}</div>-->
</nav>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="{{ 'api' | theme_js_url }}"></script>
<script src="{{ theme | theme_js_url }}"></script>
they will not allow me to post a picture. So the HTML for the (Credit Card Logos)are at. https://developer.paypal.com/docs/classic/api/logos-marks/
at the bottom on the left hand side. PayPal, MasterCard, Visa, Discover, Amex.
Expected result is that some kind person with way more know how will combine the (Credit Card Logo) HTML code with my website HTML code to show me how and where I need to type the complete code in, and under my Copyright.

Considering each of the credit cards are all combined into a single image, you simply need to include this image directly below your copyright <div> in your above code:
<div id="badge"> <font size="2"> © {{ 'Today' | date: '%Y' }} Bellaiam. All Rights Reserved.</div>
<img src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/cc-badges-ppmcvdam.png" alt="Credit Card Badges">
Note that this will insert the images into your page directly below your footer, though you may need to position them -- this would be achieved with CSS. For example, if you want to center them, you would apply display: block and margin: 0 auto.
Also note that the <font> tag is obsolete, and you should be using CSS for text styling instead. You can control the size of the font with the CSS property font-size.

Related

How can I add a generic page header with site navigation to an asciidoc document?

I'm trying to build a basic documentation site using asciidoctor. One thing I am struggling with is how I can inject a standard site header (a banner with a logo and top-level navigation) into each documentation page.
I render my asciidoc directly to html from the command line. I have tried to find a way to somehow inject an extra div element and position it fixed at the top, but I can't figure out what mechanism to use for this. My early attempts involved using docinfo.html but that gets injected into the html in the <head> element, instead of the <body>.
I am aware that full-on publication systems like Jekyll allow me to configure "front matter" that can probably take care of this, but I was hoping there was a mechanism or trick using vanilla asciidoctor that can achieve this.
Ted Bergeron on the Mailing List mentioned a simple project:
Demo website created just using Asciidoctor.
Check the corresponding repo to see the files and how to create the site (just using one command).
In summary: simply create a header asciidoc file that includes your site nav (in the demo site this is done using table markup), without including a level-0 (document) title. Include this header file right at the top in every page of your site. Then render by just running asciidoctor *.txt on your project.
--embedded option + simple post processing
With this option, asciidoctor generates only the interior part of the <body> element.
For example:
main.adoc
= Super title
== Second level
asdf
== Also second level
qwer
then:
asciidoctor --embedded main.adoc
produces:
main.html
<div class="sect1">
<h2 id="_second_level">Second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>asdf</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_also_second_level">Also second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>qwer</p>
</div>
</div>
</div>
You can then just cat a header and closing footer, and you are done.
Tested with Asciidoctor 2.0.10.

How can I add a link to a pic in my gallery and another slider

Im trying to add a link to the infobig2.jpg image in my gallery section. I would also like to add another slide once you enter the gallery. My website is www.24kdesignz.com in the infographic section I want the pic to link to http://vs0022.businesscatalyst.com/
<img class="img-responsive project-image" src="assets/images/info.jpg" alt=""><!--Project thumb -->
<div class="hover-mask">
<h2 class="project-title">Infographic</h2><!--Project Title -->
<p>Illustrated | Icon Driven</p><!--Project Subtitle -->
</div>
<!--==== Project Preview HTML ====-->
<div class="sr-only project-description" data-images="assets/images/infobig.jpg,assets/images/infobig2.jpg" >
<p>Infographics – An Infographic is a visual representation of data and information that is presented through a series of design-centric graphics. Its sole purpose is to educate viewers on a topic in a simplistic way – with information that is easy to digest.</p>
</div>
</article><!--End Project Item -->
After inspecting your site it looks like you have a lot of plugins. The portfolio project section from your site's theme is injected using a jQuery library called "Masonry." Inside of your projects assets >> javascript folder there's also a file called "scripts.js" - this is where the theme author injects the images into the portfolio project items.
Solution: Images can't be links. You have to wrap it in an anchor tag. In your specific case, you're going to have to do it using jQuery.
Assuming your HTML markup looks something like this, add a unique id selector to the image you want to become a link:
<li id ="image2">
<img id ="uniqueId" src="/assets/images/infobig2.png">
</li>
Then use jQuery to grab it and wrap it in an anchor tag:
$("#uniqueId").wrap($('<a>', {
href: '/assets/png/' + data.uniqueId
}));
The other solution here would be to just add a link under the image using plain html if you don't feel comfortable editing your theme's jQuery code.

Center DIV in "Miniport" html5 template

I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!

showing markdown content in a div

I'm creating a simple personal website (using jekyll), and I have a problem in the "About Me" page. Every page of the website (including the about-me page in question) has a header on the top and a footer at the bottom. In the "About Me" page, I want the middle content section to be split vertically, with some text on the left and my picture on the right.
To achieve that, my "about-me.html" has the following two divs:
<div class='about_content' id='about_left'>
...
</div>
and
<div class='about_content' id='about_right'>
<span style="margin:0 10px; float:right">
<a href="/assets/picture.jpg" title="Gautam">
<img src="/assets/picture.jpg" width="240" height="320" alt="Gautam"/>
</a>
</span>
</div>
The about-me text that I want to show is in a markdown file called "about-me.md", but all my attempts to show those contents in the "about_left" div defined above have failed :(
One option is for me to not use markdown for the about-me text, but instead write plain HTML in the "about_left" div. I don't like this option.
Another option is to not use the "about-me.html" file at all, but instead embed an image tag inside "about-me.md" as suggested in this answer. This sort of works, but the text and the image are then not in separate divs; due to which the text extends under the image -> something I'd like to avoid.
Is there a way for me to keep my "about-me.html" file with the two divs, but still show the text from my "about-me.md" file inside the "about_left" div?
You can do something like this in your HTML file where you want the content of the Markdown file to show:
{% capture about %}{% include about-me.md %}{% endcapture %}
{{ about | markdownify }}

Iframe with another iframe

I want to extract result of checking code. Website display in that code. I marked it in source code.
<div id="ember332" class="ember-view backArrowContainer">
<div id="purchaseMeta">
<h2 class="flowStatus"> UŻYJ KODU PREPAID </h2>
<div class="gamertag">
<div class="title">
<script id="metamorph-2-start" type="text/x-placeholder">
***CODE STATUS WHICH I WANT TO EXTRACT***
<script id="metamorph-2-end" type="text/x-placeholder">
</div>
<div class="price"> Kod prepaid </div>
</div>
It is avaible when i go to this site: https://account.xbox.com/pl-PL/PaymentAndBilling/RedeemCode?token=W4HV8-6D6X3-3JVDJ-8PPG9-Q6BVR
I want to extract only CODE STATUS displayed when website will go to this adres. I think it can be avaible when i can use in HTML but i don't know how. Please help me with extract this status.
You can't extract anything from the inside of an iframe. There cannot be any interaction from the parent to the iframe. There can, therefore, be interaction between the iframe and the parent, but since you are not the owner of the iframe's webpage, this is not your case.
It's a security issue. People could get scammed if this wasn't this way. For example, designing a full-page iframe with a bank webpage and retrieving everything user types... Or designing a 1x1px iframe with a facebook page to see if your user is logged on fb and check all his/her personal information.
You can use a server-side language, such us PHP and get the HTML of that webpage using file_get_contents()