This question already has answers here:
Center image using text-align center?
(28 answers)
Closed 2 years ago.
I am working on an assignment where I am creating a webpage about sharks and I need to know how I can center my images. I have already tried the align attribute in my code and my images are still not centered. I would like the images to be in the center of the screen.
Here is my image code:
enter image description here
Here are the images on the actual webpage:
enter image description here
Here is my code (if needed)
<!DOCTYPE html>
<html>
<head>
<!-- TITLE-->
<title>All About Sharks</title>
</head>
<!-- BACKGROUND COLOR -->
<body style="background-color:#9FB4E5">
<!-- HEADER 1 -->
<h1 align = "center" style ="color:White;font-family:Times;font-size:50px">All About Sharks</h1>
<!-- A PART OF HEADER 1 -->
<h1 align = "center" style ="color:White;font-family:Times;font-size:20px">A Page Dedicated to Sharks</h1>
<!-- MY WEBPAGE LINK -->
Endangered Sharks Page
<!-- MY EMAIL LINK-->
Send Email Here
<hr>
<!-- HEADER 2 -->
<h2 style ="color:White;font-size:20px;font-family:Times">What Are Sharks?</h2>
<!-- FIRST PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i> Sharks are a type of long-bodied marine fish with a cartilaginous skeleton (skeleton made entirely of cartilage), a large dorsal fin, and toothlike scales (also called placoid). Most sharks are predatory, although the largest kinds feed on plankton. The common myth is that sharks attack humans whenever humans are within the vicinity of them, but of all 470 species, only somewhere around a dozen are dangerous to humans, and even the ones that are do not prefer to eat them.</b></i></p>
<!-- TWO OF MY IMAGES -->
<img align= "center" src="https://images.freeimages.com/images/large-previews/e3c/shark-1367473.jpg" width="340" height="200">
<img align= "center" src="https://images.freeimages.com/images/large-previews/42c/shark-1384982.jpg" width="344" height="200" class="center">
<hr>
<!-- HEADER 3 -->
<h3 style ="color:White;font-family:Times;font-size:20px"> Where Are Sharks Found?</h3>
<!-- MY SECOND PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>Sharks live in all five of the Earth's oceans: The Atlantic, Pacific, Indian, Arctic, and Southern. Although they are commonly found in oceans, sharks can also be found in freshwater/saltwater lakes and some rivers too. Oftentimes, sharks swim in the Epipelagic zone (the topmost layer of the ocean) which is where human beings swim as well, but sharks rarely bother them.</b></i></p>
<!-- MORE IMAGES -->
<img align= "center" src="https://images.freeimages.com/images/large-previews/749/flatnose-shark-1250133.jpg" width="340" height="200">
<img align= "center" src="https://images.freeimages.com/images/large-previews/201/shark-1520496.jpg" width="344" height="200" class="center">
<hr>
<!-- HEADER 4 -->
<h4 style ="color:White;font-family:Times;font-size:20px"> What Do Sharks Eat?</h4>
<!-- MY THIRD PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>Sharks eat a wide variety of marine life ranging from smaller organisms like snails, sea urchins, crabs, and fish to larger organisms like stingrays, seals, birds, and even other sharks. As apex predators, sharks play an important role in the oceanic ecosystem by maintaining the diversity of the species below them and keeping balance with competitors. Just to give an example of how important these creatures are, a decrease in the shark population could result in the overgrowth of algae or the extinction of smaller animals like scallops who rely on sharks to eat their predators. </b></i></p>
<!-- MORE IMAGES -->
<img align="center" src="https://images.freeimages.com/images/large-previews/cd1/blue-crab-1539361.jpg" width="340" height="200">
<img align="center" src="https://images.freeimages.com/images/large-previews/50f/stingray-1520490.jpg" width="344" height="200" class="center">
<hr>
<!-- HEADER 5 -->
<h5 style ="color:White;font-family:Times;font-size:20px">How Are Sharks Being Killed Everyday?</h5>
<!-- THE FOURTH PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>According to IUCN (International Union for Conservation of Nature) analysts, among all 470 species of sharks, 2.4 percent are critically endangered, 3.2 percent are endangered, 10.3 percent are vulnerable, and 14.4 percent are near threatened by commercial shark finning (usually for medicine or shark fin soup), overfishing, fisheries bycatch, and habitat loss.</b></i></p>
<!-- MY INTERACTIVE PIE CHART (TAKEN FROM THE W3SCHOOLS HOMEPAGE) -->
<div id="piechart"></div>
<script type="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Shark Deaths', 'Killing Methods'],
['Commercial Shark Finning/Medicine/Shark Fin Soup', 48],
['Overfishing', 4],
['Fisheries Bycatch', 39],
['Habitat Loss (Pollution, Climate Change, Fishing)', 91],
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'Percentage of Shark Killing Methods Everyday', 'width':450, 'height':300};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<hr>
<!-- HEADER 6 -->
<h6 style ="color:White;font-family:Times;font-size:20px"> What Is The Purpose Of This Page And What Can You Do To Stop Shark Cruelty?</h6>
<!-- MY FIFTH PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>The entire purpose of this page is to bring attention to and educate about endangered marine animals, particularly sharks. Shark lives are being threatened everyday by human activities and because of these activities, it's not just shark lives that are threatened but other aquatic animal's lives as well because they depend on sharks in so many ways. This page was meant to motivate its readers into standing up for the well-being of sharks. </b></i></p>
<!-- A PART OF HEADER 6-->
<h6 style ="color:White;font-family:Times;font-size:20px"><u>List Of Things You Can Do</u></h6>
<!-- MY LIST -->
<ul>
<li><b>Get the message out on social media via Instagram, Facebook, Twitter, etc.</b></li>
<li><b>Start a campaign at work or school.</b></li>
<li><b>Start a protest.</b></li>
<li><b>Make a petition.</b></li>
<li><b>Begin a fundraiser.</b></li>
</ul>
<hr>
</body>
</html>
First you need to encapsulate your images in a div, then if you want to display your images side by side on the center you can use the css property display: flex; and justify-content: center.
<div style="display: flex; justify-content: center;">
<img src="https://images.freeimages.com/images/large-previews/e3c/shark-1367473.jpg" width="340" height="200">
<img src="https://images.freeimages.com/images/large-previews/42c/shark-1384982.jpg" width="344" height="200" class="center">
</div>
This might be what you need. I made a div around the first images and styled it so the images will be in the center of the page.
<!DOCTYPE html>
<html>
<head>
<!-- TITLE-->
<title>All About Sharks</title>
</head>
<!-- BACKGROUND COLOR -->
<body style="background-color:#9FB4E5">
<!-- HEADER 1 -->
<h1 align = "center" style ="color:White;font-family:Times;font-size:50px">All About Sharks</h1>
<!-- A PART OF HEADER 1 -->
<h1 align = "center" style ="color:White;font-family:Times;font-size:20px">A Page Dedicated to Sharks</h1>
<!-- MY WEBPAGE LINK -->
Endangered Sharks Page
<!-- MY EMAIL LINK-->
Send Email Here
<hr>
<!-- HEADER 2 -->
<h2 style ="color:White;font-size:20px;font-family:Times">What Are Sharks?</h2>
<!-- FIRST PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i> Sharks are a type of long-bodied marine fish with a cartilaginous skeleton (skeleton made entirely of cartilage), a large dorsal fin, and toothlike scales (also called placoid). Most sharks are predatory, although the largest kinds feed on plankton. The common myth is that sharks attack humans whenever humans are within the vicinity of them, but of all 470 species, only somewhere around a dozen are dangerous to humans, and even the ones that are do not prefer to eat them.</b></i></p>
<div style="display: flex; justify-content: center">
<!-- TWO OF MY IMAGES -->
<img align= "center" src="https://images.freeimages.com/images/large-previews/e3c/shark-1367473.jpg" width="340" height="200">
<img align= "center" src="https://images.freeimages.com/images/large-previews/42c/shark-1384982.jpg" width="344" height="200" class="center">
</div>
<hr>
<!-- HEADER 3 -->
<h3 style ="color:White;font-family:Times;font-size:20px"> Where Are Sharks Found?</h3>
<!-- MY SECOND PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>Sharks live in all five of the Earth's oceans: The Atlantic, Pacific, Indian, Arctic, and Southern. Although they are commonly found in oceans, sharks can also be found in freshwater/saltwater lakes and some rivers too. Oftentimes, sharks swim in the Epipelagic zone (the topmost layer of the ocean) which is where human beings swim as well, but sharks rarely bother them.</b></i></p>
<!-- MORE IMAGES -->
<img align= "center" src="https://images.freeimages.com/images/large-previews/749/flatnose-shark-1250133.jpg" width="340" height="200">
<img align= "center" src="https://images.freeimages.com/images/large-previews/201/shark-1520496.jpg" width="344" height="200" class="center">
<hr>
<!-- HEADER 4 -->
<h4 style ="color:White;font-family:Times;font-size:20px"> What Do Sharks Eat?</h4>
<!-- MY THIRD PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>Sharks eat a wide variety of marine life ranging from smaller organisms like snails, sea urchins, crabs, and fish to larger organisms like stingrays, seals, birds, and even other sharks. As apex predators, sharks play an important role in the oceanic ecosystem by maintaining the diversity of the species below them and keeping balance with competitors. Just to give an example of how important these creatures are, a decrease in the shark population could result in the overgrowth of algae or the extinction of smaller animals like scallops who rely on sharks to eat their predators. </b></i></p>
<!-- MORE IMAGES -->
<img align="center" src="https://images.freeimages.com/images/large-previews/cd1/blue-crab-1539361.jpg" width="340" height="200">
<img align="center" src="https://images.freeimages.com/images/large-previews/50f/stingray-1520490.jpg" width="344" height="200" class="center">
<hr>
<!-- HEADER 5 -->
<h5 style ="color:White;font-family:Times;font-size:20px">How Are Sharks Being Killed Everyday?</h5>
<!-- THE FOURTH PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>According to IUCN (International Union for Conservation of Nature) analysts, among all 470 species of sharks, 2.4 percent are critically endangered, 3.2 percent are endangered, 10.3 percent are vulnerable, and 14.4 percent are near threatened by commercial shark finning (usually for medicine or shark fin soup), overfishing, fisheries bycatch, and habitat loss.</b></i></p>
<!-- MY INTERACTIVE PIE CHART (TAKEN FROM THE W3SCHOOLS HOMEPAGE) -->
<div id="piechart"></div>
<script type="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Shark Deaths', 'Killing Methods'],
['Commercial Shark Finning/Medicine/Shark Fin Soup', 48],
['Overfishing', 4],
['Fisheries Bycatch', 39],
['Habitat Loss (Pollution, Climate Change, Fishing)', 91],
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'Percentage of Shark Killing Methods Everyday', 'width':450, 'height':300};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<hr>
<!-- HEADER 6 -->
<h6 style ="color:White;font-family:Times;font-size:20px"> What Is The Purpose Of This Page And What Can You Do To Stop Shark Cruelty?</h6>
<!-- MY FIFTH PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>The entire purpose of this page is to bring attention to and educate about endangered marine animals, particularly sharks. Shark lives are being threatened everyday by human activities and because of these activities, it's not just shark lives that are threatened but other aquatic animal's lives as well because they depend on sharks in so many ways. This page was meant to motivate its readers into standing up for the well-being of sharks. </b></i></p>
<!-- A PART OF HEADER 6-->
<h6 style ="color:White;font-family:Times;font-size:20px"><u>List Of Things You Can Do</u></h6>
<!-- MY LIST -->
<ul>
<li><b>Get the message out on social media via Instagram, Facebook, Twitter, etc.</b></li>
<li><b>Start a campaign at work or school.</b></li>
<li><b>Start a protest.</b></li>
<li><b>Make a petition.</b></li>
<li><b>Begin a fundraiser.</b></li>
</ul>
<hr>
</body>
</html>
Related
I am using Google Sites to embed HTML code, paste the code within the "Embed from the web" window. The length of the output is variable.
I wish there was a way to dynamically adjust the height of the parent iframe that Google Sites is using to host my HTML.
I know that I can use the Google Sites user interface to manually allocate more space and unfortunately the content is going to be different based on data from API, hence there is no way for me to know the height beforehand. Currently the vertical scroll-bar appears whenever the content overfills the allocated space and it does not look good.
I tried the following and it only removes the scroll bar without allowing me to see the content:
<script>parent.document.getElementsByTagName('iframe')[0].scrolling="no";</script>
The example Google Site is at https://sites.google.com/view/auto-ajust-gsite-embed/home
And this is the code I used in the above example site:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<title>auto adjust google site embed</title>
</head>
<body>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne"
aria-expanded="false"
aria-controls="flush-collapseOne"
>
Accordion Item #1
</button>
</h2>
<div
id="flush-collapseOne"
class="accordion-collapse collapse"
aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body">
Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the
first item's accordion body.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo"
aria-expanded="false"
aria-controls="flush-collapseTwo"
>
Accordion Item #2
</button>
</h2>
<div
id="flush-collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body">
Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the
second item's accordion body. Let's imagine this being filled with
some actual content.
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
</body>
</html>
This is just a trick to have NEW google sites remove the vertical scrollbar: Expand the inserted "Embed < >" box's boundary.
--[ Details: I expand the inserted "Embed < >" box's boundary to the size of about 11" x 7 ": horizontal to the max on the right side, vertical (down) to the end of the visible bottom to the monitor's screen. (I stop further downwardly expansion of said box because it moves very slowly starting from the bottom most of the screen). I think the box is large enough for my test. All tested views mobile/tablet/monitor show that the scrollbar is gone. ]
--(Thank you for the HTML embed codes.)
I'm developing a website using HTML, CSS and Boostrap. I cant figure out why everything isn't even in width going across the page. What am I missing? It seems to be some sort of Margin or Padding on the right side of the page and my card sections are uneven.
https://codepen.io/kennethpaige/pen/zYGzgOj
#<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<!--STYLE-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!--style-->
</head>
<body>
<!--TITLE-->
<section id="title">
<div class="container-fluid">
<nav class="navbar fixed-top navbar-light bg-light">
<a class="nav-brand" href="https://www.gimkit.com/"><img id="brand" class="gimkit-logo" src="https://i.postimg.cc/SNRNWbVz/gimkit-removebg-preview.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul id="navbar-list" class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#application-questions">Application Questions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#customer-questions">Customer Questions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fun-facts-about-me">Fun Facts About Me</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 id="kenneth-paige" class="display-4">Kenneth Paige</h1>
<img class="gimkit-logo2" src="https://i.postimg.cc/SNRNWbVz/gimkit-removebg-preview.png">
</div>
</div>
<!--TITLE-->
<!--APPLICATION QUESTIONS-->
<section id="application-questions">
<div>
<h2>Application Questions</h2>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="falese">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div id="carouselExampleControls" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active" id="carousel">
<h3>Why you want to work in customer support?</h3>
<p style="text-align:left">Why do I want to work in customer support? Well, I believe that we were put on this earth to help each other. I gained a good understanding of this at the age of 11 when my mother had a stroke that completely paralyzed the left side of her body. A week later she woke up to the news that her mother passed away at her bedside.</br></br>
Seeing as how my father was never around, and I was the oldest of three, I learned responsibility at a young age. My mother taught me how to cook, clean, and wash clothes from a wheelchair, she made sure that I took care of my little brothers, and after everything she went through, she still managed to keep a smile on her face and never let us see her cry. She always told me that I was the reason for her happiness. However, after watching my mother go through so much and still find hope, I realized she was the reason for my happiness. She always thanked me for helping her during that time and It took years for me to realize that she was the one who helped me and for that, I thank her till this day.</br></br>
When I hear “Customer Support”, the only thing that comes to mind is “helping someone in need”. I’ve de-escalated irate customer’s before and at the end of the call, they always thank me for helping them. The goal is to empathize and understand what they’re going through. You must heal the customer before you can resolve their issue. I want to work in customer support because I love to help others. Nothing feel’s better than hearing that I was able to take someone’s terrible day and turn it into a wonderful day with a delightful experience.
</p>
</div>
<div class="carousel-item" id="carousel">
<h3>A description of a great customer service/support experience</br> you had recently, and what made it great.</h3>
<p style="text-align:left">I was driving home the night of November 16th, 2019. It was dark and raining outside, so unfortunately, I couldn’t see very well. As I was driving, I heard a loud POP, at the same time I felt my car rumble and start slowing down. After my car came to a complete stop, I got out to check and see what was going on. To my surprise, I ran over a pothole that flattened both tires on the right side of my vehicle. I had no idea what I was going to do.</br></br>
The next day I called State Farm and spoke with a representative who worked with me to set up a claim. He asked me everything that happened, and I explained it to him in detail. He ensured me that I had nothing to worry about, everything would be taken care of, and all I had to do was pay a deductible of 500.00. I chose to get my car repaired at the same place I purchased it from, a Toyota dealership about 5 minutes away from my house. The next day I called Toyota to see if the repairs were done. I was informed by a technician that my vehicle was ready for pick up however, it had to be taken to another department for the repairs. A few minutes later I received an invoice from Toyota for 2,168.68. I immediately contacted Toyota and let them know that my repair was supposed to be covered as an insurance claim. The person I spoke with told me they didn’t receive an insurance claim, so I would need to pay 2,168.68 or I wouldn’t be able to pick up my vehicle. Not only was it more than I expected, but I also didn’t have anywhere near that amount of money. I called State Farm again, this time I spoke with a different representative. After I explained the situation, the representative told me the person before her set up an insurance claim for my car, but they didn’t cover pothole damage. I was in a dilemma to no fault of my own, that neither company wanted to take responsibility for.</br></br>
After several calls to Toyota and State Farm, I was transferred to the manager of the repair department at Toyota. He let me know he understood what I was going through by relating it to a similar experience he went through, apologized for the misunderstanding, and told me he was going to personally make sure my issue got resolved. He didn’t try to place blame on anyone else and I could tell by the empathy in his voice he wanted to help me. He offered to take care of the repair amount and wash my car free of charge. By the end of the call, I had almost forgot about the experience I went through. Getting your issue resolved is always a plus. However, after the experience I had with the Manager at Toyota, I continue to go to them as a customer. He could’ve just offered to cover the repair amount and ended the conversation, but after everything that I went through, I don’t think I would’ve ever gone back to them. Sometimes being a genuine human being is the greatest gift anyone could ever receive.
</p>
</div>
<div class="carousel-item" id="carousel">
<h3>A time you taught yourself a new skill to complete a job or project.</h3>
<p style="text-align:left">I worked at a corporate Verizon Wireless call center for years. I loved my job. However, my daughter was born in October of 2018, and I wasn’t making enough money to support my family. I had to find a way to generate more income.</br></br>
One day I was scrolling on social media and I saw an ad that stated I could learn how to code, and I wouldn’t have to pay anything until I got a job as a software developer. I clicked on the link and after completing an application I was asked to complete some pre-course work. I completed the coursework and even after I was done, I wanted to know more. So, I studied as much as I could with hopes of getting approved for a coding bootcamp. A week later I received an email stating I didn’t get approved for a loan because I didn’t have enough credit. Seeing as how I could barely take care of my family, I already knew I couldn’t afford to pay for school. So, I investigated every possible option until I decided to take the self-taught route. I wasn’t going to let anything stop me from getting where I needed to be in life. After doing some research, I stumbled upon a website called “Free Code Camp” that not only allowed me to study code but also gives you certifications upon completion. I completed course work and several projects until I earned a responsive web design certification by myself.</br></br>
When I heard I wasn’t approved for a loan due to financial reasons, I almost gave up. However, I never let it get to me. All it took was some consistency and determination. Studying code is an endless journey and I’m still learning till this day.
</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!--APPLICATION QUESTIONS-->
<!--CUSTOMER QUESTIONS-->
<section id="customer-questions">
<h2>Customer Questions</h2>
<div class="row">
<div class="col-lg-12 col-md-12" id="pricing-column">
<div class="card">
<div style="text-align:center" class="card-header">
<h3>How do you create a Class?</h3>
</div>
<div class="card-body">
<p>Hi Mr. Customer,</br></br>
I hope all is well. In order to create a class in GimKit, you will first need to sign into your GimKit account. From your dashboard click <strong>classes</strong> on the left panel and then click <strong>new class</strong>. On this page you will be asked to enter a <strong>class name</strong>, <strong>class color</strong>, and <strong>class members</strong>. Once that is completed, we will want to submit the information by clicking <strong>create class</strong>. Your new class will be created and ready for you to create memorable learning experiences. I have listed some resources below regarding “classes” in GimKit. Feel free to reach out to me if you have any additional questions.</br></br>
Classes Explained</br>
How To Create A Class</br>
How/When To Use Classes</br>
How To Edit Classes</br></br>
Thank you,</br>
Kenneth
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12" id="pricing-column">
<div class="card">
<div style="text-align:center" class="card-header">
<h3>Why does Gimkit cost money?</h3>
</div>
<div class="card-body">
<p style="padding-left:20px;">Hi Mrs. Customer,</br></br>
I hope your having a wonderful day. All our GimKit plans are ad free, so we offer several plan options in order to maintain an amazing learning experience. I listed a link below to our pricing plans, including an option to use GimKit for free forever. Please feel free to reply to this email if you have any additional questions about GimKit.</br></br>
Get Started with Gimkit!</br></br>
Thank you,</br>
Kenneth</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" id="pricing-column">
<div class="card">
<div style="text-align:center" class="card-header">
<h3>Does Gimkit have the ability to export a report to a CSV file?</h3>
</div>
<div class="card-body">
<p style="padding-left:35px;">Hi Ms. Customer,</br></br>
I hope all is well. GimKit reports can be exported into a PDF file, however, currently the option to export into a CSV file is unavailable. I have included some resources below regarding GimKit reports and information on printing and saving reports. I apologize for any inconvenience. Please feel free to reach out to me if you have any additional questions.</br></br>
Game reports</br>
Printing and Saving Reports</br></br>
Thank you,</br>
Kenneth</p>
</div>
</div>
</section>
<!--CUSTOMER QUESTIONS-->
<!--FUN FACTS ABOUT ME-->
<section id="fun-facts-about-me">
<h2>Fun Facts About Me</h2>
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12" id="pricing-column">
<div class="card">
<div class="card-header">
<h3 style="text-align:center">Things I Love To Do</h3>
</div>
<div class="card-body">
<ol style="text-align: center; font-size: 20px;">
<li>Listen to Music</li>
<li>Watch Anime</li>
<li>CODE</li>
</ol>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" id="pricing-column">
<div class="card">
<div class="card-header">
<h3 style="text-align:center">Fun Places I've Been To</h3>
</div>
<div class="card-body">
<ol style="text-align: center; font-size: 20px;">
<li>Las Vegas, NV</li>
<li>Sacramento, CA</li>
<li>Orlanda, FL</li>
</ol>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" id="pricing-column">
<div class="card">
<div class="card-header">
<h3 style="text-align:center">Hidden Talents</h3>
</div>
<div class="card-body">
<ol style="text-align: center; font-size: 20px;">
<li>I'm an Audio Engineer</li>
<li>I can play multiple Instuments</li>
<li>I'm a songwriter</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</section>
<!--FUN FACTS ABOUT ME-->
</div>
</div>
</body>
</html>
Add .row margin:0px !important; to overwrite .row margin.
you should use "container-fluid" if full width
you should use "container" if specified width used
this will fix your column view of cards
Currently I am working on a project that is similar to this example:
Off Canvas Menu Example
HTML:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li>Item 1</li>
...
</ul>
</aside>
<!-- main content goes here -->
<p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
CSS:
.left-off-canvas-menu {
height: 100vh;
}
JS:
$(document).foundation();
$('.off-canvas-wrap').foundation('offcanvas', 'show', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'hide', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'toggle', 'move-right');
I am using off-canvas to show a menu on page. however based on some condition I like to turn off animation and just the menu pops in without any animation and then turn the animation on later based on some other conditions?
Would that be possible ?
Another day, another challenge. This should be an easy one. I got the accordion to render, but it will not function. What am I doing wrong? I get an error "Can't find variable: jQuery". This refers to the last line of the accordion.min.js file which is }( jQuery, window, document);.
Here is the entire HTML.
<!DOCTYPE html>
<html>
<title> Semantic UI - Accordian </title>
<h1>Semantic UI Accordian - Not Working</h1>
<hr>
<p>The source semantic UI component files are correct. And I am loading the latest version of jQuery. The Accordian renders, but it does not function. What am I doing wrong? I tried using the main semantic.js and semantic.css files - that encompasses all components, but this also did not work. </p>
<br>
<h3>Error Message in Safari Error Console</h3>
<p> I only see one error. It refers to the last line in the accordion.js or accordion.min.js file. It reads "can't find variable jQuery". and refers to a closing "}( jQuery, window, document);" statement. I got the same error when trying to load an earlier version of jQuery 2.1.3. What am I doing wrong? </p>
<head>
<script type="text/javascript" src="http://oss.maxcdn.com/semantic-ui/2.1.8/components/accordion.min.js"></script>
<link rel="stylesheet" href="https://oss.maxcdn.com/semantic-ui/2.1.8/components/accordion.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
</head>
<body>
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="content">
<p class="transition hidden">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What kinds of dogs are there?
</div>
<div class="content">
<p class="transition hidden">There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
How do you acquire a dog?
</div>
<div class="content">
<p class="transition hidden">Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
<p class="transition hidden">A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
</div>
</div>
<script>
$('.ui.accordion').accordion();
</script>
</body>
</html>
include
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
before
<script type="text/javascript" src="http://oss.maxcdn.com/semantic-ui/2.1.8/components/accordion.min.js"></script>
See: http://sthliquidations.com
I just downloaded and installed bxSlider. It seems to be exactly what I want, but I'm having several issues: I'm using Chrome
1) No matter what slide I'm on, the last slide shows after transition (except the first slide).
2) When I try to adjust the modes, the slider becomes it's basic UL list.
Process:
Header code:
<head>
<!-- NAME THE PAGE -->
<title><?php $title ?></title>
<!-- GET THE FAIRY DUST AND DUST BUNNIES -->
<link rel="stylesheet" type="text/css" href="scripts/basic.css" />
<script type="text/javascript" src="contact-files/contact-form.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<!-- bxSlider -->
<script src="/scripts/jquery.bxslider.min.js"></script>
<link href="/scripts/jquery.bxslider.css" rel="stylesheet" />
<script src="/scripts/muscles.js"></script>
<!-- TELL GOOGLE WHAT IT WANTS TO HEAR -->
<meta name="description" content="<?php $description ?>">
<meta name="keywords" content="<?php $keywords ?>">
<!-- FIX ENCODING ERROR -->
<meta charset="UTF-8">
</head>
Header file:
<!-- =============== -->
<!-- BODY -->
<!-- =============== -->
<body>
<div id="header">
<div class="logo">
</div>
<!-- TITLE -->
<div class="headerwindow">
<div class="logo-box">
<img src="/images/logo_white.png" alt="STH Liquidations" class="logo_image" />
</div>
<div class='title'>
<?php
if ($title != "STH Liquidations")
{
echo $title;
}
?>
<p class='contact_info'>Phone: (843) 452-5451</p>
<p class='contact_info'>Monday - Friday: 8:30 - 5:00 PM</p>
</div>
</div>
</div>
<div class="clear"></div>
Index File:
<?php include "parts/hot_deals.php"; ?>
<p class="head1">Welcome to <strong>STH Liquidations, Inc.</strong></p>
<p>With <strong><i>over ten years experience</i></strong> in the overstock and liquidation business, we at STH Liquidation, Inc feel confident that we can meet your specific needs. STH buys and sells <strong>NAME BRAND</strong> liquidated merchandise from all major retailers, catalog companies and big box stores.
</p>
<p>Whether you are <strong>a retailer, wholesaler, auctioneer, online seller, exporter, flea marketer, mom and pop store,</strong> or whatever you specific venture is, we at STH Liquidations, Inc are confident that we can supply your needs and <strong>help maximize your profits</strong>. We carry truckloads of general merchandise, furniture, housewares, tools, toys, sporting goods, jewelry lots, apparel and much more.</p>
<p>We carry product from most all major retailers so our customers know that they are getting the name brands they are looking for.</p>
<p>We <strong>DO NOT</strong> buy from others warehouses in which merchandise most likely has been “cherry picked”. We buy and ship direct to the customers from all the major retail reclamation and distribution centers. <strong>Shipping direct from these facilities saves you money.</strong> Another money saving advantage is that our low overhead. Our business philosophy is simple; we keep our costs low so we can keep your costs low. Money saved is money made!</p>
<p>Browse our website at your leisure, but please call us with any questions you may have or to place your order.</p>
<p>Remember to join our mailing list to receive up to date listings and our <strong>hot deals</strong>.</p>
</div>
<div id="hotdeals">
<p class="head2">Hot Deals!</p>
<div class="deals">
<p class="deal_title">K-Hardgoods</p>
<p class="deal_desc">Housewares, toys, tools,sporting goods and much more. Several loads available. See attachment</p>
<p class="deal_price">Price $139 per pallet (single loads)<br />Price $135 per pallet (double load)</p>
<p class="deal_pdf">Download PDF</p>
</div>
<div class="deals">
<p class="deal_title">SRS Tool Truckload</p>
<p class="deal_desc">CR*STSM*N TOOLS AND MUCH MORE <br />Saws, compressors, blowers, edgers. saber saws, table saws and much more</p>
<p class="deal_price">27 PALLETS--WHLS $66,649.32 <br />SELL PRICE $12,900</p>
<p class="deal_pdf">Download PDF</p>
</div>
<div class="deals">
<p class="deal_title">W*M Power wheels</p>
<p class="deal_desc">Ride on toy truckloads
<br />150-180 units per truckload
<br />Customer returns</p>
<p class="deal_price">Price only $5,900</p>
</div>
</div>
<div class="clear"></div>
<div id="image_holder">
<ul class="bxslider">
<li><img src="/slider/pic1.jpg" /></li>
<li><img src="/slider/pic2.jpg" /></li>
<li><img src="/slider/pic3.jpg" /></li>
<li><img src="/slider/pic4.jpg" /></li>
<li><img src="/slider/pic5.jpg" /></li>
<li><img src="/slider/pic6.jpg" /></li>
</ul>
</div>
(leaving the footer out, it's not important)
My JS File (renders UL list of images):
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: fade
});
});
My JS File (renders slideshow that "almost" works):
$(document).ready(function(){
$('.bxslider').bxSlider();
});
Errors
Chrome Inspect Element is throwing this errors:
Uncaught ReferenceError: fade is not defined muscles.js:3
(anonymous function) muscles.js:3
j jquery.min.js:2
k.fireWith jquery.min.js:2
n.extend.ready jquery.min.js:2
K
I have made sure that all the files that came with the download have been included. I have followed the only instructions I could find on the website. Can anyone see what might be going wrong?
I had the same issue. I fixed it by setting useCSS: false in the js file. When useCSS is set to false bxslider uses jQuery animate() instead of CSS transitions for horizontal scrolling.