Is there a way to make my website mirror the exact layout it has on Codepen?

Recently, I started working on a web project on Codepen using Bootstrap 4 and JQuery quick-adds. The results were perfect on Codepen but when I copied the same code to my text-editor and ran it from there, the formatting of the page was completely off. I tried including the same Bootstrap and JQuery CDN links, but without success. How can I make my code run the same way it does on Codepen.io? What links do I need to include?

Below is the desired outcome:

https://i.sstatic.net/ZIRBr.jpg

However, when I test the code in Firefox/Chrome browsers, the result is not what I expected. Most of the Bootstrap 4 styling is missing, and there are issues with the links in the navigation bar. When I attempt to use text-decoration: none; on my <a> elements and button, my JQuery code stops working.

https://i.sstatic.net/CBm50.jpg

On Internet Explorer, the outcome is the worst of all. Despite following some suggestions on moving the links, the result is still far from ideal.

https://i.sstatic.net/R0tQo.jpg

To resolve this, I have included the relevant JavaScript and CSS code below:

jqueryhtmlcsstwitter-bootstrap

Answer №1

Set up a new directory and create the following 3 files in it. Paste the provided code into each file.

  1. index.html
  2. style.css
  3. index.js

index.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Website Template 3 with Navbar</title>

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

  <link rel="stylesheet" href="style.css">

  <link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
<div class="main">
  <a href=#><img class="menu-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Ic_menu_36px.svg/2000px-Ic_menu_36px.svg.png"></a>
  <h1 class="text-center">Hello! My name is <span>Gabby</span> and I create beautiful, professional, and responsive websites.</h1>
  <center><a class="button text-center" href="#"><span class="learn-more">Learn More</span></a></center>
</div>

<div class="nav-bar">
  <h3>Gab's Tech <br><span class="space text-center">Space</span></h3>
  <ul class="text-center">
    <li><a href=# class="active">Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Projects</a></li>
    <li><a href=#>Contact</a></li>
  </ul>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  <script  src="index.js"></script>

</body>
</html>

style.css

* {
  /*box-sizing: border-box; */
  padding: 0;
  margin: 0;
}

body, html {
  height: 100%;
  overflow: hidden; 
}

.main {
  background-image: url('http://hdimages.org/wp-content/uploads/2016/10/css-background-image-HD6-1.jpg');
  width: 75%;
  height: 100%;
  float: right;
}

.nav-bar {
  background-color:   #4a235a;
  width: 25%;
  height: 100%;
  opacity: 0.9;
}

ul {
  padding: 10% 30%;
}

ul li {
  color: white;
  text-transform: uppercase;
  list-style-type: none;
  padding: 20%;
  border-bottom: solid 1px gray;
  font-size: 1.2em;
}

ul li:hover {
  color: gray;
  font-weight: bold;
}

h3 {
  padding: 3%;
  font-size: 1.3em;
  color: lemonchiffon;
  font-weight: bold;
}

.active {
  color: navy;
  font-weight: bold;
}

h1 {
  font-family: Raleway;
  font-size: 2.6em;
  line-height: 1.4em;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 14%;
  padding-bottom: 4%;
  color: snow;
}

.button {
  color: white;
  font-size: 1.3em;
  text-align: center;
  border: solid 1px white;
  padding: 0.5em 0.7em;
}

.button:hover {
  color: #2c3e50;
  background-color:  #c39bd3;
  opacity: 0.9;
}

a {
  color: white;
}

a:hover {
  color: gray;
  text-decoration: none;
}


.menu-icon {
  width: 2.5%;
  margin: 1.2%;
  padding: 0.05% 0.02%;
}

img:hover {
  border: solid 1px #17202a;
  border-radius: 0.5em;
}

.hide-nav {
  display: none;
}

.expand-main {
  float: none;
  width: 100%;
}

index.js

$(document).ready(function() {
  $('a').on('click', function() {
    $(this).parents().siblings().children().removeClass('active');
    $(this).addClass('active');
  });

 $('.menu-icon').on('click', function() {
    $('.nav-bar').toggleClass('hide-nav');
    $('main').toggleClass('expand-main');
 });
});

Answer №2

1. To start, rename your JavaScript file by removing the spaces and edit the script src accordingly.

Replace Gab's Tech Space Template.js with gabsTechSpaceTemplate.js

Before:

<script src="Gab's Tech Space Template.js"></script>

After:

<script src="gabsTechSpaceTemplate.js"></script>

NOTE: Ensure that your JavaScript file is located in the root folder alongside the index.html file

2. Prioritize the jQuery CDN link: It is important to import the library before using it. In this case, jQuery is being used before it has been imported. Always place the jQuery CDN link at the beginning before any other JavaScript code or files.

First:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Second:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Finally, include your JavaScript file:

<script src="gabsTechSpaceTemplate.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Wait for the canvas to fully load before locating the base64 data in HTML5

Wait until the full canvas is loaded before finding the base64 of that canvas, rather than relying on a fixed time interval. function make_base(bg_img, width, height) { return new Promise(function(resolve, reject) { base_image = new Image(); base_imag ...

javascripthtmlhtml5-canvas

proceed to a different destination

Hey everyone, I've encountered a problem that I can't seem to solve. I have two buttons in my code - one for deleting and the other for editing. The delete button works perfectly fine, but the edit button isn't redirecting to the PHP file as ...

phphtmlmysql

Rows with an ambiguous number of horizontal lines

I am looking to create multiple rows that are horizontally floated, as shown in the image. However, I am facing an issue with setting the width of the container because I do not know the exact number of rows that will be added. Currently, my code looks li ...

htmlcss

prevent parent jQuery functions from interfering with child function execution

I am facing an issue with conflicting jQuery functions between parent and child elements. The child function is a bootstrap function, while the parent is a custom function. The main objective is to limit the height of the parent div (refer to the code belo ...

javascriptjqueryhtmlcsstwitter-bootstrap

We encountered an issue loading the resource: the server has returned a 404 (Not Found) error message and a 403 Forbidden error message. However, the resource functions properly on Codepen and localhost

I have a CodePen demo that works fine. However, when I upload it to the server, it stops working properly and most external references show 404 errors. Initially, there were no problems, but now it seems to be an issue like this: !--> http://sachin.ipov ...

htmlcss

Adjusting padding evenly across an unspecified number of columns

I'm currently facing a challenge with a multi-column layout. In a basic setup of three columns, I aim to adjust the padding so that each gap between the columns is consistent (2rem). However, the tricky part lies in crafting rules that can be applied ...

css

What is the best method for eliminating a character from all elements in jQuery classes?

I am working on an Angular 4 app where every .inner-page class in a html element includes a "/". For instance: <div _ngcontent-c0="" class="inner-page /login"> <div _ngcontent-c0="" class="inner-page /register"> I need to eliminate the "/" c ...

javascriptphpjqueryhtmlcss

Tips for controlling the size of a textarea in jQuery to prevent it from expanding further

How can I prevent the textarea size from increasing in jQuery? I created a demo where the user can only press 8 enters and enter up to 700 characters. However, my logic fails when the user first presses 7 enters and then starts writing text. The text appe ...

javascriptjquery

Pass numerous data elements using .ajax() to be processed in a PHP script

Currently, I am encountering difficulties while attempting to send two distinct groups of information through .ajax() to a PHP script for processing. The scenario is as follows: when a user enters a page, 1) a timer begins counting seconds and 2) the user ...

jqueryajaxtimer

Is there a way to maintain scroll position on a dynamically refreshing div?

After searching for hours, I still can't find a solution to my problem. I am using a simple JQuery script to refresh a div and display my PHP output in it. $script = " <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery ...

javascripthtmlajaxscroll

Navigation bar links refusing to decrease in size

I am encountering an issue with the navigation bar on my website. When I reduce the size of the browser tab, the text remains the same size while the logo shrinks and eventually disappears. How can I ensure that everything scales down proportionally? Pleas ...

htmlcssimagenavbar

Extract the color of an individual character

There is a code snippet in JavaScript using p5.js that functions as a video filter: const density = ' .:░▒▓█' //const density = ' .tiITesgESG' //let geist; let video let asciiDiv let playing = false let ...

javascripthtmlcssprocessingp5.js

Troubleshooting Vue.js nested v-for with <tr> tag problem

Why does Vue complain about undefined properties when I try nesting a <tr> inside a <tr> with a v-for binding on each? <table> <thead></thead> <tbody> <tr v-for="item in items"> <td>{{ item.nam ...

htmlvue.jshtml-tablebindingv-for

Ways to serve JSON response following a 400 error code

After a user submits incorrect form details, such as an invalid username or blank email address, I make an Ajax request to my REST API. The response data I receive is structured as follows: HTTP 400 Bad Request Allow: POST, OPTIONS Content-Type: applicati ...

javascriptjqueryajax

Performing XMLHttpRequests and ajax requests inside a foreach loop

I am facing a issue with echoing the decoded array using var_dump. Each time I click the button, a unique xmlhttprequest and ajax call should get executed for every row. However, in reality, the ajax doesn't work as expected. Upon examining the source ...

javascriptphpjqueryjsonajax

Complete Calendar featuring event limitations. Click the Reset or Refresh button to view more events

Recently, I've integrated FullCalendar with the LimitEvents feature. Everything works smoothly when I initially load the calendar. However, I encounter an issue when updating the resources and displaying new data on the calendar. The view-more button ...

jqueryfullcalendar

Tips for creating a gap between the <label> element and a form field

I have read through the answers provided, but nothing seems to work for me. My goal is to place a label and 2 small form fields on the same line, with about 90px of space between the label and the fields. I am aiming for a layout similar to the image shown ...

htmlcssformslabel

JavaScript quiz featuring randomized questions with selectable radio buttons

I need assistance in creating a feature on my webpage where users can select the number of questions they want to answer (ranging from 1 to 10). The selected number of questions should then be displayed randomly, without any duplicates. I am not very famil ...

javascriptjqueryhtml

Guide: Writing code that caters to different types of media in React using Material-UI

After reviewing the documentation, I believed that the optimal solution in later versions of material-ui was to use useMediaQuery, but unfortunately, I am unable to implement it correctly. My objective is to hide a menu when the page is being printed, so I ...

cssreactjsmaterial-ui

Troubleshooting Problem with Website Responsiveness on iPhones Using Bootstrap 5

I am currently experiencing a challenge involving the responsiveness of a website I am developing, particularly when it comes to iPhones. The site utilizes Bootstrap 5 and displays correctly on Android devices and in Chrome Dev Tools. However, upon testing ...

javascripthtmlcssiphonebootstrap-5