Ceacht: An oidhreacht a chur chun cinn i ranganna ríomhaireachta
- Arna réiteach ag
- Asociatia Perseidele
- Údar
- Vranceanu Catalina
Instructions
Design two web pages, index.html and contact.html, linked by the <a> element. For the creation of the first page, index.html, you will use the theme 'Traditional Saxon painted furniture — an element of intangible heritage' and you can inspire yourself from the design of a website you like or build your index.html page with your own design. The page will have the HTML5 semantic elements <header>, <main>, <article>, <aside>, <footer> and will also contain the <nav> element which will allow you to access the contact.html page.
The second page, contact.html, will keep the styling of the first page, and between <header> and <footer> you will insert a section containing a contact form. The <form> element will contain the form controls: input type="text", input type="email", input type="submit", input type="reset" and <textarea>.
Steps to complete the project
- I search for a template.
- I present the layout.
- I analyse the page layout
- I create a similar page, index.html, adding text and images with the suggested theme.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<nav class="navbar navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="Logo">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay d-flex justify-content-center align-items-center">
<div class="description text-center">
<h1>Furniture painted using traditional Saxon style - an element of intangible heritage</h1>
<p>The technique of producing painted furniture is a manufacturing process, with origins in the artisanal field dating back long before the period of the Saxon guilds in Transylvania. The manual production of painted furniture is considered a traditional activity, as it developed gradually from the 14th to the 20th century. Folk craftsmen have passed this craft down through the ages by word of mouth from father to son and beyond. p>
<a href="#more" class="btn btn-outline-secondary btn-lg">Read more</a>
</div>
</div>
</header>
<a name="more"></a><div class="container">
<div class="row mt-5">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/imaginea1.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Cultural context</h5>
<p class="card-text">The Saxons are German settlers from today's Rhineland, France, Luxembourg and Belgium who were brought to Transylvania by King Geza II in 1141 (Nägler, T., 2003). According to Roswith Capesius, the beginnings of painted woodworking date back to the Middle Ages, long before it was first practised in organized guilds across Transylvania. </p>
<a href="#more" class="btn btn-outline-secondary btn-lg">Read more</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/imaginea2.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Raw materials used (wood, paints, pigments and binders)</h5>
<p class="card-text">From ancient times, people have used the natural resources of the local environment, which were abundant and economically accessible. Given that Romania is a Carpathian country, forests occupied large areas, favouring the development of a wood culture, a tradition of wood processing.</p>
<a href="#more" class="btn btn-outline-secondary btn-lg">Read more</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="images/imaginea3.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Modelling and style (modelling techniques, shapes, colours, ornaments, symbols and inscriptions)</h5>
<p class="card-text">The process of making painted furniture is a complex one that requires in the first phase woodworking using specific techniques and in the second phase wood painting techniques.</p>
<a href="#more" class="btn btn-outline-secondary btn-lg">Read more</a>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h5 class="card-title"> CONTACT US</h5>
<p class="card-text">Do you have a request or want to give us feedback? Click the button below to contact our team.</p>
<a href="contact.html" class="btn btn-outline-secondary btn-lg">Contact</a>
</div>
</div>
</div>
</div> <!-- end div class="row" -->
</div> <!-- end div class="container" -->
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Additional Information</h6>
<p>Erasmus + project,KA220-ADU-000086697 "Safeguarding intangible cultural heritage through transformative learning within community-based art". </p>
</div>
<div class="col-md-4 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Address</h6>
<p> Perseidele Association, 72 Eroilor Street, Asău
<br/>perseidele@gmail.ro
<br/> (+40) 256 200 217
</div>
</div>
<div class="footer-copyright text-center">© 2024 Copyright: perseidele.ro</div>
</div>
</footer>
</body>
</html>- I search for images matching the theme and add a style file.
- I create the contact.html page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/index.css">
<title>Contact</title>
</head>
<body>
<h2 class="form-title text-center">CONTACT US</h2>
<div class="container d-flex justify-content-center">
<div class="row my-2 mx-2">
<div class="col-md-6">
<img src="images/letters1.jpg" alt="IMG">
</div>
<!--col-->
<div class="col-md-6">
<p class="justify text-muted">Do you have a request or want to give us feedback?<br>Fill out the form below to contact our team.</p>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="name" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="name" class="form-control" id="name" placeholder="First name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="email" placeholder="Email">
</div>
<div class="form-group">
<label for="description1">Your message</label>
<texttarea class="form-control" id="description1" rows="3" placeholder="Write your message here"></texttarea>
</div>
<div class="form-group">
<label for="group2">You can also add a file</label>
<div class="input-group" id="group">
<div class="input-group-prepend">
<span class="input-group-text" id="addon2"><i class="far fa-file-image"></i></span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="file2" aria-describedby="addon2">
<label class="custom-file-label" for="file2">Choose file</label>
</div>
</div>
</div>
<div class="custom-control custom-checkbox form-group">
<input type="checkbox" class="custom-control-input" id="checkTerms">
<label class="custom-control-label" for="checkTerms">I have read and acknowledged the Terms & Conditions.</label>
</div>
<button type="submit" class="btn btn-info">Submit</button>
</form>
</div>
</div>
</div>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Additional Information</h6>
<p>Erasmus + project,KA220-ADU-000086697 "Safeguarding intangible cultural heritage through transformative learning within community-based art". </p>
</div>
<div class="col-md-4 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Address</h6>
<p> Perseidele Association, 72 Eroilor Street, Asău
<br/>perseidele@gmail.ro
<br/> (+40) 256 200 217
</div>
</div>
<div class="footer-copyright text-center">© 2024 Copyright: perseidele.ro</div>
</div>
</footer>
</body>
</html>