<main>
<!-- header -->
<header id="main-header">
	<div class="text">
		<h3>hello welcome to weptim graphics</h3>
		<p>a place to get your dream graphic designs and logos that will make your business outstanding</p>
	</div>
	<div class="image"></div>
</header>
<!-- services -->
<section id="services">
	<h3 class="title">our services</h3>
	<div class="container">
		<div>
			<img  src="https://images.pexels.com/photos/354939/pexels-photo-354939.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
			<div class="desc">
				<h3>graphic design</h3>
				<p>Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
				<div>
			<img  src="https://images.pexels.com/photos/1047540/pexels-photo-1047540.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
			<div class="desc">
				<h3>logo design</h3>
				<p>Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
				<div>
			<img  src="https://images.pexels.com/photos/2362392/pexels-photo-2362392.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
			<div class="desc">
				<h3>web design</h3>
				<p>Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
	</div>
</section>
<!-- about -->
<section id="about">
<div class="container">
<div class="image-display">
<img src="https://images.pexels.com/photos/133170/pexels-photo-133170.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="about-me-image">	
</div>
<div class="content">
	<h3 class="sub-title">about me</h3>
	 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
	</div>
</section>
<!--  projects -->
<section id="projects">
	<h3 class="title">my work</h3>
	<div class="projects">
	<div>
		<img src="https://images.pexels.com/photos/207665/pexels-photo-207665.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="image">
	</div>
		<div>
		<img src="https://images.pexels.com/photos/962312/pexels-photo-962312.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="image">
	</div>
		<div>
		<img src="https://images.pexels.com/photos/1038041/pexels-photo-1038041.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="image">
	</div>
		<div>
		<img src="https://images.pexels.com/photos/2130793/pexels-photo-2130793.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="image">
	</div>
		<div>
		<img src="https://images.pexels.com/photos/1473215/pexels-photo-1473215.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="image">
	</div>
		<div>
		<img src="https://images.pexels.com/photos/460736/pexels-photo-460736.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="image">
	</div>
</div>
</section>
<!-- contact-me-->
<section id="contact">
	<h3 class="title">get in touch</h3>
	<div class="grid-2">
	<div class="details">
		<div>
			<h3>email us</h3>
		<a href="mailto:weptimug@gmail.com">weptimug@gmail.com</a>
	</div>
	<div>
		<h3>call us now</h3>
		<a href="tel+256702907958">0702907958</a>
	</div>
	<div>
		<p>234 something street</p>
		<p>mbale (u)</p>
	</div>
	</div>
<div class="contact">
	<form action="weptimug@gmail.com" method="post">
		<div class="form">
		<div>
			<label>name</label>
			<p>
			<input type="text" name="name" placeholder="Enter:name:">
		</p>
		</div>

<div>
			<label>email</label>
			<p>
			<input type="email" name="email" placeholder="email:">
		</p>
		</div>
	</div>
		<div>
			<label>message</label>
			<p>
			<textarea placeholder="message"></textarea>
		</p>
		</div>
		<div>
			<button type="submit">submit</button>
		</div>


	</form>
</div>
</div>
	</section>
	<!-- footer -->
		<p style="text-align: center; padding: 1em 0 0 0;">copy right &copy; 2019 by weptim</p>
		</footer>
</main>

 * {
 	margin:0;
 	padding:0;
 	box-sizing:border-box;
 }
html {
  scroll-behavior: smooth;
}
input:focus,textarea:focus {
  outline:none;
}
 body {
color:#333;
 }
 a {
	color: #111;
	text-decoration: none;
 }
 ul {
margin: 0;
padding:0;
list-style-type: none;
 }
 .grid-2 {
 	display:grid;
 	grid-template-columns:1fr 2fr;
 }
 .details {
 	padding-left: 5em;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-content: center;
 	align-items: center;
 	text-align: center;
 }
 img {
 	width:100%;
 	height:auto;
 }
 main {
 	max-width:900px;
 	margin:auto;
 	background:#f8f8f8;
 }
 :root {
 	--color:#333;
 	--background:#eaeaea;
 	--box-shadow: 10px 5px 10px rgba(0,0,0,0.4);
 }
 h3 {
 	font-weight:500;
 }
 .title {
 	font-weight:500;
 	padding:1em 0;
 	text-align:center;
 	text-transform:uppercase;
 }
 .desc {
 	border:1px solid #222;
 	text-align:center;
 	padding:1em;
 }
 /* global variables */

#main-header {
	display:grid;
	grid-template-columns: 1fr 2fr;
	justify-content: center;
	align-content: center;
	box-shadow: var(--box-shadow);
}

#main-header .text {
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	text-align:center;
	border-left: 1px solid #333;
	padding:0 1em;
}
#main-header .text h3 {
	font-family: serif;
font-size:30px;
text-transform: uppercase;
line-height:0.9;
font-weight:400;
text-shadow: 2px 2px 2px #999;
}
#main-header .text p {
	font-size:20px;
}
.image {
	background:url('https://images.pexels.com/photos/1144699/pexels-photo-1144699.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
	background-size: cover;
	background-position:center;
	background-repeat: no-repeat;
	height:100vh;
	width:100%;
}
 /* header */
 #services {
 	box-shadow: var(--box-shadow);
 	padding:5em 1em;
 }
 #services .container {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	grid-gap:1em;
 }
/* services */
#about {
	padding:5em 1em;
	box-shadow: var(--box-shadow);
}
#about .container{
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-gap:1em;
	padding:1em;
}
#about .container img  {
	border-radius:50px;
}
.container .content {
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
}
.content h3 {
	text-transform: uppercase;
	padding-top:.5em;
	font-size:2em;
}
.content p {
	font-size:1.2em;
	padding:0 1em;
}
/* about */
#projects {
	padding:5em 0;
	box-shadow: var(--box-shadow);
}
.projects {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	grid-gap:1em;
}
/* projects */
#contact {
	padding:5em 0;
	box-shadow: var(--box-shadow);
}
.contact {
	width:80%;
	margin:auto;
}
.contact form input[type="text"],input[type="email"] {
	padding:1em;
	width:100%;
	border:none;
	background:lightgrey;
	color:#000;
}
.contact form .form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap:1em;
}
.contact form textarea {
width:100%;
padding: 3em 0;
border:none;
background:lightgrey;
}
.contact form textarea:focus {
border:lightgrey;
background:#fff;
color:#111;
}
.contact form button {
	width:100%;
	border:none;
	background: #333;
	color:#fff;
	padding:1em;
	transition-property: background;
	transition-duration: 500ms;
	transition-timing-function: ease-in;
}
.contact form button:hover {
	background:#555;
}
/* contact */
#main-footer {
	background:#222;
	color: #fff;
	padding:5em 0 0 0;
}
#main-footer a{
	color: #eaeaea;
	font-size:0.89em;
}
.follow-me {
	text-align: center;
	color: #fff;
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	justify-content: center;
	align-content: center;
}
.follow-me h3 {
	text-decoration: underline;
}
/* footer */
.absolute {
	position:fixed;
	bottom: 0;
	background:blue;
	display:inline-block;
	padding:.3em;
	transition-property: background;
transition-duration: 500ms;
transition-timing-function: ease-in;
}
.absolute:hover {
background:transparent;
color:#111;
border:1px solid #222;
}
/* 
media screen
media queries
*/
@media screen and (max-width: 500px) {
.grid-2 {
 	grid-template-columns:1fr;
 }
 .details {
 	padding:0;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-content: center;
 	align-items: center;
 	text-align: center;
 }
 /* global variables */

#main-header {
	grid-template-columns: 1fr;
}

#main-header .text {
		height:50vh;
}
#main-header .text h3 {
	font-family: serif;
font-size:25px;
}
#main-header .text p {
	font-size:18px;
}
.image {
	height:50vh;
}
 /* header */
 #services {
 	box-shadow: var(--box-shadow);
 	padding:3em 1em;
 }
 #services .container {
 	grid-template-columns:1fr;
 }
/* services */
#about {
	padding:3em 0;
}
#about .container{
	grid-template-columns:1fr;
}
#about .container img  {
	border-radius:20px;
}

.content h3 {
	font-size:1.5em;
}
/* about */
#projects {
	padding:3em 0;
}
.projects {
	grid-template-columns:1fr;
}
/* projects */
#contact {
	padding:5em 0;
}
.contact form .form {
	grid-template-columns:1fr;
}
.contact form textarea:focus {
border:lightgrey;
background:#fff;
color:#111;
}
/* contact */
#main-footer {
	background:#222;
	color: #fff;
	padding:3em 0 0 0;
}
#main-footer a{
	color: #eaeaea;
	font-size:0.89em;
}
.follow-me {
grid-template-columns: 1fr;
text-align: left;
padding-left: 1em;
}
.follow-me h3 {
	text-decoration: underline;
}
	}
}