A Pen by HARUN PEHLİVAN on CodePen.
Created
June 6, 2021 21:06
-
-
Save harunpehlivan/13f97c0feecac23b962228c9d56308e5 to your computer and use it in GitHub Desktop.
HARUN PEHLİVAN | IT (CODER,DESIGNER) FOUNDER CEO
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <title>HARUN PEHLİVAN | IT (CODER,DESIGNER) FOUNDER CEO </title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> | |
| <script | |
| src="https://harunpehlivanitcoderdesignerfounderceo.glitch.me/836a943e18.js" | |
| crossorigin="anonymous" | |
| ></script> | |
| <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" /> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <nav> | |
| <div class="nav-brand"> | |
| <a href="index.html"> | |
| <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622997405/favicon_vltsar.ico" alt="Chaoo" /> | |
| </a> | |
| </div> | |
| <div class="burger-menu-icon"> | |
| <div class="line1"></div> | |
| <div class="line2"></div> | |
| <div class="line3"></div> | |
| </div> | |
| <ul class="nav-list"> | |
| <li class="nav-item"> | |
| <a href="#landing-page"> | |
| <img | |
| src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1613759952/003_megvxx.jpg" | |
| alt="HARUN PEHLİVAN " | |
| class="profile-pic nav-link" | |
| /> | |
| <span class="caption nav-link">HARUN PEHLİVAN </span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#about" class="nav-link">About</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#services" class="nav-link">Services</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#projects" class="nav-link">Projects</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#contact" class="nav-link">Contact</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="https://facebook.com/100008152065270" target="_blank" class="nav-link"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| <a href="https://www.instagram.com/harunpehlivantebimtebitagem" target="_blank" class="nav-link"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" target="_blank" class="nav-link"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| </li> | |
| <div class="cta"> | |
| <a href="https://hpitgroup.glitch.me/" target="_blank" class="btn nav-link">Buy Me Coffee</a> | |
| </div> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <main> | |
| <section id="landing-page" class="landing-page"> | |
| <div class="container"> | |
| <div class="main-message"> | |
| <h2>H PEHLİVAN</h2> | |
| <h3>{Coder Desgıner}</h3> | |
| <p>HP IT GROUP . (TEBIM TEBITAGEM) . TTGRT </p> | |
| <div class="intro-btn"> | |
| <div class="cta"> | |
| <a href="#contact" class="btn">Get In Touch</a> | |
| </div> | |
| <div class="cta"> | |
| <a href="#projects" class="btn">My Projects</a> | |
| </div> | |
| </div> | |
| <div> | |
| <a href="#about" class="scroll-down"> | |
| <i class="fa fa-chevron-down" aria-hidden="true"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="about" class="about"> | |
| <div class="container"> | |
| <div class="about-img"> | |
| <img | |
| src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1613759952/003_megvxx.jpg" | |
| alt="HARUN PEHLİVAN " | |
| class="about-pic" | |
| /> | |
| </div> | |
| <div class="about-text-box"> | |
| <h2>HARUN PEHLİVAN 👋🏽</h2> | |
| <p> | |
| <i class="fa fa-calendar fa-fw w3-margin-right"></i> 22/07/1984 Çorum'da Doğdum Aslen Samsun'un Havza ilçesi | |
| </p> | |
| <p> | |
| <i class="fa fa-file-code-o" aria-hidden="true"></i> The language I Started Programming is PASCAL | |
| </p> | |
| </div> | |
| </div> | |
| <hr /> | |
| </section> | |
| <section id="services" class="services"> | |
| <div class="container"> | |
| <div class="title-heading"> | |
| <h2>DIGITIZE YOUR BUSINESS</h2> | |
| <p> | |
| i will help you to create a remarkable first impression with | |
| creative designs | |
| </p> | |
| </div> | |
| <div class="service-tiers"> | |
| <div class="tier-item"> | |
| <i class="fa fa-code" aria-hidden="true"></i> | |
| <h2>Web Development</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem | |
| quasi earum, debitis exercitationem quod labore quae, saepe | |
| voluptatum fugiat placeat iste, numquam maxime? Aliquam | |
| explicabo, reiciendis corrupti voluptatum eum esse? | |
| </p> | |
| </div> | |
| <div class="tier-item"> | |
| <i class="fa fa-mobile" aria-hidden="true"></i> | |
| <h2>Responsive Design</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem | |
| quasi earum, debitis exercitationem quod labore quae, saepe | |
| voluptatum fugiat placeat iste, numquam maxime? Aliquam | |
| explicabo, reiciendis corrupti voluptatum eum esse? | |
| </p> | |
| </div> | |
| <div class="tier-item"> | |
| <i class="fa fa-file-code-o" aria-hidden="true"></i> | |
| <h2>PSD to HTML</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem | |
| quasi earum, debitis exercitationem quod labore quae, saepe | |
| voluptatum fugiat placeat iste, numquam maxime? Aliquam | |
| explicabo, reiciendis corrupti voluptatum eum esse? | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <hr /> | |
| </section> | |
| <section id="projects" class="projects"> | |
| <div class="title-heading"> | |
| <h2>PROJECTS</h2> | |
| <p>these are some of my recent projects</p> | |
| </div> | |
| <div class="project-item"> | |
| <div class="project-img has-margin-right"> | |
| <img src="https://s0.wp.com/mshots/v1/https%3A%2F%2Fmachinelearning.glitch.me?w=360" /> | |
| </div> | |
| <div class="project-description"> | |
| <h2> (ML) (DL) (AI) </h2> | |
| <p> | |
| (ML) MACHINE LEARNING (DL) DEP LEARNING | |
| (AI) ARTIFICIAL INTELLIGENCE | |
| </p> | |
| <a href="https://machinelearning.glitch.me/" class="project-link" target="_blank" | |
| ><i class="fa fa-github" aria-hidden="true"> View Code</i></a | |
| > | |
| </div> | |
| </div> | |
| <div class="project-item"> | |
| <div class="project-description has-margin-right"> | |
| <h2> Arapça Osmanlıca Klavye </h2> | |
| <a href="https://arapcaosmanlicaklavye.glitch.me/" class="project-link" target="_blank" | |
| ><i class="fa fa-github" aria-hidden="true"> View Code</i></a | |
| > | |
| </div> | |
| <div class="project-img"> | |
| <img src="https://s0.wp.com/mshots/v1/https%3A%2F%2Farapcaosmanlicaklavye.glitch.me?w=360" /> | |
| </div> | |
| </div> | |
| <div class="project-item"> | |
| <div class="project-img has-margin-right"> | |
| <img src="https://s0.wp.com/mshots/v1/https%3A%2F%2Fwebcalisma.glitch.me?w=360" /> | |
| </div> | |
| <div class="project-description"> | |
| <h2> WEB ÇALIŞMA </h2> | |
| <a href="https://webcalisma.glitch.me/" class="project-link" target="_blank" | |
| ><i class="fa fa-github" aria-hidden="true"> View Code</i></a> | |
| </div> | |
| </div> | |
| <div class="project-item"> | |
| <div class="project-img has-margin-right"> | |
| <img src="https://s0.wp.com/mshots/v1/https%3A%2F%2Fklavyehiztesti.glitch.me?w=360" /> | |
| </div> | |
| <div class="project-description"> | |
| <h2> Klavye Hız Testi </h2> | |
| <a href="https://klavyehiztesti.glitch.me/" class="project-link" target="_blank" | |
| ><i class="fa fa-github" aria-hidden="true"> View Code</i></a> | |
| </div> | |
| </div> | |
| <div class="project-item"> | |
| <div class="project-img has-margin-right"> | |
| <img src="https://s0.wp.com/mshots/v1/https%3A%2F%2Fchessharunpehlivan.glitch.me?w=360" /> | |
| </div> | |
| <div class="project-description"> | |
| <h2> CHESS HARUN PEHLİVAN </h2> | |
| <a href="https://chessharunpehlivan.glitch.me/" class="project-link" target="_blank" | |
| ><i class="fa fa-github" aria-hidden="true"> View Code</i></a> | |
| </div> | |
| </div> | |
| <hr /> | |
| </section> | |
| <section id="contact" class="contact"> | |
| <h2>Get In Touch</h2> | |
| <p> | |
| I'd love if you reached out to me. Even if it's just to say "Hey!". | |
| Don't hesitate! Drop me a line and I’ll get back to you ASAP! | |
| </p> | |
| <p> | |
| <i | |
| >For gig and advertising opportunities, begin your subject with | |
| <strong>"Gig"</strong></i | |
| > | |
| </p> | |
| <div class="container"> | |
| <p><a href="mailto:trcmnhp@hotmail.com"><i class="fas fa-envelope-open"></i></a></p> | |
| <p><a href="https://facebook.com/100008152065270" target="_blank"><i class="fab fa-facebook"> </i></a></p> | |
| <p><a href="https://www.instagram.com/harunpehlivantebimtebitagem" target="_blank" | |
| ><i class="fab fa-instagram"></i></a></p> | |
| <p><a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" target="_blank"><i class="fab fa-linkedin"> </i></a></p> | |
| <p><a href="https://dev.to/harunpehlivan" target="_blank"><i class="fab fa-dev"> </i></a></p> | |
| <p><a href="https://codepen.io/harunpehlivan" target="_blank"><i class="fab fa-codepen"> </i></a></p> | |
| <p><a href="https://github.com/harunpehlivan" target="_blank"><i class="fab fa-github"> </i></a></p> | |
| <p><a href="https://gitlab.com/harunpehlivan" target="_blank"><i class="fab fa-gitlab"> </i></a></p> | |
| <p><a href="https://www.freecodecamp.org/harunpehlivan" target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a></p> | |
| <p><a href="https://www.youtube.com/user/harunpehlivan1" target="_blank"><i class="fab fa-youtube"> </i></a> </p> | |
| <p> <a href="https://soundcloud.com/harun-pehl-van" target="_blank"><i class="fab fa-soundcloud"> </i></a></p> | |
| <p><a href="https://open.spotify.com/user/21g6q24dgxix3pudhtdafv2xy/playlist/0Ptperv5fQvkxxGgGqgOo9" target="_blank"><i class="fab fa-spotify"> </i></a></p> | |
| <p><a href="https://dribbble.com/harunpehlivan" target="_blank" | |
| ><i class="fab fa-dribbble"> </i></a></p> | |
| <p><a href="https://www.behance.net/harunpehlivan" target="_blank" | |
| ><i class="fab fa-behance"> </i></a></p> | |
| </div> | |
| <hr /> | |
| </section> | |
| <footer> | |
| <div class="footer-nav"> | |
| <a href="#landing-page" class="footer-nav-link">Home</a> | |
| <a href="#about" class="footer-nav-link">About</a> | |
| <a href="#services" class="footer-nav-link">Services</a> | |
| <a href="projects" class="footer-nav-link">Projects</a> | |
| <a href="#contact" class="footer-nav-link">Contact</a> | |
| </div> | |
| <div class="footer-coded-by"> | |
| <p> | |
| <i class="fas fa-code"></i> with 💙 by HARUN PEHLİVAN © 2021 | |
| </p> | |
| <p>CODER,DESIGNER “ HP IT GROUP (TEBIM TEBITAGEM) TTGRT FOUNDER CEO ” </p> | |
| </div> | |
| <div class="footer-social"> | |
| <a href="https://dev.to/harunpehlivan" target="_blank"><i class="fab fa-dev"> </i></a> | |
| <a href="https://codepen.io/harunpehlivan" target="_blank"><i class="fab fa-codepen"> </i></a> | |
| <a href="https://github.com/harunpehlivan" target="_blank"><i class="fab fa-github"> </i></a> | |
| <a href="https://gitlab.com/harunpehlivan" target="_blank"><i class="fab fa-gitlab"> </i></a> | |
| <a href="https://www.freecodecamp.org/harunpehlivan" target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a> | |
| </div> | |
| </footer> | |
| </main> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Function expression to select elements ` | |
| const selectElement = (s) => document.querySelector(s); | |
| const navLinks = document.querySelectorAll(".nav-link"); | |
| selectElement(".burger-menu-icon").addEventListener("click", () => { | |
| selectElement(".nav-list").classList.toggle("active"); | |
| selectElement(".burger-menu-icon").classList.toggle("toggle") | |
| navLinks.forEach((link, index) => { | |
| if (link.style.animation){ | |
| link.style.animation = "" | |
| }else{ | |
| link.style.animation = `navLinkAnimate 0.5s ease forwards ${ index/7 + 0.5}s` | |
| console.log(index/7 + 0.5) | |
| } | |
| }) | |
| }); | |
| navLinks.forEach(link => { | |
| link.addEventListener("click", () => { | |
| selectElement(".nav-list").classList.toggle("active"); | |
| selectElement(".burger-menu-icon").classList.toggle("toggle"); | |
| navLinks.forEach((link, index) => { | |
| if (link.style.animation){ | |
| link.style.animation = "" | |
| }else{ | |
| link.style.animation = `navLinkAnimate 0.5s ease forwards ${ index/7 + 0.5}s` | |
| console.log(index/7 + 0.5) | |
| } | |
| }) | |
| }) | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("https://fonts.googleapis.com/css2?family=Poppins&family=Share+Tech+Mono&display=swap"); | |
| /* Global styles */ | |
| *, | |
| *::before, | |
| *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: inherit; | |
| } | |
| html { | |
| font-family: "Share Tech Mono", monospace; | |
| font-size: 12px; | |
| box-sizing: border-box; | |
| scroll-behavior: smooth; | |
| color: #e7e7e7; | |
| background: rgb(19, 19, 19); | |
| } | |
| a { | |
| text-decoration: none; | |
| color: rgb(3, 155, 155); | |
| } | |
| a:hover { | |
| color: rgba(249, 105, 14, 1); | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| p { | |
| font-size: 1.4rem; | |
| } | |
| img { | |
| width: 100%; | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| /* header */ | |
| header { | |
| width: 100%; | |
| height: 5rem; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 1; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 90rem; | |
| margin: 0 auto; | |
| padding: 0 1.5rem; | |
| } | |
| .nav-brand { | |
| width: 7rem; | |
| } | |
| nav { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 1rem 0; | |
| border-bottom: 2px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .line1 { | |
| width: 15px; | |
| height: 3px; | |
| margin: 5px 0; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(249, 105, 14, 1) 0%, | |
| rgb(255, 255, 255) 100% | |
| ); | |
| } | |
| .line2 { | |
| width: 30px; | |
| height: 3px; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(249, 105, 14, 1) 0%, | |
| rgb(255, 255, 255) 100% | |
| ); | |
| } | |
| .line3 { | |
| width: 15px; | |
| height: 3px; | |
| margin: 5px 0; | |
| margin-left: 15px; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(249, 105, 14, 1) 0%, | |
| rgb(255, 255, 255) 100% | |
| ); | |
| } | |
| .burger-menu-icon { | |
| cursor: pointer; | |
| z-index: 999; | |
| position: fixed; | |
| right: 0; | |
| top: 0; | |
| background: rgba(55, 55, 55, 0.5); | |
| padding: 1.2rem; | |
| border-radius: 0% 0% 0% 40%; | |
| } | |
| .profile-pic { | |
| height: 9rem; | |
| width: auto; | |
| border-radius: 50%; | |
| display: block; | |
| margin: 1.5rem 0; | |
| } | |
| .caption { | |
| display: block; | |
| } | |
| .nav-list { | |
| width: 24rem; | |
| height: 100vh; | |
| background-color: #222222; | |
| position: fixed; | |
| top: 0; | |
| right: -26rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-self: start; | |
| z-index: 998; | |
| transition: all 650ms ease-in-out; | |
| } | |
| .nav-list.active { | |
| right: 0; | |
| } | |
| .nav-item { | |
| margin: 1.2rem 0; | |
| } | |
| .nav-link { | |
| opacity: 0; | |
| font-size: 1.3rem; | |
| text-transform: uppercase; | |
| color: #cecece; | |
| letter-spacing: 1.5px; | |
| } | |
| .nav-link:hover { | |
| color: rgba(249, 105, 14, 1); | |
| } | |
| .toggle { | |
| background: none; | |
| } | |
| .toggle .line1 { | |
| transform: rotate(-45deg) translate(-5px, 6px) scaleX(2); | |
| } | |
| .toggle .line2 { | |
| opacity: 0; | |
| } | |
| .toggle .line3 { | |
| transform: rotate(45deg) translate(-5px, -6px) scaleX(2); | |
| margin-left: 0px; | |
| } | |
| @keyframes navLinkAnimate { | |
| from { | |
| opacity: 0; | |
| transform: translate(50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translate(0px); | |
| } | |
| } | |
| /* Landing Page */ | |
| .landing-page { | |
| width: 100%; | |
| height: 100vh; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(0, 64, 77, 0.9) 0%, | |
| rgba(0, 0, 0, 0.8) 100% | |
| ), | |
| url("https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1622997406/landing-page_klny8z.png") center no-repeat; | |
| background-size: contain; | |
| position: relative; | |
| } | |
| .main-message { | |
| width: 100%; | |
| max-width: 58rem; | |
| text-transform: uppercase; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| text-align: center; | |
| } | |
| .main-message h2 { | |
| letter-spacing: 1.2rem; | |
| font-size: 2rem; | |
| font-weight: 400; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| animation: typing 5s steps(27), blink 1s ease-in-out 7s infinite; | |
| width: 27ch; | |
| margin: auto; | |
| border-right: 4px solid rgba(255, 255, 255, 1); | |
| } | |
| @keyframes typing { | |
| 75% { | |
| width: 0ch; | |
| color: rgba(249, 105, 14, 1); | |
| } | |
| 100% { | |
| width: 27ch; | |
| } | |
| } | |
| @keyframes blink { | |
| 0% { | |
| border-right: 4px solid rgba(255, 255, 255, 0); | |
| } | |
| 100% { | |
| border-right: 4px solid rgb(194, 194, 194); | |
| } | |
| } | |
| .main-message h3 { | |
| font-size: 4rem; | |
| margin: 1rem 0; | |
| color: rgba(249, 105, 14, 1); | |
| background: linear-gradient( | |
| to right, | |
| rgba(249, 105, 14, 1) 0%, | |
| rgba(102, 51, 153, 1) 100% | |
| ); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .main-message p { | |
| text-transform: none; | |
| font-size: 1.7rem; | |
| font-weight: 400; | |
| } | |
| .intro-btn { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .btn { | |
| margin: 0 9px; | |
| background: rgba(3, 155, 155); | |
| border-radius: 2rem; | |
| color: #fafafa; | |
| padding: 1rem 2.5rem; | |
| display: inline-block; | |
| margin-top: 2rem; | |
| transition: background-color 650ms; | |
| font-weight: 500; | |
| letter-spacing: 2px; | |
| } | |
| .btn:hover { | |
| color: #fafafa; | |
| background-color: rgba(189, 72, 0); | |
| } | |
| .scroll-down i { | |
| color: #fafafa; | |
| transition: color 650ms; | |
| margin-top: 2rem; | |
| font-size: 3.5rem; | |
| } | |
| .scroll-down i:hover { | |
| color: rgba(189, 72, 0); | |
| } | |
| /* About */ | |
| .about { | |
| width: 100%; | |
| min-height: 100vh; | |
| max-width: 70rem; | |
| margin: auto; | |
| } | |
| .about .container { | |
| display: flex; | |
| align-items: center; | |
| min-height: 80vh; | |
| } | |
| .about-img img { | |
| height: 12rem; | |
| width: auto; | |
| border-radius: 50%; | |
| margin: 2rem; | |
| box-shadow: 0 20px 30px 0 rgba(0, 255, 255, 0.15); | |
| } | |
| .about-text-box { | |
| flex-grow: 1; | |
| flex-shrink: 1; | |
| flex-basis: 0; | |
| } | |
| .about-text-box h2 { | |
| font-size: 4rem; | |
| margin-bottom: 20px; | |
| } | |
| .about-text-box p { | |
| font-family: "Poppins", sans-serif; | |
| font-size: 1.4rem; | |
| padding: 0; | |
| margin-bottom: 1.45rem; | |
| } | |
| hr { | |
| margin: 4rem 0; | |
| background: linear-gradient( | |
| to right, | |
| rgba(249, 105, 14, 1) 0%, | |
| rgba(102, 51, 153, 1) 100% | |
| ); | |
| border: 0; | |
| height: 1px; | |
| } | |
| /* Services */ | |
| .services { | |
| padding: 3rem 0; | |
| min-height: 100vh; | |
| max-width: 90rem; | |
| margin: auto; | |
| } | |
| .title-heading { | |
| text-align: center; | |
| margin-bottom: 5rem; | |
| } | |
| .title-heading h2 { | |
| font-size: 2rem; | |
| margin: 0.5rem 0 1rem 0; | |
| } | |
| .title-heading p { | |
| font-family: "Poppins", sans-serif; | |
| margin-bottom: 5rem; | |
| } | |
| .service-tiers { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); | |
| gap: 2.5rem; | |
| } | |
| .tier-item { | |
| height: 30rem; | |
| padding: 3rem; | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| cursor: default; | |
| } | |
| .tier-item i { | |
| font-size: 3.5rem; | |
| } | |
| .tier-item h2 { | |
| font-size: 2rem; | |
| margin: 2rem 0; | |
| background: linear-gradient( | |
| to right, | |
| rgba(249, 105, 14, 1) 0%, | |
| rgba(102, 51, 153, 1) 100% | |
| ); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .tier-item p { | |
| font-family: "Poppins", sans-serif; | |
| font-size: 1.4rem; | |
| } | |
| /* Projects */ | |
| .projects { | |
| padding: 3rem 0; | |
| min-height: 100vh; | |
| max-width: 70rem; | |
| margin: auto; | |
| } | |
| .has-margin-right { | |
| margin: 0 3rem 0 0; | |
| } | |
| .project-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 1.45rem 5rem 1.45rem; | |
| } | |
| .project-img { | |
| flex: 1; | |
| } | |
| .project-description { | |
| flex: 1; | |
| } | |
| .project-description h2 { | |
| font-size: 2rem; | |
| margin: 2rem 0; | |
| background: linear-gradient( | |
| to right, | |
| rgba(249, 105, 14, 1) 0%, | |
| rgba(102, 51, 153, 1) 100% | |
| ); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .project-description p { | |
| font-family: "Poppins", sans-serif; | |
| font-size: 1.4rem; | |
| } | |
| .project-link { | |
| display: inline-block; | |
| margin: 2rem 0; | |
| font-size: 1.4rem; | |
| } | |
| /* Contact */ | |
| .contact { | |
| width: 100%; | |
| min-height: 100vh; | |
| max-width: 70rem; | |
| margin: auto; | |
| padding-top: 5rem; | |
| } | |
| .contact h2 { | |
| text-align: center; | |
| font-size: 2.5rem; | |
| margin-bottom: 5rem; | |
| } | |
| .contact p { | |
| font-family: "Poppins", sans-serif; | |
| font-size: 1.4rem; | |
| padding: 0; | |
| margin: 0.9rem 2rem; | |
| } | |
| .contact .container { | |
| min-height: 50vh; | |
| display: flex; | |
| justify-content: space-evenly; | |
| align-items: center; | |
| } | |
| /* Footer */ | |
| footer { | |
| width: 100%; | |
| max-width: 70rem; | |
| margin: auto; | |
| padding: 2.5rem; | |
| color: #8a8a8a; | |
| text-align: center; | |
| font-size: 1.2rem; | |
| display: flex; | |
| justify-content: space-evenly; | |
| flex-direction: column; | |
| } | |
| footer a { | |
| margin: 0 0.2rem; | |
| } | |
| .footer-coded-by { | |
| margin: 2rem 0; | |
| } | |
| .footer-social a { | |
| margin: 0 0.5rem; | |
| font-size: 2rem; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 750px) { | |
| .main-message h3 { | |
| font-size: 3rem; | |
| } | |
| .about .container { | |
| flex-direction: column; | |
| } | |
| p { | |
| font-size: 1.3rem; | |
| } | |
| .title-heading { | |
| margin: 0; | |
| } | |
| .services-tiers { | |
| gap: 0; | |
| } | |
| .project-item { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| padding: 2rem; | |
| box-shadow: 0 20px 30px 0 rgba(212, 255, 255, 0.15); | |
| } | |
| .project-img { | |
| width: 20rem; | |
| } | |
| } | |
| @media (max-width: 665px) { | |
| .main-message { | |
| top: 55%; | |
| } | |
| .main-message h2 { | |
| letter-spacing: 1rem; | |
| font-size: 1.5rem; | |
| width: 29ch; | |
| } | |
| .main-message h3 { | |
| font-size: 2rem; | |
| } | |
| .main-message p { | |
| font-size: 1.3rem; | |
| } | |
| .btn { | |
| border-radius: 0.9rem; | |
| padding: 0.9rem 0.9rem; | |
| } | |
| .about-text-box h2 { | |
| font-size: 3rem; | |
| margin-bottom: 20px; | |
| } | |
| .about-text-box p { | |
| margin: 0 0 2.45rem; | |
| } | |
| .title-heading h2 { | |
| margin-bottom: 2rem; | |
| } | |
| .title-heading p { | |
| font-size: 1.3rem; | |
| } | |
| .contact .container { | |
| flex-direction: column; | |
| } | |
| footer, | |
| footer p { | |
| font-size: 1.2rem; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment