search

developerchil / hubble-landing-page-v2

0 stars 1 forks source link

bootstrap - easy pie chart conflict #2

Open developerchil opened 5 years ago

developerchil commented 5 years ago

Hello gays! I try to embed easy pie chart.js in my bootstrap page, but something gets wrong always and I can not realize what it's and how to fix it. Please, help Here is my HTML code: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" class="rel">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> 

<link rel="icon" type="image/png" href="images/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" class="rel">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/superslides/0.6.2/stylesheets/superslides.css" class="rel">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<link rel="stylesheet" href="style.css" class="rel">    
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="styles.css" /> 

<!-- <script src="jquery.easypiechart.js"></script> -->      
<title>Document</title>

I have known as DevChil ...

No, I am not so anonymous...I just like a lot my nickname:)

All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words.

The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.

programming-learn

Techical skills

Here is a presentation of my front-end skills used in this project

Refresh the page to see the effect

93%
HTML5
90%
CSS3
68%
jQuery
82%
Bootstrap4

here is my CSS: @import url('https://fonts.googleapis.com/css?family=Montserrat|Rokkitt'); @import url('https://fonts.googleapis.com/css?family=Josefin+Slab:600'); @import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Montserrat'); @import url('https://fonts.googleapis.com/css?family=Raleway');

html { scroll-behavior: smooth; }

body { background-color: #E1DCD9; font-family: 'Rokkitt', serif; }

.navbar { background: maroon !important; width: 95%; margin: 0 auto; }

.navbar-brand { color: white; letter-spacing: 4px; text-shadow: 2px 2px 5px black; font-weight: bold; font-size: 1.75rem; }

.nav-link { color: white; font-size: 1.30rem; font-family: 'Rokkitt', serif; }

.navbar-brand { font-family: 'Josefin Slab', serif; font-weight: bold; }

main-container {

background-image: url("images/working-desk.jpg");
background-size: cover;
background-repeat: no-repeat;
//position: center center;
min-height: 650px;
max-width: 95%;
border: 2px solid black;

}

main-container img {

max-width: 100%;

}

main-container .sub {

position: absolute;
top:70%;
left:50%;
transform: translate(-50%, -50%);
width: 95%;
text-align: center;
color:white;
text-shadow: 2px 2px 2px black 1px 1px 1px maroon;
margin: 0;
padding: 0;
font-size: 2.0rem;
letter-spacing: 2px;
font-weight: bold;
text-transform: uppercase;

}

main-container h2 span {

color: maroon;

}

.container-fluid { background-color: #082d57e6; min-height: 400px; max-width: 95%; margin-top:60px; }

.container-fluid h4, p { color:white; background-color: transparent; text-shadow: 2px 2px 1px maroon; }

.container-fluid h4 { font-size: 28px; }

.container-fluid p { font-size:18px; letter-spacing: 2px; }

gray {

color: maroon;
text-shadow: 1px 2px 4px white;
font-weight: bold;

} .container-fluid img { max-width: 90%; padding: 5px; border: 1px solid white; margin: 16px; }

skills {

background-color: maroon;
min-height: 400px;
max-width: 95%;
margin-top:60px;

}

.white-line { height: 4px; color: white; border-bottom: 1px solid white; }

skills h2 {

color: white;
font-size:40px;
text-shadow: 1px 2px 1px black;
letter-spacing: 2px

}

.tech-2 { letter-spacing: 3px; }

.box { width: 25%; float: left; color: white; }

.chart { position: relative; width: 110px; height: 110px; margin: 0 auto; text-align: center; font-size: 28px; }

.mySlides {display:none;}

.footer { width: 95%; margin: 0 auto; background: black; height: 120px; } .footer p { color: white; font-size: 22px; }

.rights {
text-align: center; padding: 22px 0; font-weight: bold; letter-spacing: 2px; }

.rights a { color: maroon; text-shadow: 1px 1px 1px white; font-size: 1.50rem; letter-spacing: 3px; } .fab { margin-right: 16px; color: maroon; text-decoration: none; text-shadow: none; font-size: 22px; background: #E1DCD9; opacity: 0.5; padding: 6px; border-radius: 4px; transition: 0.3s ease; width: 55px; }

.fab:hover { opacity: 1;

}

.footer span { line-height: 60px; }

here is my JS: var typed = new Typed(".typed", { strings: [ "I am DevChil", "I am a Front End Developer", "Welcome to My Bootstrap page challenge " ], typeSpeed: 50, loop: true, startDelay: 1000, showCursor: false

});

var element = document.querySelector('.chart'); new EasyPieChart(element, { // your options goes here });