Skip to content

Commit b1c19d8

Browse files
Francy93Francy93
committed
cards position adjustment
1 parent 1077e5c commit b1c19d8

File tree

4 files changed

+120
-60
lines changed

4 files changed

+120
-60
lines changed

‎css/cards.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* card container */
2+
.col-xs-12.col-sm-4.col-md-4{
3+
height: 50%;
4+
padding: 1vh 1vh;
5+
outline: none;
6+
overflow: hidden;
7+
}
8+
9+
/* card */
10+
.card{
11+
background-color: blueviolet;
12+
height: 100%;
13+
width: 100%;
14+
border-radius: 5pt;
15+
16+
outline: none;
17+
overflow: hidden;
18+
}

‎css/carousel.css‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
.carousel.container.wrapper {
44
position: absolute;
55
top: 25%;
6-
left: 15%;
7-
height: 60%;
8-
width: 70%;
6+
left: 10%;
7+
height: 65%;
8+
width: 80%;
99
z-index: 1;
1010

1111
border: none;
@@ -22,4 +22,31 @@
2222
.carousel > .row {
2323
width: 100%;
2424
height: 100%;
25+
outline: none;
26+
overflow: hidden;
27+
}
28+
29+
/* carousel inner */
30+
.carousel-inner {
31+
height: 100%;
32+
}
33+
34+
/* carousel row */
35+
.row{
36+
margin: 0px !important;
37+
height: 100%;
38+
outline: none;
39+
overflow: hidden;
40+
}
41+
42+
/* carousel container */
43+
.container{
44+
padding-top: 15px;
45+
padding-bottom: 15px;
46+
outline: none;
47+
overflow: hidden;
48+
}
49+
50+
.item{
51+
height: 100% !important;
2552
}

‎css/global.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
body{
22
border: none;
33
}
4-
.math_image {
4+
.card > .logo {
55
position: fixed;
66
display: flex;
7-
margin-left: 16%;
8-
margin-top: 2%;
97
width: 100px;
108
height: 100px;
119
}

‎index.html‎

Lines changed: 71 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -32,72 +32,89 @@
3232
<h1 v-text="sitename"></h1>
3333
</header> -->
3434

35-
36-
<div class="carousel container wrapper">
37-
<div class="row">
38-
<div id="carousel-lessons" class="carousel slide" data-ride="carousel">
39-
<!-- Indicators -->
40-
<ol class="carousel-indicators hidden-xs">
41-
<li data-target="#carousel-lessons" data-slide-to="0"
42-
class="active"></li>
43-
<li data-target="#carousel-lessons" data-slide-to="1"></li>
44-
</ol>
45-
<div class="carousel-inner hidden-xs" role="listbox">
46-
<div class="item active">
47-
<div class="row">
48-
49-
<div id="app">
50-
<div class ="box_lesson">
51-
<img class= "math_image" v-bind:src="product.image">
52-
<h2 class="product_title" v-text="product.title"></h2>
53-
<p class="product_location" v-text="product.location"></p>
54-
<p class="product_price" v-text="product.price"></p>
55-
<p class="product_space" >Spaces: {{product.spaces}}</p>
56-
<button type="button" class="btn btn-primary" v-text="product.btn" v-on:click="AddToCart" v-if="canAddToCart"></button>
57-
<button type="button" class="btn btn-primary" disabled="disabled" v-text="product.btn" v-else></button>
58-
</div>
35+
36+
<div id="carousel-lessons" class="carousel container wrapper slide" data-ride="carousel">
37+
<!-- Indicators -->
38+
<ol class="carousel-indicators hidden-xs">
39+
<li data-target="#carousel-lessons" data-slide-to="0" class="active"></li>
40+
<li data-target="#carousel-lessons" data-slide-to="1"></li>
41+
</ol>
42+
<div class="carousel-inner hidden-xs" role="listbox">
43+
<div class="item active">
44+
<div class="row">
45+
46+
<div class="col-xs-12 col-sm-4 col-md-4">
47+
<div class ="card" id="app">
48+
<img class="logo" v-bind:src="product.image">
49+
<h2 class="title" v-text="product.title"></h2>
50+
<p class="location" v-text="product.location"></p>
51+
<p class="price" v-text="product.price"></p>
52+
<p class="space" >Spaces: {{product.spaces}}</p>
53+
<button v-if="canAddToCart" class="btn btn-primary" type="button" v-text="product.btn" v-on:click="AddToCart"></button>
54+
<button v-else disabled="disabled" class="btn btn-primary" type="button" v-text="product.btn"></button>
5955
</div>
56+
</div>
6057

61-
62-
<div id="app">
63-
64-
<div class ="box_lesson">
65-
<img class= "math_image" v-bind:src="product.image">
66-
<h2 class="product_title" v-text="product.title"></h2>
67-
<p class="product_location" v-text="product.location"></p>
68-
<p class="product_price" v-text="product.price"></p>
69-
<p class="product_space" >Spaces: {{product.spaces}}</p>
70-
<button type="button" class="btn btn-primary" v-text="product.btn" v-on:click="AddToCart" v-if="canAddToCart"></button>
71-
<button type="button" class="btn btn-primary" disabled="disabled" v-text="product.btn" v-else></button>
72-
</div>
58+
59+
<div class="col-xs-12 col-sm-4 col-md-4">
60+
<div class="card" id="app">
61+
<!-- <img class= "math_image" v-bind:src="product.image">
62+
<h2 class="product_title" v-text="product.title"></h2>
63+
<p class="product_location" v-text="product.location"></p>
64+
<p class="product_price" v-text="product.price"></p>
65+
<p class="product_space" >Spaces: {{product.spaces}}</p>
66+
<button v-if="canAddToCart" type="button" class="btn btn-primary" v-text="product.btn" v-on:click="AddToCart"></button>
67+
<button v-else type="button" class="btn btn-primary" disabled="disabled" v-text="product.btn"></button> -->
7368
</div>
74-
75-
76-
</div>
69+
</div>
7770

78-
<!-- nex carousel page -->
7971

80-
<div class="item">
81-
<div class="row">
82-
-------------------- DIV OF LESSONS ---------------------------
72+
<div class="col-xs-12 col-sm-4 col-md-4">
73+
<div class ="card" id="app">
74+
<!-- <img class= "math_image" v-bind:src="product.image">
75+
<h2 class="product_title" v-text="product.title"></h2>
76+
<p class="product_location" v-text="product.location"></p>
77+
<p class="product_price" v-text="product.price"></p>
78+
<p class="product_space" >Spaces: {{product.spaces}}</p>
79+
<button v-if="canAddToCart" type="button" class="btn btn-primary" v-text="product.btn" v-on:click="AddToCart"></button>
80+
<button v-else type="button" class="btn btn-primary" disabled="disabled" v-text="product.btn"></button> -->
81+
</div>
82+
</div>
8383

84+
85+
<div class="col-xs-12 col-sm-4 col-md-4">
86+
<div class ="card" id="app">
87+
<!-- <img class= "math_image" v-bind:src="product.image">
88+
<h2 class="product_title" v-text="product.title"></h2>
89+
<p class="product_location" v-text="product.location"></p>
90+
<p class="product_price" v-text="product.price"></p>
91+
<p class="product_space" >Spaces: {{product.spaces}}</p>
92+
<button v-if="canAddToCart" type="button" class="btn btn-primary" v-text="product.btn" v-on:click="AddToCart"></button>
93+
<button v-else type="button" class="btn btn-primary" disabled="disabled" v-text="product.btn"></button> -->
94+
</div>
8495
</div>
96+
8597
</div>
8698
</div>
87-
<!-- Controls -->
88-
<a href="#carousel-lessons" class="left carousel-control"
89-
role="button" data-slide="prev">
90-
<span class="glyphicon glyphicon-chevron-left"
91-
aria-hidden="true"></span>
92-
</a>
93-
<a href="#carousel-lessons" class="right carousel-control"
94-
role="button" data-slide="next">
95-
<span class="glyphicon glyphicon-chevron-right"
96-
aria-hidden="true"></span>
97-
</a>
99+
100+
<!-- nex carousel page -->
101+
102+
<div class="item">
103+
<div class="row">
104+
-------------------- DIV OF LESSONS ---------------------------
105+
106+
</div>
98107
</div>
99108
</div>
109+
<!-- Controls -->
110+
<a href="#carousel-lessons" class="left carousel-control" role="button" data-slide="prev">
111+
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
112+
</a>
113+
<a href="#carousel-lessons" class="right carousel-control" role="button" data-slide="next">
114+
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
115+
</a>
100116
</div>
117+
101118
<!-- <div id="app">
102119
<header>
103120
<h1 v-text="sitename"></h1>

0 commit comments

Comments
 (0)