I want to display a button (from the link I sent below) onto my index.html file, and after a specific line (details are below), I am experiencing difficulties as I can't get the button that's in the link below to be outputted, and for me, it just outputs a simple plain button with the text on it when I copied the HTML code from the link and pasted it after the line in my index.html file. For the past 2 hours, I tried everything I could but I do not know why the button is not outputting correctly.
I want to paste the code from here onto my index.html:
https://repl.it/join/eyvqpjoy-hussainomer
If for some reason you cannot access the link then here is the code of the button:
HTML File of Button:
<link type="text/css" rel="stylesheet" href="css/button.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="yes">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Check Out My Blogs!</span>
</button>
</div>
CSS File of Button:
@import url("https://fonts.googleapis.com/css?family=Mukta:700");
* {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
body {
font-family: "Mukta", sans-serif;
font-size: 1rem;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background: #f3f8fa;
}
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
}
button.learn-more {
width: 12rem;
height: auto;
}
button.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
right: 25px;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #282936;
border-radius: 1.625rem;
}
button.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
button.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
button.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
button.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #282936;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
button:hover .circle {
width: 125%;
}
button:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
button:hover .button-text {
color: #fff;
}
@supports (display: grid) {
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0.625rem;
grid-template-areas: ". main main ." ". main main .";
}
#yes {
grid-area: main;
align-self: center;
justify-self: center;
}
}
My Main index.html file in another IDE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title >Hussain Omer</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-180664536-1">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-180664536-1');
</script>
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<!-- ======= Header ======= -->
<header id="header" class="d-flex flex-column justify-content-center">
<nav class="nav-menu">
<ul>
<li class="active"><a href="#hero"><i class="bx bx-home"></i> <span>Home</span></a></li>
<li><a href="#about"><i class="bx bx-user"></i> <span>About Me</span></a></li>
<li><a href="#resume"><i class="bx bx-file-blank"></i> <span>Resume</span></a></li>
<li><a href="#portfolio"><i class="bx bx-book-content"></i> <span>Projects</span></a></li>
<li><a href="#services"><i class="bx bx-server"></i> <span>Blogs</span></a></li>
<li><a href="#services"><i class="bx bx-server"></i> <span>Skills</span></a></li>
<li><a href="#contact"><i class="bx bx-envelope"></i> <span>Contact</span></a></li>
</ul>
</nav><!-- .nav-menu -->
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex flex-column justify-content-center">
<div class="container" data-aos="zoom-in" data-aos-delay="100">
<h1>Hussain Omer</h1>
<p>I'm a <span class="typed" data-typed-items="Coder, Leader, Team-Player, Blog Writer, Adventurer"></span></p>
<div class="social-links">
<!--<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>-->
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/kaustubh-prabhakar/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/SantaKaus" class="github"><i class="bx bxl-github"></i></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/h.s.z_11/" class="instagram"><i class="bx bxl-instagram"></i></a>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about portfolio services">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>My Story</h2>
</div>
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Lahore, Pakistan (2003-2010)</h4>
<p>I was born in Lahore, the second largest city of Pakistan. This is where I did most of my education and developed many memories. I enjoyed the very bit of the city; from the diverse culture and to the beautiful greenary. I haven't visited Pakistan in over 5 years, and I hope to go back some day 😀
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Helsinki, Finland (2007-2010)</h4>
<p>From a very unique and enjoyable Finnish school syst
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid">
<div class="portfolio-info">
<h4>Helsinki, Finland (2007-2010)</h4>
<p>From a very unique and enjoyable Finnish school syst
</div>
</div>
</div>
</div>
</div>
<div class="section-title">
<h2>About ME</h2>
<p>I am a 17 year old with a enthusiastic drive to working with technology, and using my prowess in Computers to make a positive impact on this world. </p>
</div>
<img src="https://mail.google.com/mail/u/1?ui=2&ik=79098a413c&attid=0.1&permmsgid=msg-f:1687893372595235455&th=176c9a145c466a7f&view=att&disp=safe&realattid=176c9a0f10e523984941" align="left" width="370" height="500">
<!-- <div style="display:inline-block;"> to put text under something or start new -->
<div class="aligned">
<div class="p">
<p>Motivated by my love for numbers, I started to explore the many ways I can use my Mathematical knowledge and implement it into different areas. I was introduced to Computer Science in my junior years of high school, and I came to know that I was genuinely passionated about learning it. It offers a holistic approach to solve problems which I admire, and since then, I have transformed my interest into a personal hobby!</p>
<p>I would always like to challenge myself and learn new programming langauges to increase the size of my toolbox. I was inspired by one of my friends to take my programming skills and put it into a good use; thus, I was introduced to competitive programming and large coding events such as hackathons!</p>
<p>The intellectual challenges, creativity, and logic programming offers has always further strengthened the inevitable bond between us.</p>
<p>Challenging myself allows me to not only grow outside my comfort zone, but gives a new perspective towards life, and how there is no limitations/boundaries that halt you from growing! It is everlasting. Once you develop the growth mindset, your journey just never comes to a complete stop! You keep on growing outside your comfort zone, and being able to easily push through any obstacles.</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</section><!-- End About Section -->
<!-- ======= Facts Section ======= -->
<section id="facts" class="facts">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am upto 😃</h2>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
<h4 class="title">7CUPS.com</h4>
<p class="description">I am currently on the pursuit to make a positive impact on the world. To do this, I started volunteering with 7Cups as a trained listener to support people having emotional distress by interacting with them and resolving any concerns they might have. Especially in these unprecendented times (a.k.a when COVID hit), it is important to guide and support the ones that require additional assistance</p>
</div>
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
<h4 class="title">School Clubs</h4>
<p class="description">Being part of school clubs is personally my favourite thing:) Interacting with people, coming up with ideas and implementing it with various activities is a fun on its own! I am currently an active member of over 5 clubs and hold a Vice-President position at my school's STEM Club. I am also the Technical Team Member for our school's Student Tech Hub</p>
</div>
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
<h4 class="title">Blog Writing</h4>
<p class="description">This is my new favourite thing to do when I am bored:) You may wonder what kind of blogs I write and specifically about what genre I write about. The answer is everything! I write about what is on my mind, and what I learn from my experiences. Basically self-reflections. I also tend to give general advices to people through my blogs!</p>
</div>
</div>
</div>
</div>
</section><!-- End Facts Section -->
</body>
</html>
I want the button to be displayed after "This is my new favourite thing to do when I am bored........" which is near the very bottom if you scroll down my main index.html file
So the html code of the button must go after that line for the button to be displayed there, but I tried that and it would just output a simple and plain button with the text on it, and not the button in the link I sent at the very top.
Aucun commentaire:
Enregistrer un commentaire