can someone help me create this table? I need to write the code in html.(https://i.stack.imgur.com/X5RJp.png)
I watched many videos, I looked for answers and I couldn't find the exact same table.
.grid {
display: grid;
grid-template: repeat(3, 50px) / repeat(6, 100px);
}
.grid>div {
border: solid 1px #000;
margin-bottom: -1px;
margin-right: -1px;
}
<div class="grid">
<div style="grid-column: span 6">1</div>
<div style="grid-column: span 3">2</div>
<div style="grid-column: span 3">3</div>
<div style="grid-column: span 2">4</div>
<div style="grid-column: span 2">5</div>
<div style="grid-column: span 2">6</div>
</div>
Related
Does anyone know how I can do this on my own site? (vuejs)
https://cdn.larkx.xyz/kv2bos6i.gif or https://sparkedhost.com
I am going to put Vuejs aside because this effect can be achieved with CSS only.
You can give a look at the source code of sparkedhost.com for a better understanding of how they implemented this effect, and here is an example of such effect without any embellishment:
.container {
width: 200px;
height: 200px;
background: lightgrey;
overflow: hidden;
}
.content {
width: 150px;
height: 80px;
background: red;
margin: 20px auto;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.scrolling {
position: relative;
animation-duration: 8s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes slidein {
from {
top: 0;
}
to {
top: -500px;
}
}
<div class="container">
<div class="scrolling">
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
<!-- The same block of divs is repeated -->
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
</div>
</div>
I'm practising bootstrap responsive web development, I've managed to make my webpage fairly responsive when I change the width however my middle columns overlap if I resize vertically. Here's the code:
<div class="container-fluid con">
<div class="row">
<div class="col-md-2 d-none d-md-block col1">
</div>
<div class="col-md-6 col2">
<p id="header-p">Full stack developer specialising in responsive website design and smooth user experience. Practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture</p>
<hr id="hr1">
<p id="header-tag">Web Developer - User Experience Designer - Graphic Artist
</p>
</div>
<div class="col-md-2 pic-col">
<img class="img-responsive rounded-circle img-thumbnail" src="#">
</div>
<div class="col-md-2 d-none d-md-block col1">
</div>
</div>
</div>
<div class="container-fluid con2">
<div class="row">
<div class="col-md-2 d-none d-md-block col1"></div>
<div class="col-md-8 port-col"><h2 id="portfolio-header">Portfolio</h2>
<hr id="hr2">
</div>
<div class="col-md-2 d-none d-md-block col1">
</div>
</div>
</div>
And the CSS:
#header-p{
margin-top: 10%;
text-align: center;
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:20px;
}
#header-tag{
padding-top: 1rem;
text-align: center;
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:20px;
}
.con{
margin: 4rem auto 2rem auto;
}
.col1, .col3{
border: 1px solid #bfbfbf;
background-color: #bfbfbf;
height: 100vh;
}
.col2{
background-color: #cccccc;
height: 60vh;
}
.pic-col{
background-color: #cccccc;
height: 60vh;
}
#portfolio-header{
text-align: center;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 60px;
letter-spacing: 5px;
/*line-height: 90px;*/
max-width: 100%;
color: #b3b3b3;
}
.port-col{
max-height: 100vh;
}
.con2{
margin: 2rem auto 2rem auto;!important
}
the full code is here if I'm missing anything https://codepen.io/Seaplush/pen/rKVLmX
Hi Friends i am using bootstrap 3 carousal. I am facing once problem in mobile when the mobile screen is <=4 inch. My slider's caption is hiding half on left side on the smaller screen. please help.
Code:
<div id="kc1" class="carousel " data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators hidden-xs">
<li data-target="#kc1" data-slide-to="0" class="active"></li>
<li data-target="#kc1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active" id="websites">
<img class="img-responsive" src="img/full-responsive-websites-system-solutions1.jpg";text="Slide+0" alt="Slide 0">
<div class="carousel-caption img-rounded featurette-heading text-center col-md-offset-1 opa1 onee1" style="background-color:#004080;">
<h1 style="font-size:25px;">This is test example and half caption is hiding in left side on mobile device below <=4 inch screen </h1>
<h6>
More
</h6>
</div>
</div>
<div class="item" id="SEO-SEM">
<img class="img-responsive" src="img/seo-sem.jpg";text="Slide+1" alt="Slide 1">
<div class="carousel-caption img-rounded featurette-heading text-center col-md-offset-2" style="background-color:#000;">
<h2> This is test example and half caption is hiding in left side on mobile device below <=4 inch screen</h2>
<h6> More </h6>
</div>
</div>
</div>
<a class="left carousel-control" href="#kc1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#kc1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<style>
<!-- carousel css-->
.btn-clear {
color: #FFF;
border-color: #FFF;
border-width: 2px;
margin-right: 15px;
}
btn-clear:hover {
color: #000;
background-color: #6699CC;
}
#kc1
{
border-radius: 0px 0px 0px 0px; /* slider.css ln-17*/
/* added by kk */
overflow: hidden;
/* added by kk */
margin-top: 1px;
min-height: 300px;
min-width: 100%;
}
#kc1 img {
min-height: 300px;
min-width: 100%;
}
#kc1 > .carousel-indicators > li {
border-radius: 2px;
min-width: 2px;
background-color:#D4FF00;
border: 1px solid black;
margin-right: 1px;;
margin-left: 1px;;
}
#kc1 > .carousel-indicators > .active {
background-color:#2AFF00;
}
#kc1 .carousel-caption {
color: blue;
right: 50%;
text-align: center;
background:#fff;
left: auto;
top:12%;
bottom: initial;
transform: translateY(-50%);
transform:translateX(50%);
color:#FFF;
max-width: 1200px;
}
.item {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-
}
</style>
Here's a jsfiddle for clarification
The caption in a carousel is actually being controlled in the site.css file under this part:
/* Hide/rearrange for smaller screens */
#media screen and (max-width: 767px) {
/* Hide captions */
.carousel-caption {
display: none
}
}
enter image description hereI'm trying to have an information panel with three different columns using bootstrap 3. I've nested the columns properly, I think, but the panels are hidden beneath the main row and I can't find a way to reveal it.
it's showing that the container is there, but you can't see it
<div class="row creative_line">
<div class="col-md-12">
<h2 class="text-center">Smart & Creative<br><p>This is why you will use it</p></h2>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-4 multi">
<div class="img-circle">
</div>
</div>
<div class="col-md-4 ui">
<div class="img-circle">
</div>
</div>
<div class="col-md-4 design">
<div class="img-circle">
</div>
</div>
</div>
</div>
</div>
This is my current css
.creative_line {
background: yellow;
min-height: 300px;
color: $primary-color;
font-family: $font-stack;
}
.creative_line p {
color: $primary-color;
font-family: $font-stack2;
font-size: 35%;
margin-top: 10px;
}
h2 {
font-size: 40px;
}
.img-circle {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
background: red;
}
.multi,
.ui,
.design {
min-height: 300px;
color: blue;
z-index: 1;
}
I'm using Bootstrap v3.0.2. I want to display a series of divs next to each other, float: left then center that group in a full width row. What I get are the divs lined up next to each other but the entire group floats left.
I've tried numerous suggestions from this site but have been unable to make any of them work.
I have HTML:
<div id="wrapper">
<div class="container">
<div id="wrapBoxRow" class="row">
<div id="boxRow" class="col-md-12 col-xs-12">
<div id="boxWrap">
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
</div>
</div>
</div>
</div>
</div>
Css:
#boxWrap, #boxRow, #wrapBoxRow
{
float: none;
margin: 0 auto;
}
.smallBox
{
border: 3px solid #ddd;
float: left;
width: 20px;
height: 20px;
margin-right: 12px;
}
I've tried this without bootstrap and couldn't get it to work either:
<div id="boxWrap">
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
</div>
Please try the below CSS to horizontally center your div
#boxWrap, #boxRow, #wrapBoxRow
{
display: table;
margin: 0 auto;
}
You can find working code here http://bootply.com/92723