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

Implememnt css code

Browse Source
This commit is contained in:
nezumi
2023-07-20 13:57:41 +07:00
parent 727de65663
commit 4d07bdab8c
8 changed files with 207 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
practice/practice-02/src/layouts/welcome.pug
+31 -20
View File
@@ -3,16 +3,22 @@
section.welcome
.welcome__banner
.welcome__banner-container
img(
img.welcome__banner-image(
src=welcome_img_path + "welcome-image-mobile.png",
alt="Welcome banner image"
)
img(
img.welcome__lines-background(
src=welcome_img_path + "lines-background-mobile.png",
alt="Lines background"
)
img(src=welcome_img_path + "arrow-mobile.png", alt="Arrow image")
img(src=welcome_img_path + "mint.png", alt="Mint 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"
)
.welcome__content
.welcome__orange-image-wrapper
img(src=welcome_img_path + "orange.png", alt="Orange background image")
@@ -22,15 +28,19 @@ section.welcome
src=welcome_img_path + "love-icon.png",
alt="Love icon"
)
.welcome__head-arrow-container
img(src=welcome_img_path + "head-arrow.png", alt="Head arrow image")
p.welcome__text-box-content People Trust us
h1.welcome__heading We're
= " "
span serious
span.primary-text serious
= " for "
span food
span.primary-text food
= " & "
span delivery
span.secondary-text delivery
= "."
.welcome__underline-image-container
img(src=welcome_img_path + "underline.png", alt="Underline image")
p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes.
form.welcome__search-form(action="#")
.welcome__search-icon-wrapper
@@ -38,16 +48,17 @@ section.welcome
src=welcome_img_path + "search-icon.png",
alt="Search icon"
)
input.welcome__text-input(type="text")
.welcome__button-icon-wrapper
button.welcome__submit-btn(type="submit")
img.welcome__search-icon-btn(
src=welcome_img_path + "search-icon-btn.svg",
alt="Search button image"
)
a.btn(href="javascript:void(0)") Download App
a.welcome__watch-video-button(href="javascript:void(0)")
.welcome__watch-video-wrapper
img(src=welcome_img_path + "play-btn.png", alt="Watch button image")
p Watch Video
img(src=welcome_img_path + "slider.png", alt="Slider image")
input.welcome__text-input(type="text", placeholder="Search food")
button.welcome__submit-btn(type="submit")
img.welcome__search-icon-btn(
src=welcome_img_path + "search-icon-btn.svg",
alt="Search button image"
)
.welcome__action-container
a.welcome__download-btn.btn(href="javascript:void(0)") Download App
a.welcome__watch-video-button(href="javascript:void(0)")
.welcome__watch-video-wrapper
img(src=welcome_img_path + "play-btn.png", alt="Watch button image")
p Watch Video
.welcome__slider-container
img.welcome__slider-image(src=welcome_img_path + "slider.png", alt="Slider image")
practice/practice-02/src/styles/abstracts/_mixins.scss
+31 -1
View File
@@ -17,7 +17,8 @@
@mixin flex-container(
$justify-content: null,
$flex-direction: null,
$align-items: null
$align-items: null,
$gap: null
) {
display: flex;
@if $justify-content != null {
@@ -31,6 +32,10 @@
@if $align-items != null {
align-items: $align-items;
}
@if $gap != null {
gap: $gap;
}
}
@mixin size($width: null, $height: null) {
@@ -42,3 +47,28 @@
height: $height;
}
}
@mixin setAbsoluteAndLocation(
$top: null,
$left: null,
$right: null,
$bottom: null
) {
position: absolute;
@if $top != null {
top: $top;
}
@if $left != null {
left: $left;
}
@if $right != null {
right: $right;
}
@if $bottom != null {
bottom: $bottom;
}
}
practice/practice-02/src/styles/abstracts/_variables.scss
+1
View File
@@ -12,6 +12,7 @@ $fs-xx-sm: 14px;
$fs-x-sm: 16px;
$fs-sm: 17px;
$fs-md: 18px;
$fs-x-md: 20px;
$fs-lg: 24px;
$fs-x-lg: 48px;
$fs-xx-lg: 58px;
practice/practice-02/src/styles/bases/_base.scss
+8
View File
@@ -1,3 +1,11 @@
.no-underline {
text-decoration: none;
}
.primary-text {
color: $primary-color;
}
.secondary-text {
color: $secondary-color;
}
practice/practice-02/src/styles/layouts/_header.scss
+3 -1
View File
@@ -2,9 +2,10 @@
@include flex-container(space-between, null, center);
position: relative;
max-width: $max-width;
max-width: 428px;
min-width: $min-width;
padding: 24px;
margin: auto;
}
.header-content {
@@ -16,6 +17,7 @@
padding-top: 32px;
padding-inline: 24px;
gap: 10px;
max-width: $max-width;
}
.header-content {
practice/practice-02/src/styles/layouts/_navbar.scss
+1
View File
@@ -11,6 +11,7 @@
margin-right: 10px;
margin-left: 10px;
background-color: $white;
z-index: 2;
}
.nav-download-btn {
practice/practice-02/src/styles/layouts/_welcome.scss
+131
View File
@@ -0,0 +1,131 @@
.welcome {
@include flex-container(center, column);
// Start banner css code
&__banner-container {
@include size(428px, auto);
@include flex-container(center, column);
position: relative;
margin: auto;
max-width: 428px;
}
&__banner-image {
@include size(auto, auto);
z-index: 1;
}
&__lines-background {
@include setAbsoluteAndLocation($top: -100px, $right: 0);
}
&__arrow-image {
@include setAbsoluteAndLocation($top: -15px, $right: 50px);
@include size(43px, 215px);
}
&__mint-image {
@include setAbsoluteAndLocation($bottom: 100px, $right: 0);
}
// End banner css code
// Start content css code
&__content {
@include flex-container($flex-direction: column);
position: relative;
padding-top: 68.48px;
padding-left: 33px;
max-width: 380px;
margin: auto;
}
&__orange-image-wrapper {
@include setAbsoluteAndLocation($top: 0, $right: 0);
}
&__text-box {
@include flex-container($align-items: center, $gap: 6px);
@include size(fit-content);
background-color: #feeae9;
border-radius: 100px;
padding: 6px;
font-size: $fs-xx-sm;
font-family: $secondary-font;
}
&__icon-container {
@include size(20px, 20px);
}
&__head-arrow-container {
@include size(13px, 7.3px);
@include setAbsoluteAndLocation($right: 107px);
}
&__heading {
margin-top: 20px;
font-size: $fs-x-lg;
text-transform: capitalize;
font-weight: 900;
}
&__underline-image-container {
margin-top: 12px;
}
&__description {
margin-top: 35px;
font-size: $fs-x-md;
line-height: 140%;
letter-spacing: -0.2px;
}
&__search-form {
@include flex-container();
margin-top: 32px;
border-radius: 100px;
border: 0.5px solid $black;
}
&__search-icon-wrapper {
@include size(24px, 24px);
padding: 14px;
}
&__text-input {
@include size(100%, auto);
padding: 15px 0;
font-size: $fs-md;
border: none;
}
&__submit-btn {
@include size(42px, 42px);
background-color: #fdc55e;
border-radius: 100px;
border: none;
padding: 9px;
margin: 6px 4px;
cursor: pointer;
}
&__action-container {
@include flex-container();
margin-top: 44px;
}
&__slider-container {
@include size(22px, 61px);
display: none;
}
}
practice/practice-02/src/styles/main.scss
+1
View File
@@ -15,3 +15,4 @@
// Layouts
@import "./layouts/navbar";
@import "./layouts/header";
@import "./layouts/welcome";