-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
project-2 (portfolio site) project build
- Loading branch information
1 parent
d09d133
commit 37f076c
Showing
11 changed files
with
389 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <!-- webpage title --> | ||
| <title>CSS Media Queries / 02</title> | ||
| <!-- external SASS --> | ||
| <link rel="stylesheet" href="./src/style/sass/style.css" /> | ||
| <!-- favicon --> | ||
| <link rel="shortcut icon" href="./public/favicon.ico" type="image/x-icon" /> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <!-- header section --> | ||
| <div class="header"> | ||
| <div class="header__logo">Miya Ruma</div> | ||
|
|
||
| <div class="header__menu"> | ||
| <div class="header__menu-1">Home</div> | ||
| <div class="header__menu-2">Portfolio</div> | ||
| <div class="header__menu-3">Contact</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- main section --> | ||
| <div class="main"> | ||
| <div class="main__image"></div> | ||
|
|
||
| <div class="main__text"> | ||
| <div class="main__text-1">Hello 👋</div> | ||
| <div class="main__text-2">I'm <span>Miya Ruma</span></div> | ||
| <div class="main__text-3">A Designer From</div> | ||
| <div class="main__text-4">Tokay, Japan</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- footer section --> | ||
| <div class="footer"> | ||
| <div class="footer__instagram"> | ||
| <img src="./public/assets/images/instagram.png" alt="social-icon" /> | ||
| </div> | ||
| <div class="footer__twitter"> | ||
| <img src="./public/assets/images/twitter-sign.png" alt="social-icon" /> | ||
| </div> | ||
| <div class="footer__dribbble"> | ||
| <img src="./public/assets/images/dribbble-logo.png" alt="social-icon" /> | ||
| </div> | ||
| <div class="footer__behance"> | ||
| <img src="./public/assets/images/behance.png" alt="social-icon" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
/public/assets/images/Portrait.png){kind=link}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
/public/assets/images/behance.png){kind=link}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
/public/assets/images/dribbble-logo.png){kind=link}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
/public/assets/images/instagram.png){kind=link}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
/public/assets/images/twitter-sign.png){kind=link}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
11 changes: 11 additions & 0 deletions
11
2_Project-02 (PORTFOLIO SITE)/src/style/sass/include/_universal-selectors.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| * { | ||
| padding: 0; | ||
| margin: 0 auto; | ||
| box-sizing: border-box; | ||
| } | ||
| html { | ||
| scroll-behavior: smooth; | ||
| } | ||
| body { | ||
| font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
10 changes: 10 additions & 0 deletions
10
2_Project-02 (PORTFOLIO SITE)/src/style/sass/style.css.map
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
138 changes: 138 additions & 0 deletions
138
2_Project-02 (PORTFOLIO SITE)/src/style/sass/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| // include partials | ||
| @import "./include/universal-selectors"; | ||
|
|
||
| .container { | ||
| width: 90vw; | ||
| height: 100vh; | ||
|
|
||
| // header section | ||
| .header { | ||
| height: 10%; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
|
|
||
| &__logo { | ||
| font-size: 3vw; | ||
| } | ||
|
|
||
| &__menu { | ||
| display: flex; | ||
| flex-direction: row; | ||
| font-size: 1.5vw; | ||
| gap: 15px; | ||
| } | ||
| } | ||
|
|
||
| // main section | ||
| .main { | ||
| height: 80%; | ||
| display: flex; | ||
| flex-direction: row; | ||
|
|
||
| &__image { | ||
| width: 50%; | ||
| background-image: url("./../../../public/assets/images/Portrait.png"); | ||
| background-position: left center; | ||
| background-repeat: no-repeat; | ||
| background-size: contain; | ||
| } | ||
|
|
||
| &__text { | ||
| width: 50%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| &-1 { | ||
| font-size: 10vw; | ||
| } | ||
| &-2, | ||
| &-3, | ||
| &-4 { | ||
| font-size: 5vw; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // footer section | ||
| .footer { | ||
| height: 10%; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| [class^="footer__"] { | ||
| img { | ||
| width: 4vw; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // media queries apply | ||
| @media (max-width: 650px) { | ||
| .container { | ||
| // header section | ||
| .header { | ||
| justify-content: center; | ||
|
|
||
| &__logo { | ||
| font-size: 40px; | ||
| } | ||
|
|
||
| &__menu { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| // main section | ||
| .main { | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| &__image { | ||
| width: 200px; | ||
| height: 200px; | ||
| border-radius: 100%; | ||
| -webkit-border-radius: 100%; | ||
| -moz-border-radius: 100%; | ||
| -ms-border-radius: 100%; | ||
| -o-border-radius: 100%; | ||
| background-size: 100%; | ||
| background-position: center; | ||
| } | ||
|
|
||
| &__text { | ||
| width: 100%; | ||
|
|
||
| &-1 { | ||
| display: none; | ||
| } | ||
| &-2, | ||
| &-3, | ||
| &-4 { | ||
| font-size: 30px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // footer section | ||
| .footer { | ||
| margin: 0; | ||
| justify-content: center; | ||
|
|
||
| // footer image | ||
| [class^="footer__"] { | ||
| img { | ||
| width: 45px; | ||
| height: 45px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |