Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Top sellers #1718

Open
wants to merge 53 commits into
base: main
Choose a base branch
from
Open
Changes from 3 commits
Commits
Show all changes
53 commits
Select commit Hold shift + click to select a range
0104305
update package.js+structura htm in partials
Ancasab Jun 1, 2024
81a28a4
feat: structura folder css
Ancasab Jun 1, 2024
d4439cb
feat:< head > set up + <body> include partials
Ancasab Jun 1, 2024
a60dc26
feat: populat general-style .css
Ancasab Jun 1, 2024
01b933e
back to package.js original
Ancasab Jun 1, 2024
d8d61b1
images- herosection
Ancasab Jun 1, 2024
04ea944
images-Review section
Ancasab Jun 1, 2024
e61abd4
images-unique_components
Ancasab Jun 1, 2024
b1cfafa
images-subscribe section
Ancasab Jun 1, 2024
bed068f
images-top-seller
Ancasab Jun 2, 2024
5d1f4f6
images - Subscribe Pop Up
Ancasab Jun 2, 2024
640b4d0
images-how-its-made-section
Ancasab Jun 2, 2024
60abe18
update package.js
Ancasab Jun 2, 2024
f809cfa
Test header
Ancasab Jun 2, 2024
e143390
edit
Teyo06 Jun 2, 2024
65c93cd
edit
Teyo06 Jun 2, 2024
606eb41
icons- svg
Ancasab Jun 3, 2024
b5785e4
header-desktop
Ancasab Jun 3, 2024
0d58e38
Merge pull request #4 from Ancasab/Teo
Ancasab Jun 3, 2024
8771b81
Ajustat html 4 Our Products, Subscribe, Tope Seller
Ancasab Jun 3, 2024
8666acb
delete fisierul de unique- components
Ancasab Jun 3, 2024
304fe60
task=unique-ingredients
ghvcbvvb Jun 3, 2024
391fccc
Blocked in progress
ghvcbvvb Jun 3, 2024
a035b4b
does not work
ghvcbvvb Jun 3, 2024
ac0bd27
task=how-is-made
ghvcbvvb Jun 4, 2024
a5fde61
Update unique-components.css
ghvcbvvb Jun 4, 2024
7a28d15
header - temporar
Ancasab Jun 4, 2024
1e3fcb8
task=unique-components
ghvcbvvb Jun 4, 2024
ce1311e
header -fara stilizare Menu
Ancasab Jun 4, 2024
9d10d43
added hero section
ARGFL Jun 4, 2024
5c019e0
draft fereastra menu
Ancasab Jun 4, 2024
88a13f1
Merge pull request #8 from Ancasab/feature/header
Ancasab Jun 4, 2024
4c06126
Merge pull request #7 from Ancasab/unique-components
Ancasab Jun 4, 2024
79ad24f
Merge pull request #6 from Ancasab/hm
Ancasab Jun 4, 2024
5f19612
header completed w menu
Ancasab Jun 4, 2024
a73389d
corectie header social media svg color
Ancasab Jun 4, 2024
f093c8f
footer html and draft css
Ancasab Jun 4, 2024
3f2eada
subscribe -Teo branch + footer
Ancasab Jun 5, 2024
9aed4b8
Fine tune footer
Ancasab Jun 5, 2024
6467809
advantages cod
ARGFL Jun 5, 2024
85d7e1d
update hero
ARGFL Jun 5, 2024
b282cba
Merge pull request #10 from Ancasab/feature/advantages
Ancasab Jun 5, 2024
72cfbb5
edit our products/top sellers/ subscribe
Teyo06 Jun 5, 2024
411a7a1
Merge pull request #11 from Ancasab/Our-products/top-sellers/subscribe-
Ancasab Jun 6, 2024
1c9b5d7
Adaugat margin-button pt toate sectiunile
Ancasab Jun 6, 2024
013aa5e
Subscribe.css - stilizare responsive
Ancasab Jun 6, 2024
6214e31
link-uri ancoră ce duc la secțiunile
Ancasab Jun 6, 2024
2ec8cdc
Update hero and index js link
ARGFL Jun 7, 2024
93f35bf
Merge branch 'main' into hero/updates
Ancasab Jun 7, 2024
bcdf21f
Merge pull request #12 from Ancasab/hero/updates
Ancasab Jun 7, 2024
14ab322
hero- as per Adina
Ancasab Jun 7, 2024
a6c91fe
final edit -our products
Teyo06 Jun 7, 2024
8b0c3d6
edit top sellers
Teyo06 Jun 9, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
301 changes: 266 additions & 35 deletions src/css/hero.css
Original file line number Diff line number Diff line change
@@ -6,22 +6,25 @@
padding: 0;
font: inherit;
}


img,picture,svg {
max-width: 100%;
display: block;
}
/* Hero section */
.section{
padding: 15px 20px;
}
.startpage_hero {
max-width: 1136px;
/* margin: 20px; */
padding: 2em;
margin: 0 auto;

padding: 40px;
margin: auto;
border-radius: 30px;
background-image:url(../images/[email protected]);
background-size:cover;
background-position: 50% 50%;


}

.container_hero {
@@ -39,19 +42,15 @@ img,picture,svg {
.startpage_butons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;

}

.buttons {
flex: 1;
/* display: flex; */
/* text-align: center; */
/* align-items: center; */
/* flex-wrap: wrap; */

flex: 1;
}

/* Buy now button */

.buynow_button {
display: inline-block;
@@ -62,17 +61,23 @@ img,picture,svg {
line-height:17px;
color: var(--white);
background-color:var(--orange);
cursor: pointer;

border-radius: 100px;
padding: 14px 40px;

padding: 14px 40px;
transition-property: color, background-color,transform;
transition-duration: 500ms, 500ms, 1s;
gap: 20px;
margin-right: 20px;
transition-duration: 400ms, 400ms, 1s;
gap: 20px;
margin-right: 20px;

}
.buynow_button:hover, .buynow_button:focus, .buynow_button:active {
background-color: rgba(252, 241, 224, 1);
color: var(--orange);
transform: scale(1.1);


}

/* Button link ancora to section How is made */
.btn_link{
display: inline-block;
text-decoration: none;
@@ -81,43 +86,269 @@ img,picture,svg {
font-size: 14px;
line-height:17px;
color: var(--white);
cursor: default;
padding: 14px 40px;
border-radius: 100px;
border: 1px solid rgba(255, 255, 255, 1) ;
border: 1px solid rgba(255, 255, 255, 1) ; }


.btn_link:hover {
background-color: var(--white);
color: var(--orange);
border: 1px solid var(--orange);
}

}

.scroll_link {
/* Icon scroll down */

.scroll_tolink_conainer {
flex: 0.25;
gap: 30px;
display: flex;
text-align: center;
align-items: center;
align-items: center;
}
.btn_scroll {
display: inline-block;


.text_buttonscroll {
text-decoration: none;
font-family:var(--primary-font);
font-weight: 500;
font-size: 14px;
line-height:18px;
letter-spacing: -3%;
color: var(--white);
/* padding-top: 14px; */
border-radius: 100px;
/* border: 1px solid rgba(255, 255, 255, 1) ; */

}
.scroll_link .scroll_icon {
width: 25px;
height: 25px;
background-color: var(--white);
.scroll_icon {
width: 40px;
height: 40px;
border-radius: 100%;
fill:var(--orange);
padding: 5px;
border-radius: 100%;
background-color: var(--white);
}
.team_social li {
background-color: var(--dark-white);
padding: 10px;
border-radius: 100%;
fill: #FD9222;
background-color: var(--white);
}


.scroll_tolink_conainer:hover .text_buttonscroll {
color: var(--orange);
}

.scroll_tolink_conainer:hover .scroll_icon {
fill:var(--white);
background-color: var(--orange);
}


/* Modal Buy Now */

.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;}

[data-modal] {
z-index: 2;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}

.is-hidden [data-modal-content] {
transform: translate(-50%, -50%) scale(0.5);

}

[data-modal-content] {
max-width: 600px;
background-color:#FAFAFA;
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
filter: drop-shadow(0,2,1,1),(0,1,1,0),(0,1,3,0);
border-radius: px;
transform: translate(-50%, -50%) scale(1);
transition-duration: 1s;
padding: 20px 40px;


}

[data-modal-close]{
top: 10px;
position: absolute;
right: 10px;
padding: 6px;
background-color: var(--white);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 90%;
color: rgba(0, 0, 0, 1);

}
/* Modal form products to buy top section */
.modal_title {
text-transform: uppercase;
color:var(--orange);
text-decoration: none;
font-family: var(--primary-font);
font-weight: 600;
font-size: 24px;
line-height:28px;
letter-spacing: -3%;
text-align: center;
padding: 1em;

}

.modal_title span {
color:var(--black);
text-decoration: none;
font-family: var(--primary-font);
font-weight: 600;
font-size: 24px;
line-height:28px;
letter-spacing: -3%;
}


.container_products_list {
padding: 1em;}

.products_list {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-content: center;
justify-content: center;
margin-top: 10px;
margin-bottom: 20px;
list-style: none;
}

.products_list li {
background-color: var(--white);
border-radius: 10px;
padding: 10px 10px;
}
.products_list .grams {
font-family: var(--primary-font);
font-weight: 600;
font-size:14px;
line-height: 17px;
color: var(--black);
background-color:rgba(250, 250, 250, 1);
margin-top: 10px;
margin-left: 25px;
text-align: center;
border: 1px solid rgba(17, 17, 17, 0.1);
border-radius: 100px;
padding: 6px 20px;

}

/* Modal form data collection */

.modal_form_position {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
gap: 1px;
font-family: var(--primary-font);
font-weight:500px;
font-size: 14px;
line-height: 18px;
letter-spacing: -2%;
color: var(--black);
position: relative;
margin-bottom: 20px;
}
.pers_info {
display: flex;
flex-wrap: wrap;
gap:22px
}

.modal_form_position .phone_icon {
position: absolute;
height: 32px;
width: 32px;
top: 40px;
left: 12px;
}
.modal_form_position .card_icon {
position: absolute;
height: 30px;
width: 44px;
top: 40px;
right: 12px;
}

.modal_form_input{
outline: none;
margin-top: 4px ;
border-radius: 13px;
height: 60px;
cursor: pointer;
border: 1.5px solid rgba(17, 17, 17, 0.05);
box-shadow: #000000;
padding-left: 12px;
gap:0px;
}
.modal_form_position input {
padding-left: 25px;
}
.modal_form_position .phone {
padding-left: 60px;
}

.modal_form_position input:focus + svg,
.modal_form_position input:hover + svg {
fill: #2196f3;
}
.modal_form_comments {
outline: none;
margin-top: 5px;
border-radius: 13px;
height: 35px;
cursor: pointer;
border: 1.5px solid rgba(17, 17, 17, 0.05);
padding-left:25px;
padding-top: 20px;
height: 137px;}




/* Button Submit close modal form */
.modal_form-btn {
display: flex;
justify-content: space-around;
align-items: center;
width: 140px;
height: 40px;
background-color: var(--orange);
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
outline: none;
border: none;
cursor: pointer;
color: var(--white);
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0.06em;
margin-top: 15px;
border-radius: 100px;
}

4 changes: 2 additions & 2 deletions src/images/icons.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading