Skip to content

Commit

Permalink
update the background + add jost as the font for btns, headings and l…
Browse files Browse the repository at this point in the history 
…inks.
  • Loading branch information
@nisarhassan12
nisarhassan12 committed May 7, 2020
1 parent 965af59 commit 3182b2c
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 56 deletions.
Binary file removed fonts/HKGrotesk-Bold.woff
View file
Binary file not shown.
Binary file removed fonts/HKGrotesk-Light.woff
View file
Binary file not shown.
Binary file added fonts/Jost-Regular.ttf
View file
Binary file not shown.
Binary file added images/header-1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 10 additions & 15 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,19 @@
/* --------------------------------------- */

@font-face {
font-family: 'HK Grotesk';
font-family: 'Hk Grotesk';
font-style: normal;
font-weight: 300;
src: url('./fonts/HKGrotesk-Light.woff') format('woff');
font-weight: 400;
src: url('./fonts/HKGrotesk-Regular.woff') format('woff');
}

@font-face {
font-family: 'HK Grotesk';
font-family: 'Jost';
font-style: normal;
font-weight: 400;
src: url('./fonts/HKGrotesk-Regular.woff') format('woff');
src: url('./fonts/Jost-Regular.ttf') format('woff');
}

/* @font-face {
font-family: 'HK Grotesk';
font-style: normal;
font-weight: 800;
src: url('./fonts/HKGrotesk-Bold.woff') format('woff');
} */

* {
margin: 0;
padding: 0;
Expand Down Expand Up @@ -86,7 +79,7 @@ section {
img {
object-fit: contain;
max-width: 100%;
}
}Header

/* --------------------------------------- */
/* ----- Headlines and Paragraphs ----- */
Expand All @@ -95,7 +88,7 @@ img {
h1,
h2,
h3 {
font-family: 'HK Grotesk', sans-serif;
font-family: 'Jost', sans-serif;
font-weight: 400;
line-height: var(--line-height-small);
color: var(--white);
Expand Down Expand Up @@ -150,6 +143,8 @@ p {

a {
color: var(--white);
font-weight: 400;
font-family: 'Jost', sans-serif;
}

.btn {
Expand Down Expand Up @@ -290,7 +285,7 @@ a {
/* --------------------------------------- */

.header {
background: linear-gradient(rgba(0,0,0, .9), rgba(0,0,0, .8)), url('./images/header.jpg');
background: linear-gradient(rgba(0,0,0, .7), rgba(0,0,0, .85)), url('./images/header-1.jpg');
height: 100vh;
background-size: cover;
background-position: center;
Expand Down
126 changes: 85 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@600&display=swap"
rel="stylesheet"
/>
<title>
Syed Ali Hussnain | Freelance Web Developer from Pakistan.
</title>
Expand All @@ -20,8 +16,12 @@
<ul class="nav__items">
<li class="nav__item"><a href="#work" class="nav__link">Work</a></li>
<li class="nav__item"><a href="#" class="nav__link">Skills</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About</a></li>
<li class="nav__item"><a href="#contact" class="nav__link">Contact</a></li>
<li class="nav__item">
<a href="#about" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">Contact</a>
</li>
</ul>
</nav>
<div class="header__text-box row">
Expand All @@ -39,7 +39,6 @@ <h1 class="heading-primary">
</header>

<main role="main">

<!-- ***** Work ***** -->

<section class="work" id="work">
Expand All @@ -60,7 +59,9 @@ <h3>Portfolio Template</h3>
<li>MongoDB</li>
</ul>

<a href="#" class="link__text">Visit Site <span>&rarr;</span></a>
<a href="#" class="link__text"
>Visit Site <span>&rarr;</span></a
>
</div>
<div class="work__image-box">
<img
Expand All @@ -85,7 +86,9 @@ <h3>Calculator</h3>
<li>MongoDB</li>
</ul>

<a href="#" class="link__text">Visit Site <span>&rarr;</span></a>
<a href="#" class="link__text"
>Visit Site <span>&rarr;</span></a
>
</div>
<div class="work__image-box">
<img
Expand All @@ -110,7 +113,9 @@ <h3>Notificator</h3>
<li>MongoDB</li>
</ul>

<a href="#" class="link__text">Visit Site <span>&rarr;</span></a>
<a href="#" class="link__text"
>Visit Site <span>&rarr;</span></a
>
</div>
<div class="work__image-box">
<img
Expand All @@ -130,12 +135,36 @@ <h3>Notificator</h3>
<div class="row">
<h2>Clients</h2>
<div class="client__logos">
<img src="./images/ronjones.png" class="client__logo" alt="Company 2">
<img src="./images/goldengrid.png" class="client__logo" alt="Company 3">
<img src="./images/bullseye.png" class="client__logo" alt="Company 1">
<img src="./images/mighty-furnitures.png" class="client__logo" alt="Company 1">
<img src="./images/fastlane.png" class="client__logo" alt="Company 3">
<img src="./images/chippy.png" class="client__logo" alt="Company 1">
<img
src="./images/ronjones.png"
class="client__logo"
alt="Company 2"
/>
<img
src="./images/goldengrid.png"
class="client__logo"
alt="Company 3"
/>
<img
src="./images/bullseye.png"
class="client__logo"
alt="Company 1"
/>
<img
src="./images/mighty-furnitures.png"
class="client__logo"
alt="Company 1"
/>
<img
src="./images/fastlane.png"
class="client__logo"
alt="Company 3"
/>
<img
src="./images/chippy.png"
class="client__logo"
alt="Company 1"
/>
</div>
</div>
</section>
Expand All @@ -160,7 +189,11 @@ <h2>About Me</h2>
</div>

<div class="about__photo-container">
<img class="about__photo" src="./images/syed-ali-hussnain.jpg" alt="" />
<img
class="about__photo"
src="./images/syed-ali-hussnain.jpg"
alt=""
/>
</div>
</div>
</div>
Expand All @@ -170,24 +203,32 @@ <h2>About Me</h2>
<!-- ***** Contact ***** -->

<section class="contact" id="contact">
<div class="row">
<h2>Get in Touch</h2>
<div class="contact__info">
<p>
Are you looking for a fast-performing and user-friendly website to represent your product or business? or looking for any kind of consultation? or want to ask questions? or have some advice for me or just want to say "Hi 👋" in any case feel free to Let me know. I will do my best to respond back. 😊
The quickest way to reach out to me is via an email.
</p>
<a href="mailto:you@example.com" class="btn">you@example.com</a>
</div>
<div class="row">
<h2>Get in Touch</h2>
<div class="contact__info">
<p>
Are you looking for a fast-performing and user-friendly website to
represent your product or business? or looking for any kind of
consultation? or want to ask questions? or have some advice for me
or just want to say "Hi 👋" in any case feel free to Let me know. I
will do my best to respond back. 😊 The quickest way to reach out to
me is via an email.
</p>
<a href="mailto:you@example.com" class="btn">you@example.com</a>
</div>
</div>
</section>

<!-- ***** Footer ***** -->

<footer role="contentinfo" class="footer row">
<div class="footer__info">
<p>&copy; 2020. All rights reserved.</p>
<p>Crafted with <img src="./images/heart.svg" class="footer__heart" alt="Heart"> by Nisar.</p>
<p>
Crafted with
<img src="./images/heart.svg" class="footer__heart" alt="Heart" /> by
Nisar.
</p>
</div>
</footer>

Expand All @@ -200,25 +241,28 @@ <h2>Get in Touch</h2>
</a>

<script>
const backToTopButton = document.querySelector('.back-to-top')
let isBackToTopRendered = false
const backToTopButton = document.querySelector(".back-to-top");
let isBackToTopRendered = false;

let alterStyles = (isBackToTopRendered) => {
backToTopButton.style.visibility = isBackToTopRendered ? 'visible' : 'hidden'
backToTopButton.style.opacity = isBackToTopRendered ? 1 : 0
backToTopButton.style.transform = isBackToTopRendered ? 'scale(1)' : 'scale(0)'
}
backToTopButton.style.visibility = isBackToTopRendered
? "visible"
: "hidden";
backToTopButton.style.opacity = isBackToTopRendered ? 1 : 0;
backToTopButton.style.transform = isBackToTopRendered
? "scale(1)"
: "scale(0)";
};

window.addEventListener('scroll', () => {
window.addEventListener("scroll", () => {
if (window.scrollY > 800) {
isBackToTopRendered = true
alterStyles(isBackToTopRendered)
}
else {
isBackToTopRendered = false
alterStyles(isBackToTopRendered)
isBackToTopRendered = true;
alterStyles(isBackToTopRendered);
} else {
isBackToTopRendered = false;
alterStyles(isBackToTopRendered);
}
})
});
</script>
</body>
</html>

0 comments on commit 3182b2c

Please sign in to comment.