Skip to content

Instantly share code, notes, and snippets.

@ckaltenbach904
Created February 18, 2019 18:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ckaltenbach904/e66702e6033a10200f97e3d046829933 to your computer and use it in GitHub Desktop.
Save ckaltenbach904/e66702e6033a10200f97e3d046829933 to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Poppins" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>Index</title>
</head>
<body>
<nav class="container-fluid">
<section class="left">
<a href="/">CareerFoundry</a>
</section>
<section class="right">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<a href="#FAQ">FAQ</a>
</section>
</nav>
<!-- end nav container -->
<!-- carousel container -->
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/florian-olivo-1169467-unsplash.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/dean-pugh-710698-unsplash.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/domenico-loia-310197-unsplash.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem Ipsum</h5>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div><!-- /end of container -->
<div class="content">
<h1 id="home">Catharina Kaltenbach. Web Designer.</h1>
<p class="lead">Your website doesn't need to cost much!</p>
<p class="lead"> I truly believe that creating a beautiful, interactive Website change how people perceive your business! For love or money, I create Website with passion!</p>
</div><!-- /content-->
<!-- Three Column Grid -->
<div class="row text center">
<div class="col-sm p-5">
<img src="img/jannis-brandt-1195875-unsplash.jpg" class="rounded-circle" alt="random picture" width="180" height="180">
<h2>What makes me different from other Web Designer</h2>
<p> I love doing Websites for small businesses and help them to boost their business without shelling out extra buck. No hidden fees, just straightforward annual fee</p>
<a class="btn btn-primary" href="#" role="button">View details &raquo;</a>
</div><!-- /col -->
<br>
<div class="col-sm p-5">
<img src="img/james-sutton-188689-unsplash.jpg" class="rounded-circle" alt="random picture" width="180" height="180">
<h2>My Goals</h2>
<p>I create Websites to earn a little bist money, for fun and to broaden my horizons </p>
<a class="btn btn-primary" href="#" role="button">View details &raquo;</a>
</div><!-- /col -->
<br>
<div class="col-sm p-5">
<img src="img/myphoto.jpg" class="rounded-circle" alt="random picture" width="180" height="180">
<h2>About Me</h2>
<a href="#About">About Me</a>
<p>I am an artist by heart, I travel a lot, i take pictures a lot, i love reading history books, i care a lot about animals and most of all, I like to build beautiful Websites</p>
<a class="btn btn-primary" role="button">View details &raquo;</a>
</div><!-- /col -->
</div><!-- /row -->
<br>
<!-- ABOUT SECTION-->
<section id="about"></section>
<section class="container content"></section>
<section class="container">
<section class="header">
<h1 id="About">About Me</h1>
</section><!-- end header -->
</section><!-- end container -->
<section class="image column">
<img src="img/myphoto.jpg" alt="catharina's photo">
</section><!-- end image -->
<section class="intro column">
<h3>Introduction</h3>
<p>I am new at Web Development!</p>
</section><!-- end intro column -->
<section class="skills column">
<h3>My Skills</h3>
<ul id="skill-list">
<li>Networking (CCNA)</li>
<li>Database (SQL,MySQL)</li>
<li>IT Support</li>
</ul>
</section><!-- end skills column -->
<section class="main-text">
<h3>My Story</h3>
<p>My name is Catharina Kaltenbach. I have more than 10 years experience in IT Support, some Database administration and Networking. I work currently at Hughes Network Systems as a NOC operator. I have always been fascinated in web development but have not chance to learn. This year, I really decided to get into Web Development. It took me 6 months to really find the perfect Online school that would fit to my schedule and budget. Hunting for online classes is quite overwhelming as each one is different on what they offer. In addition, I have a few acquaintances who introduce me with web development so it helps me. </p>
</section><!-- this is a short story about me and how I decided to take Web Development course -->
</section> <!--End of About Section-->
<!-- CONTACT SECTION-->
<section id="contact"></section>
<div>
<main>
<div class="jumbotron" style="background-image:url('img/IMG_0323.jpg');">
<div class="container">
<h1 id class="contact">My Contact</h1>
<p class="name">Catharina Kaltenbach</p>
<p>Engelsruhe 24, 65929 Frankfurt Am Main, Germany</p>
<p>Tel. No: <i class="fas fa-phone"></i> +49 6997701</p>
<p>E-mail <i class="fas fa-envelope"></i> me at sfdabilene2006@gmail.com</p>
</div>
</div>
</main>
</div>
<footer>
<div class="footer">
<h5>I will be looking forward for your call!</h5>
</div>
</footer>
<br>
<!-- FAQ SECTION-->
<section id="FAQ"></section>
<h4 id class="FAQ">FAQ</h4>
<section class="faq_container">
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fas fa-plus"></i>
Why did you decide to become a web developer?
</button>
</h5>
</div>
<div id="collapseOne" class="#missing class show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
I decided to become a Web Developer because I am curious about it. Aside from curiosity I like to build something that I can directly work on it and see the result right away. I have IT background in System Integration but after working with several companies, I decided to do something that I can build so people can see it. Web Development can be a repetitive task but, at least, you can learn by your mistakes.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fas fa-plus"></i>
What is your design process?
</button>
</h5>
</div>
<div id="collapseTwo" class="#missing class" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
My design process is simple at the moment as I am only starting with Web Development. My main goal is to create a website for my client (especially small businesses) to target their audience.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="fas fa-plus"></i>
Who are your clients?
</button>
</h5>
</div>
<div id="collapseThree" class="#missing-class" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Small businesses, Individuals, Artists etc.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseOne">
<i class="fas fa-plus"></i>
What is your average project turnaround?
</button>
</h5>
</div>
<div id="collapseFour" class="#missing class show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
My average turnaround would be one to three week (25 hours a week) which also depends on the project that I am working on. If I know that the project would take more than three weeks, I always let my client know.
</div>
</div>
</div>
</div> <!-- End of accordion -->
</section>
<!-- End of faq_container -->
<section class="container" id="worksection">
<h4 id class="work">WORK</h4>
<div class="row" id="work_image">
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"><a href="https://brave-boyd-baa76b.netlify.com/" target="_blank"><img class="img-fluid" src="img/work1.jpg" alt="" class="border border-success"></a></div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"><a href="https://brave-boyd-baa76b.netlify.com/" target="_blank"><img class="img-fluid" src="img/work2.jpg"></a></div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"><a href="https://brave-boyd-baa76b.netlify.com/" target="_blank"><img class="img-fluid" src="img/work3.jpg"></a></div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"><a href="https://brave-boyd-baa76b.netlify.com/" target="_blank"><img class="img-fluid" src="img/work4.jpg"></a></div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"><a href="https://brave-boyd-baa76b.netlify.com/" target="_blank"><img class="img-fluid" src="img/work5.jpg"></a></div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"><a href="https://brave-boyd-baa76b.netlify.com/" target="_blank"><img class="img-fluid" src="img/work6.jpg"></a></div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"><a href="https://brave-boyd-baa76b.netlify.com/" target="_blank"><img class="img-fluid" src="img/work7.jpg"></a></div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"><a href="https://brave-boyd-baa76b.netlify.com/" target="_blank"><img class="img-fluid" src="img/work8.jpg"></a></div>
</div>
</section>
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<!-- Bootstrap core JS -->
<!-- Can place script tags with JavaScript files here -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment