Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Typing effect #26

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added Typing effect #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 124 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
/* global */
@import url("https://fonts.googleapis.com/css?family=Roboto");
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}

body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
background-color: #101214;
color: #7A7C80;
}

h2, .white {
color: #fff;
}

a {
color: #7A7C80;
text-decoration: none;
}

/* SECTION 1 */
.section-1 {
padding-top: 30vh;
text-align: center;
}

.section-1 p {
font-size: 1.1rem;
padding-bottom: 10px;
margin: 0;
}

.section-1 h2 {
font-size: 1.7rem;
margin-bottom: 10px;
}

.section-1 #handles {
border: 0.1rem solid rgb(255, 255, 255);
border-radius: 0.7rem;
margin: 4rem auto;
padding: 0.8rem 0 1.6rem 0;
width: 70%;
transition: 0.6s;
}

.section-1 #handles:hover {
background-color: #302d2d;
}

.section-1 #handles a {
font-size: 1.5rem;
padding: 10px;
transition: 0.8s;
}

.section-1 #handles a:hover {
color: #fff;
cursor: pointer;
transition: 0.3s;
}

/* SECTION 2 */
.section-2 {
padding-top: 10vh;
width: 70%;
}

.section-2 h2 {
font-size: 1.7rem;
margin-bottom: 10px;
}

.section-2 p {
font-size: 1.1rem;
padding-bottom: 10px;
margin: 0;
}

.section-2 .innersec {
border-bottom: 0.1rem solid white;
padding: 0 0.8rem 2rem 0.8rem;
transition: 0.6s;
}

.section-2 a {
display: block;
padding: 5px;
font-size: 1.2rem;
padding-left: 0;
width: 100px;
}

.section-2 a:hover {
font-size: 1.3rem;
color: #fff;
cursor: pointer;
transition: 0.3s;
}

.white:hover {
position: relative;
padding-left: 10px;
}

/* media queres */
@media (max-width: 780px) {
.grid-2 {
grid-template-columns: 1fr;
}
.section-1 {
padding: 0;
padding-top: 5rem;
}
.section-2 {
padding: 0;
padding-left: 1.5rem;
padding-top: 2rem;
}
}/*# sourceMappingURL=style.css.map */
1 change: 1 addition & 0 deletions css/style.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

86 changes: 61 additions & 25 deletions style.css → css/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,29 @@
/* global */
@import url('https://fonts.googleapis.com/css?family=Roboto');

@mixin para_prop {
font-size: 1.1rem;
padding-bottom: 10px;
margin:0;
}

@mixin h2_prop{
font-size: 1.7rem;
margin-bottom: 10px;
}

@mixin a_hover {
color: #fff;
cursor: pointer;
transition: 0.3s;
}

@mixin innerSec {
border-bottom: .1rem solid white;
padding: 0 .8rem 2rem .8rem;
transition: .6s;
}

.grid-2{
display: grid;
grid-template-columns: repeat(2,1fr);
Expand All @@ -12,7 +35,6 @@ body{
font-family: 'Roboto', sans-serif;
background-color: #101214;
color: #7A7C80;

}

h2,.white{
Expand All @@ -23,42 +45,64 @@ a{
color: #7A7C80;
text-decoration: none;
}
/* section 1 */


/* SECTION 1 */
.section-1{
padding-top: 40vh;
padding-top: 30vh;
text-align: center;
}

.section-1 p{
font-size: 1.1rem;
padding-bottom: 10px;
margin:0;
@include para_prop;
}

.section-1 h2{
font-size: 1.7rem;
margin-bottom: 10px;
@include h2_prop;
}

.section-1 #handles{
border: .1rem solid rgb(255, 255, 255);
border-radius: .7rem;
margin: 4rem auto;
padding: .8rem 0 1.6rem 0;
width: 70%;
transition: .6s;
}

.section-1 #handles:hover{
background-color: #302d2d;
}

.section-1 a{
.section-1 #handles a{
font-size: 1.5rem;
padding: 10px;
transition: .8s;
}
/* section 2 */

.section-1 #handles a:hover{
@include a_hover;
}




/* SECTION 2 */
.section-2{
padding-top: 10vh;
width: 70%;
}

.section-2 h2{
font-size: 1.7rem;
margin-bottom: 10px;
@include h2_prop;
}

.section-2 p{
font-size: 1.1rem;
padding-bottom: 10px;
margin:0;
@include para_prop;
}

.section-2 .innersec{
@include innerSec;
}

.section-2 a{
Expand All @@ -68,18 +112,10 @@ a{
padding-left: 0;
width: 100px;
}
/* animations / utilities */

.section-2 a:hover{
font-size: 1.3rem;
color: #fff;
cursor: pointer;
transition: 0.2s;
}

.section-1 a:hover{
color: #fff;
cursor: pointer;
transition: 0.3s;
@include a_hover;
}

.white:hover{
Expand Down
79 changes: 58 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,74 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

<!-- CSS FILE -->
<link rel="stylesheet" href="./css/style.css">

<title>Your Name</title>
</head>
<body>
<div class="grid-2">

<div class="section-1">
<i class="fas fa-code fa-5x white"></i>
<h2>FirstName LastName</h2>
<p>City,Country.</p>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<!-- fill the below line in index.js file at line no. 6 -->
<h2><span></span></h2>
<p>City, Country.</p>

<div id="handles">
<h3>Social handles</h3>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
</div>

<div class="section-2">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quas sint et nihil iusto eius nostrum sit error, repellat optio quisquam! Magnam dolore iusto cumque. Nostrum error iste neque maiores.</p>
<h2>Experience</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis in maiores autem quidem.</p>

<h2>Skills</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis in maiores autem quidem obcaecati excepturi! Cupiditate eaque itaque magni voluptatibus neque nobis est dolor? Atque sunt minus ipsa asperiores. At.</p>
<h2>Projects</h2>
<a href="#">Project 1</a>
<a href="#">Project 2</a>
<a href="#">Project 3</a>
<a href="#">Project 4</a>
<a href="#">Project 5</a>
<h2>Contact</h2>
<p>[email protected]</p>

<div id="sec1" class="innersec">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quas sint et nihil iusto eius nostrum sit error, repellat optio quisquam! Magnam dolore iusto cumque. Nostrum error iste neque maiores.</p>
</div>

<div id="sec2" class="innersec">
<h2>Experience</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis in maiores autem quidem.</p>
</div>

<div id="sec3" class="innersec">
<h2>Skills</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis in maiores autem quidem obcaecati excepturi! Cupiditate eaque itaque magni voluptatibus neque nobis est dolor? Atque sunt minus ipsa asperiores. At.</p>
</div>

<div id="sec4" class="innersec">
<h2>Projects</h2>
<a href="#">Project 1</a>
<a href="#">Project 2</a>
<a href="#">Project 3</a>
<a href="#">Project 4</a>
<a href="#">Project 5</a>
</div>

<div id="sec5" class="innersec">
<h2>Contact</h2>
<p>[email protected]</p>
</div>

</div>
</div>
</body>

<!-- jquery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<!-- TYPED JS -->
<script src="./typedjs/typed.js"></script>

<!-- js/jquery file -->
<script src="./index.js"></script>

</html>
16 changes: 16 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
$(document).ready(function () {

// typing effect
var typed = new Typed('.section-1 h2 span', {
// Waits 1000ms after typing "First"
strings: ['First sentence.', 'Second sentence.'],
smartBackspace: true,
loop: true,
loopCount: Infinity,
typeSpeed: 100,
backSpeed: 100,
startDelay: 500,
backDelay: 1000,
});

})
Loading