From b3c079e090c3156b68f394d4f56179960d8f7554 Mon Sep 17 00:00:00 2001 From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com> Date: Tue, 25 May 2021 11:23:13 +0100 Subject: [PATCH] Add mobile styles. --- index.html | 17 ++++--- main.css | 133 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 141 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 1b6f8ee..479bb02 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ Tben Design - + @@ -21,7 +21,7 @@
Tbendesign -
@@ -37,7 +42,7 @@
-

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

+

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

UI UX Design, Web Design, @@ -52,14 +57,14 @@

-

Find me on Linkedin

+

Find me on Linkedin

-
-
+
+
diff --git a/main.css b/main.css index e12b07b..1336b79 100644 --- a/main.css +++ b/main.css @@ -156,9 +156,7 @@ input:focus { -/*................................................... classes and IDs */ - - +/*................................................... General classes and IDs */ .container-1200px { width: 100%; max-width: 1200px; @@ -177,6 +175,9 @@ input:focus { } + + +/*................................................... Nav */ .nav-link-block { font-size: 30px; font-weight: 800; @@ -221,6 +222,21 @@ input:focus { padding: 10px 25px; } +.hamburger { + display: none; + cursor: pointer; +} + +.hamburger-line { + width: 30px; + height: 3px; + background-color: black; +} + + + + +/*................................................... Hero Section */ .my-name { font-family: "Satisfy"; color: #3C60DE; @@ -283,6 +299,117 @@ input:focus { justify-content: center; } +.linkedin-cta-text { + font-size: 16px; + font-weight: 500; + color: white; + margin: 0; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +/*.................................................................................................................. Mobile Styles */ + +@media (max-width: 800px) { + + .column-50 { + width: 100%; + } + + .container-1200px { + flex-direction: column; + } + + nav { + display: none; + } + + .hamburger { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + padding: 10px; + width: 40px; + height: 40px; + } + + .hamburger:hover { + padding: 18px 10px; + } + + .hamburger-line { + } + + .hero-section { + padding-top: 40px; + } + + #my-face { + right: -20vw; + } + +} + + + + + +@media (max-width: 600px) { + + h1 { + font-size: 40px; + } + + .hero-content-link { + font-size: 20px; + } + + .linkedin-cta-text { + font-size: 14px; + } + + .linkedin-block { + padding: 7px 15px 7px 7px; + } + + #my-face { + right: -20vw; + margin-top: 0; + } + + .face-wrapper { + + } + +} +