Skip to content

Corrections #337

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

Merged
perennialAutodidact merged 1 commit into from
Mar 11, 2022
Merged

Corrections #337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
214 changes: 214 additions & 0 deletions Code/Jose/html_css/lab3/lab3.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
.topnav {
overflow: hidden;
background-color: rgb(30,45,59);
position: absolute;
width: 85%;
font-family: helvetica;
margin-left: 15%;
padding: 25px;
}

.topnav a {
float: right;
text-align: center;
padding: 5px 16px;
text-decoration: none;
font-size: 17px;
cursor: pointer;
}

.top-nav-image {
background-color: #EDCD1F;
position: absolute;
width: 335px;
height: 86px;
font-family: sans-serif;
font-size: 1.5rem;
text-align: center
}

.hero-text {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(59, 59, 59, 0.5)), url("https://imgs.6sqft.com/wp-content/uploads/2017/09/11132406/ODA_Rheingold.gif");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 400px;
padding-bottom: 400px;
color: white;
text-align: center;
font-weight: 600;
font-size: 20rem;
}

.column-text {
font-weight: 500;
font-size: 4rem;
color: rgb(30,45,59);
text-align: center;
}

.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
justify-content: center;
padding-bottom: 5%;
}

.column {
display: flex;
flex-direction: column;
flex: 0.1;
}

.service-title {
color:#3d5975;
font-size: 1.5rem;
font-weight: 500;
margin-left: 20px;
margin-top: 15px;
width: 50%;
line-height: 25px;
}

.service-description {
margin-left: 20px;
width: 90%;
font-weight: 350;
}


.first-column {
background-color: #f7f7f7;
}

.second-column {
background-color: #f7f7f7;
}

.third-column {
background-color: #f7f7f7;
}

.about-column {
background-image: url("https://static.wixstatic.com/media/c19c76_427a7bbf62474f74968cb087499c7a3e.jpg/v1/fill/w_1903,h_683,al_c,q_85,usm_0.66_1.00_0.01/c19c76_427a7bbf62474f74968cb087499c7a3e.webp");
background-repeat: no-repeat;
}

.about-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
justify-content: left;
}

.about-header {
background-color: #f7f7f7;
color:rgb(30,45,59);
margin-bottom: 0%;
padding-top: 3%;
text-align: center;
font-size: 3.5rem;
font-weight: 500;
width: 50%;
}
.about-text {
width: 50%;
background-color: #f7f7f7;
padding-left: 20%;
padding-right: 10%;
padding-bottom: 52px;
font-weight: 350;
font-size: 1.2rem;
margin-bottom: 0%;
}
@media (min-width: 1200px) {
.about-text {
width: 50%;
}
.about-header {
width: 50%
}
}

@media (max-width: 1199.98px) {
.about-text {
width: 520px;
}
.about-header {
width: 520px
}
}

.stats-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
justify-content: center;
background-color: #edcd1f;


}

.stats-column {
display: flex;
flex-direction: column;
flex: 0.1;
margin-left: 80px;
margin-right: 80px;
}

.stat-number {
font-size: 3.5rem;
font-weight: 700;
color: #3d5975;
margin-bottom: 0%;

}
.stat-description {
font-size: 1.3rem;
font-weight: 500;
width: 20px;
color: #3d5975;
text-align: center;
}

.project-text {
font-weight: 500;
font-size: 4rem;
color: rgb(30,45,59);
text-align: center;
}

.projects-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
justify-content: center;
}

.projects-column {
padding: 0.5%;
background-color: #f7f7f7;
}

.navbar-brand {
color:black;
background-color:#EDCD1F;
border-radius: 25px;
font-family: helvetica;
font-size: 1.5rem;
font-weight: 700;
text-align: center;
padding-left: 5px;
padding-right: 5px;
}

.nav-link {
font-weight: 500;
font-size: 1.5rem;
}
129 changes: 129 additions & 0 deletions Code/Jose/html_css/lab3/lab3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<!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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="lab3.css">
<title>Company Home</title>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #3d5975;">
<a class="navbar-brand" href="#">SPHERE CONSTRUCTIONS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
</div>
</nav>


<div class="hero-image">
<div class="hero-text">
<h1>LEADERS IN QUALITY
CONSTRUCTION AND
INFRASTRUCTURE</h1>
</div>

<div class="column-text">
<p>SERVICES</p>
</div>

<div class="service-columns">
<div class='row'>
<div class='column'>
<div class='first-column'>
<img src="https://static.wixstatic.com/media/c19c76_22d8ec47d1484b09a9c333e4141a12a0.jpg/v1/fill/w_300,h_225,al_c,q_80,usm_0.66_1.00_0.01/c19c76_22d8ec47d1484b09a9c333e4141a12a0.webp">
<p class='service-title'>Preconstruction Planning</p>
<p class='service-description'>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font.</p>
</div>
</div>
<div class='column'>
<div class='second-column'>
<img src="https://static.wixstatic.com/media/b31d0e84cb714761b2b1f06c305023c7.jpg/v1/fill/w_300,h_225,al_c,q_80,usm_0.66_1.00_0.01/b31d0e84cb714761b2b1f06c305023c7.webp">
<p class='service-title'>Architectural Modelling</p>
<p class='service-description'>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font.</p>
</div>
</div>
<div class='column'>
<div class='third-column'>
<img src="https://static.wixstatic.com/media/9e456adff0ee4a2c847cfd67a62454a3.jpg/v1/fill/w_300,h_225,al_c,q_80,usm_0.66_1.00_0.01/9e456adff0ee4a2c847cfd67a62454a3.webp">
<p class='service-title'>Construction Management</p>
<p class='service-description'>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font.</p>
</div>
</div>
</div>
</div>

<div class='about-section'>
<div class='about-row'>
<div class='about-column'>
<p class='about-header'>ABOUT</p>
<p class='about-text'>I'm a paragraph. Click here to add your own text and edit me. It’s easy.
Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to
drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.​
This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company.
Talk about your team and what services you provide.
Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors.
Make your company stand out and show your visitors who you are.</p>
</div>
</div>
</div>

<div class='stats-section'>
<div class='stats-row'>
<div class='stats-column'>
<p class='stat-number'>2023</p>
<p class='stat-description'>Year Established</p>
</div>
<div class='stats-column'>
<p class='stat-number'>206</p>
<p class='stat-description'>Projects Completed</p>
</div>
<div class='stats-column'>
<p class='stat-number'>870</p>
<p class='stat-description'>Contractors Appointed</p>
</div>
<div class='stats-column'>
<p class='stat-number'>26</p>
<p class='stat-description'>Awards Won</p>
</div>
</div>
</div>

<div class="project-text">
<p>PROJECTS</p>
</div>

<div class='projects-section'>
<div class='projects-row'>
<div class='projects-column'>
<img class='p-image' src='https://static.wixstatic.com/media/b8f768e092644bc58b303f107f02411d.jpg/v1/fill/w_455,h_455,q_90/b8f768e092644bc58b303f107f02411d.webp'>
</div>
<div class='projects-column'>
<img class='p-image' src='https://static.wixstatic.com/media/d69f20184cf54a40a9632c4d33ceb2bb.jpg/v1/fill/w_455,h_455,q_90/d69f20184cf54a40a9632c4d33ceb2bb.webp'>
</div>
<div class='projects-column'>
<img class='p-image' src='https://static.wixstatic.com/media/ef1d7355e0c147dbb86a0ba42f2bff16.jpg/v1/fill/w_455,h_455,q_90/ef1d7355e0c147dbb86a0ba42f2bff16.webp'>
</div>
<div class='projects-column'>
<img class='p-image' src='https://static.wixstatic.com/media/ef7ea5acd46045038a8f5e469335fe51.jpg/v1/fill/w_455,h_455,q_90/ef7ea5acd46045038a8f5e469335fe51.webp'>
</div>
</div>
</div>
</body>
</html>
48 changes: 48 additions & 0 deletions Code/Jose/html_css/lab3/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}