@ -4,8 +4,8 @@
< head >
< head >
< meta charset = "utf-8" >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "description" content = " ">
< meta name = "description" content = " Hexapod is an Robotic project for Personal/Hobby Maker, using Raspberry Pi (RPi) or Linkit 7697 as its controller, also iOS/Android remote controllable ">
< title > Hexapod< / title >
< title > Hexapod: Main page < / title >
< link rel = "shortcut icon" type = "image/png" href = "images/icon-b.png" / >
< link rel = "shortcut icon" type = "image/png" href = "images/icon-b.png" / >
< link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous" >
< link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous" >
@ -18,12 +18,26 @@
user-select: none;
user-select: none;
}
}
.bd-placeholder-img img {
display: block;
margin-left:auto;
margin-right:auto;
}
.jumbotron {
.jumbotron {
padding-top: 3rem;
padding-top: 3rem;
padding-bottom: 3rem;
padding-bottom: 3rem;
margin-bottom: 0;
margin-bottom: 0;
min-height: 300px;
min-height: 300px;
}
}
@media (orientation: portrait) {
.jumbotron {
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 0;
min-height: 200px;
}
}
.text-outlined {
.text-outlined {
color: black;
color: black;
@ -46,6 +60,16 @@
font-size: 1.2rem;
font-size: 1.2rem;
max-width: 30rem;
max-width: 30rem;
}
}
@media (orientation: portrait) {
.jumbotron-heading {
font-size: 2rem;
font-weight: 700;
}
.jumbotron-text {
font-size: 1rem;
max-width: 30rem;
}
}
footer {
footer {
padding-top: 3rem;
padding-top: 3rem;
@ -142,6 +166,21 @@
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-6" >
< div class = "card mb-4 shadow-sm" >
< div class = "bd-placeholder-img card-img-top bg-dark" width = "100%" height = "300" >
< img src = "images/3dparts-s.jpg" / >
< / div >
< div class = "card-body" >
< p class = "card-text" > 3D parts< br > Parts in < font color = blue > Blue< / font > rectangle are for "Body"< br / > Parts in < font color = red > Red< / font > rectangle are for "one Leg"< / p >
< div class = "d-flex justify-content-between align-items-center" >
< a href = "images/3dparts-b.jpg" class = "btn btn-sm btn-outline-secondary" > Detail Image< / a >
< small class = "text-muted" > 2019/3/23< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-6" >
< div class = "col-md-6" >
< div class = "card mb-4 shadow-sm" >
< div class = "card mb-4 shadow-sm" >
< iframe class = "bd-placeholder-img card-img-top" width = "100%" height = "300" src = "https://www.youtube.com/embed/EhIvYd5yoXo" frameborder = "0" allow = "autoplay; encrypted-media" > < / iframe >
< iframe class = "bd-placeholder-img card-img-top" width = "100%" height = "300" src = "https://www.youtube.com/embed/EhIvYd5yoXo" frameborder = "0" allow = "autoplay; encrypted-media" > < / iframe >
Smallp Tsai
6 years ago
