first module

module1/v1/css/style.css

@@ -0,0 +1,210 @@
+@import url('https://fonts.googleapis.com/css?family=Merriweather');
+@import url('https://fonts.googleapis.com/css?family=Oswald');
+
+* {
+ 	box-sizing: border-box;
+}
+html {
+	font-size: 10px;
+}
+body {
+	font-size: 1.6rem;
+	background: #ffffff;
+	line-height: 1.75;
+	font-family: Merriweather, sans-serif;
+}
+img {
+	max-width: 100%;
+}
+
+.content {
+	width: 1460px;
+	max-width: 90%;
+	margin: auto;
+}
+header {
+	position: fixed;
+	width: 100%;
+	top: 0;
+	left: 0;
+	z-index: 1;
+	background: #ffffff;
+}
+/*-----------------------------header---------------------------------------*/
+header .content {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	padding: 14px 0;
+	border-bottom: 1px solid #e8e8e8; 
+}
+header .logo {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: flex-start;
+}
+header h1 {
+	font-family: Oswald, sans-serif;
+	font-size: 2.8rem;
+	text-transform: uppercase;
+	font-weight: bolder;
+	color: #0085c3;
+	padding-left: 3px;
+}
+header li {
+	display: inline;
+}
+header li a {
+	text-decoration: none;
+	color: #1a1a1a;
+	padding: 10px 14px;
+	font-family: Oswald, sans-serif;
+	text-transform: uppercase;
+}
+header li a:hover {
+	color: #0085c3;
+}
+header nav li:last-child a{
+	color: #ffffff;
+	background: #4ca54c;
+}
+header nav li:last-child a:hover {
+	background: #3d843d;
+}
+/*-----------------------------slider---------------------------------------*/
+section.slider {
+	margin-top: 77px ;
+	background: #00618d;
+	color: #ffffff;
+	padding: 50px 0;
+}
+section .content {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+}
+section h2 {
+	font-size: 2.8rem;
+	padding-bottom: 28px;
+}
+section .left-cont {
+	font-family: Oswald, sans-serif;
+	width: 50%;
+}
+section .right-cont .bottom {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+}
+section.slider a {
+	width: 47%;
+	padding: 16px 32px;
+	margin-bottom: 28px;
+	text-decoration: none;
+	text-align: center;
+	text-transform: uppercase;
+}
+section .right-cont .bottom .bottom1 {
+	background: #4ca54c;
+	color: #ffffff;
+}
+section .right-cont .bottom .bottom2 {
+	background: #f1f1f1;
+	color: #1a1a1a;
+}
+section .right-cont .bottom .bottom1:hover {
+	background: #3d843d;
+	color: #ffffff;
+}
+section .right-cont .bottom .bottom2:hover {
+	background: #3d843d;
+	color: #ffffff;
+}
+/*-----------------------------main---------------------------------------*/
+main.content {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	padding: 20px 0;
+}
+main .main-left {
+	width: 64%;
+	
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: space-between;
+}
+main article {
+	width: 50%;
+	padding: 20px;
+}
+main article h2 {
+	padding-bottom: 16px;
+	font-size: 2.8rem;
+	font-family: Oswald, sans-serif;
+}
+main .main-right {
+	width: 36%;
+	background: #eee;
+	margin: 20px;
+	padding: 40px;
+}
+main .main-right h2 {
+	font-weight: 700;
+	font-size: 2.4rem;
+	font-family: Oswald, sans-serif;
+}
+main .main-right p {
+	border-bottom: 1px solid #f9f9f9;
+	padding-bottom: 10px;
+	margin: 16px 0;
+	font-weight: 400;
+	font-size: 1.6rem;
+}
+main .main-right p i {
+	padding-right: 16px;
+}
+/*-----------------------------footer---------------------------------------*/
+footer section.content{
+	display: flex;
+	flex-flow: column wrap;
+	justify-content: center;
+	align-items: center;
+	font-size: 1.3rem;
+	padding: 18px 0;
+	border-top: 1px solid #eee;
+	color: #686868;
+}
+footer .foot-menu, .social-menu {
+	margin-bottom: 18px;
+}
+footer li {
+	display: inline;
+}
+footer li a {
+	color: #686868;
+	text-decoration: none;
+	padding: 10px 12px;
+}
+footer li a:hover {
+	color: #0085c3;
+}
+footer .social-menu {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: center;
+}
+footer .social-menu a {
+	border: 1px solid #d1d1d1;
+	border-radius: 50%;
+	color: #1a1a1a; 
+	height: 35px;
+	width: 35px;
+	font-size: 1.6rem;
+	margin-right: 10px;
+	text-align: center;
+	line-height: 2;
+}
+footer .social-menu a:hover {
+	color: #0085c3;
+}

module1/v2/css/style.css

@@ -0,0 +1,275 @@
+@import url('https://fonts.googleapis.com/css?family=Merriweather');
+@import url('https://fonts.googleapis.com/css?family=Oswald');
+
+* {
+ 	box-sizing: border-box;
+}
+html {
+	font-size: 10px;
+}
+body {
+	font-size: 1.6rem;
+	background: #ffffff;
+	line-height: 1.75;
+	font-family: Merriweather, sans-serif;
+}
+img {
+	max-width: 100%;
+}
+
+.content {
+	width: 1460px;
+	max-width: 90%;
+	margin: auto;
+}
+header {
+	position: fixed;
+	width: 100%;
+	top: 0;
+	left: 0;
+	z-index: 1;
+	background: #ffffff;
+}
+/*-----------------------------header---------------------------------------*/
+header .content {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	padding: 14px 0;
+	border-bottom: 1px solid #e8e8e8; 
+}
+header .logo {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: flex-start;
+}
+header nav {
+	padding-top: 10px;
+}
+header h1 {
+	font-family: Oswald, sans-serif;
+	font-size: 2.8rem;
+	text-transform: uppercase;
+	font-weight: bolder;
+	color: #0085c3;
+	padding-left: 3px;
+}
+header li {
+	display: inline;
+}
+/*-----------------------------hide-menu------------------------------------*/
+header .hide-menu ul li {
+	position: relative;
+	display: block;
+	padding-top: 15px;
+}
+header .hide-menu .desc-m {
+	font-family: Oswald, sans-serif;
+	font-size: 2.8rem;
+	text-transform: uppercase;
+	font-weight: bolder;
+	color: #0085c3;
+	padding-left: 3px;
+}
+header .hide-menu .menu {
+	position: absolute;
+	width: 100%;
+	opacity: 0;
+	top: -9999em;
+	transition: 0.5s opacity;
+	/*padding-bottom: 7px;*/
+}
+header .hide-menu:hover .menu {
+	opacity: 1;
+	top: 100%;
+	margin-top: -20px;
+	background: #fff;
+}
+header .hide-menu {
+	display: none;
+}
+/*-------------------------------------------------------------------------*/
+header li a {
+	text-decoration: none;
+	color: #1a1a1a;
+	padding: 10px 14px;
+	font-family: Oswald, sans-serif;
+	text-transform: uppercase;
+}
+header li a:hover {
+	color: #0085c3;
+}
+header nav .menu li:last-child a{
+	color: #ffffff;
+	background: #4ca54c;
+}
+header nav .menu li:last-child a:hover {
+	background: #3d843d;
+}
+/*-----------------------------slider---------------------------------------*/
+section.slider {
+	margin-top: 77px ;
+	background: #00618d;
+	color: #ffffff;
+	padding: 50px 0;
+}
+section .content {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+}
+section h2 {
+	font-size: 2.8rem;
+	padding-bottom: 28px;
+}
+section .left-cont {
+	font-family: Oswald, sans-serif;
+	width: 50%;
+}
+section .right-cont .bottom {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+}
+section.slider a {
+	width: 47%;
+	padding: 16px 32px;
+	margin-bottom: 28px;
+	text-decoration: none;
+	text-align: center;
+	text-transform: uppercase;
+}
+section .right-cont .bottom .bottom1 {
+	background: #4ca54c;
+	color: #ffffff;
+}
+section .right-cont .bottom .bottom2 {
+	background: #f1f1f1;
+	color: #1a1a1a;
+}
+section .right-cont .bottom .bottom1:hover {
+	background: #3d843d;
+	color: #ffffff;
+}
+section .right-cont .bottom .bottom2:hover {
+	background: #3d843d;
+	color: #ffffff;
+}
+/*-----------------------------main---------------------------------------*/
+main.content {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	padding: 20px 0;
+}
+main .main-left {
+	width: 64%;
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: space-between;
+}
+main article {
+	width: 50%;
+	padding: 20px;
+}
+main article h2 {
+	padding-bottom: 16px;
+	font-size: 2.8rem;
+	font-family: Oswald, sans-serif;
+}
+main .main-right {
+	width: 36%;
+	background: #eee;
+	margin: 20px;
+	padding: 40px;
+}
+main .main-right h2 {
+	font-weight: 700;
+	font-size: 2.4rem;
+	font-family: Oswald, sans-serif;
+}
+main .main-right p {
+	border-bottom: 1px solid #f9f9f9;
+	padding-bottom: 10px;
+	margin: 16px 0;
+	font-weight: 400;
+	font-size: 1.6rem;
+}
+main .main-right p i {
+	padding-right: 16px;
+}
+/*-----------------------------footer---------------------------------------*/
+footer section.content{
+	display: flex;
+	flex-flow: column wrap;
+	justify-content: center;
+	align-items: center;
+	font-size: 1.3rem;
+	padding: 18px 0;
+	border-top: 1px solid #eee;
+	color: #686868;
+}
+footer .foot-menu, .social-menu {
+	margin-bottom: 18px;
+}
+footer li {
+	display: inline;
+}
+footer li a {
+	color: #686868;
+	text-decoration: none;
+	padding: 10px 12px;
+}
+footer li a:hover {
+	color: #0085c3;
+}
+footer .social-menu {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: center;
+}
+footer .social-menu a {
+	border: 1px solid #d1d1d1;
+	border-radius: 50%;
+	color: #1a1a1a; 
+	height: 35px;
+	width: 35px;
+	font-size: 1.6rem;
+	margin-right: 10px;
+	text-align: center;
+	line-height: 2;
+}
+footer .social-menu a:hover {
+	color: #0085c3;
+}
+
+@media screen and (max-width: 1008px) {
+	header nav {
+		padding-top: 0;
+	}
+	header .hide-menu {
+	display: block;
+	}
+	header .show {
+		display: none;
+	}
+}
+@media screen and (orientation: portrait) {
+	section .left-cont, main .main-right {
+		display: none;
+	}
+	main .main-left {
+		width: 100%;
+	}
+	footer .foot-menu {
+		display: none;
+	}
+}
+@media screen and (max-width: 375px) {
+	main .main-left {
+		flex-flow: column wrap;
+	}
+	main article {
+		width: 100%;
+	}
+}