Skip to content

This is as far as I got #1536

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
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

This is as far as I got #1536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c5497a5
my version
Mar 12, 2020
9ddfc86
made some changes to html
Mar 13, 2020
e3478bc
made some changes to the hmtl
Mar 13, 2020
08b92df
made changes to html
Mar 13, 2020
2caed7f
made changes to html
Mar 13, 2020
3038a9d
added more divs and different sections
Mar 13, 2020
0c73a88
refactored my css
Mar 13, 2020
bcd9f0c
removed header on html and change the my layout for css
Mar 13, 2020
66957bc
updated changes to my html and css
Mar 13, 2020
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
106 changes: 104 additions & 2 deletions great-idea/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ table {

/* Set every element's box-sizing to border-box */
* {
box-sizing: border-box;
box-sizing: border-box;
border: 1px solid black;
}

html, body {
Expand All @@ -63,4 +64,105 @@ h1, h2, h3, h4, h5 {
margin-bottom: 15px;
}

/* Copy and paste your work from yesterday here and start to refactor into flexbox */
/* Copy and paste your work from yesterday here and start to refactor into flexbox */
/* Your code starts here! */

* {
border: 1px solid black;
}

body {
text-align: center;
line-height: 1.5;
width: 100%;
border: 25px solid white;
}

header {
display: flex;
margin-bottom: 5%;
}

nav {
display: flex;
justify-content: center;
width: 70%;
font-size: 22px;
}

nav span {
display: flex;
align-items: center;
width: 16%;
}
nav a:hover {
color: yellow;
}

.links {
display: flex;
justify-content: space-between;
}

.image1 {
display: flex;
justify-content: flex-end;
}

.h2 {
display: flex;
width: 50%;
font-size: 550%;
}

.content {
display: flex;
justify-content: space-evenly;
}


.about, .feature {
justify-content: space-evenly;
}

.h3 {
display: flex;
}

.logo {
display: flex;
margin-bottom: 5%;
width: 10%;
}

.services, .product, .vision {
display: flex;
width: 33%;
padding-top: 5%;
text-align: justify;
flex-direction: column;
}

.services, .product {
padding-right: 3%;
}

.bottom-content {
display: flex;
margin-bottom: 5%;
border-top: 1px solid black;
}

.bullets {
text-align: justify;
line-height: 2;
padding-top: 4%;
border-top: 1px solid black;
}

footer {
display: flex;
margin-top: 5%;
margin-bottom: 3%;
justify-content: center;
}
115 changes: 110 additions & 5 deletions great-idea/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,113 @@

<body>

<!-- Copy and paste your HTML from the first UI project here -->


</body>
</html>
<section class="container">
<header>
<nav>
<div class="links">
<a href="#">Services</a>
<a href="#"></a>Product</a>
<a href="#"></a>Vision</a>
<a href="#"></a>Features</a>
<a href="#"></a>About</a>
<a href="#"></a>Contact</a>
</div>
</nav>

<img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
</header>

<div>
<img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
</div>

<div class="services">
<h2>Services</h2>

<p>Our services provide the best digital value in nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque eleifend. Mauris euismod facilisis iaculis.</p>
</div>
</section>

<section class="content">
<div>
<h3>Digital Design</h3>

<p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
eleifend. Mauris euismod facilisis iaculis.</p>

<button>Learn More</button>
</div>

<div>
<h3>UX / UI</h3>

<p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
eleifend. Mauris euismod facilisis iaculis.</p>

<button>Learn More</button>
</div>

<div>
<h3>Digital Marketing</h3>

<p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
eleifend. Mauris euismod facilisis iaculis.</p>

<button>Learn More</button>
</div>

<div>
<h3>Web Development</h3>

<p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
eleifend. Mauris euismod facilisis iaculis.</p>

<button>Learn More</button>
</div>

<div>
<h3>iOS Development</h3>

<p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
eleifend. Mauris euismod facilisis iaculis.</p>

<button>Learn More</button>
</div>

<div>
<h3>Android Development</h3>

<p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
eleifend. Mauris euismod facilisis iaculis.</p>

<button>Learn More</button>
</div>
</section>

<section class="bottom-content">
<div>
<h3>Some Facts About Our Services</h3>

<p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
eleifend. Mauris euismod facilisis iaculis.</p>
</div>

<div class="bullets">
Awesome thing
Amazing thing
Cool thing
Great thing
</div>

<div>
<img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
</div>
</section>

<footer>
Copyright Great Idea! 2018
</footer>

</body>

</html>