Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
laid out first 4.5 sections
  • Loading branch information
@mdr19002
mdr19002 committed May 8, 2020
1 parent 5ff4f8c commit 95d6ed9
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 27 deletions.
94 changes: 93 additions & 1 deletion css/main.css
View file
Expand Up @@ -154,6 +154,54 @@ textarea {
justify-self: center;
}

#section-3 {
text-align: center;
padding: 50px;
}

#section-3-flex-container img {
width: calc(30px + 1vw);
margin: auto;
}

.section-3-col {
margin: 10px;
}

#section-4 {
display: grid;
grid-template-columns: 1fr 80vw 1fr;
grid-template-rows: auto auto auto;
}

#section-4-title {
grid-row: 1/2;
grid-column: 2/3;
}

#section-4-text {
grid-row: 3/4;
grid-column: 2/3;
text-align: center;
}

#section-4-img {
grid-row: 2/3;
grid-column: 2/3;
justify-self: center;
}

#section-5 {
background-image: url(/img/bg-2_sm.jpeg);
background-size: cover;
text-align: center;
padding: 50px;
}

.jon {
margin: 15px;
}

@media (min-width: 484px) {
#section-1 {
background-image: url(/img/bg-1_md.jpeg);
Expand All @@ -165,9 +213,13 @@ textarea {
#section-1 h1 {
font-size: 50pt;
}

#section-5 {
background-image: url(/img/bg-2_md.jpeg);
}
}

@media (min-width: 1025px) {
@media (min-width: 950px) {
#section-1 {
background-image: url(/img/bg-1_lg.jpeg);
min-height: 800px;
Expand Down Expand Up @@ -199,6 +251,46 @@ textarea {
#section-2-img img {
max-width: 100%;
}

#section-3-flex-container {
display: flex;
justify-content: space-around;
}

#section-4 {
grid-template-columns: max(40%) 1fr;
grid-template-rows: auto auto auto auto;
}
#section-4-title {
grid-column: 2/3;
grid-row: 2/3;
padding-left: 10vw;
padding-right: 10vw;
}
#section-4-text {
grid-column: 2/3;
grid-row: 3/4;
text-align: left;
padding-left: 10vw;
padding-right: 10vw;
}
#section-4-img {
grid-column: 1/2;
grid-row:1/5;
justify-self: left;
padding: 10px;
}
#section-4-img img {
max-width: 100%;
}
#section-5 {
background-image: url(/img/bg-2_lg.jpg);
}
#section-5-jons {
display: flex;
justify-content: space-around;
}

}

@media (min-width: 1921px) {
Expand Down
Binary file modified img/dog-2_md.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/dog-2_sm.jpeg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/placeholder-square.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 33 additions & 26 deletions index.html
View file
Expand Up @@ -40,7 +40,7 @@
</div>
<div id="section-2-img">
<picture>
<source media="(min-width: 1025px)" srcset="/img/dog-1_md.jpg">
<source media="(min-width: 950px)" srcset="/img/dog-1_md.jpg">
<img alt="Random Dog" src="/img/dog-1_sm.jpeg">
</picture>
</div>
Expand All @@ -49,56 +49,63 @@
<section class="dark-gray medium" id="section-3">
<p class="salmon small">NEW FEATURES</p>
<h3 class="title">Some Awesome Columns</h3>
<div>
<img>
<p class="small">Some awesome features</p>
<p class="tiny">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div>
<img>
<p class="small">Some awesome features</p>
<p class="tiny">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div>
<img>
<p class="small">Some awesome features</p>
<p class="tiny">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
<div id="section-3-flex-container">
<div class="section-3-col">
<img src="img/picture.png">
<p class="small">Some awesome features</p>
<p class="tiny">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="section-3-col">
<img src="img/airplane.png">
<p class="small">Some awesome features</p>
<p class="tiny">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="section-3-col">
<img src="img/bulb.png">
<p class="small">Some awesome features</p>
<p class="tiny">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
</div>
</section>

<section class="dark-gray medium" id="section-4">
<div>
<picture></picture>
<div id="section-4-img">
<picture>
<source media="(min-width: 950px)" srcset="img/dog-2_md.jpg">
<img alt="Different Random Dog" src="img/dog-2_sm.jpeg">
</picture>
</div>
<div>
<div id="section-4-title">
<p class="salmon small">Start ASAP</p>
<h3 class="title">This is a pretty big project, you know <span class="salmon">....</span></h3>
</div>
<div id="section-4-text">
<p class="tiny">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn. Vestibulum felis euismod semper.</p>
</div>
</section>

<section class="white medium tiny" id="section-5">
<div>
<div>
<img>
<div id="section-5-jons">
<div class="jon">
<img src="img/placeholder-square.png">
<p class="small">Jonathon Doe</p>
<p class="salmon">Co-Founder</p>
<p class="light-italic">“Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id gravida at eget metus. Etiasem malesuada magn”</p>
</div>
<div>
<img>
<div class="jon">
<img src="img/placeholder-square.png">
<p class="small">Jonathon Doe</p>
<p class="salmon">Co-Founder</p>
<p class="light-italic">“Pellentesque ornare sem lacinia quam. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn”</p>
</div>
<div>
<img>
<div class="jon">
<img src="img/placeholder-square.png">
<p class="small">Jonathon Doe</p>
<p class="salmon">Co-Founder</p>
<p class="light-italic">“Aenean eu leo quam. Pellentesque ornare sem lacinia qua emere wancerid elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn”</p>
</div>
</div>
<div>
<div id="section-5-logos">
<ul>
<li><img></li>
<li><img></li>
Expand Down

0 comments on commit 95d6ed9

Please sign in to comment.