Antonio Erdeljac Portfolio - FreeCodeCamp challenge
How do I make an antonio erdeljac portfolio - freecodecamp challenge?
What is a antonio erdeljac portfolio - freecodecamp challenge? How do you make a antonio erdeljac portfolio - freecodecamp challenge? This script and codes were developed by Antonio Erdeljac on 06 December 2022, Tuesday.
Antonio Erdeljac Portfolio - FreeCodeCamp challenge Previews
Antonio Erdeljac Portfolio - FreeCodeCamp challenge - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Antonio Erdeljac Portfolio - FreeCodeCamp challenge</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body> <div class="overlay"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="feed"> <img id="face" src="https://scontent-otp1-1.xx.fbcdn.net/v/t1.0-9/12347591_948922258508257_3307557802348778975_n.jpg?oh=1a9474486d08433298d6719734d91589&oe=592E86CD" class="rounded-circle border img-responsive mx-auto d-block my-3"> <div id="myname"> <h1 id="name" style="color:#fff; font-family: 'Poppins'; opacity: 0;" class="text-center my-3">Antonio Erdeljac</h1> <p style="opacity: 0;" class="lead text-center" id="meinfo">Full stack web developer.</p> <hr id="firsthr" style="margin-top: 20px; margin-bottom: 20px;"> </div> </div> </div> </div> <div id="opisi"> <div class="row" class="text-center" id="navmoj"> <div class="col-lg-3"> <a href="#about" id="abouthref" style="text-decoration: none; color:#fff;"><p class="text-center navmojitem">About</p></a> </div> <div class="col-lg-3"> <a href="#tehnology" id="tehnologyhref" style="text-decoration: none; color:#fff;"><p class="text-center navmojitem">Tehnology</p></a> </div> <div class="col-lg-3"> <a href="#projects" id="projectshref" style="text-decoration: none; color:#fff;"><p class="text-center navmojitem">Projects</p></a> </div> <div class="col-lg-3"> <a href="#contact" id="contacthref" style="text-decoration: none; color:#fff;"><p class="text-center navmojitem">Contact</p></a> </div> </div> <div class="row" id="about" style="margin-top:30vh;"> <div class="col-lg-12"> <h1 class="color-white" style="color:#fff; font-family: 'Poppins';">About</h1> <p class="color-white lead" style="color:#fff;">My name is Antonio Erdeljac, I am a 15 year old web developer from Croatia. I started gaining interest in computers and programming from a young age, trying to create various programs and apps using Batch language. Later on I gained interest for hacking (even though I'm pretty sure every kid finds that interesting) and mastered Python programming language. As I grew older, my passion for hacking was no more, instead I started doing video and graphics design. Currently I am learning web development languages, and my graphics design experience is becoming my web design skills. </p> <hr> </div> </div> <div class="row" id="tehnology" style="margin-top:30vh;"> <div class="col-lg-12"> <h1 class="color-white" style="color:#fff; font-family: 'Poppins';">Tehnology</h1> <p class="color-white lead" style="color:#fff;">I am always learning new things, and I will always be willing to. These are some of tehnologies I am most comfortable with:</p> <ul style="color:#fff; font-size:20px;"> <li>Laravel 5.3</li> <li>Bootstrap 4</li> <li>Ajax</li> <li>JQuery</li> <li>MySQL</li> </ul> <p class="color-white lead" style="color:#fff;">And many more to come.</p> <hr> </div> </div> <div class="row" id="projects" style="margin-top:30vh;"> <div class="col-lg-12"> <h1 class="color-white" style="color:#fff; font-family: 'Poppins';">Projects</h1> <p class="color-white lead" style="color:#fff;">As I mentioned in <a href="#about"style="color:#fff; text-decoration: none;"><b>About</b></a> section, I created a lot of projects from a young age. Sadly, most of them have no trace of existance anymore, but these are some of the projects I am most proud of:</p> <div class="row"> <div class="col-lg-4 opacity-hover"> <img src="https://imgroll.net/images/2017/02/19/poz.png" class=" img-fluid img-thumbnail" > </div> <div class="col-lg-4 opacity-hover"> <img src="https://imgroll.net/images/2017/02/19/poz.png" class=" img-fluid img-thumbnail" > </div> <div class="col-lg-4 opacity-hover"> <img src="https://imgroll.net/images/2017/02/19/poz.png" class=" img-fluid img-thumbnail" > </div> </div> <hr> </div> </div> <div class="row" id="contact" style="margin-top:30vh;"> <div class="col-lg-12"> <h1 class="color-white" style="color:#fff; font-family: 'Poppins';">Contact</h1> <p class="color-white lead" style="color:#fff; margin-bottom: 40px;">You can contact me on these accounts:</p> <div class="row"> <div class="col-lg-4 text-center"> <a href="https://www.facebook.com/Antonioerdeljac" target="_blank" style="color:#fff; text-decoration:none;"><i class="fa fa-facebook fa-3x opacity-hover"></i></a> </div> <div class="col-lg-4 text-center"> <a href="https://twitter.com/antonioerdaa" target="_blank" style="color:#fff; text-decoration:none;"><i class="fa fa-twitter fa-3x opacity-hover"></i></a> </div> <div class="col-lg-4 text-center"> <a href="https://www.freecodecamp.com/antonioerdeljac" target="_blank" style="color:#fff; text-decoration:none;"><i class="fa fa-free-code-camp fa-3x opacity-hover"></i></a> </div> </div> <hr> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Antonio Erdeljac Portfolio - FreeCodeCamp challenge - Script Codes CSS Codes
@import url('https://fonts.googleapis.com/css?family=Poppins');
h1 { font-color: #fff; font-family: 'Poppins', sans-serif;
}
a { text-decoration: none; color:#fff;
}
#meinfo { color:#fff; transition: 5s;
}
html { background: url(http://fullhdpictures.com/wp-content/uploads/2016/05/Great-Canada-Wallpaper.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.overlay { position: fixed; width: 100vw; height: 100%; left: 0; top: 0; z-index: 2000; background: rgba(45,137,229,.70); overflow:auto; }
.fa { color:#fff;
}
.opacity-hover { opacity:1; transition: .5s;
}
.opacity-hover:hover { opacity: .5;
}
.border { border-style: solid; border-width: 2px; border-color: #fff; border-radius: 50%; -webkit-box-shadow: 0px 0px 30px 2px rgba(0,0,0,0.07);
-moz-box-shadow: 0px 0px 30px 2px rgba(0,0,0,0.07);
box-shadow: 0px 0px 30px 2px rgba(0,0,0,0.07);
}
hr { background-color:#fff;
}
.navmojitem { padding:5px; cursor: pointer; transition: .6s;
}
.color-white: { color:#fff;
}
.navmojitem:hover { color: #2d89e5; background-color: #fff; border-radius:5px;
}
#navmoj { color:#fff; opacity: 0; transition: 5s;
}
#face { height: 0px; width: 0px; transition: 2s;
}
#name { opacity: 0; transition: 5s;
}
#firsthr { width:0px; transition: 2s;
}Antonio Erdeljac Portfolio - FreeCodeCamp challenge - Script Codes JS Codes
$(document).ready(function() { $('#opisi').hide(); $('#face').css('height','100'); $('#face').css('width','100'); $('#name').css('opacity', '1'); $('#meinfo').css('opacity', '1'); $('#firsthr').css('width', '100%'); $('#navmoj').css('opacity', '1'); setInterval(function(){ $('#opisi').fadeIn('slow'); }, 2000); $('#abouthref').click(function(){ $('#about').hide(); $('#about').fadeIn('slow'); }); $('#tehnologyhref').click(function(){ $('#tehnology').hide(); $('#tehnology').fadeIn('slow'); }); $('#projectshref').click(function(){ $('#projects').hide(); $('#projects').fadeIn('slow'); }); $('#contacthref').click(function(){ $('#contact').hide(); $('#contact').fadeIn('slow'); }); $('#face').hover(function(){ $('#face').css('transition','.5s'); $('#face').css('height','130'); $('#face').css('width','130'); }, function(){ $('#face').css('height','100'); $('#face').css('width','100'); });
});
| Developer | Antonio Erdeljac |
| Username | antonioerda |
| Uploaded | December 06, 2022 |
| Rating | 3 |
| Size | 4,255 Kb |
| Views | 10,120 |
Do you need developer help for Antonio Erdeljac Portfolio - FreeCodeCamp challenge?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Antonio Erdeljac (antonioerda) Script Codes
Create amazing art & images with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
| A cube | KyleDavidE | 18,627 Kb |
| Sass random color animation | Jotavejv | 4,827 Kb |
| Simple CSS loader. | Cabrera | 2,574 Kb |
| Particle Motion trajectories | Sniejadlik | 5,899 Kb |
| Page Transitions in Backbone | Mikefowler | 3,691 Kb |
| Slider | Mohammed-fawzy | 2,634 Kb |
| Commuter Line Tokyu 8500 | Pedox | 7,031 Kb |
| Very Simple Slider | Doodlemarks | 2,682 Kb |
| Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!