0
Hallo Ich versuche, ein alternierendes zweispaltiges Grid-Layout mit Bootstrap zu entwickeln, wo es ein Bild auf der linken Bildschirmgröße geben würde, dann die Webseite bis zum Endbenutzer rückwärts laufen erreicht die Fußzeile.Einrichten eines zweispaltigen Grid-Bootstraps
Ich dachte, dies zu erreichen mit der div Zeile col Reihenfolge und mit den Floats gehen, hat es für die erste Zeile gearbeitet, aber wenn es um die sekundäre Zeile zu entwickeln ging es nicht geholfen. Ich weiß nicht, ob es die Floats sind, die es aus dem Gleichgewicht bringen, ich muss in meinem Code im Allgemeinen viel los sein. Kann mir bitte jemand eine Rezension geben? Die leeren divs sind auch die Bilder.
/* 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>
Haben Sie ein Bild von dem, was Sie wollen, dass es aussehen? –
Ja [link] (https://www.pinterest.com/pin/AfPZ5kvW5T3JaIBOpqZoPIDpl2iqB2LaPT6ISNaQtBCyhRQezp9JIKs/) –