Week 7: Create a Form
This commit is contained in:
parent
0aada4d8ec
commit
e349330907
GPG Key ID:
EFC0C720A240551C
|
|
@ -0,0 +1,335 @@
|
|||
/* main body */
|
||||
body {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
}
|
||||
|
||||
/* unordered list */
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* header 1 & 2 */
|
||||
h1, h2 {
|
||||
font-family: 'Cinzel Decorative', cursive;
|
||||
}
|
||||
|
||||
/* link */
|
||||
a {
|
||||
color: whitesmoke;
|
||||
text-decoration: none;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
/* Nav Bar */
|
||||
nav {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin: 0 0 30px;
|
||||
}
|
||||
|
||||
/* base class details */
|
||||
.home_article {
|
||||
margin: 5px;
|
||||
background-color: LightGray;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.koos {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* flex container */
|
||||
.navContainer {
|
||||
background: rgb(46, 44, 47);
|
||||
background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-family: "Raleway", sans-serif;
|
||||
}
|
||||
|
||||
/* prime header */
|
||||
.prime {
|
||||
font-family: 'Cabin Sketch', cursive;
|
||||
}
|
||||
|
||||
/* flex item */
|
||||
.navItem {
|
||||
background: rgb(46, 44, 47);
|
||||
background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%);
|
||||
display: flex;
|
||||
flex-grow: inherit;
|
||||
}
|
||||
|
||||
/* hover style */
|
||||
.navItem:hover {
|
||||
background: rgb(34, 34, 34);
|
||||
background: linear-gradient(0deg, rgba(34, 34, 34, 1) 0%, rgba(84, 84, 84, 1) 50%, rgba(34, 34, 34, 1) 100%);
|
||||
box-shadow: inset 0 0 10px #000000;
|
||||
}
|
||||
|
||||
/* active style */
|
||||
.active {
|
||||
background: rgb(34, 34, 34);
|
||||
background: linear-gradient(0deg, rgba(34, 34, 34, 1) 0%, rgba(84, 84, 84, 1) 50%, rgba(34, 34, 34, 1) 100%);
|
||||
box-shadow: inset 0 0 10px #000000;
|
||||
}
|
||||
|
||||
/* change font style */
|
||||
.kyk {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Styling of the contact form */
|
||||
/* Label to appear next to the input fields */
|
||||
label {
|
||||
padding: 12px 12px 12px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Legend style */
|
||||
legend {
|
||||
font-style: italic;
|
||||
font-size: 18px;
|
||||
color: darkslategrey;
|
||||
}
|
||||
|
||||
/* Fieldset padding*/
|
||||
fieldset {
|
||||
margin: 10px 2px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
/* submit button */
|
||||
input[type=submit] {
|
||||
background: rgb(35, 55, 55);
|
||||
background: linear-gradient(180deg, rgba(35, 55, 55, 1) 0%, rgba(100, 131, 131, 1) 7%, rgba(47, 79, 79, 1) 24%, rgba(9, 14, 14, 1) 100%);
|
||||
box-shadow: 1px 13px 23px 0 rgba(0, 0, 0, 0.75);
|
||||
-webkit-box-shadow: 1px 13px 23px 0 rgba(0, 0, 0, 0.75);
|
||||
color: white;
|
||||
padding: 15px 60px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* change the submit button style on hover */
|
||||
input[type=submit]:hover {
|
||||
background: rgb(35, 55, 55);
|
||||
background: linear-gradient(0deg, rgba(35, 55, 55, 1) 0%, rgba(103, 140, 140, 1) 7%, rgba(47, 79, 79, 1) 24%, rgba(9, 14, 14, 1) 100%);
|
||||
box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.75);
|
||||
-webkit-box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.75);
|
||||
color: lightgrey;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Focus on field that is being entered*/
|
||||
input:focus {
|
||||
background-color: darkslategrey;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* container */
|
||||
.container {
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
background-color: #f2f2f2;
|
||||
padding: 30px 30px 80px;
|
||||
box-shadow: 2px 0 31px 0 rgba(145, 145, 145, 0.75);
|
||||
-webkit-box-shadow: 2px 0 31px 0 rgba(145, 145, 145, 0.75);
|
||||
}
|
||||
|
||||
/* remove floats after columns*/
|
||||
.row {
|
||||
max-width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* column for the label */
|
||||
.col-25{
|
||||
float: left;
|
||||
text-align: left;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
/* column for the input fields */
|
||||
.col-75 {
|
||||
margin-left: 110px;
|
||||
max-width: 100%;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
/* Center the contact form */
|
||||
#contactForm {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Sizing of input fields */
|
||||
input {
|
||||
padding: 5px 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Mobile devices */
|
||||
@media screen and (max-width: 480px) {
|
||||
body {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
/* flex container */
|
||||
.navContainer {
|
||||
height: 40px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
/* Make form responsive mobile */
|
||||
input[type=submit] {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPads, Tablets. */
|
||||
@media screen and (min-width: 481px) {
|
||||
body {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
/* add radius to article style */
|
||||
.home_article {
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
/* flex container */
|
||||
.navContainer {
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* flex item */
|
||||
.navItem {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small screens, laptops */
|
||||
@media screen and (min-width: 769px) {
|
||||
body {
|
||||
background-color: #589ddb;
|
||||
}
|
||||
|
||||
/* increase the font size of class piet */
|
||||
.piet {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.navContainer {
|
||||
height: 50px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
/* flex item */
|
||||
.navItem {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktops, large screens. */
|
||||
@media screen and (min-width: 1025px) {
|
||||
|
||||
h1 {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
main {
|
||||
display: table;
|
||||
}
|
||||
|
||||
#left {
|
||||
float: left;
|
||||
width: 47%;
|
||||
}
|
||||
|
||||
#right {
|
||||
float: right;
|
||||
width: 47%;
|
||||
}
|
||||
|
||||
.piet {
|
||||
font-size: 28px;
|
||||
text-shadow: 1px 2px 2px;
|
||||
}
|
||||
|
||||
/* change font style */
|
||||
.kyk {
|
||||
text-shadow: 0 0;
|
||||
}
|
||||
|
||||
/* flex container */
|
||||
.navContainer {
|
||||
height: 50px;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
/* flex item */
|
||||
.navItem {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large screens, TV. */
|
||||
@media screen and (min-width: 1201px) {
|
||||
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* flex container */
|
||||
.navContainer {
|
||||
height: 60px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* flex item */
|
||||
.navItem {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- The head element contains machine-readable elements -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Page Title tag-->
|
||||
<title>About</title>
|
||||
<!-- Link tag to stylesheet -->
|
||||
<link href="../css/styles.css" rel="stylesheet" type="text/css">
|
||||
<!-- Links to Google Font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<!-- Primary Font Cabin Sketch Bold 700 -->
|
||||
<!-- Secondary Architects Daughter Regular 400 -->
|
||||
<!-- Typography Font Raleway Regular 400 -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@700&family=Cinzel+Decorative:wght@700&family=Raleway&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- All content goes in the body element -->
|
||||
|
||||
<!-- Header element -->
|
||||
<header>
|
||||
<h1>About</h1>
|
||||
<!-- Nav tag -->
|
||||
<nav>
|
||||
<!-- Unordered list tag -->
|
||||
<ul class="navContainer">
|
||||
<!-- list item tag -->
|
||||
<li class="navItem">
|
||||
<!-- a tag to create a link (empty for now) -->
|
||||
<a href="../html/index.html">HOME</a>
|
||||
</li>
|
||||
<li class="navItem active">
|
||||
<a href="#">ABOUT</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="../html/examples.html">EXAMPLES</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="../html/contact.html">CONTACT</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main element -->
|
||||
<main>
|
||||
<!-- Article element -->
|
||||
<!-- class home_article is set to background color lightgray and padding 10px -->
|
||||
<article id="left" class="home_article">
|
||||
<!-- Header 2 tag -->
|
||||
<h2>First Header</h2>
|
||||
<!-- Paragraph tag -->
|
||||
<p class="piet">Maecenas quis odio sit <span class="kyk">amet ipsum maximus</span> egestas. Maecenas gravida magna vehicula quam pulvinar varius.
|
||||
Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
|
||||
</article>
|
||||
<article id="right" class="home_article">
|
||||
<!-- Header 2 tag -->
|
||||
<h2>Second Header</h2>
|
||||
<!-- Paragraph tag -->
|
||||
<p class="piet">Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida magna vehicula quam pulvinar varius.
|
||||
Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<!-- Footer element -->
|
||||
<footer>
|
||||
<!-- Paragraph tag -->
|
||||
<p class="koos">Footer goes here.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- The head element contains machine-readable elements -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Page Title tag -->
|
||||
<title>Contact</title>
|
||||
<!-- Link tag to stylesheet -->
|
||||
<link href="../css/styles.css" rel="stylesheet" type="text/css">
|
||||
<!-- Links to Google Font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<!-- Primary Font Cabin Sketch Bold 700 -->
|
||||
<!-- Secondary Architects Daughter Regular 400 -->
|
||||
<!-- Typography Font Raleway Regular 400 -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@700&family=Cinzel+Decorative:wght@700&family=Raleway&display=swap"
|
||||
rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- All content goes in the body element -->
|
||||
|
||||
<!-- Header element -->
|
||||
<header>
|
||||
<h1>Contact</h1>
|
||||
<!-- Nav tag -->
|
||||
<nav>
|
||||
<!-- Unordered list tag -->
|
||||
<ul class="navContainer">
|
||||
<!-- list item tag -->
|
||||
<li class="navItem">
|
||||
<!-- a tag to create a link (empty for now) -->
|
||||
<a href="../html/index.html">HOME</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="../html/about.html">ABOUT</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="../html/examples.html">EXAMPLES</a>
|
||||
</li>
|
||||
<li class="navItem active">
|
||||
<a href="#">CONTACT</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main element -->
|
||||
<main id="contactForm">
|
||||
<!-- Web form content -->
|
||||
<!-- Credit to W3Schools https://www.w3schools.com/howto/howto_css_responsive_form.asp -->
|
||||
<form id="contact_form" onsubmit="justDisplay(); return false;">
|
||||
<div class="container">
|
||||
<div>
|
||||
<h2>Contact Us Today</h2>
|
||||
<h3>We are eager to hear from you!</h3>
|
||||
<p>Please fill out our extensive contact form, and we will get back to you as soon as
|
||||
possible.</p>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend>Personal Information</legend>
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
<label for="fullName">Full name:</label>
|
||||
</div>
|
||||
<div class="col-75">
|
||||
<input id="fullName" name="fullName" type="text"
|
||||
placeholder="Your full name here" pattern="^.{1,50}$" required/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
<label for="address">Address:</label>
|
||||
</div>
|
||||
<div class="col-75">
|
||||
<!-- Validating address to contain any characters up to 50 -->
|
||||
<input id="address" name="address" type="text" pattern="^.{1,50}$"
|
||||
placeholder="Your address here" required/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
<label for="email">Email:</label>
|
||||
</div>
|
||||
<div class="col-75">
|
||||
<input id="email" name="email" type="email"
|
||||
placeholder="Enter a valid email address"
|
||||
required/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
<label for="telephone">Telephone:</label>
|
||||
</div>
|
||||
<div class="col-75">
|
||||
<!-- Validating for most standard telephone number formats found on Stack Overflow. https://stackoverflow.com/questions/16699007/regular-expression-to-match-standard-10-digit-phone-number -->
|
||||
<input id="telephone" name="telephone" type="tel"
|
||||
placeholder="123-454-6758"/>
|
||||
<!-- we could add this pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$" -->
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Where?</legend>
|
||||
<label for="online" class="radio-inline">Online
|
||||
<input type="radio" id="online" name="meet" value="online" checked></label>
|
||||
<label for="personal" class="radio-inline">Personal
|
||||
<input type="radio" id="personal" name="meet" value="personal"></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Why?</legend>
|
||||
<label for="topic">What is the reason for the meeting?</label>
|
||||
<select name="topic" id="topic">
|
||||
<option selected>Select an option</option>
|
||||
<option value="design">Design me a new website</option>
|
||||
<option value="develop">I need to discuss development of a new application</option>
|
||||
<option value="new_feature">I need a new feature for my existing application</option>
|
||||
<option value="bug">I need to discuss a bug in my application</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
<div>
|
||||
<input type="submit" id="button" value="Submit"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<!-- Footer element -->
|
||||
<footer>
|
||||
<!-- Paragraph tag -->
|
||||
<p class="koos">Footer goes here.</p>
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript">
|
||||
// my little function to show the data but not post it
|
||||
function justDisplay() {
|
||||
// convert the form to an object
|
||||
let formData = new FormData(document.getElementById("contact_form"));
|
||||
// build a little display
|
||||
let display_form = "== THIS FORM DOES NOT POST DATA ==";
|
||||
display_form += "\nfullName: " + formData.get("fullName");
|
||||
display_form += "\naddress: " + formData.get("address");
|
||||
display_form += "\nemail: " + formData.get("email");
|
||||
display_form += "\ntelephone: " + formData.get("telephone");
|
||||
display_form += "\ntopic: " + formData.get("topic");
|
||||
// give a basic message
|
||||
alert(display_form);
|
||||
// stop the posting
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- The head element contains machine-readable elements -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Page Title tag-->
|
||||
<title>Examples</title>
|
||||
<!-- Link tag to stylesheet -->
|
||||
<link href="../css/styles.css" rel="stylesheet" type="text/css">
|
||||
<!-- Links to Google Font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<!-- Primary Font Cabin Sketch Bold 700 -->
|
||||
<!-- Secondary Architects Daughter Regular 400 -->
|
||||
<!-- Typography Font Raleway Regular 400 -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@700&family=Cinzel+Decorative:wght@700&family=Raleway&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- All content goes in the body element -->
|
||||
|
||||
<!-- Header element -->
|
||||
<header>
|
||||
<h1>Examples</h1>
|
||||
<!-- Nav tag -->
|
||||
<nav>
|
||||
<!-- Unordered list tag -->
|
||||
<ul class="navContainer">
|
||||
<!-- list item tag -->
|
||||
<li class="navItem">
|
||||
<!-- a tag to create a link (empty for now) -->
|
||||
<a href="../html/index.html">HOME</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="../html/about.html">ABOUT</a>
|
||||
</li>
|
||||
<li class="navItem active">
|
||||
<a href="#">EXAMPLES</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="../html/contact.html">CONTACT</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main element -->
|
||||
<main>
|
||||
<!-- Article element -->
|
||||
<!-- class home_article is set to background color lightgray and padding 10px -->
|
||||
<article id="left" class="home_article">
|
||||
<!-- Header 2 tag -->
|
||||
<h2>First Header</h2>
|
||||
<!-- Paragraph tag -->
|
||||
<p class="piet">Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida magna vehicula quam pulvinar varius.
|
||||
Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
|
||||
</article>
|
||||
<article id="right" class="home_article">
|
||||
<!-- Header 2 tag -->
|
||||
<h2>Second Header</h2>
|
||||
<!-- Paragraph tag -->
|
||||
<p class="piet">Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida <span class="kyk">magna vehicula quam</span> pulvinar varius.
|
||||
Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<!-- Footer element -->
|
||||
<footer>
|
||||
<!-- Paragraph tag -->
|
||||
<p class="koos">Footer goes here.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- The head element contains machine-readable elements -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Page Title tag-->
|
||||
<title>Llewellyn van der Merwe: Week 7</title>
|
||||
<!-- Link tag to stylesheet -->
|
||||
<link href="../css/styles.css" rel="stylesheet" type="text/css">
|
||||
<!-- Links to Google Font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<!-- Primary Font Cabin Sketch Bold 700 -->
|
||||
<!-- Secondary Cinzel Decorative 700 -->
|
||||
<!-- Typography Font Raleway Regular 400 -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@700&family=Cinzel+Decorative:wght@700&family=Raleway&display=swap"
|
||||
rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- All content goes in the body element -->
|
||||
|
||||
<!-- Header element -->
|
||||
<header>
|
||||
<h1 class="prime">Llewellyn van der Merwe</h1>
|
||||
<!-- Nav tag -->
|
||||
<nav>
|
||||
<!-- Unordered list tag -->
|
||||
<ul class="navContainer">
|
||||
<!-- list item tag -->
|
||||
<li class="navItem active">
|
||||
<!-- a tag to create a link -->
|
||||
<a href="#">HOME</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="../html/about.html">ABOUT</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="../html/examples.html">EXAMPLES</a>
|
||||
</li>
|
||||
<li class="navItem">
|
||||
<a href="../html/contact.html">CONTACT</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main element -->
|
||||
<main>
|
||||
<div class="banner">
|
||||
<picture>
|
||||
<source srcset="../images/image3.jpg" media="(max-width: 769px)">
|
||||
<source srcset="../images/image2.jpg" media="(max-width: 1025px)">
|
||||
<img src="../images/image1.jpg" alt="Sunsets over the Atlantic" style="width: 100%" class="center">
|
||||
</picture>
|
||||
</div>
|
||||
<!-- Article element -->
|
||||
<div>
|
||||
<!-- class home_article is set to background color lightgray and padding 10px -->
|
||||
<article id="left" class="home_article">
|
||||
<!-- Header 2 tag -->
|
||||
<h2>First Header</h2>
|
||||
<!-- Paragraph tag -->
|
||||
<p class="piet">Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida magna vehicula quam
|
||||
pulvinar varius.
|
||||
Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
|
||||
</article>
|
||||
<article id="right" class="home_article">
|
||||
<!-- Header 2 tag -->
|
||||
<h2>Second Header</h2>
|
||||
<!-- Paragraph tag -->
|
||||
<p class="piet">Maecenas quis odio sit <span class="kyk">amet ipsum maximus</span> egestas. Maecenas gravida
|
||||
magna vehicula quam pulvinar varius.
|
||||
Vestibulum venenatis quam enim, a eleifend tortor blandit non. </p>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer element -->
|
||||
<footer>
|
||||
<!-- Paragraph tag -->
|
||||
<p class="koos">Footer goes here.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Loading…
Reference in New Issue