You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
7.5 KiB
HTML
175 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Wireframes, Mockup and Prototypes || Discussion</title>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" type="text/css" href="./index.css">
|
|
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-light ml-5" id="logo">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#"class="logo"><img src="./images/logo.png"></a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
|
<div class="navbar-nav ml-auto">
|
|
<a class="nav-link active" href="#">Home</a>
|
|
<a class="nav-link" href="#">About Me</a>
|
|
<a class="nav-link" href="#">My Works</a>
|
|
<a class="nav-link disabled">Contact</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<section>
|
|
<!-- - added id as landing to container for background styling -->
|
|
<!-- - added py-5 to responsively increase the padding and overall height of the landing section -->
|
|
<div class="py-5 container-fluid"id="landing">
|
|
<!-- - added justify-content-center to row div to center the columns - added py-5 and my-5 to increase space occupied by row to further increase the height of the landing section responsively. -->
|
|
|
|
<div class="row justify-content-center py-5 my-5">
|
|
<!-- - added col-md-8 to column to match the size and layout of text from the prototype. - added pt-md-5 to increase padding of element from the medium screen.- added text-center to center h1 text and anchor tag -->
|
|
<div class="col-md-8 pt-md-5 text-center">
|
|
|
|
<h1 id="title">Replace This With Your Title</h1>
|
|
<!-- - added d-inline-block to allow y-axis margins for anchor tag added mt-5 to add space between anchor and heading added text-decoration-none to ensure removal of underline for anchor tag. -->
|
|
<p id="paragraph"class="pt-3">You can use this section to narrate a short description for the title or page.</p>
|
|
<div class="d-flex justify-content-between align-items-center mt-5">
|
|
<a class="text-decoration-none text-align-left" id="button"href="#" >Get started</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-lg-4 col-md-4 col-sm-12 mb-4">
|
|
<h1 id="gal" class=" mt-5">GALLERY</h1>
|
|
<p id="section-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
|
|
</div>
|
|
|
|
|
|
<section>
|
|
|
|
<div class="container mt-5 d-flex justify-content-center">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-4 col-md-4 col-sm-12 mb-4 ms-left p-5 mr-5 d-flex flex-column justify-content-center align-items-center" style="color: white;">
|
|
<img src="./images/flower.png" style="height: 250px; width:500px;" alt="flower" >
|
|
</div>
|
|
<div class="col-lg-4 col-md-4 col-sm-12 mb-4 p-5 mr-5 d-flex flex-column justify-content-center align-items-center" style="color: white;">
|
|
<img src="./images/stone.png" style="height: 250px; width:500px;" alt="mountain" >
|
|
</div>
|
|
<div class="col-lg-4 col-md-4 col-sm-12 mb-4 p-5 mr-5 d-flex flex-column justify-content-center align-items-center" style="color: white;">
|
|
<img src="./images/mountain.png" style="height: 250px; width:500px;" alt="mountain" >
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section style="background-color: #FFF2E4;">
|
|
<a name="Contact"></a>
|
|
<div id="contact" class="container-fluid text-white border mt-5">
|
|
|
|
<h2 class="text-dark text-align-right ">CONTACT US</h2>
|
|
|
|
<div class="row mt-3">
|
|
|
|
|
|
<div class="col-lg-6 col-md-6 col-sm-12 mt-5">
|
|
<img src="./images/blocks.png" alt="block"class="img-fluid"style="max-width: 100%; height: auto;"id="img"/>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-6 col-md-6 col-sm-12 py-3 rounded">
|
|
<form id="form-col">
|
|
<div class="form-group">
|
|
<label for="name">Name</label>
|
|
<input type="text" class="form-control" id="name" placeholder="Your Name">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="exampleInputEmail1">Email</label>
|
|
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="name@example.com">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contactNumber">Contact Number</label>
|
|
<input type="number" class="form-control" id="contactNumber" name="contactNumber" placeholder="+63 9000 0000 0000">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="concern">Concern</label>
|
|
<select class="form-control" id="concern">
|
|
<option>Quotation</option>
|
|
<option>Inquire</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="message">Message</label>
|
|
<textarea class="form-control" id="message" rows="6"></textarea>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-dark" data-toggle="modal" data-target="#modalDiv">
|
|
Send Email
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
|
|
</section>
|
|
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="modalDiv" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content text-dark">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Thank you for contacting us!</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Message Successfully Sent</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<footer class="mt-5">
|
|
<h1 id="foot">2023 | All rights reserved.</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
|
|
|
</body>
|
|
</html> |