Skip to content

completed this last night and didn't get it to github correctly #1537

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 1 commit into
base: master
Choose a base branch
from
Open

completed this last night and didn't get it to github correctly #1537

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
157 changes: 156 additions & 1 deletion great-idea/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,4 +63,159 @@ 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 */




h2 {
font-size: 30px;
margin: 1% 13% ;
}



.navigation {
color: grey;
word-spacing: 80px;
font-family: 'Titillium Web';
display: flex;
justify-content: space-between;
margin: 1% 13%;

}

.service {
margin: 1% 13%;
line-height: 20px;
border-bottom: 1px solid black;
}

.image1 {

display:flex;
justify-content: center;
margin: 0% auto;
width: 75%;
}

.MainContent {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
max-width: 40%;
max-height: 100%;
margin: 0% 0% 0% 10%;
line-height: 20px;
}



.DigitalDesign {
border: 1px solid black;
margin: 3%;
background-color: lightgrey;


}

.DigitalMarketing {
border: 1px solid black;
margin: 3%;
background-color: lightgrey;

}


.IOS {
border: 1px solid black;
margin: 3%;
background-color: lightgrey;

}

.UXUI {
border: 1px solid black;
margin: 3%;
background-color: lightgrey;

}

.WebDev {
border: 1px solid black;
margin: 3%;
background-color: lightgrey;

}

.Android {
border: 1px solid black;
margin: 3%;
background-color: lightgrey;

}


.button {
background-color:white;
border: 1px solid black;
border-radius: 5px;
color: black;
padding: 3% 11%;
text-align: center;
font-size: 11px;
margin: 5%;
}

#finalP {

border-top:1px solid black;

max-width: 43%;
margin-left: 13%;
height:50%;
}
.image2 {

margin-right: -15%;

margin-left: 20%;

}



.bottomContent {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
max-width: 78%;
height: 70%

}




#list {
list-style-type: square;
height:80%;
width:30%;
margin-top: -6%;
margin-right:45%;
}

#border{

}

.footer {

text-align: center;
}

.number: {

}
189 changes: 187 additions & 2 deletions great-idea/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">

<title>Great Idea!</title>
<title>Great Idea! - Services</title>

<link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
Expand All @@ -17,7 +17,192 @@
<body>

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


<nav class="navigation">
Services
Product
Vision
Features
About
Contact
<img src="img/logo.png" alt="Great Idea! Company logo.">
</nav>



<header>
<div>
<img class="image1" src="img/services-header.jpg" alt="Image of a code snippet.">
<h2>Services</h2>
<p class="service">
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>
</header>


<section class="MainContent">
<div class="DigitalDesign">
<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 class="button">
Learn More
</button>
</div>



<div class="DigitalMarketing">
<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 class="button">
Learn More
</button>
</div>

<div class="IOS">
<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 class="button">
Learn More
</button>
</div>

<div class= "UXUI">
<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 class="button">
Learn More
</button>
</div>

<div class="WebDev">
<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 class="button">
Learn More
</button>
</div>



<div class="Android">
<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 class="button">
Learn More
</button>
</div>


</section>





<section>
<div class="bottomContent">
<div id="finalP">
<h3 id="border">
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>

<img class="image2" src="img/services-info.png">

<div id="list">
<ul="list-style-type:square">
<li>Awesome thing</li>

<li>Amazing thing</li>

<li>Cool thing</li>

<li>Great thing</li>
</ul>
</div>


</div>

</section>







<footer>
<div class="footer">
<p>Copyright Great Idea! 2018</p>
</footer>
</div>
</section>
</body>
</html>