place sliders elements
This commit is contained in:
parent
8fc263d001
commit
200f7760b5
|
|
@ -28,3 +28,8 @@ main section h2 {
|
|||
img{
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
|
||||
.credits{
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
|
||||
/**
|
||||
css JS and html
|
||||
made by B. Lemoine - cipherbliss.com
|
||||
04 2023
|
||||
*/
|
||||
/******** section 1 *********/
|
||||
|
||||
#main_title_container {
|
||||
|
|
|
|||
|
|
@ -40,11 +40,12 @@
|
|||
}
|
||||
|
||||
#cover .button {
|
||||
top: 16vh;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
position: relative;
|
||||
right: 0;
|
||||
top: 33vh;
|
||||
bottom: 0;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
#welcome h2 {
|
||||
font-weight: 600;
|
||||
font-size: 10em;
|
||||
font-size: 8em;
|
||||
line-height: 90px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.04em;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
padding-bottom: 310px;
|
||||
|
||||
color: rgba(248, 243, 241, 0.1);
|
||||
height: 50vh;
|
||||
/*height: 72vh;*/
|
||||
}
|
||||
|
||||
#open .text {
|
||||
|
|
@ -27,3 +27,7 @@
|
|||
#open img{
|
||||
max-width: 90vw;
|
||||
}
|
||||
#open-handle{
|
||||
float:left;
|
||||
height: 20vh;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@
|
|||
#content_first {
|
||||
|
||||
opacity: 0;
|
||||
width: 90vw;
|
||||
height: 35px;
|
||||
margin-bottom: 40px;
|
||||
font-style: normal;
|
||||
|
|
@ -74,6 +73,7 @@
|
|||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
margin-top: 20vh;
|
||||
}
|
||||
|
||||
#content_second {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/******** phone base *********/
|
||||
|
||||
#popover {
|
||||
|
|
@ -17,37 +16,39 @@
|
|||
/* identical to box height, or 66px */
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.text-grey{
|
||||
|
||||
.text-grey {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.slider-screen .text{
|
||||
.slider-screen .text {
|
||||
position: relative;
|
||||
left: 55vw;
|
||||
top: -30%;
|
||||
width: 400px;
|
||||
text-align:left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.slider-screen .text-title
|
||||
{
|
||||
margin-bottom:2rem;
|
||||
.slider-screen .text-title {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.phone-container{
|
||||
|
||||
.phone-container {
|
||||
border-radius: 1rem;
|
||||
width: 411px;
|
||||
}
|
||||
.phone-container .top{
|
||||
|
||||
.phone-container .top {
|
||||
height: 60px;
|
||||
background: url('/img/phone_rectangle_top.jpg') no-repeat center;
|
||||
background: url('/img/phone_rectangle_top.jpg') no-repeat center;
|
||||
|
||||
border-top-right-radius: 1rem;
|
||||
border-top-left-radius: 1rem;
|
||||
}
|
||||
|
||||
.phone-container .bottom{
|
||||
.phone-container .bottom {
|
||||
height: 62px;
|
||||
background: url('/img/phone_rectangle_bottom.jpg') no-repeat center;
|
||||
top: 676.5px;
|
||||
|
|
@ -56,7 +57,7 @@
|
|||
border-bottom-left-radius: 2rem;
|
||||
}
|
||||
|
||||
.phone-container.transparent{
|
||||
.phone-container.transparent {
|
||||
background: rgba(248, 243, 241, 0.1);
|
||||
border-radius: 70px;
|
||||
width: 350px;
|
||||
|
|
@ -66,7 +67,7 @@
|
|||
.slider-screen .phone-container {
|
||||
height: 776px;
|
||||
width: 411px;
|
||||
background: url('/img/phone_cream.png') no-repeat;
|
||||
background: url('/img/phone_cream.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
|
|
@ -81,20 +82,38 @@
|
|||
float: right;
|
||||
}
|
||||
|
||||
.arrow-left, .arrow-right {
|
||||
padding: 1.5rem;
|
||||
border: solid 2px #1E33DA;
|
||||
background: linear-gradient(310.41deg, rgba(255, 255, 255, 0.3) 10.9%, rgba(255, 255, 255, 0) 81.35%);
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
/* Note: backdrop-filter has minimal browser support */
|
||||
border-radius: 70px;
|
||||
transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
position: relative;
|
||||
right: 40px;
|
||||
top: 50vh;
|
||||
float: right;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
position: relative;
|
||||
left: 40px;
|
||||
top: 50vh;
|
||||
float: left;
|
||||
}
|
||||
.bullets{
|
||||
|
||||
.bullets {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 30vh;
|
||||
}
|
||||
|
||||
.bullets img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 0L12.57 1.393L20.15 9H0V11H20.15L12.57 18.573L14 20L24 10L14 0Z" fill="#1E33DA"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 198 B |
18
index.html
18
index.html
|
|
@ -193,14 +193,13 @@
|
|||
<!-- other section-->
|
||||
<section id="popover" class="slider-screen">
|
||||
<div class="close-button">
|
||||
<img src="/img/cross_pink.png" alt="fermer">
|
||||
<img src="/img/cross_blue.png" alt="fermer">
|
||||
</div>
|
||||
<div class="arrow-left">
|
||||
<img src="/img/arrow_left.png" alt="précédent">
|
||||
<img src="/img/arrow.svg" alt="précédent">
|
||||
</div>
|
||||
<div class="arrow-right">
|
||||
<img src="/img/arrow_right.png" alt="suivant">
|
||||
|
||||
<img src="/img/arrow.svg" alt="suivant">
|
||||
</div>
|
||||
<div class="phone-container">
|
||||
<div class="top">
|
||||
|
|
@ -230,8 +229,17 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!--grey bg-->
|
||||
<section id="portfolio" class="slider-screen">
|
||||
<div class="close-button">
|
||||
<img src="/img/cross_blue.png" alt="fermer">
|
||||
</div>
|
||||
<div class="arrow-left">
|
||||
<img src="/img/arrow.svg" alt="précédent">
|
||||
</div>
|
||||
<div class="arrow-right">
|
||||
<img src="/img/arrow.svg" alt="suivant">
|
||||
</div>
|
||||
<div class="phone-container">
|
||||
<div class="top">
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue