Mobile css update
This commit is contained in:
parent
2294d0cf3a
commit
84ce11122a
32
index.html
32
index.html
@ -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 Designer</a>,
|
||||||
<a class="hero-content-link" id="frontend-dev">Frontend Web Developer</a>,
|
<a class="hero-content-link" id="frontend-dev">Frontend Web 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">
|
||||||
</div>
|
<img src="images/Profile-Pic.jpg" alt="" width="40" height="40">
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 class="linkedin-cta-text">Find me on Linkedin</h3>
|
<h3 class="linkedin-cta-text">Find me on Linkedin</h3>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</a>
|
|
||||||
|
<button class="main-cta-button">Hire Me</button>
|
||||||
|
</div>
|
||||||
</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>
|
||||||
|
125
main.css
125
main.css
@ -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,6 +379,36 @@ section.hero-section {
|
|||||||
|
|
||||||
/*.................................................................................................................. Mobile Styles */
|
/*.................................................................................................................. Mobile Styles */
|
||||||
|
|
||||||
|
@media (max-width: 950px) {
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 10px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger:hover {
|
||||||
|
padding: 18px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-line {
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
@media (max-width: 800px) {
|
||||||
|
|
||||||
.column-50 {
|
.column-50 {
|
||||||
@ -352,38 +419,21 @@ section.hero-section {
|
|||||||
flex-direction: column;
|
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 {
|
|
||||||
}
|
|
||||||
|
|
||||||
#my-face {
|
#my-face {
|
||||||
right: -20vw;
|
right: -20vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.face-wrapper {
|
||||||
|
margin-top: -10vw;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@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;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user