diff --git a/index.html b/index.html new file mode 100644 index 0000000..4fec178 --- /dev/null +++ b/index.html @@ -0,0 +1,52 @@ + + + + + + + + + + Tben Design + + + + + + + + + + + +
+ Tbendesign + +
+ +
+
+
+

Hi. I'm Benjamin Toby .
And I design great stuff.

+

+ UI UX Design, + Web Design, + Frontend Web Develpment, + Graphic and Motion Design. +

+

+
+
+
+ + + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..80c6a6b --- /dev/null +++ b/main.css @@ -0,0 +1,249 @@ +html { + width: 100%; + overflow-x: hidden; + font-display: swap; + scroll-behavior: smooth; +} + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + font-family: Poppins, Helvetica; + font-display: swap; + font-size: 18px; + line-height: 1.5; + transition: all .3s ease-out; + color: #222; +} + + +/*................................................... Body */ + +body { + width: 100%; + display: block; + margin: 0px; + overflow: hidden; +} + +header { + width: 100%; + padding: 20px 40px; + display: flex; + align-items: center; + justify-content: space-between; +} + +section { + display: flex; + align-items: center; + justify-content: center; + padding: 60px 40px; +} + + + +/*................................................... Text */ + +a { + text-decoration: none; + color: #222222; + border-bottom: 2px solid #222222; + cursor: pointer; + font-size: inherit; +} + +a:hover { + border-bottom: 4px solid transparent; +} + +h1 { + font-size: 60px; + margin-top: 0px; + margin-bottom: 15px; + color: inherit; + font-weight: 700; + width: 100%; + line-height: 1.2; +} + +h2 { + font-size: 36px; + margin-top: 0px; + margin-bottom: 15px; + color: #252132; + font-weight: 700; + width: 100%; + line-height: 1.5; +} + +h3 { + font-size: 30px; + margin-top: 0px; + margin-bottom: 10px; + color: inherit; + text-align: inherit; + width: 100%; + line-height: 1.5; +} + +h4 { + font-size: 24px; + margin-top: 0px; + margin-bottom: 10px; + color: inherit; + width: 100%; + line-height: 1.5; +} + +h5 { + font-size: 18px; + margin-top: 0px; + margin-bottom: 10px; + color: inherit; + text-align: center; + width: 100%; + line-height: 1.5; +} + +p { + font-size: 16px; + line-height: 1.5; + margin-top: 0px; + margin-bottom: 20px; + color: #48494e; + width: 100%; + font-weight: 400; +} + +span { + font-size: inherit; +} + + + + +/*................................................... Interactives */ + +button { + border: none; + background-color: black; + padding: 10px 20px; + color: white; + cursor: pointer; +} + +button:hover { + background-color: darkblue; +} + +input, textarea { + padding: 15px; + border-radius: 5px; + border: 1px solid rgba(0,0,0,0.2); + margin-bottom: 15px; + width: 100%; + font-size: 14px; +} + +input:focus { + border: 1px solid blue; + box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2); +} + + + + + + + + + + + + + + + +/*................................................... classes and IDs */ + + +.container-1200px { + width: 100%; + max-width: 1200px; + display: flex; +} + +.column-50 { + display: flex; + flex-direction: column; + width: 50%; +} + +.hero-section { + +} + +.nav-link-block { + font-size: 30px; + font-weight: 800; + border: none; +} + +.navlink-li { + display: inline-block; +} + +.navlink { + padding: 10px; + margin: 10px; +} + +.hero-subtext { + font-size: 24px; + font-weight: 500; +} + +.hero-content-link { + +} + +.hero-content-link:hover { + background-color: #222222; + color: white; + padding: 5px; +} + +.nav-cta-button { + border: 3px solid transparent; +} + +.nav-cta-button:hover { + border: 3px solid black; + background-color: white; + color: black; + padding: 10px 25px; +} + +.my-name { + font-family: "Satisfy"; + color: #3C60DE; + line-height: 1.05; + letter-spacing: -3px; +} + + + + + + + + + + + + + + +