Merge pull request #52 from KumarKelashMeghwar/main

Responsive website using Html, css, JavaScript and Bootstrap

ResponsiveWeb/progresscircle.css

@@ -0,0 +1,96 @@
+/**
+ * Inspiration for this project found at:
+ * https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart
+ * 1. The `reverse` animation direction plays the animation backwards
+ *    which makes it start at the stroke offset 100 which means displaying
+ *    no stroke at all and animating it to the value defined in the SVG
+ *    via the inline `stroke-dashoffset` attribute.
+ * 2. Rotate by -90 degree to make the starting point of the
+ *    stroke the top of the circle.
+ * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
+ *    and Edge, use the transform attribute directly on the SVG element as a
+ * .  workaround.
+ */
+
+ .circle-chart {
+    width: 150px;
+    height: 150px;
+}
+
+.circle-chart__circle {
+    stroke: #ed6436;
+    stroke-width: 2;
+    stroke-linecap: square;
+    fill: none;
+    animation: circle-chart-fill 2s reverse;
+    /* 1 */
+    transform: rotate(-90deg);
+    /* 2, 3 */
+    transform-origin: center;
+    /* 4 */
+}
+
+
+/**
+ * 1. Rotate by -90 degree to make the starting point of the
+ *    stroke the top of the circle.
+ * 2. Scaling mirrors the circle to make the stroke move right
+ *    to mark a positive chart value.
+ * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
+ *    and Edge, use the transform attribute directly on the SVG element as a
+ * .  workaround.
+ */
+
+.circle-chart__circle--negative {
+    transform: rotate(-90deg) scale(1, -1);
+    /* 1, 2, 3 */
+}
+
+.circle-chart__background {
+    stroke: #efefef;
+    stroke-width: 2;
+    fill: none;
+}
+
+.circle-chart__info {
+    animation: circle-chart-appear 2s forwards;
+    opacity: 0;
+    transform: translateY(0.3em);
+}
+
+.circle-chart__percent {
+    alignment-baseline: central;
+    text-anchor: middle;
+    font-size: 8px;
+}
+
+.circle-chart__subline {
+    alignment-baseline: central;
+    text-anchor: middle;
+    font-size: 3px;
+}
+
+.success-stroke {
+    stroke: #ed6436;
+}
+
+.warning-stroke {
+    stroke: #ffbb33;
+}
+
+.danger-stroke {
+    stroke: #ff4444;
+}
+
+@keyframes circle-chart-fill {
+    to {
+        stroke-dasharray: 0 100;
+    }
+}
+
+@keyframes circle-chart-appear {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

ResponsiveWeb/progresscircle.js

@@ -0,0 +1,42 @@
+function makesvg(percentage, inner_text = "") {
+
+    var abs_percentage = Math.abs(percentage).toString();
+    var percentage_str = percentage.toString();
+    var classes = ""
+
+    if (percentage < 0) {
+        classes = "danger-stroke circle-chart__circle--negative";
+    } else if (percentage > 0 && percentage <= 30) {
+        classes = "warning-stroke";
+    } else {
+        classes = "success-stroke";
+    }
+
+    var svg = '<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" xmlns="http://www.w3.org/2000/svg">' +
+        '<circle class="circle-chart__background" cx="16.9" cy="16.9" r="15.9" />' +
+        '<circle class="circle-chart__circle ' + classes + '"' +
+        'stroke-dasharray="' + abs_percentage + ',100"    cx="16.9" cy="16.9" r="15.9" />' +
+        '<g class="circle-chart__info">' +
+        '   <text class="circle-chart__percent" x="17.9" y="15.5">' + inner_text + '<text>'; // + percentage_str + '%</text>';
+
+    if (inner_text) {
+        svg += '<text class="circle-chart__subline" x="16.91549431" y="22">' + inner_text + '</text>'
+    }
+
+    svg += ' </g></svg>';
+
+    return svg
+}
+
+(function($) {
+
+    $.fn.circlechart = function() {
+        this.each(function() {
+            var percentage = $(this).data("percentage");
+            var inner_text = $(this).text();
+            $(this).html(makesvg(percentage, inner_text));
+        });
+        return this;
+    };
+
+}(jQuery));

ResponsiveWeb/script.js

@@ -0,0 +1,70 @@
+const slide = document.querySelector(".slide-left");
+const image = document.querySelector(".slider-image");
+const name = document.querySelector(".slider-name");
+const job  = document.querySelector(".slider-job");
+
+let i = 1;
+
+let names = {
+	1 : "Peter Ronson",
+	2 : "Emilia Jhonson",
+	3 : "Ban Jason"
+};
+
+let jobs = {
+	1 : "DOG OWNER",
+	2 : "CAT OWNER",
+	3 : "DOG OWNER"
+};
+
+
+setInterval(()=>{
+	if( i==1 || i<=3 ){
+		image.src = "images/face"+ i + ".jpg";
+		name.innerHTML = names[2];
+		name.textContent = names[i];
+		job.textContent = jobs[i];
+		i++;
+	}
+	else{
+		i = 1;
+	}
+
+},2000);
+
+
+//  Hamburger Button
+
+let hamBtn = document.querySelector(".hamburger");
+let target = document.querySelector(".navlinks");
+let font = document.querySelector(".f");
+
+hamBtn.addEventListener('click', () => {
+	target.classList.toggle("show");
+	if(font.classList[2] == 'fa-bars'){
+		font.classList.replace('fa-bars','fa-times');
+	}
+	else if(font.classList[2] == 'fa-times'){
+		font.classList.replace('fa-times','fa-bars');
+	}
+});
+
+
+const header = document.querySelector("#navbar");
+
+document.addEventListener('scroll', () => {
+    let scroll_position = window.scrollY;
+
+    if(scroll_position > 250){
+        header.style.boxShadow = '2px 2px 6px rgba(0,0,0,0.2)';
+        header.style.position = 'fixed';
+        header.style.zIndex = '100';
+        header.style.backgroundColor = '#fff';
+    }
+  	else{
+  		header.style.boxShadow = 'none';
+  		header.style.position = 'relative';
+        header.style.zIndex = '1';
+        header.style.backgroundColor = 'transparent';
+  	}
+});