Site personnaliser

beardweiserentraide · Membre · octobre 17, 2020 at 10:21
Copier le lien

Ajouter le thème aux favoris
Puis-je insérer mes codes HTML et CSS afin d’avoir exactement le site que je souhaite ??
Autodidacte, j’ai créé mon site provisoire sur Sublime texte .
Dans l’attente de votre retour,
MERCI !
airodyssey · Modérateur · octobre 18, 2020 at 2:25
Copier le lien
Bonjour. Votre message a été envoyé automatiquement aux forums communautaires francophones WordPress.com, qui sont tenus par des utilisateurs comme vous.

Tout d’abord, quelle est l’adresse du site concerné SVP?

N’oubliez pas que vous vous trouvez actuellement dans les forums pour sites hébergés par WordPress.com. Si votre site fonctionne sous WordPress, mais est hébergé ailleurs que sur WordPress.com, merci de lire attentivement cette annonce importante :
https://wordpress.com/fr/forums/topic/important-ce-forum-est-reserve-aux-sites-heberges-par-wordpresscom/
beardweiserentraide · Membre · octobre 18, 2020 at 10:45
Copier le lien
Bonjour, merci pour votre réponse !
Mon site n’est pas encore hébergé, je compte justement l’héberger sous WordPress !
J’ai simplement créé le code via Sublime Texte pour le moment.
Dans l’attente de votre réponse,
MERCI.
airodyssey · Modérateur · octobre 19, 2020 at 2:19
Copier le lien
Nous avons besoin de voir le code que vous tentiez d’insérez. Copiez le dans votre réponse svp.
Pour les besoins de ces forums seulement, insérez un ` accent grave (pas d’apostrophe) au début du code, et un autre accent grave à la fin du code, faute de quoi nous ne pourrons pas voir le code.

beardweiserentraide · Membre · octobre 19, 2020 at 7:18

Bonjour, il me reste 2 petites chose à régler mais je bloque…
Placer le module de carte Google au centre et non sur la gauche de ma page
Laisser mon formulaire là ou il est mais le rendre visible seulement lorsque j’appuie sur le bouton « une question? ». Merci pour votre aide !!

 <!DOCTYPE html>
<html>
<head>
	<title>BEARD WEISER,ENTRAIDE</title>
	<style>
#scrollUp
{
position: fixed;
bottom : 10px;
right: -100px;
opacity: 0.5;
}
</style>
 
http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
 
<script>
            jQuery(function(){
                $(function () {
                    $(window).scroll(function () {
                        if ($(this).scrollTop() > 200 ) { 
                            $('#scrollUp').css('right','10px');
                        } else { 
                            $('#scrollUp').removeAttr( 'style' );
                        }
 
                    });
                });
            });
</script>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Style.Test.css">
</style>
<head>
  <style>
    body { background-color: #191919; }
  </style>
</head>
<body>
	<img src="img/bandeau.jpg" style="position:absolute;z-index:0">
	<h1 style="color: white; text-align: baseline; font-size: 60px; position:absolute;z-index:1">BEARD WEISER, ENTRAIDE AUX BARBUS DÉFAVORISÉS</h1>
	<br><br><br><br><br><br><br><br><br>

	<ul id="nav"><!--
	--><li><a style="color: white;"href="#ACCEUIL">Accueil</a></li><!--
	--><li><a style="color: white;"href="#QUI">À propos de nous</a></li><!--
	--><li><a style="color: white;"href="#QUOI">Ce que nous faisons</a></li><!--
	--><li><a style="color: white;"href="#MAIN">Citation</a></li><!--
	--><li><a style="color: white;"href="#RUE">Contact</a></li></ul>

	<br><br><br><br><br><br>
	<div><img src="img/entraide.jpg"id="ACCEUIL" text-align: center;></div>
	<br><br><br><br><br><br>
	<h2 style="color: white; text-align: center; font-size: 50px">FAITES L'EXPÉRIENCE DE BEARD WEISER, ENTRAIDE AUX BARBUS DÉFAVORISÉS</h2>
	<h3 style="color: white; text-align: center; font-size: 30px">Ensemble pour un futur meilleur</h3>
	<p style="color: white; text-align: center; font-size: 22px">Chez Beard Weiser, Entraide aux barbus défavorisés, nous aspirons au bien-être de tous les sans-abris. Pour ne plus voir la tristesse dans le regard de nos enfants, nos actions ont été pensées pour les aider à retrouver le gout de prendre soin d'eux, leurs redonner le sourire et aider à leurs réintégration. Découvrez tout sur ce que nous faisons et rejoignez-nous pour travailler ensemble à un monde plus solidaire.</p>
<br><br><br><br><br><br><br><br><br><br><br>
	<div style="color: white; text-align: center; background:#194056;"><img src="img/beard.jpg" id="QUI"></div>
	<br><br><br><br>
	<div style="color: white; text-align: center; background:black;"> 
<br><br>
		<h4 style="color: white; text-align: center; font-size: 70px"id="QUOI">NOUS AIDER</h4> 
		<p style="color: white; text-align: center; font-size: 22px">Beard Weiser, Entraide aux barbus défavorisés en fait plus grâce à nos initiatives. Nous menons à bien plusieurs projets afin d'améliorer la vie des autres, et nous sommes incroyablement fiers des progrès réalisés chaque jour. En savoir plus : qui sommes-nous, que faisons nous, qui aidons nous, et quelles sont nos actions ?</p>
		<br><br><br><br><br><br><br><br>
		<img src="img/aide.jpg"></div>
		<br><br>
	<div style="text-align: center; background:#191919;"><img src="img/main.jpg"id="MAIN"></div>
	<br><br><br>
	<SPAN style="position: absolute; top: 4800px; left: 483px;width: 103px; height: 61px"><a href=""onclick="formulaire:visibilite('form_create'); return false;" title="Une question ?" style="z-index: 1"><img src="img/formulaire.jpg"/></a>
</SPAN>
	<div style="text-align: center; background:#194056; z-index:0"><img src="img/rue.jpg"id="RUE"></div>
	

<form method="post" action="traitement.php">
   <div id="formulaire"style="visibility: visible; text-align: center; color: white">

<p>
       <label for="nom">Votre nom :</label>
       <input type="text" name="nom" id="nom" autofocus required  />

       <br/>
       <label for="prénom">Votre prénom :</label>
       <input type="text" name="prénom" id="prénom" />
       
       <br />
       <label for="email">Votre email :</label>
       <input type="email" name="email" id="email" required  />
       
       <br/>
          <textarea name="message" id="message" rows="10" cols="50" required />
       Bonjour, comment pouvons nous vous aider ? 
       </textarea>  

	   <input type="submit" id="formulaire" name="formulaire" value="Envoyer">
       </div>
   </p>
</form>
	<div id="wrapper-9cd199b9cc5410cd3b1ad21cab2e54d3">
		<div id="map-9cd199b9cc5410cd3b1ad21cab2e54d3"> </div><script>(function () {
        var setting = {"height":531,"width":1743,"zoom":12,"queryString":"115 Chemin de Lapoudge, Escoubès, France","place_id":"EikxMTUgQ2hlbWluIGRlIExhcG91ZGdlLCBFc2NvdWLDqHMsIEZyYW5jZSIwEi4KFAoSCa0VkJe7PlYNESRb8dsQr24oEHMqFAoSCWm0zdS7PlYNERif_JxDZDa3","satellite":false,"centerCoord":[43.416001195040856,-0.24336745000000048],"cid":"0xbb6f4c501b1965c","lang":"fr","cityUrl":"/france/pau-2673","cityAnchorText":"Carte de Pau, Sud de la France, France","id":"map-9cd199b9cc5410cd3b1ad21cab2e54d3","embed_id":"255163"};
        var d = document;
        var s = d.createElement('script');
        s.src = 'https://1map.com/js/script-for-user.js?embed_id=255163';
        s.async = true;
        s.onload = function (e) {
          window.OneMap.initMap(setting)
        };
        var to = d.getElementsByTagName('script')[0];
        to.parentNode.insertBefore(s, to);
      })();</script><a href="https://1map.com/fr/map-embed">1 Map</a></div>

  </div>
        </section>
        <footer>
            <div style="background:black; color: white; text-align: center;" class="conteneur">  
            <br><br> 
            <div class="logo_facebook"> <a href="https://www.facebook.com/BeardWeiserEntraide/?ref=page_internal" target="_blank"> <img src="img/logo_facebook.png"> </a><div class="logo_instagram"> <a href="https://www.instagram.com/beard_weiser_entraide/?hl=fr" target="_blank"> <img src="img/logo_instagram.png"> </a> </div><div class="logo_twitter"> <a href="https://twitter.com/BeardEntraide?lang=fr" target="_blank"> <img src="img/logo_twitter.png"> </a></div> 
            	<br><br>
                <div style="background: black; color: white; text-align: center;" ?php echo date(2020); ?> © BEARD WEISER, ENTRAIDE AUX BARBUS DÉFAVORISÉS - GONDA Amaury - Tous droits reservés.
                <br><br><br><br>
            </footer>
   <div id="scrollUp">
<a href="#top"><img src="img/to_top.png"/></a>
</div>
</body>
</html>

CSS :

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, nav, button, section, header, footer, title, wix-iframe {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}  

h1
{
	background-color: black;
	color: white;
	width:100%;
	text-decoration: Arial, Helvetica;
}	
 
h2
{
	color: white;
	width:100%;
	text-decoration: Arial, Helvetica;
	text-align: center; 
}
img
{
    display: block;
    margin-left: auto;
    margin-right: auto 
}
h3
{
	color: white;
	width:100%;
	text-decoration: Arial, Helvetica;
	text-align: center; 
}

h4{
	color: white;
	text-decoration: Arial, Helvetica, 72px;
	text-align: center; 
}
p
{
	
	width:100%;
	text-decoration: Arial, Helvetica;
	text-align: center; 
	color: white;
}

}
.conteneur
{
	background-color: black;
	color: white;
	width:100%;
	text-decoration: Arial, Helvetica;
	text-align: center;
}
.font_0 {
	font: normal normal normal 22px/1.41em helvetica-w01-roman,helvetica-w02-roman,helvetica-lt-w10-roman,sans-serif;
	color: #000000;
}
#nav {
	padding: 0; margin: 0;
	text-align: center; /* centrer le texte */
}
#nav li {
	display: inline;
	list-style: none;
}
#nav a {
	display:inline-block;
	margin: 0 30px;
}
#scrollUp
{
position: fixed;
bottom : 10px;
right: -100px;
opacity: 0.5;
}

.required
{
    background-color: red;
}
.function formulaire()
{
  if document.getElementById("formulaire").style.visibility: hidden; == 'block')
  {
       document.getElementById("formulaire").style.visibility: visible; = 'none';
  }
  else
  {
       document.getElementById("formulaire").style.visibility: hidden; = 'block';
  }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, nav, button, section, header, footer, title, wix-iframe {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}  

h1
{
	background-color: black;
	color: white;
	width:100%;
	text-decoration: Arial, Helvetica;
}	
 
h2
{
	color: white;
	width:100%;
	text-decoration: Arial, Helvetica;
	text-align: center; 
}
img
{
    display: block;
    margin-left: auto;
    margin-right: auto 
}
h3
{
	color: white;
	width:100%;
	text-decoration: Arial, Helvetica;
	text-align: center; 
}

h4{
	color: white;
	text-decoration: Arial, Helvetica, 72px;
	text-align: center; 
}
p
{
	
	width:100%;
	text-decoration: Arial, Helvetica;
	text-align: center; 
	color: white;
}

}
.conteneur
{
	background-color: black;
	color: white;
	width:100%;
	text-decoration: Arial, Helvetica;
	text-align: center;
}
.font_0 {
	font: normal normal normal 22px/1.41em helvetica-w01-roman,helvetica-w02-roman,helvetica-lt-w10-roman,sans-serif;
	color: #000000;
}
#nav {
	padding: 0; margin: 0;
	text-align: center; /* centrer le texte */
}
#nav li {
	display: inline;
	list-style: none;
}
#nav a {
	display:inline-block;
	margin: 0 30px;
}
#scrollUp
{
position: fixed;
bottom : 10px;
right: -100px;
opacity: 0.5;
}

.required
{
    background-color: red;
}
.function formulaire()
{
  if document.getElementById("formulaire").style.visibility: hidden; == 'block')
  {
       document.getElementById("formulaire").style.visibility: visible; = 'none';
  }
  else
  {
       document.getElementById("formulaire").style.visibility: hidden; = 'block';
  }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, nav, button, section, header, footer, title, wix-iframe {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}  

h1
{
	background-color: black;
	color: white;
	width:100%;
	text-decoration: Arial, Helvetica;
}	
 
h2
{
	color: white;
	width:100%;
	text-decoration: Arial, Helvetica;
	text-align: center; 
}
img
{
    display: block;
    margin-left: auto;
    margin-right: auto 
}
h3
{
	color: white;
	width:100%;
	text-decoration: Arial, Helvetica;
	text-align: center; 
}

h4{
	color: white;
	text-decoration: Arial, Helvetica, 72px;
	text-align: center; 
}
p
{
	
	width:100%;
	text-decoration: Arial, Helvetica;
	text-align: center; 
	color: white;
}

}
.conteneur
{
	background-color: black;
	color: white;
	width:100%;
	text-decoration: Arial, Helvetica;
	text-align: center;
}
.font_0 {
	font: normal normal normal 22px/1.41em helvetica-w01-roman,helvetica-w02-roman,helvetica-lt-w10-roman,sans-serif;
	color: #000000;
}
#nav {
	padding: 0; margin: 0;
	text-align: center; /* centrer le texte */
}
#nav li {
	display: inline;
	list-style: none;
}
#nav a {
	display:inline-block;
	margin: 0 30px;
}
#scrollUp
{
position: fixed;
bottom : 10px;
right: -100px;
opacity: 0.5;
}

.required
{
    background-color: red;
}
.function formulaire()
{
  if document.getElementById("formulaire").style.visibility: hidden; == 'block')
  {
       document.getElementById("formulaire").style.visibility: visible; = 'none';
  }
  else
  {
       document.getElementById("formulaire").style.visibility: hidden; = 'block';
  }

airodyssey · Modérateur · octobre 19, 2020 at 9:01
Copier le lien
WordPress.com ne permet pas de modifier le code HTML source, ni de créer le code HTML pour la page au complet. Vous pouvez uniquement créer des articles ou des pages à partir des thèmes (ou gabarits si vous préférez) qui vous sont proposés. Par ailleurs, WordPress.com ne permet pas toutes les balises HTML.
https://wordpress.com/support/code/

Si vous tenez à créer une page HTML de toutes pièces, vous devriez plutôt trouver un hébergeur qui accepte les fichiers en format .html et verser directement votre ou vos fichiers .html dedans.

Le sujet ‘Site personnaliser’ est fermé aux nouvelles réponses.

Site personnaliser

Vous n’avez pas trouvé ce dont vous avez besoin ?

Contactez-nous

Parcourir nos guides

Applications mobiles

Réseau social