I have a website when I open my frontpage on my website it goes www.website.com and when I press Contact it goes www.website.com/Contact That's fine, but when I go back to my Frontpage it display www.website.com/Default How do I remove "Default" I want it to only write www.website.com when I press my logo or redirect to my frontpage.
SiteLayout.cshtml
<head>
<meta charset="utf-8" />
<title>Website Title</title>
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/favicon.png" rel="shortcut icon" type="image/x-icon" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><img src="Images/Website White.png" height="50" />- My Website Text</p>
</div>
Default.cshtml
#{
Layout = "~/_SiteLayout.cshtml";
}
#section featured {
<title>Website Title</title>
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h2></h2>
</hgroup>
<p>
A lot of text
</p>
</div>
</section>
}
let me know if you need more code.
The Default part of the URL is coming out because it is in your link back to the homepage, I'm guessing this one <a href="~/Default">.
As the root URL links to the Default page anyway, you can just remove 'Default' part from your href, in order to go the root without the path:
<a href="~/">
Aside from this the alternative is to redirect www.website.com/Default to www.website.com in your server-side code.
Related
I'm making my first reveal.js presentation and have set a global footer in the body of the html file. I would like to remove the footer for a single slide, however, I cannot figure out how to do that.
Below is my current file, with the footer at the end:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TITLE</title>
<meta
name="description"
content="DESCRIPTION"
/>
<meta name="author" content="MY NAME" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="dist/reset.css" />
<link rel="stylesheet" href="dist/reveal.css" />
<link rel="stylesheet" href="dist/theme/black.css" id="theme" />
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css" />
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<a href="https://example.com/">
<img
src="images/example.png"
alt="Example logo"
style="
height: 360px;
margin: 0 auto 4rem auto;
background: transparent;
"
class="logo"
/>
</a>
<h4>Title of my presentation</h4>
<p style="font-size: 30px">
Subtitle
</p>
</section>
<section>
<section class="center">
<h2>What goes here?</h2>
</section>
<section class="center">
<p>Lorem ipsum dolor sit amet</p>
</section>
<section class="center">
<pre>
<code>
Here is the code
</code>
</pre>
</section>
</section>
</div>
</div>
<!-- Default plugins -->
<script src="dist/reveal.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/search/search.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// Also available as an ES module, see:
// https://revealjs.com/initialization/
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [
RevealZoom,
RevealNotes,
RevealSearch,
RevealMarkdown,
RevealHighlight,
],
});
</script>
<!-- 1. Create hidden footer <div> -->
<div id="hidden" style="display:none;">
<div id="footer">
<div id="footer">Copyright 2022</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
// 2. On Reveal.js ready event, copy footer <div> into each `.slide-background` <div>
var footer = $('#footer').html();
$('div.reveal').append(footer);
</script>
</body>
</html>
Any tips or suggestions would be greatly appreciated!
First, you have a comment that says
On Reveal.js ready event, copy footer
but I can't see that in your code. To me, it seems like a plain append.
Now to your question, you should listen to the slideChanged event and remove the footer when the current slide is the slide you don't want the footer in:
Reveal.on( 'slidechanged', event => {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );
The event.currentSlide is the index of the slide, so you can retrieve the slide you want this way. Yes, it is very brittle since it will break if the slide's index changes, but it is the only way...
How do i center a h1 in a div.This is the picture of my project and i want to center "about me" with hover effect to center it with header, to be right beneath that green line.
this
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My Portfolio</title>
</head>
<body>
<div id="header">
<header>Mr. Philip Braun</header>
<img src="img/greeny.png">
<h1 class="hvr-float-shadow">About Me</h1>
<br>
<p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
</div>
<br><br>
<img class="braun" src="img/braun3.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My Portfolio</title>
</head>
<body>
<div id="header">
<header>Mr. Philip Braun</header>
<img src="img/greeny.png">
<h1 class="hvr-float-shadow" style="text-align:center">About Me</h1>
<br>
<p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
</div>
<br><br>
<img class="braun" src="img/braun3.jpg">
</body>
</html>
Using CSS, you can apply the text-align property to set the element to center through the inline method within the snippet I have provided or, through internal or external styling referring to either the class or element.
h1{
text-align:center;
}
h1{
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My Portfolio</title>
</head>
<body>
<div id="header">
<header>Mr. Philip Braun</header>
<img src="img/greeny.png">
<h1 class="hvr-float-shadow">About Me</h1>
<br>
<p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
</div>
<br><br>
<img class="braun" src="img/braun3.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My Portfolio</title>
</head>
<body>
<div id="header">
<header>Mr. Philip Braun</header>
<img src="img/greeny.png">
<center>
<h1 class="hvr-float-shadow">About Me</h1>
</center>
<br>
<p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
</div>
<br><br>
<img class="braun" src="img/braun3.jpg">
</body>
</html>
This is the easiest way out to center the text.
So I am new to html coding and am trying to just make a simple portfolio and I want it to look nice so I have been looking at tutorial websites online however I did something weird and I don't know what I did. If anyone could help me with this issue that would be great.
Screenshot:
The Code Is Below (https://pastebin.com/GDCW2jsu):
<!DOCTYPE html>
<html>
<head>
<title>Ryan Cole Home</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1><a href="index.html"><border>Ryan Cole Home</border>
</a></h1>
<nav>
About Me
Portfolio
Contact Me
</nav>
</header>
<!-- Welcome To The Homepage -->
<footer>
<p>Welcome To The Homepage</p>
</footer>
</body>
</html>
<!-- Scripts -->
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js">
</script><![endif]-->
<script src="assets/js/main.js"></script>
</div>
</body>
</html>
Does anyone know, why when I try previewing my site, it doesn't show anything? Something wrong with my code?
When I check the source code, it won't tell me accurately enough what the problem is?
<head>
<title>My Coursera Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js" />
</head>
<body>
Home
About
Contact
<hr>
<div class="container">
<h1 id="title" onclick="alert('Hello');">This is a heading or title</h1>
<div="row">
<div class="col-md-6 thin_border">
some content for panel 1
</div>
<div class="col-md-6 thin_border">
some content for panel 2
</div>
</div>
</div>
</body>
Try to close explicitly the script tag
<script src="script.js" />
Should be
<script src="script.js" ></script>
If you need more explanations you can check this question.
You are missing the <HTML> and the <!DOCTYPE> tags. Your code code should be like this:
<!DOCTYPE html>
<html>
<head>
<title>My Coursera Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js" />
</head>
<body>
Home
About
Contact
<hr>
<div class="container">
<h1 id="title" onclick="alert('Hello');">This is a heading or title</h1>
<div class="row">
<div class="col-md-6 thin_border">
some content for panel 1
</div>
<div class="col-md-6 thin_border">
some content for panel 2
</div>
</div>
</div>
</body>
</html>
Note that you also have a wrong div tag <div="row">, which I'm assuming might be the div class property that's why I set it as class attribute on the above example.
It is also recommended to add the type attribute and explicit closing tag on the JavacScript import, like this:
<script type="text/javascript" src="script.js"></script>
My site http://willemwijnans.github.com is showing a bug. For some reason the static pages do not work anymore. From the Menu there are 3 options:
About
Services
Contact
If I press about, a download bar pops up. It used to show my about.html page, which is a static page in my ghost editor.
If I press services, it for some reason links to my local instance of the ghost blog (where I create it from)
Contact can be ignored, I did not build that yet.
My code is in my github repository, which can be found here: https://github.com/WillemWijnans/willemwijnans.github.io
Am I overlooking something really obvious? Thanks.
I think its something wrong in the default.hbs page, since this page is rendered from there:
<!DOCTYPE html>
<html>
<head>
{{! Document Settings }}
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
{{! Page Meta }}
<title>{{meta_title}}</title>
<meta name="description" content="{{meta_description}}" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
{{! Link to your favicon }}
<link rel="shortcut icon" href="/assets/images/favicon.ico" />
{{! Styles'n'Scripts }}
<link rel="stylesheet" type="text/css" href="/assets/css/screen.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700|Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800|Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/assets/font-awesome/css/font-awesome.min.css">
{{! Ghost outputs important style and meta data with this tag }}
{{ghost_head}}
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56927501-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class="{{body_class}}">
{{! Everything else gets inserted here }}
{{{body}}}
<footer class="site-footer">
<a class="go-top" href="#top" title="Back to Top">
<span><i class="fa fa-arrow-circle-up fa-4x"></i></span>
</a>
<div class="inner">
<section class="poweredby">{{#blog.title}} © All Rights Reserved, 2014
</section>
</div>
</footer>
{{! Ghost outputs important scripts and data with this tag }}
{{ghost_foot}}
{{! The main JavaScript file for Phantom }}
<script type="text/javascript" src="/assets/js/icons.js"></script>
<script type="text/javascript" src="/assets/js/index.js"></script>
<script type="text/javascript" src="/assets/js/jquery.fitvids.js"></script>
This is the page.hbs file:
{{!< default}}
{{! The comment above "< default" means - insert everything in this file into
the {body} of the default.hbs template, which contains our header/footer. }}
{{! The main content area on the homepage }}
<main class="content" role="main">
<!-- Page Sidebar -->
{{! The tag below includes the page sidebar - partials/page-sidebar.hbs }}
{{> "page-sidebar"}}
<!-- Page Content -->
{{! Each post will be output using this markup }}
<div class='post-holder'>
{{! Everything inside the #post tags pulls data from the post }}
<article class="{{post_class}}">
{{#post}}
<h1 class="page-title">{{{title}}}</h1>
<section class="post-content">
{{content}}
</section>
{{/post}}
</article>
</div>
Fixed it, the CSS selector was not right