Recently I started learning bootstrap and decided to build a simple page to sum up F1 races. Unfortunately, I've got something seriously mixed up because the image of the race driver and the text with the name of the driver who set the fastest lap goes beyond the div when you resize the browser. I would be grateful if someone pointed out my mistake because I have no idea how to fix it.
Here are the screenshots:
normal browser size
resized_1
resized_2
HTML:
<head>
<title>Najważniejsze wydarzenia F1</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../../css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="../../fontello/css/fontello.css" type="text/css"/>
<link rel="stylesheet" href="../../flag-icon-css-master/css/flag-icon.css" type="text/css"/>
<script src="../../raphael-2.1.4.min.js"></script>
<script src="../../justgage.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var g1 = new JustGage({
id: "g1",
relativeGaugeSize: true,
titleFontFamily: "Formula1",
titleFontColor: "black",
valueFontFamily: "Formula1",
value: 9,
min: 0,
max: 10,
decimals: 0,
gaugeWidthScale: 0.6,
customSectors: [{
color : "#13B5EA",
lo : 0,
hi : 2
},{
color : "#4BB97E",
lo : 2,
hi : 4
},{
color : "#FDCB2A",
lo : 4,
hi : 6
},{
color : "#F78934",
lo : 6,
hi : 8
},{
color : "#F25258",
lo : 8,
hi : 10
}]
});
});
</script>
</head>
<body>
<div class="row no-gutters">
<div class="col-sm-2">
<div class="next_prev">
<a href="#">
<i class="icon-left-open" id="navi" title="Poprzedni wyścig"></i>
</a>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<h1>Grand Prix Chin 2016</h1>
<p><i class="icon-clock"></i>08:00
<i class="icon-location"></i>Shanghai International Circuit
<i class="icon-calendar-empty"></i>17.04
<i class="icon-flag-checkered"></i>56 Okrążeń</p>
</div>
</div>
<div class="col-sm-2">
<div class="next_prev">
<a href="#" style="text-decoration: none; underline: none;">
<i class="icon-right-open" id="navi" title="Następny wyścig"></i>
</a>
</div>
</div>
</div>
<div class="col-sm-12 px-0">
<div class="podium">
<img src="../../img/podiums/3_Chiny.jpg" class="img-fluid">
</div>
</div>
<div class="row no-gutters">
<div class="col-sm-12 col-lg-4">
<div class="banner_sub">
<h1>Ocena wyścigu:</h1>
<div id="g1" class="gauge"></div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="banner_sub">
<h1>Kierowca wyścigu:</h1>
<p><img class="dotd img-responsive" src="../../img/dotd/2016/3_Chiny.jpg"></p>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="banner_sub">
<h1>Najszybsze okrążenie:</h1>
<p id="fastest_lap">1:39.824</p>
<p><img src="../../img/fast_lap_head/2016/3_Chiny.png" style="height: 50%;">
<h3>Nico <span style="font-weight:bold;">Hülkenberg</span></h3>Force India</p>
</div>
</div>
</div>
<div class="footer">
<p>2019</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="../../js/bootstrap.min.js"></script>
</body>
CSS:
#font-face{
font-family: Formula1;
src: url('Formula1-Regular.ttf');
}
#font-face{
font-family: Formula1;
font-weight: bold;
src: url('Formula1-Bold.ttf');
}
body{
font-family: Formula1, sans-serif;
color: black;
}
.header h1{
text-align: center;
font-weight: bold;
margin-top: 25px;
font-size: 50px;
}
.header p{
text-align: center;
margin-top: 20px;
margin-bottom: 25px;
}
#navi{
font-size: 60px;
}
.next_prev{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.icon-left-open:hover, .icon-right-open:hover{
color: #f3f3f3;
transition: all 0.2s ease-in-out;
}
.footer{
text-align: center;
}
.banner_sub{
text-align: center;
height: 380px;
padding: 10px;
border-bottom-right-radius: 25px;
border-right: solid 2px #d0d0d2;
border-bottom: solid 2px #d0d0d2;
margin-top: 10px;
}
.banner_sub:hover{
border-right: solid 2px #e10600;
border-bottom: solid 2px #e10600;
}
.gauge{
width: 100%;
height: 100%;
margin-top: -70px;
}
#fastest_lap{
color: purple;
font-size: 40px;
margin-bottom: 0;
font-weight: bold;
}
.dotd{
border-radius: 20px;
margin-top: 35px;
width: 60%;
}
#font-face{
font-family: Formula1;
src: url('Formula1-Regular.ttf');
}
#font-face{
font-family: Formula1;
font-weight: bold;
src: url('Formula1-Bold.ttf');
}
body{
font-family: Formula1, sans-serif;
color: black;
}
.header h1{
text-align: center;
font-weight: bold;
margin-top: 25px;
font-size: 50px;
}
.header p{
text-align: center;
margin-top: 20px;
margin-bottom: 25px;
}
#navi{
font-size: 60px;
}
.next_prev{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.icon-left-open:hover, .icon-right-open:hover{
color: #f3f3f3;
transition: all 0.2s ease-in-out;
}
.footer{
text-align: center;
}
.banner_sub{
text-align: center;
height: 380px;
padding: 10px;
border-bottom-right-radius: 25px;
border-right: solid 2px #d0d0d2;
border-bottom: solid 2px #d0d0d2;
margin-top: 10px;
}
.banner_sub:hover{
border-right: solid 2px #e10600;
border-bottom: solid 2px #e10600;
}
.gauge{
width: 100%;
height: 100%;
margin-top: -70px;
}
#fastest_lap{
color: purple;
font-size: 40px;
margin-bottom: 0;
font-weight: bold;
}
.dotd{
border-radius: 20px;
margin-top: 35px;
width: 60%;
}
<head>
<title>Najważniejsze wydarzenia F1</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../../css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="../../fontello/css/fontello.css" type="text/css"/>
<link rel="stylesheet" href="../../flag-icon-css-master/css/flag-icon.css" type="text/css"/>
<script src="../../raphael-2.1.4.min.js"></script>
<script src="../../justgage.js"></script>
</head>
<body>
<div class="row no-gutters">
<div class="col-sm-2">
<div class="next_prev">
<a href="#">
<i class="icon-left-open" id="navi" title="Poprzedni wyścig"></i>
</a>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<h1>Grand Prix Chin 2016</h1>
<p><i class="icon-clock"></i>08:00
<i class="icon-location"></i>Shanghai International Circuit
<i class="icon-calendar-empty"></i>17.04
<i class="icon-flag-checkered"></i>56 Okrążeń</p>
</div>
</div>
<div class="col-sm-2">
<div class="next_prev">
<a href="#" style="text-decoration: none; underline: none;">
<i class="icon-right-open" id="navi" title="Następny wyścig"></i>
</a>
</div>
</div>
</div>
<div class="col-sm-12 px-0">
<div class="podium">
<img src="https://lh3.googleusercontent.com/-1FzuZdh0Ec8/Xy6JOVeLMzI/AAAAAAAAD5Q/qvuhsNEFGQ46HWItzqbe7alwRnKVkSZXgCK8BGAsYHg/s0/2020-08-08.png" class="img-fluid">
</div>
</div>
<div class="row no-gutters">
<div class="col-sm-12 col-lg-4">
<div class="banner_sub">
<h1>Ocena wyścigu:</h1>
<img src="https://lh3.googleusercontent.com/-8G2bsRRxhTU/Xy6CKatoxFI/AAAAAAAAD5E/eHIxj438C0oRwTZQ33qs0qQW2VIj09nVwCK8BGAsYHg/s0/2020-08-08.png" class="img-fluid">
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="banner_sub clearfix">
<h1>Kierowca wyścigu:</h1>
<p><img class="dotd img-responsive" src="https://lh3.googleusercontent.com/-WLMLKp68bNI/Xy6BYeXRAdI/AAAAAAAAD48/Ffl7HUCROhgQAZr9UnHaRHfm1Ls9HfnFgCK8BGAsYHg/s0/2020-08-08.png"></p>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="banner_sub clearfix">
<h1>Najszybsze okrążenie:</h1>
<p id="fastest_lap">1:39.824</p>
<p><img src="https://lh3.googleusercontent.com/-kAUGg3URGS4/Xy6BVTVSwLI/AAAAAAAAD44/KnjWX9p1kzoof-6ok7aPwyXywQMJon3OQCK8BGAsYHg/s0/2020-08-08.png" style="height: 50%;">
<h3>Nico <span style="font-weight:bold;">Hülkenberg</span></h3>Force India</p>
</div>
</div>
</div>
<div class="footer">
<p>2019</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="../../js/bootstrap.min.js"></script>
</body>
Related
I have made this site(http://koulick-project.surge.sh/)as a project but cannot make it fully responsive. How to make it responsive, so that it looks good on mobile/tablets. So far, I could make the headings and text responsive. But cannot make the circles for the clock responsive.
Here is my Html file-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Pragmatic Mates s.r.o. - http://pragmaticmates.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="demo/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="demo/css/coming_soon.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
<title>JWOC Coming Soon</title>
</head>
<body>
<div class="centerdiv">
<a href="https://www.facebook.com/jwoc2k20" target="_blank">
<i class="fa fa-facebook fa-3x"></i>
</a>
<a href="https://www.linkedin.com/company/jwoc/" target="_blank">
<i class="fa fa-linkedin fa-3x"></i>
</a>
</div>
<div class="section">
<div class="section">
<div id="particles-js">
<break>
<h1 style="color:white"><b>JWOC</b></h1>
<h1 style="color:white"><b> COMMENCING SOON</b></h1>
<hr>
</div>
</div>
</div>
<div class="countdown countdown-container container">
<div class="clock row">
<div class="clock-item clock-days countdown-time-value col-xs-3 col sm-3">
<div class="wrap">
<div class="inner">
<div id="canvas-days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-hours countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-minutes countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-seconds countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
</div><!-- /.clock -->
<hr>
</div><!-- /.countdown-wrapper -->
<!-- footer section -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="demo/js/kinetic.js"></script>
<script type="text/javascript" src="jquery.final-countdown.js"></script>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$('document').ready(function() {
'use strict';
$('.countdown').final_countdown({
'start': 2062139200,
'end': 2088461320,
'now': 2087461319
});
});
</script>
</body>
</html>
Here is my Css file-
*{
margin: 0;
padding: 0;
}
html, body {
background-repeat:no-repeat;
height: 100vh;
overflow:hidden;
}
html {
background-image: url('../img/open.jpeg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgba(44,62,80 , 0.6 );
background-image: url('../img/open1.jpg');
background-position: center;
background-repeat: repeat;
font-family: 'Raleway', 'Arial', sans-serif;
margin: 0;
padding: 0;
height: 100vh;
}
#particles-js
{
z-index: 99999;
height: 500%;
display: flex;
justify-content: center;
align-items: left;
}
.particles-js-canvas-el{
position: absolute;
width: 100%;
height: 100%;
z-index: 99999;
}
h1{
font-size: 70px;
letter-spacing: 15px;
text-align: center;
}
a{
height: 100px;
width: 100px;
border-radius: 50px;
text-align: center;
margin: 10px;
line-height: 110px;
}
a i{
transition: all 0.3s linear;
}
a:hover i{
transform: scale(1.4);
}
.fa-linkedin{
color: #0097e6;
}
.fa-facebook{
color: #3b5998;
}
/*
.countdown-container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
*/
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
#media only screen and (min-width: 393px) and (max-width: 767px) {
h1{
font-size: 40px;
letter-spacing: 10px;
}
.text {
font-size: 15px;
}
.text .val {
font-size: 15px;
}
.text .type-time {
font-size: 15px;
}
.clock-item .inner {
width: 150%;
}
}
Can anyone please help.
Try using a column break to split up the timer into multiple rows on smaller screen sizes.
https://getbootstrap.com/docs/4.0/layout/grid/#column-breaks
Tablet+
D H M S
Phone
D H
M S
I am trying to create a gallery using bootstrap, and I cant seem to keep all my images the same size both height and width wise.
How do I go about making all the images in the gallery the same size.
here is the jsfiddle- https://jsfiddle.net/j0z3sq5s/
Apologies for I am working on a localhost/localserver and the images cant be seen. however I have taken some screen shots.
enter image description here
enter image description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Michael Jordan Tribute Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="mj.css">
</head>
<body>
<div class="jumbotron">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Gallery</li>
<li>Quotes</li>
</ul>
</nav>
<h1>Gallery</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="niceMJ.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="jordanOne.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="jute.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="download.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="mike.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="asper.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="jordannew.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="Michael.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="dunk.jpeg" alt="">
</div>
</div>
</div>
</div>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</div>
</body>
</html>
here is the css
h1{
padding: 20px;
}
h2{
text-align: center;
font-size: 60px;
}
p {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 24px;
text-align: center;
font-style: italic;
}
.col-md-4{
padding-bottom: 20px;
}
.thumbnail img{
min-height: 300px;
min-width: 300px;
}
.jordan{
padding: 10px;
}
.summary{
padding: 10px;
}
.pergame{
position: relative;
width: 100%;
padding: 10px;
}
.Totals{
position: relative;
width: 100%;
padding: 10px;
}
#para{
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 18px;
text-align: justify;
}
li{
list-style-type: none;
}
.mb-0 {
margin-bottom: 0 !important;
}
.stats{
padding-right: 30px;
padding-left: 20px;
padding-bottom: 20px;
height: 400px;
width: 350px;
float: left;
}
.jumbotron{
height: 350px;
width: 100%;
background-size: 100% 100%;
background-image:url(mj.jpg);
margin: 0;
}
.navbar {
margin: 0;
font-size: 20px;
font-family: "Gill Sans", sans-serif;
}
.footerhome{
background-color: grey;
padding: 30px;
width: 100%;
padding-bottom: 0 !important;
opacity: 0.5;
filter: alpha(opacity=50);
}
.footer{
background-color: grey;
padding-bottom: 0 !important;
padding: 30px;
width: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
}
.text-center p{
text-align: center;
font-size: 20px;
font-style: italic;
font-family: "Gill Sans", sans-serif;
}
.thumbnail img{
height: 300px;
width: 100%;
object-fit : cover;
}
.thumbnail img {
width: 100%;
object-fit: fill;
height: 100vh!important;
}
Here you have explain of object-fit :https://css-tricks.com/almanac/properties/o/object-fit/
.thumbnail img {
width: 100%;
object-fit: fill;
height: 100vh!important;
}
h1{
padding: 20px;
}
h2{
text-align: center;
font-size: 60px;
}
p {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 24px;
text-align: center;
font-style: italic;
}
.col-md-4{
padding-bottom: 20px;
}
.thumbnail img{
min-height: 300px;
min-width: 300px;
}
.jordan{
padding: 10px;
}
.summary{
padding: 10px;
}
.pergame{
position: relative;
width: 100%;
padding: 10px;
}
.Totals{
position: relative;
width: 100%;
padding: 10px;
}
#para{
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 18px;
text-align: justify;
}
li{
list-style-type: none;
}
.mb-0 {
margin-bottom: 0 !important;
}
.stats{
padding-right: 30px;
padding-left: 20px;
padding-bottom: 20px;
height: 400px;
width: 350px;
float: left;
}
.jumbotron{
height: 350px;
width: 100%;
background-size: 100% 100%;
background-image:url(mj.jpg);
margin: 0;
}
.navbar {
margin: 0;
font-size: 20px;
font-family: "Gill Sans", sans-serif;
}
.footerhome{
background-color: grey;
padding: 30px;
width: 100%;
padding-bottom: 0 !important;
opacity: 0.5;
filter: alpha(opacity=50);
}
.footer{
background-color: grey;
padding-bottom: 0 !important;
padding: 30px;
width: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
}
.text-center p{
text-align: center;
font-size: 20px;
font-style: italic;
font-family: "Gill Sans", sans-serif;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Michael Jordan Tribute Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="mj.css">
</head>
<body>
<div class="jumbotron">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Gallery</li>
<li>Quotes</li>
</ul>
</nav>
<h1>Gallery</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="jordanOne.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="mike.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="jordannew.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="Michael.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="dunk.jpeg" alt="">
</div>
</div>
</div>
</div>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</div>
</body>
</html>
I'm using http://erikflowers.github.io/weather-icons/ to display weather icons on my page. However, after inserting the cdn. It doesn't work.
https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css the icon has a class of "wi-wom-200" taken from http://erikflowers.github.io/weather-icons/api-list.html since I'm using openweathermap.com for my api. Any help on how to display this icon. Openweahtermap provides their own icons, but very low resolution. Thanks
/*
stylesheet for weather app
*/
body {
background-image: url("../img/city_vector.jpg");
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
/* background color on top of bg image*/
.hero {
position: absolute;
min-height: 100vh;
min-width: 100vw;
top: 0;
bottom: 0;
background-color: rgba(31, 34, 118, 0.5);
z-index: -5;
}
/* navbar */
.navbar {
background-color: rgb(69, 106, 171);
}
.navbar a {
color: white;
font-size: 25px;
}
/* weather section */
.weather {
border: 1px solid white;
height: 30rem;
margin-top: 10rem;
/*background-color: rgba(160, 167, 187, 0.5);*/
background-color: rgba(0, 0, 0, 0.5);
/*background-color: rgba(213, 193, 193, 0.5);*/
border-radius: 20px;
color: white;
}
.weather-head {
height: 50%;
}
#weather-icon {
height: 7rem;
width: 7rem;
}
.weather-body {
height: 50%;
border-top: 1px solid white;
padding-top: 0.5rem;
}
#description {
/*border: 1px solid white;*/
font-size: 2rem;
/*margin-top: 2rem;*/
}
#temperature {
/*border: 1px solid white;*/
font-size: 7rem;
}
span {
font-size: 3rem;
}
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="hero">
<!-- navbar -->
<nav class="navbar">
<a class="navbar-brand" href="#">
<!-- <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> -->
<i class="fa fa-sun-o" aria-hidden="true"></i>
<strong>Local</strong>Weather
</a>
</nav>
<!-- weather section -->
<div class="container">
<div class="row">
<div id="" class="col-8 mx-auto weather">
<div class="weather-head">
<h2 id="location" class="text-center"></h2>
<div class="row">
<div id="description" class="description col-6 text-center">
<i class="wi wi-wom-200"></i> Thunderstorm
</div>
<div id="temperature" class="col-6 text-center">
</div>
</div>
<div class="weather-body">
<div class="row">
<div class="humidity col-4">
<div class="lead text-center">Humidity</div>
</div>
<div class="wind col-4">
<div class="lead text-center">Wind Speed</div>
</div>
<div class="wind-degree col-4">
<div class="lead text-center">Wind Direction</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You have not included the icons cdn link. Use this
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
And then use wi-owm-200 class for the icon
body {
background-image: url("../img/city_vector.jpg");
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
.hero {
position: absolute;
min-height: 100vh;
min-width: 100vw;
top: 0;
bottom: 0;
background-color: rgba(31, 34, 118, 0.5);
z-index: -5;
}
.navbar {
background-color: rgb(69, 106, 171);
}
.navbar a {
color: white;
font-size: 25px;
}
.weather {
border: 1px solid white;
height: 30rem;
margin-top: 10rem;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 20px;
color: white;
}
.weather-head {
height: 50%;
}
#weather-icon {
height: 7rem;
width: 7rem;
}
.weather-body {
height: 50%;
border-top: 1px solid white;
padding-top: 0.5rem;
}
#description {
font-size: 2rem;
}
#temperature {
font-size: 7rem;
}
span {
font-size: 3rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css">
<div class="hero">
<nav class="navbar">
<a class="navbar-brand" href="#">
<i class="fa fa-sun-o" aria-hidden="true"></i>
<strong>Local</strong>Weather
</a>
</nav>
<div class="container">
<div class="row">
<div id="" class="col-8 mx-auto weather">
<div class="weather-head">
<h2 id="location" class="text-center"></h2>
<div class="row">
<div id="description" class="description col-6 text-center">
<i class="wi wi-owm-200"></i> Thunderstorm
</div>
<div id="temperature" class="col-6 text-center">
</div>
</div>
<div class="weather-body">
<div class="row">
<div class="humidity col-4">
<div class="lead text-center">Humidity</div>
</div>
<div class="wind col-4">
<div class="lead text-center">Wind Speed</div>
</div>
<div class="wind-degree col-4">
<div class="lead text-center">Wind Direction</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to change the opacity of my images, so that I can use a hover affect later on, to change the opacity back, creating a cool affect. The problem is the opacity attribute doesn't work! I can't seem to figure out the solution. Is it possible that Bootstrap is preventing this somehow?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
And my CSS: (the opacity attribute is in .affect)
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 50px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 1;
background-color: #070606;
}
You need to have a base state, and a hover state for your image. Change your CSS to:
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s;
}
.affect:hover img {
opacity: 1;
}
This creates the hover effect.
Opacity default value is 1 try making it 0.5.
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>