Skip to content

Instantly share code, notes, and snippets.

@Givemo

Givemo/index.html

Created September 19, 2020 13:21
Show Gist options
  • Save Givemo/66288ea60b071efba97528c8096cc541 to your computer and use it in GitHub Desktop.
Save Givemo/66288ea60b071efba97528c8096cc541 to your computer and use it in GitHub Desktop.
Download ZIP
My Portflio
Raw
index.html
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<header>
<div class="logo1">
<a href="#home"><img src="images/logo.png" alt="<logo>"></a>
</div>
<!-- Social icons -->
<span class="head-icons">
<ul class="social-list">
<li class="social-list__item">
<a href="https://codepen.io/givemo" class="social-list__link"><i class="fab fa-codepen fa-lg"></i></a></li>
<li class="social-list__item">
<a href="https://github.com/Givemo" class="social-list__link" id="profile-link" target="_blank"><i class="icon-github icon-large"></i></a></li>
<li class="social-list__item">
<a href="https://twitter.com/gtchiwanza" class="social-list__link"><i class="icon-twitter icon-large"></i></a></li>
<li class="social-list__item">
<a href="https://www.facebook.com/givemoret.chiwanza" class="social-list__link"><i class="icon-facebook icon-large"></i></a></li>
<li class="social-list__item">
<a href="https://www.linkedin.com/in/givemorechiwanza/" class="social-list__link"><i class="icon-linkedin icon-large"></i></a></li>
<li class="social-list__item">
<a href="mailto:[email protected]" class="social-list__link"><i class="icon-envelope icon-large"></i></a></li>
</ul>
</span>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav" id="navbar">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link">Portfolio</a></li>
<li class="nav__item">
<a href="#about" class="nav__link">About me</a>
</li>
<li class="nav__item">
<a href="#work" class="nav__link">My Work</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">Contact</a>
</li>
<li class="nav__item">
<a href="#education" class="nav__link">Education</a>
</li>
<li class="nav__item"><a href="blog.html" class="nav__link">Blog</a></li>
<li class="nav__item">
<a href="#testimonials" class="nav__link">Testimonials</a>
</li>
</ul>
</nav>
</header>
<!-- Theme toggle button/checkbox-->
<div class="theme-container">
<label id="switch" class="switch">
<input type="checkbox" onchange="toggleTheme()" id="slider">
<span class="slider round"></span>
<!--<button id="switch" onclick="toggleTheme()">Switch</button>-->
</label>
</div>
<!--Introduction -->
<section class="intro" id="welcome-section">
<h1 class="section__title section__title--intro">
Hi, I am <strong>Givemore<br> The
<span class="txt-type" data-wait="3000" data-words='["Developer", "Designer", "Creator"]'></span></strong>
</h1>
<p class="section__subtitle section__subtitle--intro">front-end dev</p>
<span alt="a picture of Givemore smiling" class="intro__img"></span>
</section>
<!--About me-->
<section class="my-services" id="about">
<h2 class="section__title section__title--services">About me</h2>
<div class="services">
<div class="service">
<p>My name is Givemore Chiwanza and I am a web deveveloper. I am good with various technologies including Javascript, Bootstrap 4, Building Wordpress sites, the Google Cloud Platform, CSS & HTML. This array of skills enables me to build cool front end interfaces.
</p>
</div> <!-- /service-->
<div class="service">
<h3></h3>
<p>
</p>
</div> <!-- /service-->
<div class="service">
<p>I currently do freelance work for clients but I am available for more permanent positions where I can grow and contribute my skills.</p>
</div> <!-- /service-->
</div> <!-- /services-->
<a href="#work" class="btn">My Work</a>
</section>
<!-- Education-->
<section class="about-me" id="education">
<h2 class="section__title section__title--about">Education</h2>
<p class="section__subtitle section__subtitle--about">Links to certifications and Courses.</p>
<div class="about-me__body">
<p>I am self taught in web development. The courses I have completed can be accessed in detail on my <a href="https://app.pluralsight.com/library/history">Pluralsight account</a> which is my main content provider. You can also check out my listed certifications.</p>
<p>My formal education consists of a degree in Quantitative Economics & an Advanced Diploma in Accounting and Business with (ACCA).</p>
</div>
<p class="skills-card">
<ul class="skills-card" >
<li><a href="https://app.pluralsight.com/library/history">Building Websites with HTML, CSS &Javascript</a></li>
<li><a href="https://coursera.org/share/6697da79312eb47431247396c7a826b5">Front-End Web UI Frameworks and Tools: Bootstrap 4</a></li>
<li><a href="https://www.freecodecamp.org/certification/givemore/responsive-web-design">Responsive Web Design</a></li>
<li><a href="https://www.freecodecamp.org/certification/givemore/javascript-algorithms-and-data-structures">JavaScript Algorithms and Data Structures</a></li>
<li><a href="https://app.pluralsight.com/library/history">Google Cloud Platform</a></li>
</ul>
</p>
</section>
<!-- My Work-->
<section class="my-work" id="projects">
<h2 class="section__title section__title--work">My Work</h2>
<p class="section__subtitle--work">A selection of a range of my Work</p>
<div class="portfolio">
<!-- Meekpledge-->
<div>
<a href="https://meekspledge.com" target="_blank" class="portfolio__item">
<img src="https://images.unsplash.com/photo-1560472355-a3b4bcfe790c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="image of project" class="portfolio__img">
</a>
<p class="project-tile">Business Wordpress Website (Client Work)</p>
<span class="code-links">
<a href="https://meekspledge.com" target="_blank">Live</a>
</span>
</div>
<!-- Fantasy Restaurant-->
<div>
<a href="https://www.givemore.tech/" target="_blank" class="portfolio__item">
<img src="https://images.unsplash.com/photo-1553909489-2542a1068437?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="image of project" class="portfolio__img">
</a>
<p class="project-tilte">Fantasy Restaurant Website</p>
<span class="code-links">
<a href="https://www.givemore.tech/">Live</a>
<a href="https://github.com/Givemo/restaurant-confusion">Code</a>
</span>
</div>
<!-- Todo List App-->
<div>
<a href="https://givemo.github.io/Todo_List_App/" target="_blank" class="portfolio__item">
<img src="https://images.unsplash.com/photo-1484480974693-6ca0a78fb36b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="image of project" class="portfolio__img">
</a>
<p>Awesome Todo List App</p>
<span class="code-links">
<a href="https://givemo.github.io/Todo_List_App/">Live</a>
<a href="https://github.com/Givemo/Todo_List_App">Code</a>
</span>
</div>
<!-- Portfolio item 03-->
<div>
<a href="https://givemo.github.io/github-cards-app/" target="_blank" class="portfolio__item">
<img src="https://www.somagnews.com/wp-content/uploads/2020/04/75-e1586981465263.png" alt="image of project" class="portfolio__img">
</a>
<p>GitHub Cards App</p>
<span class="code-links">
<a href="https://givemo.github.io/github-cards-app/">Live</a>
<a href="https://github.com/Givemo/github-cards-app">Code</a>
</span>
</div>
<!-- Portfolio item 04-->
<div>
<a href="https://givemo.github.io/Image_Gallery/" target="_blank" class="portfolio__item">
<img src="https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="image of project" class="portfolio__img">
</a>
<p>Image Gallery</p>
<span class="code-links">
<a href="https://givemo.github.io/Image_Gallery/">Live</a>
<a href="https://github.com/Givemo/Image_Gallery">Code</a>
</span>
</div>
<!--<div>
Portfolio item 05
<a href="https://givemo.github.io/On-screen_Calculator/" target="_blank" class="portfolio__item">
<img src="https://flutterawesome.com/content/images/2019/04/Calculator.jpg" alt="image of project" class="portfolio__img">
</a>
<p>Simple Calculator App</p>
<a href="https://github.com/Givemo/On-screen_Calculator" target="_blank">View Source Code</a>
</div>-->
<!-- Portfolio item 06-->
<div>
<a href="https://givemo.github.io/Weight_Converter/" target="_blank" class="portfolio__item">
<img src="https://i2.wp.com/www.mygnp.com/wp-content/uploads/2018/11/lose-1-pound-a-week.jpg?fit=329%2C233&ssl=1" alt="image of project" class="portfolio__img">
</a>
<p>Weight_Converter</p>
<a href="https://github.com/Givemo/Weight_Converter" target="_blank">View Source Code</a>
</div>
<!-- Portfolio item 07-->
<div>
<a href="https://givemo.github.io/Library_App/" target="_blank" class="portfolio__item">
<img src="https://i.pinimg.com/originals/4f/b4/57/4fb4576e26a8461e3bf0cfa06c5c4a44.png" alt="image of project" class="portfolio__img">
</a>
<p>Library App BookStore</p>
<a href="https://github.com/Givemo/Library_App" target="_blank">View Source Code</a>
</div>
<!--Portfolio item 08 -->
<div>
<a href="https://givemo.github.io/Survey_Form/" target="_blank" class="portfolio__item">
<img src="https://ak4.picdn.net/shutterstock/videos/19020694/thumb/8.jpg" alt="image of project" class="portfolio__img">
</a>
<p>Survey Form</p>
<a href="https://github.com/Givemo/Survey_Form" target="_blank">View Source Code</a>
</div>
<!--Portfolio item 09
<div>
<a href="https://givemo.github.io/TIC_TAC_TOE/" target="_blank" class="portfolio__item">
<img src="https://cdn.onlinewebfonts.com/svg/img_555366.png" alt="image of project" class="portfolio__img">
</a>
<p>Tic Tac Toe Game</p>
<a href="https://github.com/Givemo/TIC_TAC_TOE" target="_blank">View Source Code</a>
</div>
Portfolio item 10
<div>
<a href="https://givemo.github.io/Rock_Paper_Scissors_Game-/" target="_blank" class="portfolio__item">
<img src="https://previews.123rf.com/images/sudowoodo/sudowoodo1710/sudowoodo171000028/88077066-hand-gestures-for-rock-paper-scissors-game-simple-hand-icons-.jpg" alt="image of project" class="portfolio__img">
</a>
<p>ROCK-PAPER-SCISSORS GAME</p>
<a href="https://github.com/Givemo/Rock_Paper_Scissors_Game-" target="_blank">View Source Code</a>
</div>-->
</div>
<a href="https://github.com/Givemo" class="btn">More Projects</a>
</section>
<!-- My Skills
<section class="skills">
<h2 class="section__title section__title--about">My Skills</h2>
<p class="section__subtitle section__subtitle--about">Technologies I'm proficient at:</p>
<div class="skills-container">
<figure>
<img src="images/html.png" alt="html">
<figcaption>HTML</figcaption>
</figure>
<figure>
<img src="images/css.png" alt="css">
<figcaption>CSS</figcaption>
</figure>
<figure>
<img src="images/javascript-736400_640.png" alt="js">
<figcaption>JavaScript</figcaption>
</figure>
<figure>
<img src="images/480px-Bootstrap_logo.svg.png" alt="">
<figcaption>Bootstrap 4</figcaption>
</figure>
<figure>
<img src="images/wordpress-1288020_640.png" alt="wordpress">
<figcaption>Wordpress</figcaption>
</figure>
<figure>
<img src="images/icons8-google-cloud-platform-480.png" alt="gcp">
<figcaption>Google Cloud Platform</figcaption>
</figure>
</div>
</section>-->
<!-- Testimonials -->
<section id="testimonials">
<h2 class="section__title section__title_testimonials">Testimonials</h2>
<div class="test-container1">
<img src="https://images.unsplash.com/photo-1586253633232-8161270c5b6e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" id="test-img">
<div class="test-item">
<p>Givemore has done a wonderful job in designing our website as wished. His web design skills are not in doubt, at least to us. We are confident to engage him on any matter related to its maintenance.<br>
He was very patient to pay attention to our details, delivered an excellent code with an innovative and unique design.
<br>
We can confidently recommend him to any party in need of a similar or related service.
<br>
<strong><a href="https://meekspledge.com">Meekpledge (PVT) LTD</a></strong></p>
</div>
</div>
<!--<div class="test-container2">
<div class="test-item">
<p>Deployment ownership non-disclosure agreement vesting period crowdfunding success influencer partnership equity series A financing network effects user experience crowdsource. Burn rate stock bootstrapping direct mailing release client traction creative facebook monetization crowdfunding rockstar.</p>
</div>
<img src="images/nv-team2-1.jpg" id="test-img">
</div>-->
</section>
<!-- Footer-->
<footer class="footer" id="contact">
<ul class="social-list">
<li class="social-list__item">
<a href="https://codepen.io/givemo" class="social-list__link"><i class="fab fa-codepen fa-lg"></i></a></li>
<li class="social-list__item">
<a href="https://github.com/Givemo" class="social-list__link"><i class="icon-github icon-large"></i></a></li>
<li class="social-list__item">
<a href="https://twitter.com/gtchiwanza" class="social-list__link"><i class="icon-twitter icon-large"></i></a></li>
<li class="social-list__item">
<a href="https://www.facebook.com/givemoret.chiwanza" class="social-list__link"><i class="icon-facebook icon-large"></i></a></li>
<li class="social-list__item">
<a href="https://www.linkedin.com/in/givemorechiwanza/" class="social-list__link"><i class="icon-linkedin icon-large"></i></a></li>
<li class="social-list__item">
<a href="mailto:[email protected]" class="social-list__link"><i class="icon-envelope icon-large"></i></a></li>
</ul>
<p class="copyright">Copyright 2020 <span>created by Givemore</span></p>
</footer>
Raw
script.js
const navToggle = document.querySelector(".nav-toggle");
const navLinks = document.querySelectorAll(".nav__link");
navToggle.addEventListener("click", () => {
document.body.classList.toggle("nav-open");
});
navLinks.forEach((link) => {
link.addEventListener("click", () => {
document.body.classList.remove("nav-open");
});
});
const TypeWriter = function (txtElement, words, wait = 2000) {
this.txtElement = txtElement;
this.words = words;
this.txt = "";
this.wordIndex = 0;
this.wait = parseInt(wait, 10);
this.type();
this.isDeleting = false;
};
//Type Method
TypeWriter.prototype.type = function () {
//Current index of word
const current = this.wordIndex % this.words.length;
//Get full text of current word
const fullTxt = this.words[current];
//Check if deleting
if (this.isDeleting) {
//Remove char
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
//Add char
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
//Insert txt into element
this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;
//Initial Type Speed
let typeSpeed = 250;
if (this.isDeleting) {
typeSpeed /= 2;
}
//If word is complete
if (!this.isDeleting && this.txt === fullTxt) {
//Make pause at end
typeSpeed = this.wait;
//Set delete to true
this.isDeleting = true;
} else if (this.isDeleting && this.txt === "") {
this.isDeleting = false;
//Move to the next word
this.wordIndex++;
//Pause before start typing
typeSpeed = 500;
}
setTimeout(() => this.type(), typeSpeed);
};
//Initialise on DOM Load
document.addEventListener("DOMContentLoaded", init);
//Init App
function init() {
const txtElement = document.querySelector(".txt-type");
const words = JSON.parse(txtElement.getAttribute("data-words"));
const wait = txtElement.getAttribute("data-wait");
//Init typeWriter
new TypeWriter(txtElement, words, wait);
}
/* //ES6 Class instead from Type method
class TypeWriter {
constructor(txtElement, words, wait = 3000) {
this.txtElement = txtElement;
this.words = words;
this.txt = '';
this.wordIndex = 0;
this.wait = parseInt(wait, 10);
this.type();
this.isDeleting = false;
}
type() {
//Current index of word
const current = this.wordIndex % this.words.length;
//Get full text of current word
const fullTxt = this.words[current];
//Check if deleting
if(this.isDeleting) {
//Remove char
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
//Add char
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
//Insert txt into element
this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;
//Initial Type Speed
let typeSpeed = 300
if(this.isDeleting) {
typeSpeed /= 2;
}
//If word is complete
if(!this.isDeleting && this.txt === fullTxt) {
//Make pause at end
typeSpeed = this.wait;
//Set delete to true
this.isDeleting = true;
} else if(this.isDeleting && this.txt === '') {
this.isDeleting = false;
//Move to the next word
this.wordIndex++;
//Pause before start typing
typeSpeed = 500
}
setTimeout(() => this.type(), typeSpeed);
}
}
//Initialise on DOM Load
document.addEventListener('DOMContentLoaded', init);
//Init App
function init() {
const txtElement = document.querySelector('.txt-type');
const words = JSON.parse(txtElement.getAttribute('data-words'));
const wait = txtElement.getAttribute('data-wait');
//Init typeWriter
new TypeWriter(txtElement, words, wait)
}
*/
/* Toogle theme*/
// function to set a given theme/color-scheme
function setTheme(themeName) {
localStorage.setItem("theme", themeName);
document.documentElement.className = themeName;
}
// function to toggle between light and dark theme
function toggleTheme() {
if (localStorage.getItem("theme") === "theme-dark") {
setTheme("theme-light");
document.body.style.background = "var(--clr-light)";
document.body.style.color = "var(--clr-dark)";
} else {
setTheme("theme-dark");
document.body.style.background = "var(--clr-dark)";
document.body.style.color = "var(--clr-light)";
}
}
// Immediately invoked function to set the theme on initial load
(function () {
if (localStorage.getItem("theme") === "theme-dark") {
setTheme("theme-dark");
document.body.style.background = "var(--clr-dark)";
document.body.style.color = "var(--clr-light)";
document.getElementById("slider").checked = false;
} else {
setTheme("theme-light");
document.body.style.background = "var(--clr-light)";
document.body.style.color = "var(--clr-dark)";
document.getElementById("slider").checked = true;
}
})();
Raw
style.css
*,
*::before,
*::after {
box-sizing: border-box;
}
/*Custom Properties*/
:root {
--ff-primary: "Source Sans Pro", sans-serif;
--ff-secondary: "Source Code Pro", monospace;
--fw-reg: 300;
--fw-bold: 900;
/*--clr-light: #a4b3b6;
--clr-dark: #2a1b3d;
--clr-accent: #44318d;
--clr-light-accent: #e98074;
--clr-light-theme: #66fcf1;
--clr-dark-theme: #0b0c10;
--clr-accent-theme: #45a29e;
--clr-light-accent-theme: #66fcf1;*/
--fs-h1: 2.5rem;
--fs-h2: 2.25rem;
--fs-h3: 1.25rem;
--fs-body: 1rem;
--bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, 0.25);
/* 0.125em 0.125em 0.25em rgba(0,0,0,.15); */
}
.theme-light {
--clr-light: #fff;
--clr-dark: #2a1b3d;
--clr-accent: #44318d;
--clr-light-accent: #e98074;
}
.theme-dark {
--clr-light: #66fcf1;
--clr-dark: #0b0c10;
--clr-accent: #45a29e;
--clr-light-accent: #66fcf1;
}
@media (min-width: 800px) {
:root {
--fs-h1: 4.5rem;
--fs-h2: 3.75rem;
--fs-h3: 1.5rem;
--fs-body: 1.125rem;
}
}
/* General styles*/
html {
scroll-behavior: smooth;
}
body {
background: var(--clr-light);
color: var(--clr-dark);
margin: 0;
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 2;
letter-spacing: 0.4px;
}
img {
display: block;
max-width: 100%;
}
strong {
font-weight: var(--fw-bold);
}
:focus {
outline: 3px solid var(--clr-accent);
outline-offset: 3px;
}
.btn {
display: inline-block;
padding: 0.5em 2.5em;
background: var(--clr-accent);
color: var(--clr-dark);
text-decoration: none;
cursor: pointer;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: var(--fw-bold);
transition: transform 200ms ease-in-out;
}
.btn:hover {
transform: scale(1.1);
}
/*Typography */
h1,
h2,
h3 {
line-height: 1.1;
margin: 0;
}
h1 {
font-size: var(--fs-h1);
}
h2 {
font-size: var(--fs-h2);
}
h3 {
font-size: var(--fs-h3);
}
section {
padding: 1em 2em;
}
.section__title {
margin-bottom: 0.25em;
}
.section__title--intro {
font-weight: var(--fw-reg);
}
.section__title--intro strong {
display: block;
}
.section__subtitle {
margin: 0;
font-size: var(--fs-h3);
color: var(--clr-dark);
}
.section__subtitle--intro,
.section__subtitle--about {
background: var(--clr-accent);
padding: 0.25em 1em;
font-family: var(--ff-secondary);
margin-bottom: 1em;
}
.section__title--work {
color: var(--clr-light);
font-weight: var(--fw-bold);
margin-bottom: 2em;
}
.section__title_testimonials {
color: var(--clr-light);
font-weight: var(--fw-bold);
margin-bottom: 2em;
text-align: center;
}
/*header*/
header {
display: flex;
justify-content: space-between;
padding: 1em;
background: linear-gradient(rgba(0,0,0,.9), rgba(16, 3, 61, 0.8)),
url(/images/jumbotron-cover.jpg);
background-size: cover;
background-position: center;
}
.head-icons {
color: var(--clr-accent);
text-align: center;
padding: 2.5em 0;
font-size: var(--fs-body);
width: 100%;
}
.head-icons a {
color: inherit;
text-decoration: none;
}
.logo1 {
top: 0;
width: 50px;
}
.nav {
position: fixed;
background: var(--clr-dark);
opacity: 0.9;
color: var(--clr-light);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
transform: translate(100%);
transition: transform 250ms cubic-bezier(0.5, 0, 0.5, 1);
}
.nav__list {
list-style: none;
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin-left: 20px;
padding: 0;
}
.nav__link {
color: inherit;
font-weight: var(--fw-bold);
font-size: var(--fs-h3);
text-decoration: none;
}
.nav__link:hover {
color: var(--clr-accent);
}
.nav-toggle {
padding: 0.5em;
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
right: 1em;
top: 2.5em;
z-index: 1000;
}
.nav-open .nav {
transform: translate(0);
}
.nav-open .nav-toggle {
position: fixed;
}
.nav-open .hamburger {
transform: rotate(0.625turn);
}
.nav-open .hamburger::before {
transform: rotate(90deg) translateX(-6px);
}
.nav-open .hamburger::after {
opacity: 0;
}
.hamburger {
display: block;
position: relative;
}
.hamburger,
.hamburger::before,
.hamburger::after {
background: var(--clr-accent);
width: 3em;
height: 4px;
border-radius: 1em;
transition: transform 250ms ease-in-out;
}
.hamburger::before,
.hamburger::after {
content: "";
position: absolute;
left: 0;
right: 0;
}
.hamburger::before {
top: 6px;
}
.hamburger::after {
bottom: 6px;
}
/*Intro section*/
.intro {
position: relative;
}
.intro__img {
box-shadow: var(--bs);
background: linear-gradient(rgba(19, 8, 99, 0.45), rgba(13, 3, 53, 0.45)),
url(/images/profile.jpg);
background-position: center;
background-size: cover;
}
@media (min-width: 600px) {
.intro {
display: grid;
width: 70%;
margin: 0 auto;
grid-column-gap: 1em;
grid-template-areas:
"img title"
"img subtitle";
grid-template-columns: min-content /*max-content*/;
}
.intro__img {
grid-area: img;
min-width: 250px;
position: relative;
width: 100%;
height: 100%;
}
.section__subtitle--intro {
align-self: start;
grid-column: -1 / 1;
grid-row: 2;
text-align: right;
position: relative;
left: -1.5em;
width: calc(100% + -3em);
}
.nav-open .nav {
transform: translate(60%);
}
.nav__list {
align-items: flex-start;
}
section {
padding: 5em 2em;
}
}
.my-services {
background-color: var(--clr-dark);
color: var(--clr-light);
background-image: url(https://static.makeuseof.com/wp-content/uploads/2019/02/laptop-coding-670x335.jpg);
background-size: cover;
background-blend-mode: multiply;
text-align: center;
}
.section__title--services {
color: var(--clr-accent);
position: relative;
}
.section__title--services::after {
content: "";
display: block;
width: 2em;
height: 1px;
margin: 0.5em auto 1em;
background: var(--clr-light);
opacity: 0.25;
}
.service {
margin-bottom: 4em;
}
.service {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 800px) {
.services {
display: flex;
max-width: 1000px;
margin: 0 auto;
}
.service + .service {
margin-left: 2em;
}
}
.about-me {
max-width: 1000px;
margin: 0 auto;
}
.about-me__image {
box-shadow: var(--bs);
max-width: 300px;
}
.skills-card {
box-shadow: var(--bs);
max-width: 300px;
background: var(--clr-dark);
color: var(--clr-light);
grid-area: img;
}
.skills-card li {
padding: 10px;
}
@media (min-width: 600px) {
.about-me {
display: grid;
grid-template-columns: 1fr 200px;
grid-template-areas:
"title img"
"subtitle img"
"text img";
grid-column-gap: 2em;
}
.section__title--about {
grid-area: title;
}
.section__subtitle--about {
grid-column: 1 / -1;
grid-row: 2;
position: relative;
left: -1em;
width: calc(100% + 2em);
padding-left: 1em;
padding-right: calc(200px + 4em);
}
.about-me__image {
grid-area: img;
position: relative;
z-index: 2;
}
.skills-card {
grid-area: img;
position: relative;
z-index: 2;
background: var(--clr-dark);
color: var(--clr-light);
padding: 10px;
}
}
/* My Work*/
.my-work {
background-color: var(--clr-dark);
color: var(--clr-accent);
text-align: center;
}
.portfolio {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
}
.portfolio__item {
background: var(--clr-accent);
overflow: hidden;
}
.portfolio__img {
width: 100%;
height: 100%;
transition: transform 750ms cubic-bezier(0.5, 0, 0.5, 1), opacity 250ms linear;
}
.portfolio__item:focus {
position: relative;
z-index: 2;
}
.portfolio__img:hover,
.portfolio__item:focus .portfolio__img {
transform: scale(1.2);
opacity: 0.5;
}
.code-links {
display: flex;
font-weight: var(--fw-bold);
font-size: var(--ff-secondary);
}
.code-links a {
text-decoration: underline;
}
/*Testimonials*/
#testimonials {
background-color: var(--clr-dark);
color: var(--clr-light);
background-image: url(https://static.makeuseof.com/wp-content/uploads/2019/02/laptop-coding-670x335.jpg);
background-size: cover;
background-blend-mode: multiply;
text-align: center;
}
.section__title_testimonials::after {
content: "";
display: block;
width: 2em;
height: 1px;
margin: 0.5em auto 1em;
background: var(--clr-light);
opacity: 0.25;
}
.test-container1,
.test-container2 {
display: flex;
text-align: center;
margin-bottom: 10px;
}
.test-container1 {
justify-content: flex-start;
}
.test-container2 {
justify-content: flex-end;
}
#test-img {
display: none;
width: 300px;
height: 300px;
}
.test-item {
border: 1px solid var(--clr-dark);
width: 70%;
height: auto;
margin-top: 4px;
padding: 15px;
flex-wrap: wrap;
box-shadow: var(--bs);
}
.test-item p {
color: var(--clr-light);
line-height: 2rem;
overflow: hidden;
}
@media (min-width: 800px) {
#test-img {
display: inline-block;
}
}
/* footer*/
.footer {
color: var(--clr-accent);
text-align: center;
padding: 2.5em 0;
font-size: var(--fs-h3);
}
.footer a {
color: inherit;
text-decoration: none;
}
.footer img {
width: 50px;
}
.github {
fill: blue;
}
.footer__link {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
}
.footer__link:hover,
.social-list__link:hover {
opacity: 0.7;
}
.footer__link:hover {
text-decoration: underline;
}
.copyright {
color: var(--clr-accent);
font-size: var(--fs-body);
}
.social-list {
list-style: none;
display: flex;
justify-content: center;
margin: 2em 0;
padding: 0;
}
.social-list__item {
margin: 0 0.5em;
}
.social-list li:hover {
transform: scale(1.2);
transition: transform 650ms cubic-bezier(0.5, 0, 0.5, 1), opacity 250ms linear;
opacity: 0.8;
}
/* Individual portfolio item styles*/
.portfolio-item-individual1 {
padding: 0 2em 2em;
max-width: 1000px;
margin: 0 auto;
}
.portfolio-item-individual1 h3 {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.portfolio-item-individual1 p {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.portfolio a {
color: var(--clr-light);
display: block;
margin-bottom: 20px;
}
.portfolio a:hover {
transform: scale(1.1);
}
.portfolio p {
color: var(--clr-light);
font-weight: bold;
}
.portfolio img {
height: 300px;
}
.logo {
color: green;
width: 30px;
}
/* Typing effect feature styling */
/* Cursor */
.txt-type > .txt {
border-right: 0.2rem solid var(--clr-accent);
}
/* Blog page Styling */
.posts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
padding: 0 2em 2em;
max-width: 1000px;
margin: 0 auto;
grid-gap: 5rem;
}
.posts p {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.posts p a {
line-height: 1px;
}
.post-header {
font-size: var(--fs-h4);
text-decoration: none;
}
.post-header em {
font-size: 0.8rem;
}
.posts-container {
background: inherit;
color: inherit;
}
code,
samp {
background-color: #ddd;
color: var(--clr-accent);
display: inline-block;
border-radius: 3px;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
text-align: left;
line-height: 1.5;
}
pre code {
white-space: pre;
margin-left: auto;
margin-right: auto;
}
.pre {
margin-left: 4rem;
margin-right: 4rem;
}
.console-error {
color: red;
}
.portfolio-item-individual1 pre {
margin-left: inherit;
margin-right: auto;
overflow: auto;
padding: 20px;
}
@media (max-width: 500px) {
.portfolio-item-individual1 pre {
font-size: 10px;
}
}
@media (max-width: 350px) {
.portfolio-item-individual1 pre {
font-size: 8px;
}
}
.nostyle {
background-color: #fff;
}
/* Styling the toggle theme button*/
/* The switch - the box around the slider */
.theme-container {
display: flex;
width: 100%;
height: 100%;
background: var(--color-secondary);
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--clr-light);
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 40px;
width: 40px;
left: 0px;
bottom: 4px;
top: 0;
bottom: 0;
margin: auto 0;
-webkit-transition: 0.4s;
transition: 0.4s;
box-shadow: 0 0px 15px #2020203d;
background: white url("https://i.ibb.co/FxzBYR9/night.png");
background-repeat: no-repeat;
background-position: center;
}
input:checked + .slider {
background-color: #2196f3;
background-color: var(--clr-accent);
}
input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
input:checked + .slider:before {
-webkit-transform: translateX(24px);
-ms-transform: translateX(24px);
transform: translateX(24px);
background: white url("https://i.ibb.co/7JfqXxB/sunny.png");
background-repeat: no-repeat;
background-position: center;
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.skills {
max-width: 1000px;
margin: 0 auto;
}
.skills-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
grid-gap: 10px;
}
.skills-container figure {
text-align: center;
font-size: var(--fs-body);
color: inherit;
}
#welcome-section {
padding-top: 0px;
margin-top: 0px;
display: block;
height: 100vh;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment