commit

ModuleFirst/css/styles.css

@@ -0,0 +1,347 @@
+@import url('https://fonts.googleapis.com/css?family=PT+Sans');
+
+html {
+	font-size: 10px;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	font-family: 'PT Sans', helvetica, sans-serif;
+	color: #909090;
+	background: #fff;
+	font-weight: normal;
+}
+
+.container {
+	margin: 0 auto;
+	max-width: 1024px;
+}
+
+.clearfix::after {
+	content: "";
+	clear: both;
+	display: block;
+}
+
+h1, h2 {
+	color: #6f7173;
+	font-weight: normal;
+}
+
+h1 {
+	font-size: 3.6rem;
+	color: #6f7173;
+}
+
+h2 {
+	font-size: 3rem;
+	margin: 0;
+}
+
+h3 {
+	font-size: 2.4rem;
+	color: #5094f2;
+	font-weight: normal;
+}
+
+p {
+	color: #909090;
+}
+
+header {
+	height: 104px;
+	padding: 24px 30px 0px;
+}
+
+header a {
+	float: left;
+}
+
+header form {
+	float: right;
+}
+
+header form #search {
+	height: 40px;
+	width: 390px;
+	background-color: #f3f3f3;
+	border: 1px solid #e5e5e5;
+	font-size: 1.6rem;
+	color: #c7c5c5;
+	font-family: 'PT Sans', helvetica, sans-serif;
+	outline: none;
+}
+
+input::-webkit-input-placeholder {
+ 	color: #c7c5c5; 
+ 	padding-left: 10px;
+ 	
+}
+
+header form label {
+	font-size: 30px;
+	color: #c7c5c5;
+}
+
+header form label i {
+	position: relative;
+	top: 4px;
+}
+
+header form #search-btn {
+	display: none;
+}
+
+section.banner {
+	background: #2f3943;
+	margin-top: -26px;
+}
+
+section.banner img {
+	width: 100%;
+}
+
+section.circles {
+	padding-top: 80px;
+}
+
+section.circles .circle-flex {
+	display: flex;
+	justify-content: space-between;
+}
+
+section.circles .circle-item {
+	width: 33%;
+	
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+	
+}
+
+section.circles .circle-item i {
+	position: relative;
+}
+
+section.circles .circle-item i::after {
+	content: "";
+	position: absolute;
+	width: 186px;
+	height: 186px;
+	background-color: #d94748;
+	border-radius: 50%;
+	right: -45px;
+	bottom: -40px;
+	z-index: -1;
+}
+
+section.circles .circle-item:nth-child(1) i::after {
+	background-color: #5094f2;
+
+}
+
+section.circles .circle-item:nth-child(2) i::after {
+	background-color: #d94748;
+	right: -35px;
+	bottom: -43px;
+}
+
+section.circles .circle-item:nth-child(3) i::after {
+	background-color: #ebbb11;
+	right: -49px;
+	bottom: -43px;
+}
+
+section.circles .icon {
+	font-size: 100px;
+	color: #fff;
+}
+
+section.circles h3 {
+	margin-top: 50px;
+	margin-bottom: 0px;
+}
+
+section.circles p {
+	margin-top: 5px;
+	font-size: 1.6em;
+	padding: 0 20px;
+}
+
+section.shopping-cart {
+	padding-bottom: 60px;
+}
+
+section.shopping-cart .shop-flex {
+	display: flex;
+	justify-content: space-between;
+}
+
+section.shopping-cart .shop-img {
+	width: 50%;
+	padding-top: 25px;
+	padding-left: 25px;
+}
+
+section.shopping-cart .shop-img a{
+	color: #4364a1;
+	font-size: 200px;
+}
+
+section.shopping-cart .shop-text {
+	width: 50%;
+}
+
+section.shopping-cart p {
+	font-size: 1.6rem;
+	line-height: 36px;
+}
+
+footer {
+	padding: 30px 0 40px;
+	border-top: 1px solid #e5e5e5;
+	color: #909090;
+	text-align: center;
+	font-size: 1.4rem;
+}
+
+@media screen and (max-width: 769px) {
+	header {
+		height: 89px;
+		padding-top: 22px;
+		padding-bottom: -12px;
+	}
+
+	header form #search {
+		width: 200px;
+	}
+
+	section.circles .circle-item i::after {
+		width: 136px;
+		height: 136px;
+	}
+
+	section.circles {
+		padding: 32px 0px 18px;
+	}
+
+	section.circles .icon {
+		font-size: 80px;
+	}
+
+	section.circles .circle-flex {
+		flex-direction: column;
+	}
+
+	section.circles .circle-item {
+		padding: 0 30px;
+		flex-direction: row;
+		width: 100%;
+		justify-content: space-around;
+		padding-bottom: 40px;
+		border-bottom: 1px solid #CCCCCC;
+	}
+
+	section.circles .circle-text {
+		text-align: left;
+		max-width: 70%;
+	}
+
+	section.circles .circle-text p{
+		font-size: 2rem;
+
+	}
+
+	section.circles .circle-text h3{
+		padding-left: 20px;
+		margin-top: 10px;
+		font-size: 3.6rem;
+		color: #5094f2;
+	}
+
+	section.circles .circle-flex {
+		flex-direction: column;
+	}
+
+
+	section.circles .circle-item:nth-child(1) i::after {
+		right: -29px;
+		bottom: -23px;
+
+	}
+
+	section.circles .circle-item:nth-child(2) i::after {
+		right: -20px;
+		bottom: -30px;
+	}
+
+	section.circles .circle-item:nth-child(3) i::after {
+		
+		right: -35px;
+		bottom: -30px;
+	}
+	
+	section.circles .circle-item:nth-child(3) i {
+		margin-left: 13px;
+	}
+	
+	.circle-item {
+		margin: 20px 0;
+	}
+
+	.shop-flex {
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		
+	}
+
+	section.shopping-cart .header-h1{
+		
+		text-align: center;
+		
+	}
+
+	.shop-img {
+		width: 100%!important;
+	}
+
+	.shop-text {
+		width: 100%!important;
+	}
+
+	.shop-text p{
+		text-align: left;
+		padding-left: 40px;
+	}
+
+	.shopping-cart h1{
+		font-size: 4.8rem;
+		margin: 0px;
+	}
+
+	.shop-img a {
+		font-size: 160px;
+	}
+
+	.h2-header {
+		text-align: left;
+	}
+
+	h2 {
+		margin-left: 40px;
+		font-size: 3.6rem;
+	}
+
+	.shop-text p {
+		line-height: 34px;
+		font-size: 1.8rem;
+	}
+
+	footer {
+		font-size: 1.6rem;
+	}
+}
+
+

ModuleFirst/index.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<title>Modul</title>
+	<link rel="stylesheet" href="css/font-awesome.min.css">
+	<link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+	<header>
+		<div class="container clearfix">
+			<a href="/"><img src="images/logo.png" alt="Prechu"></a>
+			<form>
+				<label for="search">
+					<input type="text" id="search" placeholder="Search">
+				</label>
+				<label for="search-btn"><i class="fa"></i></label>
+				<input type="submit" id="search-btn">
+			</form>
+		</div>
+	</header>
+	<section class="banner">
+		<div class="container">
+			<img src="images/banner.jpg" alt="img">
+		</div>
+	</section>
+	<section class="circles">
+		<div class="container circle-flex">
+			<div class="circle-item">
+				<div class="icon">
+					<i class="fa"></i>
+				</div>
+				<div class="circle-text">
+					<h3>Contrary to popular</h3>
+					<p>Lorem Ipsum is not simply random text. It has roots in a piece </p>
+				</div>
+			</div>
+			<div class="circle-item">
+				<div class="icon">
+					<i class="fa"></i>
+				</div>
+				<div class="circle-text">
+					<h3>Contrary to popular</h3>
+					<p>Lorem Ipsum is not simply random text. It has roots in a piece </p>
+				</div>
+			</div>
+			<div class="circle-item">
+				<div class="icon">
+					<i class="fa"></i>
+				</div>
+				<div class="circle-text">
+					<h3>Contrary to popular</h3>
+					<p>Lorem Ipsum is not simply random text. It has roots in a piece </p>
+				</div>
+				
+			</div>
+		</div>
+	</section>
+	<section class="shopping-cart">
+		<div class="container">
+			<div class="header-h1">
+				<h1>The Shopping cart</h1>
+			</div>
+			
+			<div class="shop-flex">
+				<div class="shop-img">
+					<a href="#" class="shop-icon">
+						<i class="fa"></i>
+					</a>
+				</div>
+				<div class="shop-text">
+					<div class="h2-header">
+						<h2>Some Bullet text here</h2>
+					</div>
+					
+					<p>Lorem Ipsum is simply dummy text of the printing and typesetting 
+					Lorem Ipsum has been the industry's standard dummy text ever 
+					When an unknown printer took a galley of type and scrambled 
+					It to make a type specimen book. It has survived not only five centuries
+					But also the leap into electronic typesetting,
+					Remaining essentially unchanged. It was popularised 
+					The release of Letraset sheets containing Lorem Ipsum passages
+					</p>
+				</div>
+			</div>
+		</div>
+	</section>
+	<footer>
+		<span>Copyright © 2017 A-Level</span>
+	</footer>
+</body>
+</html>