diff --git a/practice/practice-01/src/index.html b/practice/practice-01/src/index.html index fa2cfd4..c9fe985 100644 --- a/practice/practice-01/src/index.html +++ b/practice/practice-01/src/index.html @@ -11,22 +11,34 @@
Welcome
+
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? 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..3bc16e3 --- /dev/null +++ b/practice/practice-01/src/style/base/typo.css @@ -0,0 +1,24 @@ +@font-face { + font-family: CrimsonText-Regular; + src: url(../../font/CrimsonText-Regular.ttf); + } + + @font-face { + font-family: CrimsonText-700; + src: url(../../font/CrimsonText-700.ttf); + } + + @font-face { + font-family: WorkSans-500; + src: url(../../font/WorkSans-500.ttf); + } + + @font-face { + font-family: WorkSans-700; + src: url(../../font/WorkSans-700.ttf); + } + + @font-face { + font-family: WorkSans-Regular; + src: url(../../font/WorkSans-Regular.ttf); + } \ No newline at end of file diff --git a/practice/practice-01/src/style/main.css b/practice/practice-01/src/style/main.css index dc4d403..631e953 100644 --- a/practice/practice-01/src/style/main.css +++ b/practice/practice-01/src/style/main.css @@ -1,35 +1,11 @@ @import url("./abstracts/variables.css"); - -@font-face { - font-family: CrimsonText-Regular; - src: url(../font/CrimsonText-Regular.ttf); -} - -@font-face { - font-family: CrimsonText-700; - src: url(../font/CrimsonText-700.ttf); -} - -@font-face { - font-family: WorkSans-500; - src: url(../font/WorkSans-500.ttf); -} - -@font-face { - font-family: WorkSans-700; - src: url(../font/WorkSans-700.ttf); -} - -@font-face { - font-family: WorkSans-Regular; - src: url(../font/WorkSans-Regular.ttf); -} +@import url("./base/typo.css"); .header__background { background-color: var(--primary-color); } -header { +.container { display: flex; width: 1175px; align-items: center; @@ -38,30 +14,31 @@ header { padding-bottom: 40px; margin: auto; color: var(--white); - cursor: pointer; font-family: var(--ff-worksans-regular); font-size: 20px; } -.link { - transition: 0.3s; -} - -.link:hover { - color: var(--text-dark); -} - .logo { cursor: pointer; } -.nav__links { +.nav__lists { list-style: none; display: flex; justify-content: space-between; gap: 30px; } +.nav__items-link { + text-decoration: none; + color: var(--white); + transition: 0.3s; +} + +.nav__items-link:hover { + color: var(--text-dark); +} + .welcome__container { margin: auto; width: 1180px; @@ -76,7 +53,7 @@ header { height: 378.13px; } -.welcome__content > p:first-child { +.welcome__content > p { font-size: 16px; font-family: var(--ff-worksans-700); letter-spacing: 5px; @@ -93,8 +70,10 @@ header { margin-bottom: 15px; } -.welcome__content .text__description { +.welcome__content .welcome__description { + text-transform: none; font-size: 15px; + letter-spacing: 0px; font-family: var(--ff-worksans-regular); line-height: 125%; color: var(--white);