Skip to content

Responsive 1 #987

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

Responsive 1 #987

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
69 changes: 68 additions & 1 deletion css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,70 @@
/* Use your own code or past solution for Great Idea Web Page CSS here! */
.box {
display: flex;
}

.nav {
word-spacing: 40px;
background: turquoise;
padding: 5%;
}

.heading {
font-size: 2em;
padding: 0 0 0 80px;
background: #404040;
}

.flex-container {
display: flex;
flex-wrap: wrap;
margin: 20px;
}

.sec1 {
width: 300px;
border: 2px black solid;
margin: 20px;
}

.sec2 {
width: 300px;
border: 2px black solid;
margin: 20px;
}

.sec3 {
width: 300px;
border: 2px black solid;
margin: 20px;
}

.sec4 {
width: 300px;
border: 2px black solid;
margin: 20px;
}

.sec5 {
width: 300px;
border: 2px black solid;
margin: 20px;
}

.sec6 {
width: 300px;
border: 2px black solid;
margin: 20px;
}

.sec7 {
width: 300px;
}

@media (max-width:800px) {
.box {
flex-direction: column;
}
}
/* Use your own code or past solution for Great Idea Web Page CSS here! */


88 changes: 85 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,96 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Great Idea - Responsive I</title>

<link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">

</head>

<body>
<!-- Use past code you created here for Great Idea Web Page or past solution for Great Idea Web Page HTML here! -->
</body>


<body>
<div class="box">
<img src="./img/logo.png"/>
<div class="nav">
<a href="service">Services</a>
<a href="product">Product</a>
<a href="vision">Vision</a>
<a href="features">Features</a>
<a href="about">About</a>
<a href="contact">Contact</a>
</div>
</div>

<div class="heading">
<h1>Innovation
On
Demand<h1>

</div>

<img>
<div class="flex-container">
<div class="sec1">
<h4 id="features">Digital Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex enim quod nesciunt numquam veritatis aperiam maxime delectus, sunt laboriosam labore corrupti, illum blanditiis perspiciatis in. Sapiente architecto explicabo voluptate repellendus?</p>
<button>Learn More</button>
</div>
<div class="sec2">
<h4 id="about">UI / UX</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo neque corrupti hic ipsam, voluptatibus porro at iste officiis quas assumenda quibusdam magni quos illo. Voluptates quos ratione enim omnis iusto?</p>
<button>Learn More</button>
</div>
<div class="sec3">
<h4 id="service">Digital Marketing</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, ex aperiam aliquid ullam provident eum harum, cumque molestias asperiores at mollitia dignissimos dolorum aliquam vel recusandae sed reiciendis magni quas.</p>
<button>Learn More</button>
</div>
<div class="sec4">
<h4 id="product">Web Developement</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed accusantium laboriosam cum iure facilis sunt quas rerum magnam iusto soluta, numquam non quibusdam nam deserunt blanditiis consequuntur. Tempore, doloremque rem </p>
<button>Learn More</button>
</div>
<div class="sec5">
<h4 id="vision">IOS Development</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti quam eaque aliquid facere nesciunt animi, dolores distinctio aspernatur esse nostrum dolore officia maxime iusto tenetur repellendus fuga quaerat rerum at!</p>
<button>Learn More</button>
</div>
<div class="sec6">
<h4 id="vision">Android Development</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste quia voluptatum voluptate quidem praesentium rem deleniti. Reprehenderit exercitationem ratione deserunt delectus soluta recusandae aliquid assumenda ullam nulla. Tempora, hic adipisci.</p>
<button>Learn More</button>
</div>
<div class="sec7">
<h4 id="facts">Some Facts About Our Services</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae accusantium voluptates, voluptatibus distinctio iste repellendus suscipit tempora, aut, deserunt odio officia voluptas maiores placeat! Dolore eius commodi ipsum neque dicta.</p>
<ul>
<li>Amazing Things</li>
<li>Awsome Things</li>
<li>Great Things</li>
<li>Cool Things</li>
</ul>
</div>
</div>
</div>
<br>

<hr>

<br>

<footer>
<h4 id="footer">Contact</h4>
<p>123 Way 456 Street<br>
Somewhere, USA</p>

<p>1 (888) 888-8888</p>

<email>sales@greatidea.io</email>
</footer>
</body>


</html>