diff --git a/practice/practice-01/src/assets/images/header-image.png b/practice/practice-01/src/assets/images/header-image.png new file mode 100644 index 0000000..1c4e9d7 Binary files /dev/null and b/practice/practice-01/src/assets/images/header-image.png differ diff --git a/practice/practice-01/src/assets/images/logo.svg b/practice/practice-01/src/assets/images/logo.svg new file mode 100644 index 0000000..af54b9d --- /dev/null +++ b/practice/practice-01/src/assets/images/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/practice/practice-01/src/index.html b/practice/practice-01/src/index.html index e69de29..f6317f5 100644 --- a/practice/practice-01/src/index.html +++ b/practice/practice-01/src/index.html @@ -0,0 +1,56 @@ + + + + + + Practice 01 + + + + +
+ +
+
+ + +
+
+ +
+
+ Welcome +

+ Lorem ipsum dolor sit amet consectetur +

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit + nemo hic quos, ab, dolor aperiam nobis cum est eos error ipsum, + voluptate culpa nesciunt delectus iste? +

+ Explore +
+ Header Image +
+
+ + diff --git a/practice/practice-01/src/style/abstracts/variables.css b/practice/practice-01/src/style/abstracts/variables.css index e69de29..3350b4b 100644 --- a/practice/practice-01/src/style/abstracts/variables.css +++ b/practice/practice-01/src/style/abstracts/variables.css @@ -0,0 +1,14 @@ +:root { + --primary-color: #74c69d; + --text-dark: #d6d6d6; + --white: #ffffff; + --black: #000000; + --fs-sm: 15px; + --fs-md: 20px; + --fs-lg: 40px; + --ff-secondary-regular: CrimsonText-Regular; + --ff-secondary-bold: CrimsonText-Bold; + --ff-primary-medium: WorkSans-Medium; + --ff-primary-bold: WorkSans-Bold; + --ff-primary-regular: WorkSans-Regular; +} diff --git a/practice/practice-01/src/style/base/typo.css b/practice/practice-01/src/style/base/typo.css new file mode 100644 index 0000000..2a0ae5f --- /dev/null +++ b/practice/practice-01/src/style/base/typo.css @@ -0,0 +1,25 @@ +@font-face { + font-family: CrimsonText-Regular; + src: url(../../font/CrimsonText-Regular.ttf); +} + +@font-face { + font-family: CrimsonText-Bold; + src: url(../../font/CrimsonText-700.ttf); + font-weight: 700; +} + +@font-face { + font-family: WorkSans-Medium; + src: url(../../font/WorkSans-500.ttf); +} + +@font-face { + font-family: WorkSans-Bold; + src: url(../../font/WorkSans-700.ttf); +} + +@font-face { + font-family: WorkSans-Regular; + src: url(../../font/WorkSans-Regular.ttf); +} diff --git a/practice/practice-01/src/style/main.css b/practice/practice-01/src/style/main.css new file mode 100644 index 0000000..7620ecf --- /dev/null +++ b/practice/practice-01/src/style/main.css @@ -0,0 +1,114 @@ +@import url("./abstracts/variables.css"); +@import url("./base/typo.css"); + +.header__background { + background-color: var(--primary-color); +} + +.container { + display: flex; + width: 1175px; + align-items: center; + justify-content: space-between; + padding-top: 35px; + padding-bottom: 40px; + margin: auto; + color: var(--white); + font-family: var(--ff-primary-regular); + font-size: var(--fs-md); +} + +.logo { + cursor: pointer; +} + +.nav__lists { + list-style: none; + display: flex; + justify-content: space-between; + gap: 30px; +} + +.nav__item-link { + text-decoration: none; + color: var(--white); + transition: 0.3s; +} + +.nav__item-link:hover { + color: var(--text-dark); +} + +.welcome { + margin: auto; + width: 1180px; + display: flex; + gap: 120px; + padding-bottom: 82.87px; + align-items: center; +} + +.welcome__content { + display: flex; + flex-direction: column; + gap: 15px; +} + +.welcome__image { + width: 644.279px; + height: 378.13px; +} + +.welcome__title { + font-family: var(--ff-primary-bold); + letter-spacing: 5px; + text-transform: uppercase; + color: var(--white); +} + +.welcome__heading { + font-size: var(--fs-lg); + font-family: var(--ff-secondary-bold); + line-height: 125%; + color: var(--white); +} + +.welcome__description { + text-transform: none; + font-size: var(--fs-sm); + letter-spacing: 0px; + font-family: var(--ff-primary-regular); + line-height: 125%; + color: var(--white); + margin-bottom: 25px; +} + +.btn { + /* Display & Box Models */ + border-radius: 5px; + display: flex; + align-items: center; + justify-content: center; + width: 170px; + height: 48px; + border: none; + + /* Color */ + color: var(--black); + background-color: var(--white); + + /* Text */ + font-family: var(--ff-primary-regular); + font-size: var(--fs-md); + text-decoration: none; + line-height: 125%; + + /* Other */ + cursor: pointer; + transition: 0.2s; +} + +.btn:hover { + background-color: var(--black); + color: var(--white); +} diff --git a/practice/practice-01/src/style/style.css b/practice/practice-01/src/style/style.css deleted file mode 100644 index e69de29..0000000