0
Bonjour Je suis en train d'essayer de développer une disposition en grille alternée sur deux colonnes avec bootstrap, où il y aurait une image à gauche de l'écran, puis inverser la page web jusqu'à l'utilisateur final atteint le pied de page.Mise en place d'un bootstrap à 2 colonnes
Je pensais atteindre cet objectif en utilisant l'ordre des colonnes div et en utilisant les flotteurs, cela a fonctionné pour la première rangée, mais cela n'a pas aidé au développement de la rangée secondaire. Je ne sais pas si ce sont les chars qui le mettent hors d'état de nuire, je dois littéralement beaucoup dans mon code en général. Quelqu'un peut-il passer en revue pour moi s'il vous plaît? Les divs vierges sont aussi l'image.
/* CSS Document */
/* FONT FAMILY */
body{
\t
\t font-family: 'Montserrat', sans-serif;
}
p {
\t
\t font-family: 'Montserrat', Gotham, Helvetica Neue, Helvetica, Arial, "sans-serif";
\t font-weight: 200;
\t letter-spacing: 0.65px;
\t line-height: 25px;
\t text-align: center;
\t color: white;
}
.lead {
\t text-transform: uppercase;
}
h2 {
\t margin-bottom: 1em;
\t font-weight: 500;
\t letter-spacing: 1.275px;
\t font-size: 30px;
\t color: #cf6766;
\t
}
h3 {
\t margin-bottom: 1em;
\t font-weight: 500;
\t letter-spacing: 0.1em;
\t font-size: 21px;
\t color: #cf6766;
\t
}
/**************** NAVIGATION STYLING ****************/
.navbar,.navbar-default {
\t
\t background-color: #30415d;
\t padding: 20px;
\t color: white;
\t margin: 0 auto;
\t
}
.navbar.navbar-default li a {
\t color: white;
\t text-align: center;
\t margin: 0 auto;
\t
}
.navbar.navbar-default li a:hover{
\t background-color: white;
\t color: #031424;
\t font-weight: bold;
}
.navbar.navbar-default li {
\t font-weight: 300;
\t letter-spacing: 0.10em;
\t text-transform: uppercase;
\t font-size: 12px;
}
.navbar-brand img {
\t width: 85%;
\t }
.navbar-brand a {
\t
\t padding: 20px;
\t margin-top: -40px;
}
a.navbar-brand {
\t margin-top: -20px;
\t padding-right: 20px;
\t padding-left: 20px;
\t width: 85%;
\t
}
.navbar-default {
\t border: none;
}
/*img.wrap {
\t float:right;
}*/
/**************HOME PAGE **********/
/* blockquote {
\t
\t background-color: #8eaebd;
\t color: white;
\t padding: 50px;
\t margin-top: -50px;
\t width: 100%;
\t letter-spacing: 1.5;
\t line-height: 1.5;
\t text-align: center justify;
\t font-size: 36px;
\t margin-bottom: 50px;
\t font-style: italic;
\t font-weight: 400;
\t
} */
.quote {
\t font-size: 16px;
\t text-align: right;
\t font-weight: 300;
\t letter-spacing: 2px;
}
.jumbotron {
\t background:linear-gradient(#cf6766, transparent 100%),
\t
\t \t url(../img/DSC00154.jpg) no-repeat center;
\t background-size: cover;
\t height: 768px;
\t margin-top: 0px;
\t padding-top: 0px;
\t display: table;
\t width: 100%;
\t
}
.jumbotron h1 {
\t color: white;
\t text-align: center;
\t
\t
}
#jumbotron-inner {
\t display: table-cell;
\t vertical-align: middle;
\t
}
#jumbotron-inner p {
\t text-align: center;
}
.senior {
\t
\t background-color: #30415d;
\t width: 50%;
\t height: 500px;
\t color:white;
\t padding: 50px;
\t
\t
\t letter-spacing: 1.5;
\t line-height: 1.5;
\t text-align: center justify;
\t font-size: 16px;
\t margin-bottom: 50px;
\t float: left;
}
.get-involved {
\t background-color: #8eaebd;
\t color:white;
\t padding: 50px;
\t margin-top: -50px;
\t width: 100%;
\t letter-spacing: 1.5;
\t line-height: 1.5;
\t text-align: center justify;
\t font-size: 16px;
\t margin-bottom: 50px;
\t float: right;
}
.get-inolved-img {
\t
\t background-image: url(../img/grandmother-child.jpg);
\t background-position: center;
\t background-size: cover;
\t background-repeat: no-repeat;
\t width: 100%;
\t height: 500px;
\t float: left;
}
.newMentor{
\t background: url(../img/grandparents.jpg);
\t background-position: center;
\t background-size: cover;
\t background-repeat: no-repeat;
\t max-width:1000px 100%;
\t height:500px;
\t float: right;
}
.dontations {
\t background-color: #30415d;
\t color:white;
\t padding: 50px;
\t margin-top: -50px;
\t width: 100%;
\t letter-spacing: 1.5;
\t line-height: 1.5;
\t text-align: center justify;
\t font-size: 16px;
\t margin-bottom: 50px;
}
.btn-lg {
\t
\t background-color: #cf6766;
}
.btn-lg {
\t
\t color: white;
\t font-weight:200;
}
.btn-lg a:hover {
\t color: #8eaebd;
\t
}
/**************about PAGE **********/
#williams {
\t width: 40%;
\t height: 50%;
\t margin-right: 25px;
\t margin-bottom: 5px;
}
#goals {
\t
\t background-color: pink;
\t padding: 20px;
}
#youth {
\t background-image: url(../img/youth-2.jpg);
\t background-repeat:no-repeat;
\t background-size: cover;
\t background-position: center;
\t width: 100%;
\t height: 1000px;
}
#mentor {
background-image: url(../img/youth-1.jpg);
width: 100%;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: black;
}
#mentor h1 {
color: rgba(0, 44, 44, 1);
}
#textarea {
display: block;
}
textarea {
display: block;
}
#community {
background-image: url(../img/youth-3.jpg);
width: 100%;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: black;
}
/***************************** FOOTER *****************************/
.copy {
\t color: #cf6766;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Mentoring - 50- Home </title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="https://www.newmentoring.com"><img src="img/logo.png" class="img-responsive"></a></div>
\t \t \t <!-- Collect the nav links, forms, and other content for toggling -->
\t \t \t <div class="collapse navbar-collapse" id="defaultNavbar1">
\t \t \t <ul class="nav navbar-nav pull-right">
\t \t \t <li class="active"><a href="index.html">Home<span class="sr-only">(current)</span></a></li>
\t \t \t <li><a href="about.html"> About</a></li>
\t \t \t <li><a href="saving-youth.html">Saving the Youth</a></li>
\t \t \t \t <li><a href="mentoring.html"> Mentoring Tips</a></li>
\t \t \t \t \t <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" onClick="location.href='community.html'">Community <span class="caret"></span></a>
\t \t \t \t \t <!-- DropDown Menu Here -->
\t \t \t \t \t <ul class="dropdown-menu" role="menu">
\t \t \t \t \t \t <li><a href="stories.html"> Stories of Wisdom</a></li>
\t \t \t \t \t \t <li><a href="guestbook.html"> Guest Book</a></li>
\t \t \t \t \t \t <li><a href="donate.html">Donate</a></li>
\t \t \t \t \t </ul><!--community dropdown menu-->
\t \t \t \t \t </li><!-- end of comunnity dropdown li & ul -->
\t \t \t <li><a href="contact.html"> Contact</a></li>
\t \t \t </ul> <!-- end of navbar left -->
\t \t </div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav> <!-- END OF FULL NAVIGATION BAR -->
<div class="jumbotron">
\t <div class="container" id="jumbotron-inner">
\t \t <h1>New Mentoring.com</h1>
\t \t \t <p class="lead">Where our youth gain wisdom and leadership.</p>
\t \t \t \t <p><a class="btn btn-primary btn-lg" href="#newSenior" role="button">Learn more</a></p>
\t </div><!-- end of container & jumbtron inner -->
</div><!--jumbotron-->
<!-- BLOCKQUOTE-->
<blockquote>
\t <p>"Let your age make the difference in your community."</p>
\t
\t \t <span class="pull-right quote">- Delece Williams</span>
</blockquote>
<div class="container-fluid">
<div class="row">
\t <div class="col-sm-6 senior">
\t \t <h2>What is a New Mentoring?</h2>
\t <p>The Middle Aged Generation that's considered to be between 30 to 80 whose living healthier, while inspiring youth to engage in healthier life-style choices and those helping to bridge the gap between the traditional values of seniors and the technical appetites of today's youth with wisdom keys. </p>
\t </div>
\t <div class="col-sm-6 newMentor">
\t </div><!-- img div-->
\t </div><!--row-->
<div class="row">
<div class="col-sm-6 get-involved">
\t <h2>How to Get Involved?</h2>
<p>We would love for you to get involved and its simple. Just be willing to share your time and /or stories, experience, wisdom and expertise to a young person to help them make better and healthier lifestyle choices for the success of a better path throughout life. You can do that by joining our online conversations or hosting a <a href="community.html">community</a> forum near you.</p>
\t </div>
\t
\t <div class="col-sm-6 get-inolved-img">
\t \t
\t </div><!-- background img-->
</div><!--row-->
\t <!--col-md-12->
</div>
<hr>
<div class="row">
<div class="text-justify col-sm-6">
<h3>Stories of Wisdom</h3>
Share words of wisdom on how you break barriers to get young people to listen. Connect with our online family and help us to inspire others<a href="storiesofwisdom.html"> here.</a> </div>
<div class="text-justify col-sm-6">
<h3>Guest Book</h3>
Thank you for visiting I Am The New 50 Campaign. Stop by and sign our guest book and be a part of our community. Tell us how we’ve inspired you to help youth <a href="guestbook.html"> here.</a> </div>
</div><!-- end of row div-->
<div class="col-md-6 dontations">
<h2>Dontations for Kidz Korna</h2>
\t \t <p>Women &s; Men T-Shirts are Available for Campaign Fundraising Initiatives</p>
\t \t <div class="row">
\t \t
\t \t \t <div class="col-md-3">
\t \t \t \t <a href="#" class="thumbnail">
\t \t \t \t \t <img src="..." alt="...">
\t \t \t \t </a>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="col-md-3">
\t \t \t \t <a href="#" class="thumbnail">
\t \t \t \t \t <img src="..." alt="...">
\t \t \t \t </a>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="col-md-3">
\t \t \t \t <a href="#" class="thumbnail">
\t \t \t \t \t <img src="..." alt="...">
\t \t \t \t </a>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t \t <div class="col-md-3">
\t \t \t \t <a href="#" class="thumbnail">
\t \t \t \t \t <img src="..." alt="...">
\t \t \t \t </a>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <p>Price:$20.00 <br>
\t \t \t \t \t <br>
\t \t \t <a class="btn btn-lg" href="https://kidzkorna.com/" role="button">Click here to order now</a> </p>
\t \t \t \t </div>
\t </div>
\t </div>
</div>
<footer>
<div class="row">
<div class="text-center col-md-6 col-md-offset-3">
<p class="copy">Copyright © 2017 · All Rights Reserved · <a href="http://newmentoring.com/" >New Mentoring</a> · Chicago, IL.</p>
</div>
</div>
\t </footer>
\t
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Avez-vous une idée de ce que vous voulez qu'il ressemble? –
Oui [link] (https://www.pinterest.com/pin/AfPZ5kvW5T3JaIBOpqZoPIDpl2iqB2LaPT6ISNaQtBCyhRQezp9JIKs/) –