Skip to content

Commit

Permalink
fix section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nelliney
Nelliney committed Mar 10, 2022
1 parent e64dc86 commit 940385c
Show file tree
Hide file tree
Showing 3 changed files with 242 additions and 240 deletions.
191 changes: 91 additions & 100 deletions c/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,115 +1,106 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
box-sizing:border-box;
}

body {
background-color: #fbab7e;
background-image: linear-gradient(62deg, #176A71 0%, #823933 100%);
text-align:center;
display: flex;
flex-direction: column;
align-items: center;
}
h1{
box-sizing: border-box;
}

body {
background-color: #fbab7e;
background-image: linear-gradient(62deg, #176A71 0%, #823933 100%);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

h1 {
margin-top: 1%;
font-family: 'Montserrat', sans-serif;
}

h2{
h2 {
margin-top: 1%;
font-family: 'Montserrat', sans-serif;
}
section {
width: 1000px;
margin: auto;

/*width: 400px;
margin: auto;*/
}



.frame1 {
margin-top: 5%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 1rem;
}

.frame2{
display: none;
height: 33rem;
overflow: hidden;
border-radius: 0.375rem;
position:relative;
}

.hide_frame{
display: none;
}

.appearance_frame{
display: block;
}

.slide { max-width: 100%;
/*height: 100%;*/
display:block;
margin-bottom: 2rem;
}

.slide2{
max-width: 100%;
/*height: 100%;*/
display:block;
margin-bottom: 2rem;
}


.hide {
opacity: 0;
transition: opacity .5s ease-out;
}


.current {
transition: opacity .5s ease-out;
}


.abs-pos {
position: absolute;
}

.caption {
position: absolute;
z-index: 3;
color: #fff;
background: rgba(0, 0, 0, .7);
bottom: 0;
width: 100%;
height: 1rem;
padding: 1rem 1rem 2rem 1rem;
}


.arrow {
position: absolute;
top: 250px;
padding: 0% 0.6%;
font-size: 24px;
line-height: 24px;
color: #444;
display: block;
}

.prev {

section {
width: 950px;
margin: auto;
}

.frame1 {
margin-top: 5%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 1rem;
}

.frame2 {
display: none;
height: 30rem;
overflow: hidden;
border-radius: 0.375rem;
position: relative;
}

.hide_frame {
display: none;
}

.appearance_frame {
display: block;
}

.slide {
max-width: 100%;
display: block;
margin-bottom: 2rem;
}

.slide2 {
max-width: 100%;
display: block;
margin-bottom: 2rem;
}

.hide {
opacity: 0;
transition: opacity .5s ease-out;
}

.current {
transition: opacity .5s ease-out;
}

.abs-pos {
position: absolute;
}

.caption {
position: absolute;
z-index: 3;
color: #fff;
background: rgba(0, 0, 0, .7);
bottom: 0;
width: 100%;
height: 1rem;
padding: 1rem 1rem 2rem 1rem;
}

.arrow {
position: absolute;
top: 250px;
padding: 0% 0.6%;
font-size: 24px;
line-height: 24px;
color: #444;
display: block;
}

.prev {
left: 1px;
}

.next {
.next {
right: 1px;
}
131 changes: 71 additions & 60 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,91 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>A Simple Carousel - LIVE DEMO</title>
<title>A Simple Carousel</title>
<link rel="stylesheet" href="c/main.css">
<script src="j/main.js" defer></script>
<script src="j/main.js" defer></script>

</head>

<body>

<h1>SURF CAMP</h1>
<h1>SURF CAMP</h1>

<section>
<h2>SAT DEBUT SURF SCHOOL WE STRIVE TO MAKE EVERY SURF LESSON UNIQUE, PERSONAL AND MEMORABLE</h2>
<!---first figure---->
<section>
<h2>SAT DEBUT SURF SCHOOL WE STRIVE TO MAKE EVERY SURF LESSON UNIQUE, PERSONAL AND MEMORABLE</h2>
<!---first figure without JS---->

<figure class="frame1">
<a href="i/1.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/1-1.jpg" alt="" />
</a>
<a href="i/2.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/2-2.jpg" alt="" />
</a>
<a href="i/3.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/3-3.jpg" alt="" />
</a>
<a href="i/4.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/4-4.jpg" alt="" />
</a>
<a href="i/5.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/5-5.jpg" alt="" />
</a>
<a href="i/6.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/6-6.jpg" alt="" />
</a>
<a href="i/7.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/7-7.jpg" alt="" />
</a>
<a href="i/8.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/8-8.jpg" alt="" />
</a>
<a href="i/9.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/9-9.jpg" alt="" />
<a href="i/10.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/10-10.jpg" alt="" />
<figure class="frame1">
<a href="i/1.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/1-1.jpg" alt="" />
</a>
<a href="i/2.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/2-2.jpg" alt="" />
</a>
<a href="i/3.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/3-3.jpg" alt="" />
</a>
<a href="i/4.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/4-4.jpg" alt="" />
</a>
<a href="i/5.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/5-5.jpg" alt="" />
</a>
<a href="i/6.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/6-6.jpg" alt="" />
</a>
</a>
</figure>
<a href="i/7.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/7-7.jpg" alt="" />
</a>
<a href="i/8.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/8-8.jpg" alt="" />
</a>
<a href="i/9.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/9-9.jpg" alt="" />
<a href="i/10.jpg" target="_blank" rel="noopener noreferrer">
<img src="i/10-10.jpg" alt="" />
</a>
</a>
</figure>

<!---second figure---->
<!---second figure---->

<figure class="frame2">
<figure class="frame2">

<img class="slide2 current" src="i/1.jpg" alt="1/10">
<img class="slide2" src="i/2.jpg" alt="2/10">
<img class="slide2" src="i/3.jpg" alt="3/10">
<img class="slide2" src="i/4.jpg" alt="4/10">
<img class="slide2" src="i/5.jpg" alt="5/10">
<img class="slide2" src="i/6.jpg" alt="6/10">
<img class="slide2" src="i/7.jpg" alt="7/10">
<img class="slide2" src="i/8.jpg" alt="8/10">
<img class="slide2" src="i/9.jpg" alt="9/10">
<img class="slide2" src="i/10.jpg" alt="10/10">
<img class="slide2 current" src="i/1.jpg" alt="1/10">
<img class="slide2" src="i/2.jpg" alt="2/10">
<img class="slide2" src="i/3.jpg" alt="3/10">
<img class="slide2" src="i/4.jpg" alt="4/10">
<img class="slide2" src="i/5.jpg" alt="5/10">
<img class="slide2" src="i/6.jpg" alt="6/10">
<img class="slide2" src="i/7.jpg" alt="7/10">
<img class="slide2" src="i/8.jpg" alt="8/10">
<img class="slide2" src="i/9.jpg" alt="9/10">
<img class="slide2" src="i/10.jpg" alt="10/10">
<a class="arrow next">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24"
width="24">
<g>
<path d="M0,0h24v24H0V0z" fill="none" />
</g>
<g>
<polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12" />
</g>
</svg>
</a>

<a class="arrow prev">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z" /></svg>
</a>
<figcaption class="caption"></figcaption>
</figure>

<a class="arrow next">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
</a>

<a class="arrow prev">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/></svg>
</a>
<figcaption class="caption"></figcaption>
</figure>

</section>
</section>

</body>

</html>
Loading

0 comments on commit 940385c

Please sign in to comment.