Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Richard htmlcss lab 03 #353

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Richard htmlcss lab 03 #353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7976b98
first commit
Arty-Guy Nov 25, 2021
08efb40
partially complete
Arty-Guy Nov 30, 2021
d145350
company landing page done or very near done.
Arty-Guy Apr 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added Code/Richard/HTML_CSS_Flask/lab-03/company.css
View file
Open in desktop
Empty file.
175 changes: 175 additions & 0 deletions Code/Richard/HTML_CSS_Flask/lab-03/company.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

<title>Landing Page</title>
</head>

<body class="bg-light">
<h5 class="p-4 bg-primary d-flex flex-row-reverse">[email protected] 214-350-5600 </h5>

<div class="nav d-flex flex-row-reverse m-2 p-2">
<ul class="nav ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Key Personnel</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DFW Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Publications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Employment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>

<div class="container-lg">
<div class="row">
<div class="col-6 m-3">

<div class="col-3">
<img src="https://www.reed-engineering.com/wp-content/uploads/2018/08/HomeMain.png" alt="">
</div>
</div>
</div>
</div>
<center>
<h2 class='p-4'>Targeted Engineering, Assertive Solutions</h2>
</center>
<div class="m-3">
<hr />
</div>
<h3 class="p-4 m-3">The Reed Engineering Group was founded in 1988 on a basic tenet: provide a comprehensive
approach for commercial, large industrial, and municipal clients. With drilling, testing, and analysis
preformed in-house, results are innovative and cost-effective. The success of each project begins with:</h3>


<div class="container">

<center><div class="row d-flex justify-content-center">
<div class="col-md-3 m-1 bg-info">
Our team of engineers, scientists and technicians have a thorough understanding of building construction
and historical performance data.
</div>
<div class="col-md-3 m-1 bg-info">
Maintaining a library housing thousands of North Texas projects from the early 60's to the present,
gives a unique perspective of geologic conditions and past performance.
</div>
<div class="col-md-3 m-1 bg-info">
Our services are performed in-house, which allows for quality control and innovation, and creates a
learning environment for the employees.
</div>
</div></center>
</div>
<!-- <div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 bg-info">
<p> Our team of engineers, scientists and technicians have a thorough understanding of building construction
and historical performance data.</p>
<div/>
<div class="col-md-4 col-sm-4 bg-info">
<p> Maintaining a library housing thousands of North Texas projects from the early 60's to the present,
gives a unique perspective of geologic conditions and past performance.</p>
</div>
<div class="col-md-4 col-sm-4 bg-info">
<p> Our services are performed in-house, which allows for quality control and innovation, and creates a
learning environment for the employees.</p>
</div>
</div>
</div> -->
<h3 class="p-4 m-3">
Understanding soil suction is critical to evaluation of the strength and performance of unsaturated
soil. Without suction measurements, the geotechnical engineer is making an educated guess of soil
performance. With over 500,000 measurements taken since 1988, the Reed Engineering Group understands
unsaturated soil performance.</h3>
<span>
<h4>Featured Projects</h4>
<hr>
<hr>
</span>
<center>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.reed-engineering.com/wp-content/uploads/2015/04/project-fedex.jpg"
class="d-block w-33" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Fed-Ex</h5>
<p>Project.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.reed-engineering.com/wp-content/uploads/2015/04/HurstPhoto.jpg"
class="d-block w-33" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Hurst</h5>
<p>Project.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.reed-engineering.com/wp-content/uploads/2015/04/project-alta.jpg"
class="d-block w-33" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Alta</h5>
<p>project.</p>
</div>
<div class="carousel-item">
<img src="https://www.reed-engineering.com/wp-content/uploads/2015/04/project-loreal.jpg"
class="d-block w-33" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Loreal HQ</h5>
<p>Project</p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</center>
<br>
<br>
<center>
<footer>Practice page by Richard Watkins</footer>
</center>
</body>

</html>
Empty file added Code/Richard/HTML_CSS_Flask/landing.css
View file
Open in desktop
Empty file.
49 changes: 49 additions & 0 deletions Code/Richard/HTML_CSS_Flask/landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<!-- get bootstrap -->

<link rel="stylesheet" href="./landing.css" />
<!--link to CSS file -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script> <!-- start bootstrap -->

<title>Landing Page</title>



</head>

<body class="bg-secondary">
<div class="hero">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non ratione nisi culpa aspernatur temporibus, neque
obcaecati sapiente expedita aliquam. Dolorum.
</p>

</div class= "bg-primary">
<div class= "row">
<div class="container 1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, est!</p>
</div>
<div class="container 2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error officia soluta ipsum?</p>
</div>
<div class="container 3">
<img src="http://images.halloweencostumes.com/products/15726/1-1/teen-togacostume.jpg" width=300 alt="">
</div>
</div>

</body>

</html>