Skip to content

Scotland class 5 - Ivan Zhukov - HTML/CSS - Week 2 #216

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

Closed
zhkvivan wants to merge 14 commits into from
Closed

Scotland class 5 - Ivan Zhukov - HTML/CSS - Week 2 #216

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
c45b155
creating branch
zhkvivan Jun 8, 2021
ecd5dcb
addding h1
zhkvivan Jun 8, 2021
5a7e429
adding some text
zhkvivan Jun 8, 2021
2c047b1
html mobile
zhkvivan Jun 8, 2021
e2e43a9
created features section
zhkvivan Jun 9, 2021
c4bf1cd
mobile finished
zhkvivan Jun 9, 2021
b2fc185
adding additional section
zhkvivan Jun 9, 2021
986b3c7
menu is created
zhkvivan Jun 10, 2021
dba82be
created responsive burger menu
zhkvivan Jun 10, 2021
e520bc9
open/close menu fixing
zhkvivan Jun 10, 2021
d0215b0
adding footer links and button hovers
zhkvivan Jun 10, 2021
99e61f8
adding copyright symbol into footer
zhkvivan Jun 10, 2021
bd9c433
fixing paths
zhkvivan Jun 12, 2021
26fed9f
adding transition to menu
zhkvivan Jun 17, 2021
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
297 changes: 297 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,302 @@ body {
*
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/
html {
font-weight: 200;
}


.container {
max-width: 800px;
margin: 0px auto;
padding: 0 15px;
text-align: center;
}

button {
background-color: #F15A29;
border: none;
border-radius: 3px;
padding: 10px 15px;
margin-top: 10px;
transition: .5s all;
}

button:hover {
background-color: #b43106;
}

header {
background: url(../img/first-background.jpg) 70% 50%/cover no-repeat;
color: #fff;
}



header .container {
padding: 20vw 15px;
}


.nav-menu ul {
display: flex;
flex-direction: row;
margin-left: 0;
padding-left: 0;
}

.nav-menu__item {
list-style-type: none;
margin: 0px 10px;
}

.nav-menu__item-link {
color:rgb(73, 73, 73);
text-decoration: none;
}

.nav-menu__item:first-child {
font-weight: 500;
}

.nav-menu__item-link:hover {
color:#F15A29;
}

.nav {
color: black;
text-align: right;
line-height: 50px;
}

.nav-menu ul {
margin: 0;
}

.nav a {
line-height: 50px;
}

.nav label {
font-size: 26px;
line-height: 50px;
display: none;
}

#toggle {
display: none;
}

.header-wrap {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px 15vw;
}

.navbar {
height: 50px;
background-color: #fff;
}

.navbar-body {
display: flex;
justify-content: space-between;
align-items: flex-start;
height: 100%;
padding: 0 15px;
max-width: 800px;
margin: 0px auto;
}

#logo {
width: 20px;
margin-top: 10px;
}

.burger-menu__icon {
width: 20px;
height: 2px;
background-color: black;
margin: 5px 0;
}



h1 {
font-weight: 200;
margin-bottom: 0px;
}

h2 {
font-weight: 200;
}

.features {
padding: 30px 0;
}

.features__wrap {
display: flex;
flex-flow: row wrap;
justify-content: center;
}

.features__element {
width: 200px;
margin: 20px;
}

.features__img {
width: 50px;
}

.photo-quote {
margin-bottom: 50px;
}

.photo-quote__wrap {
display: flex;
flex-direction: space-between;
}

.photo-quote__img {
background: url(../additional/feature-img.png) 0 0/cover no-repeat;
height: 400px;
width: 45%;
}

.photo-quote__content {
background-color: #FCEFEB;
width: 55%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.photo-quote__quote {
text-align: center;
font-size: 24px;
max-width: 300px;
font-style: italic;
font-weight: normal;
color:rgb(73, 73, 73)
}

.photo-quote button {
color: white;
}

hr {
width: 90%;
border: 0;
height: 1px;
background-color: rgb(234, 234, 234);
}

footer p {
font-size: 12px;
}

.rights {
font-size: 10px;
color:rgb(102, 101, 101)
}

.social-wrap {
display: flex;
justify-content: center;
align-items: center;
}

.social-wrap a {
border: 1px solid rgb(234, 234, 234);
border-radius: 50%;
margin: 0 5px;
padding: 10px;
width: 15px;
height: 15px;
}

.social-img {
width: 15px;
height: 15px;
}

@media screen and (min-width: 769px) {
header .container {
padding: 15vw 15px;
}

header p {
margin-bottom: 30px;
}

.header-wrap {
padding: 0px;
}

/* .burger-menu {
display: none;
} */


}

@media screen and (max-width: 769px) {
.photo-quote {
display: none;
}

.nav label {
display: inline-block;
cursor: pointer;
margin-right: 15px;
}

.nav-menu {
text-align: center;
width: 100%;
margin-top: -5px;
}

.nav-menu ul {
flex-direction: column;
display: flex;
background-color: #fff;
width: 100%;
position: absolute;
transform: translate(0, -420px);
transition: transform 0.3s ease;
}

.nav-menu li {
margin: 5px 0;
}

.nav {
position: absolute;
right: 0px;
width: 100%;
}

#toggle-close {
display: none;
}

#toggle:checked ~ .nav-menu ul {
/* display: flex; */
transform: translate(0, 0px);
}

#toggle:checked ~ #toggle-close {
display: inline-block;
}

#toggle:checked ~ #toggle-open {
display: none;
}

}

Loading