diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md deleted file mode 100644 index 957227d..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# Web Basics Project diff --git a/about.html b/about.html new file mode 100644 index 0000000..8b01eef --- /dev/null +++ b/about.html @@ -0,0 +1,130 @@ + + + + + + + About Page + + +
+
+
+ +
Documentation
+ +
+
+ +
About
+ +
+
+ +
Research
+ +
+
+ +
Photography
+ +
+
+
+ +
+
+
+

About

+
+
+

+ Lorem proident incididunt esse eiusmod reprehenderit culpa irure. Duis sint excepteur sit in sit id magna non ullamco ad incididunt quis. +

+ Ea minim exercitation excepteur proident culpa minim exercitation do anim ut dolore non dolore qui pariatur. Sit aliqua est eiusmod ipsum elit deserunt dolore ut nulla occaecat. Sunt velit aute dolore minim fugiat in duis eu Lorem velit nulla. +

+
+
+ +
+
+
No.
+
Project
+
Client
+
Categories
+
+ +
+
1
+
Tobias Grau Case-study
+
Art Direction, CGI
+
Self-initiated
+
+
+
10
+
Lab Archiv
+
Website, Pictograms
+
Self-initiated
+
+
+
11
+
Twenty-by Thirty
+
Art Direction, Photography
+
Self-initiated
+
+
+
12
+
Pigment Lab
+
Website, Pictograms
+
Self-initiated
+
+
+
13
+
Spurious Concomitant Reality
+
Wayfinding
+
Self-initiated
+
+
+
14
+
Wevie Dimascus
+
Graphics, Social Content
+
Self-initiated
+
+
+
15
+
Analog and Digital
+
Presentation, Photography
+
Self-initiated
+
+
+
16
+
Be Not Afraid OZU Was Right
+
Title Design
+
Self-initiated
+
+
+
17
+
Terra Kaffe
+
Art Direction, Brand Identity
+
Terra Kaffe
+
+
+
18
+
Care Assist
+
Brand Identity, Website
+
Sanofi
+
+
+
+ + +
+ + diff --git a/css/.DS_Store b/css/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/css/.DS_Store differ diff --git a/css/globals.css b/css/globals.css new file mode 100644 index 0000000..621dfb9 --- /dev/null +++ b/css/globals.css @@ -0,0 +1,178 @@ + +@font-face { + font-family: "DIN Next LT Pro-Bold"; + font-style: normal; + font-weight: 700; + src: url("../fonts/DINNextLTPro-Bold.otf") format("opentype"); +} +@font-face { + font-family: "DIN Next LT Pro-Regular"; + font-style: normal; + font-weight: 400; + src: url("../fonts/DINNextLTPro-Regular.otf") format("opentype"); +} + + +.page a { + display: contents; + text-decoration: none; +} + +.description { + flex-direction: column; + justify-content: center; +} + +* { + box-sizing: border-box; + color: wheat; + font-family: DIN Next LT Pro-Regular +} + +.nav-content { + align-self: stretch; + background-color: var(--vulcan); + border-bottom-style: solid; + border-bottom-width: 1px; + border-color: var(--abbey); + display: flex; + height: 48px; + padding: 0px 0px 1px; + width: 100vw; +} + +.nav-home { + gap: 3.4px; + height: 47px; + padding: 13.25px 34px 13.5px 18px; +} + +.home-link { + letter-spacing: 0.16px; + line-height: 20px; + margin-top: -0.88px; + position: relative; + white-space: nowrap; + width: fit-content; + font-family: DIN Next LT Pro-Regular; +} + +.menubar { + position: relative; +} + +.heading-top { + gap: 10px; + justify-content: center; + position: relative; + width: 100vw; + padding: 33; +} + +.heading-top {} + +.frame-7 { + align-items: center; + gap: 10px; + justify-content: center; + position: relative; +} + +.card-content { + gap: 16px; + /* padding: 0px 32px; */ + width: 100vw; +} + +.card-heading { + justify-content: space-between; + padding: 0px 17px 32px; + width: 100%; +} + +.title { + position: relative; +} + +.title-1 { + letter-spacing: 0.16px; + line-height: 18px; + margin-top: -1.00px; + position: relative; + white-space: nowrap; + width: fit-content; + font-family: DIN Next LT Pro-Regular +} + +.icon { + height: 8.18px; + position: relative; + width: 8.18px; +} + +.footer { + border-bottom-style: none; + border-left-style: none; + border-right-style: none; + border-top-style: solid; + border-top-width: 1px; + gap: 40px; + height: 61px; + padding: 21px 32px 20px; + position: relative; + width: 100vw; + font-family: DIN Next LT Pro-Regular +} + +.footer-link { + justify-content: center; + position: relative; +} + +.footer-text { + letter-spacing: 0.16px; + line-height: 20px; + margin-top: -1.00px; + position: relative; + white-space: nowrap; + width: fit-content; +} + +.card-2 { + display: flex; + position: relative; + flex-wrap: wrap; +} + +.nav { + align-items: center; + position: relative; +} + +.nav-link { + justify-content: center; + position: relative; + color: white; + padding: 30px 30px 30px 0px; +} + +.nav-text { + width: 100%; +} + +.text { + letter-spacing: 0.16px; + line-height: 20px; + margin-top: -2.00px; + position: relative; + white-space: nowrap; + width: fit-content; +} + + +.listing-heading { + gap: 54px; + padding: 30px 0px; + position: relative; + width: 100%; +} diff --git a/css/stylesheet.css b/css/stylesheet.css new file mode 100644 index 0000000..efa2c12 --- /dev/null +++ b/css/stylesheet.css @@ -0,0 +1,233 @@ +/* Page - Homepage */ + +body { + margin: 0; + background: #121619; +} +.table { + display: table; + width: 50%; + border-collapse: collapse; + padding: 32px 0px 0px; + position: relative; +} +.table-row { + display: table-row; +} +.table-cell { + display: table-cell; + padding: 8px; + border: 1px solid #bdbdbd; + background-color: #21272A; + color: #ffffff; + font-family: "DIN Next LT Pro", sans-serif; +} +.table-header { + font-weight: bold; + color: rgb(255, 255, 255); + font-family: "DIN Next LT Pro", sans-serif; +} + +.homepage .photography .research{ + align-items: flex-start; + display: flex; + flex-direction: column; + position: relative; + width: 100vw; +} + +.homepage .divider { + height: 24px; + position: relative; + top: calc(50.00% - 12px); + width: 1px; +} + +.homepage .content { + align-items: flex-start; + align-self: stretch; + display: flex; + flex-direction: column; + height: 831px; + padding: 32px 32px 0px; + position: relative; + width: 100vw; +} + +.homepage .heading { + /* height: 140px; */ + letter-spacing: 0.16px; + line-height: 20px; + margin-top: -1.00px; + position: relative; + font-family: DIN Next LT Pro-Regular +} + +.homepage .body { + letter-spacing: 0.16px; + line-height: 20px; + margin-top: -1.00px; + position: relative; + width: 552.77px; + font-family: DIN Next LT Pro-Regular +} + +.homepage .card { + align-items: flex-start; + border-radius: 4px; + flex-direction: column; + gap: 24px; + height: 320px; + max-height: 320px; + padding: 16px 0px 8px; + width: 332px; + background-color:#353535 +} + +.homepage .card-1 { + align-items: flex-start; + background-color: #00000080; + background-image: url(../img/card-1@2x.png); + background-position: 50% 50%; + background-size: cover; + border-radius: 4px; + flex-direction: column; + gap: 24px; + height: 320px; + max-height: 320px; + padding: 16px 0px 8px; + width: 332px; +} +.homepage .card-3 { + align-items: flex-start; + background-color: #00000080; + background-image: url(../img/card-1@2x.png); + background-position: 50% 50%; + background-size: cover; + border-radius: 4px; + flex-direction: column; + gap: 24px; + height: 320px; + max-height: 320px; + padding: 16px 0px 8px; + width: 332px; +} +.homepage .card-4 { + align-items: flex-start; + background-color: #00000080; + background-image: url(../img/image-3@2x.png); + background-position: 50% 50%; + background-size: cover; + border-radius: 4px; + flex-direction: column; + gap: 24px; + height: 320px; + max-height: 320px; + padding: 16px 0px 8px; + width: 332px; +} +.homepage .card-5 { + align-items: flex-start; + background-color: #00000080; + background-image: url(../img/image-4@2x.png); + background-position: 50% 50%; + background-size: cover; + border-radius: 4px; + flex-direction: column; + gap: 24px; + height: 320px; + max-height: 320px; + padding: 16px 0px 8px; + width: 332px; +} +.homepage .card-6 { + align-items: flex-start; + background-color: #00000080; + background-image: url(../img/image-1@2x.png); + background-position: 50% 50%; + background-size: cover; + border-radius: 4px; + flex-direction: column; + gap: 24px; + height: 320px; + max-height: 320px; + padding: 16px 0px 8px; + width: 332px; +} + +.card-6.card-2 {} + +.card-6.card-2 {} +.homepage .card-7 { + align-items: flex-start; + background-color: #00000080; + background-image: url(../img/image-2@2x.png); + background-position: 50% 50%; + background-size: cover; + border-radius: 4px; + flex-direction: column; + gap: 24px; + height: 320px; + max-height: 320px; + padding: 16px 0px 8px; + width: 332px; +} +.homepage .card-7 { + align-items: flex-start; + background-color: #00000080; + background-image: url(../img/card-letter-01.png); + background-position: 50% 50%; + background-size: cover; + border-radius: 4px; + flex-direction: column; + gap: 24px; + height: 320px; + max-height: 320px; + padding: 16px 0px 8px; + width: 332px; +} +.homepage .card-7 { + align-items: flex-start; + background-color: #00000080; + background-image: url(../img/card-letter-01.png); + background-position: 50% 50%; + background-size: cover; + border-radius: 4px; + flex-direction: column; + gap: 24px; + height: 320px; + max-height: 320px; + padding: 16px 0px 8px; + width: 332px; +} +.homepage .card-8 { + align-items: flex-start; + background-color: #00000080; + background-image: url(../img/card-letter-02.png); + background-position: 50% 50%; + background-size: cover; + border-radius: 4px; + flex-direction: column; + gap: 24px; + height: 320px; + max-height: 320px; + padding: 16px 0px 8px; + width: 332px; +} +.homepage .card-9 { + align-items: flex-start; + background-color: #00000080; + background-image: url(../img/image-2@2x.png); + background-position: 50% 50%; + background-size: cover; + border-radius: 4px; + flex-direction: column; + gap: 24px; + height: 320px; + max-height: 320px; + padding: 16px 0px 8px; + width: 332px; +} + + + diff --git a/fonts/DINNextLTPro-Bold.otf b/fonts/DINNextLTPro-Bold.otf new file mode 100644 index 0000000..c8990e5 Binary files /dev/null and b/fonts/DINNextLTPro-Bold.otf differ diff --git a/fonts/DINNextLTPro-Regular.otf b/fonts/DINNextLTPro-Regular.otf new file mode 100644 index 0000000..d05eeca Binary files /dev/null and b/fonts/DINNextLTPro-Regular.otf differ diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..eff8e8f Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/card-1@2x.png b/img/card-1@2x.png new file mode 100644 index 0000000..4588c18 Binary files /dev/null and b/img/card-1@2x.png differ diff --git a/img/card-letter-01.png b/img/card-letter-01.png new file mode 100644 index 0000000..59b4e4c Binary files /dev/null and b/img/card-letter-01.png differ diff --git a/img/card-letter-02.png b/img/card-letter-02.png new file mode 100644 index 0000000..df8eb3c Binary files /dev/null and b/img/card-letter-02.png differ diff --git a/img/card@2x.png b/img/card@2x.png new file mode 100644 index 0000000..dedfbb4 Binary files /dev/null and b/img/card@2x.png differ diff --git a/img/icon@2x.png b/img/icon@2x.png new file mode 100644 index 0000000..d767417 Binary files /dev/null and b/img/icon@2x.png differ diff --git a/img/image-1@2x.png b/img/image-1@2x.png new file mode 100644 index 0000000..e4dfc29 Binary files /dev/null and b/img/image-1@2x.png differ diff --git a/img/image-2@2x.png b/img/image-2@2x.png new file mode 100644 index 0000000..a504979 Binary files /dev/null and b/img/image-2@2x.png differ diff --git a/img/image-3@2x.png b/img/image-3@2x.png new file mode 100644 index 0000000..ab523ff Binary files /dev/null and b/img/image-3@2x.png differ diff --git a/img/image-4@2x.png b/img/image-4@2x.png new file mode 100644 index 0000000..648833a Binary files /dev/null and b/img/image-4@2x.png differ diff --git a/index.html b/index.html index dc1a237..3255e43 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,76 @@ + + + + + + + + Home Page + + +
+
+
+ +
Documentation
+ +
+
+
+
+
- - - - -My great - -

Hello World

-

This is my first web page

-

By Adonis Fuentes

- +
+
+
+

Home

+
+
+

+ Lorem proident incididunt esse eiusmod reprehenderit culpa irure. Duis sint excepteur sit in sit id magna non ullamco ad incididunt quis. +

+ Ea minim exercitation excepteur proident culpa minim exercitation do anim ut dolore non dolore qui pariatur. Sit aliqua est eiusmod ipsum elit deserunt dolore ut nulla occaecat. Sunt velit aute dolore minim fugiat in duis eu Lorem velit nulla. +

+
+
+ +
+
+
+
+
About
+
+ icon +
+
+ +
+
+
+
Research
+
+ icon +
+
+ +
+
+
+
Photography
+
+ icon +
+
+
+
+ + +
+ + \ No newline at end of file diff --git a/photography.html b/photography.html new file mode 100644 index 0000000..b6ccb0d --- /dev/null +++ b/photography.html @@ -0,0 +1,74 @@ + + + + + + + + +
+
+
+ +
Documentation
+ +
+
+ +
About
+ +
+
+ +
Research
+ +
+
+ +
Photography
+ +
+
+
+
+
+
+

Photography

+
+

+ Lorem proident incididunt esse eiusmod reprehenderit culpa irure. Duis sint excepteur sit in sit id magna + non ullamco ad incididunt quis.

Ea minim exercitation excepteur proident culpa minim + exercitation do anim ut dolore non dolore qui pariatur. Sit aliqua est eiusmod ipsum elit deserunt dolore + ut nulla occaecat. Sunt velit aute dolore minim fugiat in duis eu Lorem velit nulla. +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + diff --git a/research.html b/research.html new file mode 100644 index 0000000..0f2d049 --- /dev/null +++ b/research.html @@ -0,0 +1,68 @@ + + + + + + + NYPL Letters + + +
+
+
+ +
Documentation
+ +
+
+ +
About
+ +
+
+ +
Research
+ +
+
+ +
Photography
+ +
+
+
+
+
+
+

NYPL Letters

+
+
+

+ Lorem proident incididunt esse eiusmod reprehenderit culpa irure. Duis sint excepteur sit in sit id magna + non ullamco ad incididunt quis.

+ Ea minim exercitation excepteur proident culpa minim exercitation do anim ut dolore non dolore qui + pariatur. Sit aliqua est eiusmod ipsum elit deserunt dolore ut nulla occaecat. Sunt velit aute dolore minim + fugiat in duis eu Lorem velit nulla. +

+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + \ No newline at end of file