nezumi/loi-phan-internship
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/loi-phan-internship.git synced 2026-09-22 20:01:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update style for welcome UI

Browse Source
This commit is contained in:
nezumi
2023-07-21 11:12:23 +07:00
parent 1b62ec9dbb
commit b6397cc150
5 changed files with 129 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
practice/practice-02/src/layouts/welcome.pug
+31 -10
View File
@@ -7,14 +7,25 @@ section.welcome
src=welcome_img_path + "welcome-image-mobile.png",
alt="Welcome banner image"
)
img.welcome__lines-background(
src=welcome_img_path + "lines-background-mobile.png",
alt="Lines background"
)
img.welcome__arrow-image(
src=welcome_img_path + "arrow-mobile.png",
alt="Arrow image"
)
picture
source(
media="(min-width: 840px)",
srcset=welcome_img_path + "lines-background-desktop.png"
)
img.welcome__lines-background(
src=welcome_img_path + "lines-background-mobile.png",
alt="Lines background"
)
picture
source(
media="(min-width: 840px)",
srcset=welcome_img_path + "arrow-desktop.png",
alt="Arrow image"
)
img.welcome__arrow-image(
src=welcome_img_path + "arrow-mobile.png",
alt="Arrow image"
)
img.welcome__mint-image(
src=welcome_img_path + "mint.png",
alt="Mint image"
@@ -58,8 +69,18 @@ section.welcome
a.welcome__download-btn.btn(href="javascript:void(0)") Download App
a.welcome__watch-video-link.no-underline(href="javascript:void(0)")
.welcome__play-icon-wrapper
img(src=welcome_img_path + "play-icon.svg", alt="Watch button image")
= "Watch Video"
svg.welcome__play-icon(
width="12",
height="13",
viewBox="0 0 12 13",
fill="none",
xmlns="http://www.w3.org/2000/svg"
)
path(
d="M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z",
fill="currentColor"
)
span.welcome__text-download-btn Watch Video
.welcome__slider-container
img.welcome__slider-image(
src=welcome_img_path + "slider.png",
practice/practice-02/src/styles/components/_toggle-menu.scss
+1 -1
View File
@@ -43,7 +43,7 @@
}
.toggle-menu:checked ~ .nav-list {
right: 0;
display: block;
}
@media screen and (min-width: 840px) {
practice/practice-02/src/styles/layouts/_header.scss
+3 -2
View File
@@ -15,9 +15,10 @@
@media screen and (min-width: 840px) {
.header {
padding-top: 32px;
padding-inline: 24px;
padding-left: 70px;
padding-right: 61px;
gap: 10px;
max-width: $max-width;
max-width: 1309px;
}
.header-content {
practice/practice-02/src/styles/layouts/_navbar.scss
+10 -7
View File
@@ -1,21 +1,21 @@
.nav-list {
@include flex-container(space-between, column);
@include size(max-content, auto);
display: none;
list-style: none;
transition: 0.1s;
position: fixed;
position: absolute;
border: 2px solid $primary-color;
top: 0;
right: -300px;
margin-top: 105px;
margin-right: 10px;
margin-left: 10px;
top: 100px;
right: 25px;
background-color: $white;
z-index: 2;
}
.nav-download-btn {
display: none;
z-index: 1;
}
.nav-item {
@@ -52,6 +52,9 @@
}
.nav-list {
@include size(auto, auto);
@include flex-container(space-between, column);
position: unset;
flex-direction: row;
border: none;
practice/practice-02/src/styles/layouts/_welcome.scss
+84 -8
View File
@@ -9,7 +9,6 @@
@include flex-container(center, column);
position: relative;
padding: 0 14px;
}
&__banner-image {
@@ -125,6 +124,11 @@
padding: 9px;
margin: 5px 4px;
cursor: pointer;
&:hover {
background-color: #f7d699;
transition: 0.2s;
}
}
&__action-container {
@@ -135,25 +139,57 @@
&__watch-video-link {
@include flex-container($align-items: center, $gap: 21px);
color: $gray;
font-size: $fs-sm;
position: relative;
&:hover {
.welcome__play-icon-wrapper {
width: 100%;
background-color: $secondary-color;
}
.welcome__text-download-btn {
color: $primary-color;
}
}
}
&__play-icon {
color: $primary-color;
}
&__play-icon-wrapper {
padding: 25px;
border-radius: 50%;
@include size(12px, 17px);
position: absolute;
padding: 17.5px 20px;
border-radius: 50px;
background-color: $white;
box-shadow: 0 40px 50px 3px rgba($color: $primary-color, $alpha: 0.5);
transition: width 0.5s;
}
&__text-download-btn {
color: $gray;
font-size: $fs-sm;
margin-left: 70px;
transition: 0.5s;
z-index: 1;
}
&__download-btn:hover {
background-color: $secondary-color;
transition: 0.2s;
}
&__slider-container {
@include size(22px, 61px);
display: none;
}
// End content css code
}
.slider-container {
display: none;
}
@media screen and (min-width: 840px) {
.welcome {
@include flex-container(
@@ -166,24 +202,64 @@
width: 100%;
max-width: $max-width;
// Start banner
&__banner-image {
@include size(100%, 100%);
max-width: 689px;
}
&__lines-background {
@include setAbsoluteAndLocation($top: -150px, $right: 0px);
@include size(313px, 718px);
}
&__arrow-image {
@include size(117px, 315px);
@include setAbsoluteAndLocation($top: -40px, $right: 5px);
transition: 0.2s;
}
&__head-arrow-container {
display: none;
}
&__banner-container {
@include size(auto, auto);
padding-right: 74px;
max-width: 1000px;
min-width: 500px;
}
// End banner
// Start content
&__content {
@include size(auto, auto);
padding-left: 70px;
padding-right: 0px;
max-width: 440px;
}
&__slider-container {
display: block;
@include setAbsoluteAndLocation($bottom: -135px, $left: 65px);
}
}
}
@media screen and (min-width: 1200px) {
.welcome {
&__banner-container {
padding-right: 74px;
}
&__arrow-image {
@include size(117px, 315px);
@include setAbsoluteAndLocation($top: 8px, $right: 62px);
}
&__orange-image-wrapper {
@include setAbsoluteAndLocation($top: 110px, $right: -12px);
}
}
}