Gargova a écrit : ↑lun. 19 déc. 2016 00:47 Bonjour,j'ai essayé des tas de choses avec les breakpoints mais je n'arrive pas à faire que ça fonctionne. .. je vois exactement le même site depuis mon portable que depuis mon ordi...
J'ai essayé d'utiliser des CMS pour la creation de mon site web et je reviens toujours à l'idée de faire un truc simple codé à la maison et hebergé gratuitement (chez free). Les templates gratuits des CMS ne me conviennent pas et j'ai plus de temps que d'argent... mais il arrive que je réalise mon manque de compétence
Bref, j'ai commencé un site qui me plait mais je bloque sur deux aspects donc je cherche des personnes généreuse et talentueuses qui pourraient me dépanner. J'ai bien cherché sur internet mais je me rend bien compte que je suis une quiche question programmation... ça fait des jours que je tourne en rond.
Showbox jiofi.local.html tplinklogin
j'ai deux requêtes :
je voudrais faire en sorte que ma barre de navigation soit 'responsive', elle s'affiche en tout petit sur mobile pour l'instant. La solution où elle se transforme en icone hamburger cliquable a l'air bien... mais je bloque complètement.
et pour ma galerie photo, j'aime bien le côté décalé zig zag que j'ai obtenu pour l'instant mais je voudrais pouvoir cliquer sur les miniatures et qu'elle s'ouvrent en modal où on la verrait en pleine taille avec une petite description.
à votre bon cœur
à tester .
Hidden Content (for members only)Où, as-tu trouvé du contenu caché ?
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ton site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="design.css" media="screen" >
<link rel="stylesheet" type="text/css" href="responsive.css" media="screen" >
<!-- 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"> -->
</head>
<body>
<header class="header">
<a href="#" class="header__icon"></a>
<a href="#" class="header__icon"></a>
<nav class="navb">
<ul class="titre">
<li> <a href="#" class="header__logo">GARKETCH</a><li>
<li><a class="titre" href="#">Home</a></li>
<li><a class="titre" href="#">About</a></li>
<li><a class="titre" href="#">Gallery</a></li>
<li><a class="titre" href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div class="site-content">
<div class="container">
<h2>GARKETCH</h2>
<p>
"Garketch finds interest in nature's spontaneous patterns and forms made by biological and physical phenomenon. Photography and experiments with life and physics are at the core of his approach. As a biological being, Garketch, is sometimes amazed to see the spontaneity of his art and how forms emerge from raw materials in his hands; he paints, makes sculptures, wondering about the forces driving his inspiration. Behind the visual aspects Garketch thinks about life, death, science, people, beliefs, mysticism, vanity... and reality (if there’s a reality)".
Garketch, visual artist
</p>
<p>
"Garketch should be considered a living god, creating and destroying worlds and universes as he exercise his art."
Gerard De Fitzlhped, professor at Centre de Sociologie de l’Innovation Artistique
</p>
<p>
"Garketch transcends raw material through a modern vision of first art. His sculptures are impregnated with a blend of magic and innocence, insuflating a blow of youth as a challenge to death."
</p>
<p>
Josino Dasilva, curator at Musée de l'Humanité
</p>
<p>
"Garketch shows us the underlying connexions in the universe pattern by using spontaneous natural forms that seem to occur in a not so natural way."
Gertrud Altenberg, director of the Centre pour l'amour inconditionnel nu devant Garketch
</p>
</div>
<footer>
<p>
© 2016 Garketch
</p>
</footer>
</div>
</body></html>/*------*\
BASE
\*-----*/
.html, body {
font-family: Roboto;
font-size: 16px;
line-height: 1.4;
height: 100%;
background-color: #e5ece7;
margin: 0;
padding: 0;
}
a { text-decoration: none; color: inherit;}
ul {
list-style: none; /* Remove list bullets */
}
.container{ margin: 0 30px; overflow: hidden;}
.site-content { padding-top: 66px; }
/*------*\
Header
\*-----*/
.header{
position: fixed;
left: 0;
right: 0;
height: 66px;
width: 100%;
line-height: 66px;
color: #ffffff;
float: left;
background-color: #2e7d32;
}
.navb ul li a{
font-weight: bold;
padding: 0 25px;
float: left;
}
/*------*\
MENU
\*-----*/
.navb ul li a{
float: left;
padding: 0 15px;
}
a:hover{ color: #c6ff00;}
@media only screen and (max-width: 460px)
{
.header {
position: static;
}
.header__icon{
position: relative;
display: block;
width: 50px;
height: 39px;
cursor: pointer;
}
.navb {
position: absolute;
left: 0;
top: 0;
width: 150px;
background-color: #428a46;
}
navb titre {
display: block;
height: 40px;
text-align: center;
line-height: 40px;
boder-bottom: 2px solid white;
}
menu navb ul li a {
transform: translateX(-260px);
}
}
petite remarque en passant : tu spécifies “navbar navbar-inverse ul li a{ font-color: red;}” mais les éléments de la navbar ne s’affichent pas en rouge… c'est une histoire de priorité par rapport aux règles internes de la navbar de bootstrap ou quoi ?Oui, Je l'avais oublier celle-la. enfin tu as cette video et celle plus haut pour avoir un aperçus. aussi faut pas oublier le
.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ton site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="design.css" media="screen" >
<link rel="stylesheet" type="text/css" href="responsive.css" media="screen" >
<!-- 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">
</head>
<body>
<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">BreakPoint</a>
<ul class="nav navbar-nav">
<li>
<a class="titre" href="#">Les titres de tes pages</a>
</li>
</ul>
</div>
</div>
<div class="container">
<h2>Hello World</h2>
</div>
</body>
</html>html body {
padding-top: -60px; /* 60px to make the container go all the way to the bottom of the topbar */
margin: 0px;
width: 100%;
background-color: lightblue;
font-size: 20px;
}
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@font-face {
font-family: Roboto Condensed;
src: url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
}
navbar navbar-inverse ul li a{
font-color: red;
}
.container{
text-align: center;
}
.container h2{
font-size: 80px;
font-family: 'Roboto Condensed', sans-serif;
font: italic bold;
color: purple;
}@media screen and (max-width: 700px)
{
/* Rédigez vos propriétés CSS ici */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
html body {
padding-top: -0px; /* 60px to make the container go all the way to the bottom of the topbar */
margin: 0px;
width: 100%;
background-color: lightgreen;
}
@font-face {
font-family: Open+Sans;
src: url(https://fonts.googleapis.com/css?family=Open+Sans);
}
.navbar-brand{
display: none;
}
.titre {
font-family: 'Open Sans';
text-align: center;
font-weight: light;
font-size: 20px;
}
.container h2{
font-family: 'Open Sans', sans-serif;
font-size: 22px;
color: red;
}
h2:hover{ color: #ffffff;}
}
FLTL_BYEldredRodriguez
The headline of an ad is perhaps its most critic[…]
FLTL_BYsofselling
Bonjour à tous, Je possede une config pc […]
FLTL_BYarrot
je passe par un routeur intermediare TENDA entre f[…]
FLTL_BYBunO