I am new to coding and I have some problem with referring to the right folder.
Here is my folder structure:
Here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AGONEX GmbH</title>
<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/fixed.css" />
</head>
<body>
<nav class="navbar navbar-dark fixed-top">
<a class="navbar-brand mx-auto" href="#"
><img src="/images/agonex.png" alt=""
/></a>
</nav>
<div class="video-background">
<div class="video-wrap">
<div id="video">
<video id="bgvid" autoplay loop muted playsinline>
<source src="/images/agonex.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
<div class="caption text-center">
<h1>Lorem</h1>
<h3>Lorem</h3>
<a class="btn btn-outline-light btn-lg" href="course">Lorem</a>
</div>
<!--- Start Course Section -->
<div id="course" class="row justify-content-center">
<div class="col-md-8 text-center">
<h1>Lorem</h1>
<p class="lead">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus,
rem ut quos ex quibusdam nisi!
</p>
</div>
</div>
<!--- End Course Section -->
<!--- Script Source Files -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<!--- End of Script Source Files -->
</body>
</html>
And now my page looks like this:
Can someone please help me referring to the correct folder.
Sry for the "easy" question but I would appreciate your help!
You'll want to move any files you need to reference in your HTML into your public directory. So, for instance, jquery-3.3.1.min.js should be moved to your public/js directory, instead of your top-level js directory (which may be invisible to the browser... though I can't say for sure without seeing the contents of your app.js file). The same goes for your bootstrap-4.3.1-dist directory-- you can move the entire directory into your public directory.
Then in your HTML code, you can reference your jQuery and Bootstrap source files like this:
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
Related
I tried, having a modal inside a footer section of a page (using materialize css). On clicking the modal, it pops up and shows a materialize collection. But once I close the pop up, the modal button , sort of freezes , and only if i move my cursor over it , it regains it original color.
As in the image, the modal button looks like it's inactive(whitish blue color) and if I move my mouse over it, it regains its original color.
Here's my code:
$(document).ready(function() {
$('#modal1').modal();
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<footer class="page-footer black">
<div class="row">
<div class="col s1 m1">
<div class="footer-copyright">
<div class="container" id="copyright">
© copyright text
</div>
</div>
</div>
<div class="col s11 m11">
<!-- <div class="row" id="modal"> -->
<a class="waves-effect blue waves-light btn modal-trigger" href="#modal1">Modal</a>
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<div class="collection">
<h2 style="color:black;">Text Analysis</h2>
item 1
item 2
item3
</div>
<div class="modal">
Close
</div>
</div>
</div>
</div>
</div>
</footer>
How do I rectify this glitch?
As stated in this ISSUE, the issue is given by the double inclusion of javascript files in your <head>.
Remove the older version in order to make it work..
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
I want to two images diagonally one below another like this, and they should remain like that responsively.
So far I've got this, but the images are moving when I re-size the window and it is not responsive. Is it possible to make it responsive using bootstrap?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="row">
<div class="col-md-8">
<img class="img-responsive" align="left" src="img1.png" />
</div>
</div>
<div class="row">
<div class="col-md-8">
<img class="img-responsive" align="left" src="img2.png" />
</div>
</div>
JS Bin
Use col-*-offset-* instead of aligning left/right. Check below snippet for reference.
.p0 {
padding: 0 !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 p0">
<img class="img-responsive" src="http://via.placeholder.com/600x400/green" />
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-6 p0">
<img class="img-responsive" src="http://via.placeholder.com/600x400" />
</div>
</div>
</div>
</body>
</html>
I'm using Brackets text editor and everything's working great (runs the same through Brackets as it does with Codepen) apart from one thing:
I'm using a CSS media query to set a breakpoint so I only have one column in a at max-width 537px.
#media (max-width: 537px) {
.custom-column {
width: 100%;
}
}
<div class="col-sm-4 col-xs-6 custom-column">
<img src="#" alt="#" width="100%">
<p>Me</p>
</div>
For some reason it works in Codepen but not when I run my text editor in Chrome. Is it something to do with my 'head' element maybe?
<!DOCTYPE html="en">
<html lang>
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Icons for footer -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
and here's the codepen: [http://codepen.io/SimmoSim/pen/wJgpwg?editors=1100][1]
I solved this issue. I also had this issue with Mozzilla, and I fixed it by commending your bootstrap cdn link and using my bootstrap link.
I understood it, because as it worked with code pen, I thought it may be connected to the stylesheet bootstrap cdn not loading.
This is the bootstrap cdn I am using, I include it in my header tags:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet" />
</head>
This is the rest of my my working code:
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
</head>
<body>
<!DOCTYPE html="en">
<html lang>
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<!-- Latest compiled and minified CSS -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
<!-- Icons for footer -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
</body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Simmo Simpson Web Design</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li><a href="#contact" >Contact</a></li>
</ul>
</div>
</nav>
<div id="about" class="container-fluid">
<div class="row">
<div class="col-xs-5 custom-about">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" class="img-circle" alt="My face" width="100%">
</div>
<div class="col-xs-7 custom-about">
<h1>Simmo Simpson</h1>
<h4>Freelance Web Design & Photography<br><br>
Feel free to take a look at my work</h4>
</div>
</div>
<section class="container-fluid" id="portfolio">
<h1>PORTFOLIO</h1>
<div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
</div>
</section>
</div>
<h1 id="contact">CONTACT ME</h1>
<div>
<P style="padding-left:5%" class="text-right">Need a website? Some quality photography?<br><br>Drop me a line on your prefered social media<br> platform by clicking a link below.<br><br>
Want some advice to become more productive?<br><br>Check out my blog by clicking the W icon.<br><br>
</P>
</div>
<div class="footer-social-icons">
<ul class="social-icons custom-social-icon">
<li> <i class="fa fa-facebook custom-social-icon"></i></li>
<li> <i class="fa fa-twitter custom-social-icon"></i></li>
<li> <i class="fa fa-linkedin custom-social-icon"></i></li>
<li> <i class="fa fa-instagram custom-social-icon"></i></li>
<li> <i class="fa fa-wordpress custom-social-icon"></i></li>
<li> <i class="fa fa-github"></i></li>
</ul>
<br>
</div>
<script
src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script
src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<title> MyBLOG </title>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap_costumize.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="css/js/bootstrap.js"></script>
<script src="css/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navbar-brand"> This is a Logo </div>
</div>
<ul class="nav navbar-nav pull-right" >
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</nav>
<div class="row">
<div class="col-md-2 col-md-offset-1">
<div class="img">
<img src="img/blog_picture_1.jpg" />
</div>
<div class="img">
<img src="img/blog_picture_2.jpg" />
</div>
<div class="img">
<img src="img/blog_picture_1.jpg" />
</div>
<div class="img">
<img src="img/blog_picture_2.jpg" />
</div>
</div>
</div>
</body>
</html>
this is the php code and this display the image top to bottom how can i display the images inline like from left to right?
im struggling also how to connect css selector in img and div hehe can sum1 pls elaborate the methods shoud i do thank you :)
Since your images are all wrapped in divs with .img class, write the following in your CSS.
.img { display: inline; }
In my html template, based on Zurb Foundation , I have following code:
<div id="top-bar">
<div id="top-bar-top-cont"></div>
<div class="row">
<div class="large-12 columns">
<p id="toplogo">
<h3>some text</h3>
</p>
</div>
</div>
</div>
When I check the code source, firefox warns me there is an issue with closing p tag, with red color.
In firebug source, I see it self closing p tag and div tags around it.
So, it doesnt display things properly.
Even when I pasted this snippet here, the editor showed red closing tags for p & outermost div.
Do I have error in this html?
Am I missing something?
This is my whole document:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<div id="top-bar">
<div id="top-bar-top-cont"></div>
<div class="row">
<div class="large-12 columns">
<p id="toplogo">
<h3>some text</h3>
</p>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
You are getting this error because Firefox does not expect any heading tag like <h3> inside <p> tag. Therefore, when Firefox encounters the <h3> tag in your example, it automatically closes the <p> tag. You must put the <h3> tag outside <p> tag.