tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile css update

Browse Source
This commit is contained in:
BenjaminToby 2021-05-25 21:30:40 +01:00
parent 2294d0cf3a
commit 84ce11122a
2 changed files with 115 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
index.html
View File

@ -20,7 +20,7 @@
<body><!-- ...................................................................................................................... Body --> <body><!-- ...................................................................................................................... Body -->
<header> <header>
<a class="nav-link-block" style="border: none;"><span style="font-family:'Satisfy'">Tben</span>design</a> <a class="nav-link-block" style="border:none;"><span style="font-family:'Satisfy'">Tben</span>design</a>
<nav> <nav>
<ul> <ul>
<li class="navlink-li"><a href="#" class="navlink">About Me</a></li> <li class="navlink-li"><a href="#" class="navlink">About Me</a></li>
@ -39,32 +39,36 @@
<section class="hero-section" style="padding-top: 40px;"> <section class="hero-section">
<div class="container-1200px hero-content-container"> <div class="container-1200px hero-content-container">
<div class="column-50"> <div class="column-50">
<h1>Benjamin Toby.</h1> <h1 style="background-color:white;">Benjamin Toby.</h1>
<h2 class="hero-subtext">Hi! I'm a <h2 class="hero-subtext">Hi! I'm a
<a class="hero-content-link" id="ui-ux-design">UI UX Designer</a>, <a class="hero-content-link" id="ui-ux-design">UI UX Designer</a>,
<a class="hero-content-link" id="web-design">Web Designer</a>, <a class="hero-content-link" id="web-design">Web&nbsp;Designer</a>,
<a class="hero-content-link" id="frontend-dev">Frontend&nbsp;Web&nbsp;Developer</a>, <a class="hero-content-link" id="frontend-dev">Frontend&nbsp;Web&nbsp;Developer</a>,
<a class="hero-content-link" id="graphic-design">Graphic and Motion Designer</a>. <a class="hero-content-link" id="graphic-design">Graphic and Motion Designer</a>.
</h2> </h2>
<a href="#" style="border:none;margin-top:15px;display:flex;justify-content:flex-start;"> <div class="hero-ctas-block">
<div class="linkedin-block"> <a href="#" class="linkedin-link">
<div class="linkedin-profile-pic-block"> <div class="linkedin-block">
<img src="images/Profile-Pic.jpg" alt="" width="40" height="40"> <div class="linkedin-profile-pic-block">
<img src="images/Profile-Pic.jpg" alt="" width="40" height="40">
</div>
<div>
<h3 class="linkedin-cta-text">Find me on Linkedin</h3>
</div>
</div> </div>
</a>
<div>
<h3 class="linkedin-cta-text">Find me on Linkedin</h3> <button class="main-cta-button">Hire Me</button>
</div> </div>
</div>
</a>
</div> </div>
<div class="column-50 centered-content" style="perspective:600px;z-index:-1;"> <div class="column-50 centered-content" style="perspective:600px;z-index:-1;">
<div class="face-wrapper" id="my-face-wrapper"> <div id="my-face"></div> </div> <div class="face-wrapper" id="my-face-wrapper"><div id="my-face"></div></div>
</div> </div>
</div> </div>
</section> </section>

115
main.css
View File

@ -39,6 +39,7 @@ section {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 60px 40px; padding: 60px 40px;
position: relative;
} }
@ -168,6 +169,7 @@ input:focus {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 50%; width: 50%;
position: relative;
} }
section.hero-section { section.hero-section {
@ -243,6 +245,41 @@ section.hero-section {
align-items: center; align-items: center;
} }
.hero-ctas-block {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 15px;
}
.main-cta-button {
margin: 0;
border: 3px solid #333;
background-color: white;
color: #222;
font-size: 18px;
font-weight: 600;
transition: all .3s ease-out;
padding: 15px 40px;
}
.main-cta-button:hover {
background-color: #222;
color: white;
padding: 15px 50px;
}
.linkedin-link {
border: none;
display: flex;
justify-content: flex-start;
margin-right: 10px;
}
.linkedin-link:hover {
border: none;
}
.my-name { .my-name {
color: #3C60DE; color: #3C60DE;
background-color: #E6EDFF; background-color: #E6EDFF;
@ -342,19 +379,7 @@ section.hero-section {
/*.................................................................................................................. Mobile Styles */ /*.................................................................................................................. Mobile Styles */
@media (max-width: 800px) { @media (max-width: 950px) {
.column-50 {
width: 100%;
}
.container-1200px {
flex-direction: column;
}
nav {
display: none;
}
.hamburger { .hamburger {
display: flex; display: flex;
@ -364,6 +389,7 @@ section.hero-section {
padding: 10px; padding: 10px;
width: 40px; width: 40px;
height: 40px; height: 40px;
background-color: white;
} }
.hamburger:hover { .hamburger:hover {
@ -373,8 +399,8 @@ section.hero-section {
.hamburger-line { .hamburger-line {
} }
#my-face { nav {
right: -20vw; display: none;
} }
} }
@ -383,7 +409,31 @@ section.hero-section {
@media (max-width: 600px) { @media (max-width: 800px) {
.column-50 {
width: 100%;
}
.container-1200px {
flex-direction: column;
}
#my-face {
right: -20vw;
}
.face-wrapper {
margin-top: -10vw;
}
}
@media (max-width: 550px) {
h1 { h1 {
font-size: 44px; font-size: 44px;
@ -394,11 +444,21 @@ section.hero-section {
} }
section.hero-section { section.hero-section {
padding: 0px 20px; padding: 30px 20px;
}
.container-1200px.hero-content-container {
padding-right: 30vw;
} }
.hero-content-link { .hero-content-link {
font-size: 20px; font-size: 20px;
background-color: white;
}
.hero-ctas-block {
flex-direction: column;
align-items: flex-start;
} }
.linkedin-cta-text { .linkedin-cta-text {
@ -407,15 +467,32 @@ section.hero-section {
.linkedin-block { .linkedin-block {
padding: 7px 15px 7px 7px; padding: 7px 15px 7px 7px;
margin-bottom: 15px;
} }
#my-face { #my-face {
right: -20vw; right: -60vw;
margin-top: 0; margin-top: 0;
} }
.face-wrapper { .face-wrapper {
top: 0;
right: 0;
width: auto;
height: auto;
margin-top: -65vh;
}
}
@media (max-width: 380px) {
.face-wrapper {
margin-top: -160vw;
} }
} }