Skip to content

WM4 - Alessandra_Sousa - HTML_CSS - Week 1 #549

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.

Sign up for GitHub

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

Open
AlessandraCYF wants to merge 14 commits into
base: master
Choose a base branch
from
Open

WM4 - Alessandra_Sousa - HTML_CSS - Week 1 #549

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b5c82f6
Nav_section_commit
AlessandraCYF Jul 3, 2022
719ccbd
tiles section commit
AlessandraCYF Jul 3, 2022
360c6f0
socials section commit
AlessandraCYF Jul 3, 2022
d0ee72d
footer section commit
AlessandraCYF Jul 3, 2022
747b84a
Testing Git/VS
AlessandraCYF Jan 4, 2023
01860e3
Almost all HTML
AlessandraCYF Jan 4, 2023
65f11d9
Nav styling
AlessandraCYF Jan 4, 2023
b664680
Photo section styling
AlessandraCYF Jan 4, 2023
d6887a1
Experience section
AlessandraCYF Jan 4, 2023
31df0a0
Corrected and completed
AlessandraCYF Jan 4, 2023
18b8e15
Setting up the store
AlessandraCYF Jan 5, 2023
fb4a752
Setting up store II
AlessandraCYF Jan 5, 2023
a2b6774
Finished project
AlessandraCYF Jan 5, 2023
8469353
Closed project
AlessandraCYF Jan 5, 2023
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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
338 changes: 338 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
...........................ALESSANDRA 2 ..................................

/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */

Expand All @@ -16,4 +17,341 @@ body {
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/

.body{
display: flex;
flex-direction: column;
}

/** Nav section*/
.nav{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
max-height: 5rem;
max-width: 100vmax;
justify-content: flex-end;
margin-bottom: 1.4rem;
}
.top-nav{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
max-height: 5rem;
max-width: 100vmax;
justify-content: flex-end;
background-color: #faf8f8;
padding-bottom: 1.5rem;
}
.main-menu{
margin: 17%;
}
.empty-menu{
margin: 4.5%;
}
.logo{
display: flex;
max-width: 2.5rem;
margin-top: 10px;
}
.nav-buttons{
background-color: rgb(251, 252, 246);
border: none;
margin: 1rem;
margin-top: 2.5rem;
color: rgb(146, 145, 145);
}

.nav-buttons:hover{
color: rgb(231, 121, 47);
}

#nav-meet{
color: black;
}

#nav-btn-meet:hover{
color: rgb(231, 121, 47);
}

/**Photo section*/
.photo{
display: flex;
height: 45rem;
width: 100vmax;
color: white;
flex-direction: column;
justify-content: center;
align-items: center;
}
.line1{
font-weight: 395;
font-size: 3rem;
}
.line2{
font-weight: 200;
font-size: 1.6rem;
}
.background-button{
margin-top: 2rem;
color: white;
background-color: #e0633a;
border-radius: 0.3rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 1.2rem;
padding-left: 1.2rem;
}
/**Tiles section*/
.tiles{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tile-box{
display: flex;
flex-direction: column;
height: 20rem;
width: 20rem;
justify-content: center;
align-items: center;
}
.tile-images{
height: 10rem;
width: 18rem;
}
.tile-text{
font-weight: 400;
font-size: 2rem;
}
.tile-container{
display: flex;
flex-direction: row;
}
#coffee-icon{
height: 20rem;
width: 30rem;
}
.liner{
font-weight: 200;
font-size: 3.3rem;
margin-top: 8rem;
}
/**Experience section*/
.experience-feature{
display: flex;
flex-direction: row;
}
.experience-text {
display: flex;
background-color: #fceeeb;
width: 100vw;
}
.experience-button{
color: white;
background-color: #e0633a;
border-color: transparent;
border-radius: 0.5rem;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
padding-right: 1.4rem;
padding-left: 1.4rem;
font-weight: 400;
font-size: 1.2rem;
margin-top: 3.5rem;
}
.experience-text{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.experience-epic-text{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 2.2rem;
}
.split-text{
margin: 0;
}
#split-text{
margin: 0;
margin-bottom: 1rem;
}
.quote{
font-size:3.5rem;
}

/**Store styling */
.form{
display: flex;
flex-direction: row;
}
.store-photo{
width: 50%;
}
.form-items{
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 1.5rem;
border-top: solid;
border-color: rgb(197, 192, 192);
}
.order-karma-title{
color: #e0633a;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 2.9rem;
margin-top: 6rem;
}
.order-form{
display: flex;
flex-direction: column;
}
.form-holder{
display: flex;
flex-direction: column;
font-size: 1em;
font-weight: 300;
margin-left: 1rem;
}
.store-space{
width: 2rem;
}
.form-input{
margin-bottom: 1.2rem;
font-size: 1.3rem;
}
#colour-selection{
margin-bottom: 1.2rem;
font-size: 1.4rem;
font-weight: 300;
border-color:transparent;
margin-left:0;
}
.radio-label{
font-size: 1.4rem;
}
.form-line{
display: flex;
flex-direction: row;
padding-top: 3rem;
}
.radio-buttons{
display: flex;
}
.radio-label-holder{
width: 16rem;

}
.checkbox-button{
height: 0.9rem;
width: 0.9rem;
margin-right: 0.4rem;
}
#checkbox-items{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-left: 1rem;
}
.terms{
line-height: 2.3rem;
font-size: 1.2rem;
font-weight: 300;
}
.place-order-button{
color: white;
background-color: #e0633a;
border-color: transparent;
border-radius: 0.2rem;
padding-top: 1.1rem;
padding-bottom: 1.1rem;
padding-right: 1.8rem;
padding-left: 1.8rem;
font-weight: 400;
font-size: 1.4rem;
margin-bottom: 2rem;
margin-left: 1.7rem;
}
#place-order-button{
display: flex;
flex-direction: row;
padding-top: 1rem;
}
#city{
padding-right: 4rem;
padding-top: 0.15rem;
padding-bottom: 0.15rem;
padding-left: 0.2rem;
}
.address{
width: 30vw;
height: 4vh;
border-radius: 0.05rem;
}
#firstname{
height: 4vh;
border-radius: 0.05rem;
}
#lastname{
height: 4vh;
width: 13.45rem;
border-radius: 0.05rem;
}
#city{
border-width: 0.14rem;
border-color: black;
height: 2.2rem;
}
#postcode{
border-radius: 0.05rem;
height: 3.8vh;
width: 12.1rem;
}

/**Footer section*/
.footer{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer-icons{
display: flex;
}
.footer-line {
display: flex;
border-top: solid;
width: 87em;
justify-content: center;
align-items: center;
margin-top: 4rem;
margin-bottom: 1rem;
color: rgb(212, 212, 212);
}
.footer-text{
font-weight: 400;
font-size: 1.9rem;
}
.social-icons{
height: 2rem;
width: 2rem;
border: solid;
color: rgb(212, 212, 212);
border-radius: 50%;
padding: 1.4rem;
margin-left: 1.6rem;
}
.copyright{
color: rgb(177, 176, 176);
margin-top: 2.2rem;
margin-bottom: 5rem;
}
3 changes: 3 additions & 0 deletions img/checkmark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/homepage-feature.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/store-image_by-andrew-neel-unsplash.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading