Skip to content

Commit

Permalink
finished assignment
Browse files Browse the repository at this point in the history
  • Loading branch information
@jnandez0586
jnandez0586 committed Feb 22, 2018
1 parent 05d8878 commit 42d8ca2
Show file tree
Hide file tree
Showing 5 changed files with 495 additions and 2 deletions.
344 changes: 344 additions & 0 deletions css/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,344 @@
/* 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;
}
@media (max-width: 768px) {
.container header {
flex-direction: column-reverse;
align-items: center;
}
.container header img {
margin: 20px 0 0;
align-self: center;
}
.container .cta .cta-text {
width: 50%;
margin-right: 5%;
}
.container .cta .cta-text h1 {
width: 100%;
font-size: 55px;
}
.container .cta img {
width: 50%;
}
.container .main-content img {
width: 95%;
}
}
@media (max-width: 400px) {
.container header nav ul {
width: 395px;
font-size: 1rem;
flex-direction: column;
display: block;
text-align: center;
margin-top: 20px;
}
.container header nav ul li {
margin: 30px;
border-top: solid 1px;
padding-top: 15px 0;
}
.container .cta {
flex-direction: column;
align-items: center;
}
.container .cta .cta-text h1 {
font-size: 35px;
}
.container .cta .cta-text button {
width: 125px;
}
.container .cta img {
display: none;
}
.container .main-content {
margin: 50px 0 35px 0;
}
.container .main-content .top-content {
flex-direction: column;
}
.container .main-content img {
width: 100%;
margin: 30px 0;
}
.container .main-content .bottom-content {
flex-direction: column;
}
}
.main-header nav ul li {
border: solid 2px red;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.main-header img {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
.cta .cta-text h1 {
-webkit-box-shadow: 5px 10px;
-moz-box-shadow: 5px 10px;
box-shadow: 5px 10px;
}
.cta .cta-text button {
-webkit-box-shadow: 3px 6px red;
-moz-box-shadow: 3px 6px red;
box-shadow: 3px 6px red;
}
.cta img {
width: 700%;
}
.main-content .text-content h4 {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
}
.main-content .text-content button {
width: 75px;
height: 30px;
background-color: red;
-webkit-box-shadow: 5px 5px;
-moz-box-shadow: 5px 5px;
box-shadow: 5px 5px;
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}
.main-content img {
-webkit-transform: skew(15deg, 3deg);
-moz-transform: skew(15deg, 3deg);
-ms-transform: skew(15deg, 3deg);
-o-transform: skew(15deg, 3deg);
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: 'Titillium Web', sans-serif;
}
h1,
h2,
h3,
h4,
h5 {
font-family: 'Bangers', cursive;
letter-spacing: 1px;
margin-bottom: 10px;
}
.container {
width: 100%;
margin: auto;
}
header {
width: 100%;
display: flex;
}
header nav ul {
margin-top: 40px;
width: 610px;
justify-content: space-between;
display: flex;
}
header nav ul li a {
text-decoration: none;
color: #b0b0b0;
}
header nav ul li a:hover {
text-decoration: underline;
color: black;
}
header .logo {
align-self: flex-end;
margin: 28px 0 0 91px;
}
.cta {
display: flex;
margin-top: 72px;
justify-content: flex-end;
}
.cta .cta-text {
font-size: 72px;
text-align: center;
letter-spacing: 5px;
display: flex;
justify-content: center;
flex-flow: column;
align-items: center;
margin: 0 82px 0 0;
}
.cta .cta-text button {
border: 1px double black;
font-size: 16px;
background: white;
width: 170px;
height: 32px;
margin-top: 10px;
cursor: pointer;
}
.cta .cta-text button:hover {
background: black;
color: white;
}
.main-content {
border-top: 2px solid black;
border-bottom: 2px solid black;
margin: 75px 0 35px 0;
padding: 35px 0;
font-size: 16px;
line-height: 18px;
}
.main-content .top-content {
display: flex;
justify-content: space-around;
}
.main-content .middle-img {
display: block;
margin: 30px auto;
}
.main-content .bottom-content {
display: flex;
justify-content: space-around;
}
.main-content .bottom-content p {
padding-right: 20px;
}
.contact p {
margin: 40px 0;
}
footer {
text-align: center;
margin: 40px 0 20px;
}
5 changes: 5 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,12 @@ <h1>Innovation<br> On<br> Demand</h1>
<div class="top-content">
<div class="text-content">
<h4>Features</h4>
<button>See Features</button>
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
</div>
<div class="text-content">
<h4>About</h4>
<button>About Us</button>
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
</div>
</div>
Expand All @@ -71,14 +73,17 @@ <h4>About</h4>
<div class="bottom-content">
<div class="text-content">
<h4>Services</h4>
<button>Get Services</button>
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
</div>
<div class="text-content">
<h4>Product</h4>
<button>See Products</button>
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
</div>
<div class="text-content">
<h4>Vision</h4>
<button>See Visions</button>
<p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion less/general-styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@ h1, h2, h3, h4, h5 {
}

.container {
width: 880px;
width: 100%;
margin: auto;
}
Loading

0 comments on commit 42d8ca2

Please sign in to comment.