tykayn/digital-theory
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

radius on phone container

Browse Source
This commit is contained in:
Tykayn 2023-04-25 12:26:45 +02:00 committed by tykayn
parent 27a9db462f
commit 3a61ef1085
3 changed files with 38 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/3-open-sesame.css
View File

@ -6,7 +6,7 @@
width: 1177px;
left: calc(50% - 1177px / 2 - 0.5px);
top: calc(50% - 180px / 2);
top: 100px;
font-family: 'GT Walsheim Pro';
font-style: normal;
font-weight: 600;

39
css/5-popover.css
View File

@ -1,16 +1,38 @@
/******** phone base *********/
.slider-screen .text{
position: relative;
left: 62%;
top: -30%;
width: 400px;
text-align:left;
}
.slider-screen .text-title
{
margin-bottom:2rem;
}
.phone-container{
border-radius: 1rem;
width: 411px;
}
.phone-container .top{
height: 60px;
background: url('/img/phone_rectangle_top.jpg');
background: url('/img/phone_rectangle_top.jpg') no-repeat center;
border-top-right-radius: 1rem;
border-top-left-radius: 1rem;
}
.phone-container .bottom{
height: 60px;
background: url('/img/phone_rectangle_bottom.jpg');
background: url('/img/phone_rectangle_bottom.jpg') no-repeat center;
top: 655.5px;
position: relative;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
}
.phone-container.transparent{
@ -36,15 +58,4 @@
left: 33%;
top: 20vh;
}
#popover .text{
position: relative;
left: 52%;
top: 20vh;
width: 400px;
}
#popover p{
position: relative;
left: 52%;
top: 20vh;
width: 400px;
}

17
index.html
View File

@ -154,7 +154,7 @@
</div>
</section>
<!-- other section-->
<section id="popover">
<section id="popover" class="slider-screen">
<div class="phone-container">
<div class="top">
@ -164,7 +164,7 @@
</div>
</div>
<div class="text">
<h2>
<h2 class="text-title">
<span class="color-emphasis">
Premium
</span>
@ -178,10 +178,17 @@
</p>
</div>
</section>
<section id="portfolio">
<div class="phone-container"></div>
<section id="portfolio" class="slider-screen">
<div class="phone-container">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
<div id="text">
<h2>
<h2 class="text-title">
<span class="color-emphasis">
Premium
</span>