Final class project
For this class project I have typed every single line my self. I have used the source code from the class, and based my website around this. What I noticed is that a lot of what makes the website beautiful comes from CSS. I think that my next class will be one based more around CSS. Or maybe your PHP class. But I think that I might go for the class how to build a complete website that you have. I will put my source code below.
I think that it takes a lot of practice websites to build, before I am able to do this all by my self without source code. But for now I am really happy with what I achieved!
I would like to get some advice on what class to take next.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0">
<title>Final Class Project</title>
<style>
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #fff;
}
.section {
padding: 20px;
overflow: hidden;
}
.container {
max-width: 980px;
margin: 0 auto;
}
.col-6 {
box-sizing: border-box;
width: calc(50% - 30px);
float: left;
margin: 0 15px;
padding: 25px;
}
.btn {
display: inline-block;
text-decoration: none;
text-align: center;
font-weight: bold;
font-size: 1rem;
color: #fff;
background: #555;
padding: 10px 15px;
border: 1px solid #444;
}
.course-list {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.course-list li {
padding: 3px 0;
border-bottom: 1px dotted #ccc;
border-top: 1px dotted #ccc;
margin: -1px auto;
width: 80%;
}
.site-header {
background: #1a1a26;
border-bottom: 1px solid #222233;
padding: 0 15px;
color: #fff;
overflow: hidden;
}
.site-title {
line-height: 1.7;
margin: 0;
float: left;
font-size: 28px;
}
.navigation {
display: block;
float: right;
}
.menu {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu li {
display: inline-block;
float: left;
}
.menu li a {
display: block;
padding: 15px 20px;
text-decoration: none;
color: #ffff;
}
.menu .current a {
background: #222231;
}
.menu li a:hover {
background: #2a2a3d;
}
#jumbotron {
background: #1a1a26;
color: #fff;
border-bottom: 50px solid #15151f;
}
#jumbotron .h1 {
font-size: 48px;
}
#jumbotron .lead {
font-size: 1.2rem;
line-height: 1.3;
}
#jumbotron .btn {
background: #ffd400;
border-color: #f5cc00;
color: #000;
}
#about {
float: right;
}
#course {
background: #383852;
}
#course .course-total {
background: #fff;
margin-top: 15px;
}
#course .course-title {
text-align: center;
font-size: 24px;
}
#course .btn {
display: block;
margin-top: 15px;
background: #ffd400;
border: #f5cc00;
color: #000;
}
#information {
display: block;
background: #242435;
color: #fff;
text-align: center;
}
#information .h1 {
font-size: 33px;
}
#information .lead {
font-size: 1.2rem;
line-height: 1.3;
}
.form {
width: 80%;
margin: 0 auto;
}
.form-field {
margin: 7px 0;
}
.text, .textarea {
width: 100%;
padding: 7px 10px;
font-size: 18px;
}
.textarea {
height: 200px;
}
#contact .btn {
background: #ffd400;
border-color: #f5cc00;
color: #000;
font-size: 1rem;
}
.site-footer {
padding: 20px;
background: #1a1a26;
color: #4e4e71;
text-align: center;
}
</style>
</head>
<body>
<header class="site-header">
<div class="container">
<h1 class="site-title">Van Boxmeer</h1>
<nav class="navigation" id="primary-menu">
<ul class="menu">
<li class="menu-item current"><a href="">Home</a></li>
<li class="menu-item"><a href="#about">About me</a></li>
<li class="menu-item"><a href="#course">My next course</a></li>
</ul>
</nav>
</div>
</header>
<section class="section" id="jumbotron">
<div class="container">
<header class="col-6 header" id="about">
<h1 class="h1"><em>Welcome!</em></h1>
<p class="lead">In my day to day life I work a full-time job. Writing code has always intrigued me. And I have even learnd some HTML when I was way younger. Right now I am 21 years old and see this as a really fun hobby. It would be awesome if I would be able to make some extra money writing code sometime in the feature!</p>
<a class="btn" href="#course">My next course</a>
</header>
<div class="col-6" id="van-boxmeer"></div>
</div>
</section>
<section class="section" id="course">
<div class="container">
<div class="col-6 course-total">
<h3 class="course-title">My next course</h3>
<p class="course-description">The next course that I would like to follow is one where I can learn the basics of CSS. I might want to follow the <a href="https://www.skillshare.com/classes/Build-a-Portfolio-Website-Template-From-Scratch-Using-HTML-CSS-jQuery-PHP/893014576/projects?via=user-profile">build a website from scratch-class.</a>Or maybe a more PHP oriented class, like <a href="https://www.skillshare.com/classes/The-Beginners-Guide-to-PHP-Mastery/610626869/projects?via=user-profile">The beginnersguide to PHP.</a> If you could choose one of the courses in the next list, let me know which one you would pick in the contactform on the bottom!</p>
<ul class="course-list">
<li>How to build a website from scratch</li>
<li>Beginnersguide to PHP</li>
<li>Another CSS class on skillshare?</li>
<li>Another programming languige for apps or games?</li>
</ul>
<a class="btn" href="#contact">Contact me!</a>
</div>
</div>
</section>
<section class="section" id="information">
<div class="container">
<header class="info-header">
<h1 class="h1"><em>What Have I Learned So Far?</em></h1>
<p class="lead">So far I have learned a lot about html, and a little bit about CSS. I think that it takes a lot of practice to fully master this lanquige, and to be able to build websites without any help. I will start a new class soon, and I think that that class will focus on CSS. This is becaus I noticed that a lot of the code that give's this website it's beauty, is done in CSS.</p>
</header>
</div>
</section>
<section class="section" id="contact">
<div class="container">
<form class="form">
<div class="form-field">
<input type="text" class="text" placeholder="Enter your name">
</div>
<div class="form-field">
<input type="email" class="text email" placeholder="Enter your email address">
</div>
<div class="form-field">
<textarea class="textarea" placeholder="Describe your project"></textarea>
</div>
<input type="submit" class="btn submit" value="Submit Contact Form">
</form>
</div>
</section>
<footer class="site-footer">
<div class="container">
<p>© Copyright 2021 Van Boxmeer devellopment.</p>
</div>
</footer>
</body>
</html>
