Skip to content

Commit 7208414

Browse files
john-smilgajohn-smilga
committed
15-slider some css changes
1 parent 9933cad commit 7208414

File tree

4 files changed

+60
-62
lines changed

4 files changed

+60
-62
lines changed

‎15-slider/final/index.html‎

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,34 @@
99
<link rel="stylesheet" href="styles.css" />
1010
</head>
1111
<body>
12-
<main>
13-
<section>
14-
<div class="slider-container">
15-
<div class="slide">
16-
<img src="./img-1.jpeg" class="slide-img" alt="" />
17-
<h1>1</h1>
18-
</div>
19-
<div class="slide">
20-
<h1>2</h1>
21-
</div>
22-
<div class="slide">
23-
<h1>3</h1>
24-
</div>
25-
<div class="slide">
26-
<div>
27-
<img src="./person-1.jpeg" class="person-img" alt="" />
28-
<h4>susan doe</h4>
29-
<h1>4</h1>
30-
</div>
31-
</div>
12+
<div class="slider-container">
13+
<div class="slide">
14+
<img src="./img-1.jpeg" class="slide-img" alt="" />
15+
<h1>1</h1>
16+
</div>
17+
<div class="slide">
18+
<h1>2</h1>
19+
</div>
20+
<div class="slide">
21+
<h1>3</h1>
22+
</div>
23+
<div class="slide">
24+
<div>
25+
<img src="./person-1.jpeg" class="person-img" alt="" />
26+
<h4>susan doe</h4>
27+
<h1>4</h1>
3228
</div>
33-
<div class="btn-container">
34-
<button type="button" class="prevBtn">
35-
prev
36-
</button>
37-
<button type="button" class="nextBtn">
38-
next
39-
</button>
40-
</div>
41-
</section>
42-
</main>
29+
</div>
30+
</div>
31+
<div class="btn-container">
32+
<button type="button" class="prevBtn">
33+
prev
34+
</button>
35+
<button type="button" class="nextBtn">
36+
next
37+
</button>
38+
</div>
39+
4340
<!-- javascript -->
4441
<script src="app.js"></script>
4542
</body>

‎15-slider/final/styles.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,11 +184,13 @@ Slider
184184
.slider-container {
185185
border: 5px solid var(--clr-primary-5);
186186
width: 80vw;
187+
margin: 0 auto;
187188
height: 40vh;
188-
max-width: 50rem;
189+
max-width: 80rem;
189190
position: relative;
190191
border-radius: 0.5rem;
191192
overflow: hidden;
193+
margin-top: 10rem;
192194
}
193195
.slide {
194196
position: absolute;

‎15-slider/setup/index.html‎

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,34 @@
99
<link rel="stylesheet" href="styles.css" />
1010
</head>
1111
<body>
12-
<main>
13-
<section>
14-
<div class="slider-container">
15-
<div class="slide">
16-
<img src="./img-1.jpeg" class="slide-img" alt="" />
17-
<h1>1</h1>
18-
</div>
19-
<div class="slide">
20-
<h1>2</h1>
21-
</div>
22-
<div class="slide">
23-
<h1>3</h1>
24-
</div>
25-
<div class="slide">
26-
<div>
27-
<img src="./person-1.jpeg" class="person-img" alt="" />
28-
<h4>susan doe</h4>
29-
<h1>4</h1>
30-
</div>
31-
</div>
12+
<div class="slider-container">
13+
<div class="slide">
14+
<img src="./img-1.jpeg" class="slide-img" alt="" />
15+
<h1>1</h1>
16+
</div>
17+
<div class="slide">
18+
<h1>2</h1>
19+
</div>
20+
<div class="slide">
21+
<h1>3</h1>
22+
</div>
23+
<div class="slide">
24+
<div>
25+
<img src="./person-1.jpeg" class="person-img" alt="" />
26+
<h4>susan doe</h4>
27+
<h1>4</h1>
3228
</div>
33-
<div class="btn-container">
34-
<button type="button" class="prevBtn">
35-
prev
36-
</button>
37-
<button type="button" class="nextBtn">
38-
next
39-
</button>
40-
</div>
41-
</section>
42-
</main>
29+
</div>
30+
</div>
31+
<div class="btn-container">
32+
<button type="button" class="prevBtn">
33+
prev
34+
</button>
35+
<button type="button" class="nextBtn">
36+
next
37+
</button>
38+
</div>
39+
4340
<!-- javascript -->
4441
<script src="app.js"></script>
4542
</body>

‎15-slider/setup/styles.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,11 +184,13 @@ Slider
184184
.slider-container {
185185
border: 5px solid var(--clr-primary-5);
186186
width: 80vw;
187+
margin: 0 auto;
187188
height: 40vh;
188-
max-width: 50rem;
189+
max-width: 80rem;
189190
position: relative;
190191
border-radius: 0.5rem;
191192
overflow: hidden;
193+
margin-top: 10rem;
192194
}
193195
.slide {
194196
position: absolute;

0 commit comments

Comments
 (0)