Ciao a tutti,
premetto che non sono un'esperto in programmazione e per questo ho bisogno del vostro aiuto.
Mi trovo in seria difficoltà per quanto riguarda l'impostazione grafica della pagina web che vorrei creare.
Mi spiego:
Questo è il risultato che vorrei ottenere:
http://imageshack.com/a/img924/9823/sD8Pht.png
(Pagina fatta da me con Wix... ma non mi piace stare sotto di loro, preferisco arrangiarmi)
Questo è quello che sono riuscito a fare al momento:
http://imagizer.imageshack.us/a/img922/5158/6SZVzF.png
Tralasciando il logo differente e la navbar... Vorrei che lo sfondo cambiasse come nella prima immagine (a strisce) e che l'immagine ed il riquadro (ha un'animazione di rimbalzo, almeno quella funziona) con differente sfondo siano centrati ed affiancati nella pagina e che resti così su ogni schermo... invece basta fare un resize della pagina e tutto cambia :'(
Probabilmente mi sono spiegato male ma le foto rendono l'idea
Qui i codici: (evidenzio in grassetto le parti che secondo me contengono l'orrore)
Index.html
style.css
Scusatemi la rottura
Tommaso
premetto che non sono un'esperto in programmazione e per questo ho bisogno del vostro aiuto.
Mi trovo in seria difficoltà per quanto riguarda l'impostazione grafica della pagina web che vorrei creare.
Mi spiego:
Questo è il risultato che vorrei ottenere:
http://imageshack.com/a/img924/9823/sD8Pht.png
(Pagina fatta da me con Wix... ma non mi piace stare sotto di loro, preferisco arrangiarmi)
Questo è quello che sono riuscito a fare al momento:
http://imagizer.imageshack.us/a/img922/5158/6SZVzF.png
Tralasciando il logo differente e la navbar... Vorrei che lo sfondo cambiasse come nella prima immagine (a strisce) e che l'immagine ed il riquadro (ha un'animazione di rimbalzo, almeno quella funziona) con differente sfondo siano centrati ed affiancati nella pagina e che resti così su ogni schermo... invece basta fare un resize della pagina e tutto cambia :'(
Probabilmente mi sono spiegato male ma le foto rendono l'idea
Qui i codici: (evidenzio in grassetto le parti che secondo me contengono l'orrore)
Index.html
Codice:
<DOCTYPE html>
<html>
<head>
<title> Venetianquality - Bindery in Venice </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- FOGLIO DI STILE CSS MIO PERSONALIZZATO -->
<link rel="stylesheet" href="style.css">
<!-- FOGLIO CSS PER ANIMAZIONI -->
<link rel="stylesheet" href="animazione/animate.css">
<!-- FOGLI JAVASCRIPT PER BOOTSTRAP.........AL MOMENTO NON SERVONO -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<!-- INIZIO BARRA DI NAVIGAZIONE PAGINE -->
<ul class="navbar col-12">
<li class="linklogo"><a href="index.html"><img src="logovepl.png" width="240" height="auto" alt="venetianquality"> </a></li> <li class="link"><a class="active" href="index.html"> HOME </a></li>
<li class="link"><a href="#news"> PRODUCTS </a></li>
<li class="link"><a href="#contact"> CONTACTS </a></li>
<li class="link"><a href="#about"> ABOUT </a></li>
</ul>
<!-- FINE BARRA DI NAVIGAZIONE PAGINE -->
<div class="row">
<div class="sectionsx col-6">
<img class="imghome" src="pvhome.jpg">
</div>
</div>
<div class="col-6 box bounceIN sectiondx">
<h2 > RENFINEMENT </h2>
<p class="italic"> The Finest Materials </p>
<button> Find Out </button>
</div>
</div>
<!-- jQuery e plugin JavaScript SI CARICANO DA COMPUTER COME I CSS PERSONALIZZATI -->
<script src="js/jquery.js"></script>
<script src="js/jack-in-the-box.js"></script>
<script>
$(function() {
$('body').jackInTheBox();
});
</script>
</body>
</html>style.css
Codice:
* {
box-sizing: border-box;
}
/* INIZIO COLONNE PER LAYOUT RESPONSIVE */
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 0px;
}
.navbar {
padding: 0px;
background-color: #242323;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/* FINE COLONNE PER LAYOUT RESPONSIVE */
body {
background-color: #3D2C2A;
}
.sectionsx {
background-color: #3D2C2A;
float: left;
position: relative;
left: 20%;
}
.sectiondx {
background-color: #B0937F;
float: left;
padding: 100px;
position: relative;
font-family: spinnaker;
}
h2 {
text-align: center;
}
#logo {
font-size: 1.3em;
font-family: Raleway;
color: #D9924C;
margin-top: 0%;
margin-left: 1%;
padding: 0px;
}
@font-face {
font-family: spinnaker;
src: url(spinnaker.ttf);
}
@font-face {
font-family: raleway;
src: url(raleway.ttf);
}
@font-face {
font-family: Snell Roundhand;
src: url(snellroundhand.ttf);
}
.italic {
font-size: 1.3em;
font-family: Snell Roundhand;
text-align: center;
color: #472C0C;
}
#txthome {
float: left;
font-size: 2em;
font-family: Snell Roundhand;
color: #472C0C;
}
.imghome {
float: left;
width: 501px;
height: 332px;
}
button {
text-align: center;
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
}
li {
float: left;
margin-right: 2%;
padding: 0px;
}
li a {
display: block;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}
/* I N I Z I O C O L O R E D E I L I N K AL P A S S A G G I O O CLICK */
.link {
font-size: 1.2em;
font-family: spinnaker;
padding: 30px;
}
.linklogo {
font-size: 0.8em;
font-family: spinnaker;
padding: 0px;
}
a:link {
color: #D9924C;
background-color: transparent;
text-decoration: none;
transition-duration: 0.3s;
}
a:visited {
color: #D9924C;
background-color: transparent;
text-decoration: none;
transition-duration: 0.3s;
}
a:hover {
color: #3D2C2A;
background-color: transparent;
text-decoration: none;
transition-duration: 0.3s;
}
a:active {
color: #734416;
background-color: transparent;
text-decoration: none;
transition-duration: 0.3s;
}
/* F I N E C O L O R E D E I L I N K AL P A S S A G G I O O CLICK */Scusatemi la rottura
Tommaso
