Skip to content

submission #49

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

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

submission #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
903ae70
final html-css
Oct 9, 2019
d291902
user info
Oct 9, 2019
0754089
user info
Oct 9, 2019
19ccfde
user info
Oct 9, 2019
f7bff7e
final html-css
Oct 9, 2019
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
140 changes: 140 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,143 @@ html, body {
font-family: Helvetica, sans-serif;
font-size: 16px;
}
body{
background: #dcdcdc;
margin: 0px;
}
header{
background-color: black;
text-align: center;
height: 370px;
position: relative;
}
header h4{
position: absolute;
width: 145px;
padding: 27px;
top: 7%;
left: 42.7%;
border-bottom: 2px solid white;
font-weight: 100;
font-size: 4em;
color: white;
}
.center{
text-align: center;
margin: auto;
}
button{
border: 2px solid black;
padding: 15px;
text-transform: uppercase;
border-radius: 5px;
background: transparent;
letter-spacing: 4px;
font-weight: 3px;
}

.intro{
background-color: white;
width: 75%;
height: 260px;
margin-top: 60px;
padding-top: 50px;
padding-bottom: 50px;
border-radius: 5px;
}
.intro .title{
text-transform: uppercase;
font-weight: 100;
letter-spacing: 3.5px;
}
.intro .intro-content{
margin-top: 30px;
width: 500px;
line-height: 25px;
}
.intro .intro-btn{
width: 200px;
margin: 35px;
}

.images{
display: flex;
width: 1100px;
margin-top: 30px;
}
.left{
margin-left: 40px;
}
.img-card{
margin-top: 31px;
width: 93%;
background-color: white;
border-radius: 5px;
}
.img-card-content{
position: relative;
background-color: #dcdcdc;
}
.content-img-1{
background-image: url("./images/pic01.jpg");
}
.content-img-2{
background-image: url("./images/pic03.jpg");
}
.content-img-3{
background-image: url("./images/pic02.jpg");
}
.content-img-4{
background-image: url("./images/pic04.jpg");
}
.content-design{
width: 495px;
height: 245px;
opacity: 0.9;
border-radius: 5px 5px 0px 0px;
}
.img-inner-content{
text-transform: uppercase;
top: 37%;
left: 20%;
position: absolute;
color: white;
letter-spacing: 5px;
font-size: 20px;
font-weight: bold;
}
.img-content{
line-height: 25px;
padding-top: 32px;
padding-bottom: 32px;
padding-left: 50px;
padding-right: 50px;
}
.img-btn{
margin: 20px;
padding: 10px;
width: 100px;
}

footer{
padding: 70px;
}
.footer-title{
text-transform: uppercase;
letter-spacing: 3.5px;
font-weight: 100;
}
.footer-inner-content{
margin-top: 30px;
width: 400px;
line-height: 25px;
}
.footer-btn{
width: 200px;
margin-top: 30px;
}
footer hr{
margin-top: 100px;
width: 83.5%;
border: .5px solid black;
}
76 changes: 76 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML-CSS Final</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<header class="center">
<h4>Final</h4>
</header>
<div class="intro center">
<h1 class="title">lorem ipsum dolor</h1>
<p class="intro-content center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae malesuada turpis. Nam pellentesque in ac aliquam. Aliquam tempor mi porta egestas maximus lorem ipsum dolor.</p>
<button class="intro-btn">Learn More</button>
</div>
<div class="images center">
<div class="left">
<div class="img-card">
<div class="img-card-content">
<div class="content-img-1 content-design">
<p class="img-inner-content ">feugiat et faucibus</p>
</div>
</div>
<div class="img-content center">
<p>Fusce malesuada efficitur venenatis. Pellentisque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.</p>
<button class="img-btn">more</button>
</div>
</div>
<div class="img-card">
<div class="img-card-content">
<div class="content-img-2 content-design">
<p class="img-inner-content">lorem massa nulla</p>
</div>
</div>
<div class="img-content center">
<p>Fusce malesuada efficitur venenatis. Pellentisque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.</p>
<button class="img-btn">more</button>
</div>
</div>
</div>
<div class="right">
<div class="img-card">
<div class="img-card-content">
<div class="content-img-3 content-design">
<p class="img-inner-content">blandit adipiscing</p>
</div>
</div>
<div class="img-content center">
<p>Fusce malesuada efficitur venenatis. Pellentisque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.</p>
<button class="img-btn">more</button>
</div>
</div>
<div class="img-card">
<div class="img-card-content">
<div class="content-img-4 content-design">
<p class="img-inner-content">ipsum sed tempus</p>
</div>
</div>
<div class="img-content center">
<p>Fusce malesuada efficitur venenatis. Pellentisque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.</p>
<button class="img-btn">more</button>
</div>
</div>
</div>
</div>
<footer class="center">
<h1 class="footer-title">lorem ipsum dolor</h1>
<p class="footer-inner-content center">Phasellus ac augue ac magna auctor tempus proin accumsan lacus a nibh commodo in pallentesque dui <br/> in hac habitasse platea dictumst.</p>
<button class="footer-btn">get started</button>
<hr />
</footer>
</body>
</html>
4 changes: 2 additions & 2 deletions user.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"name": "",
"email": ""
"name": "Francisco R. Ifurung",
"email": "francisco.ifurung@boom.camp"
}