Glasgow_6-Muath_Alawadhi-HTML-CSS-Coursework-Week1

final.css

@@ -0,0 +1,201 @@
+.container{
+ width: 100%;
+ height: 100vh;
+ background-image: url(background1.jpg);
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ padding-left: 6%;
+ padding-right:6%;
+ box-sizing: border-box;
+}
+.navbar{
+ height: 15%;
+ display: flex;
+ text-align: center;
+ position: sticky;
+ top: 0px;
+
+
+}
+.logo{
+ width: 200px;
+ height: 70px;
+ cursor: pointer;
+ margin-top: 10px;
+ border: 0px;
+}
+nav{
+ flex: 1;
+
+ text-align: right;
+ position: sticky;
+ top: 0px;
+
+}
+
+
+nav ul li {
+ list-style: none;
+ display: inline-block;
+ margin-left: 60px;
+ transition: 0.5s;
+
+
+}
+
+
+a{
+ text-decoration: none;
+ font-size: 15px;
+ color: #fff;
+ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+ font-weight: bold;
+}
+li:hover{
+ transform: translateY(-10px);
+
+
+
+}
+.row{
+ display: flex;
+ height: 85%;
+ align-items: center;
+ color: #fff;
+}
+.text{
+ flex-basis: 55%;
+ line-height: 1px;
+}
+ h1{
+ font-size: 100px;
+font-weight: bolder;
+}
+p{
+ line-height: 20px;
+ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+ font-size: 18px;
+ font-weight: lighter;
+}
+button{
+font-size: 20px;
+font-weight: bold;
+padding: 10px 45px;
+border: 0;
+border-radius: 30px;
+
+transition: 0.5s;
+}
+
+button:hover{
+ transform: translateY(-10px);
+}
+.explore{color: black;
+font-size: 20px;
+ font-weight: bold;
+ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+
+}
+.stores{
+ width: 180px;
+ height: 140px;
+ display: inline-block;
+ border-radius: 20px;
+ background-position: center;
+ background-size: cover;
+ padding-top: 2px;
+ padding-bottom: 30px;
+ text-align: center;
+ box-sizing: border-box;
+ cursor: pointer;
+ margin: 10px 15px;
+ transition: 0.5s;
+ color: rgb(6, 6, 47);
+ font-size: 30px;
+ font-weight: lighter;
+ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+
+
+}
+
+
+.col{
+ margin-left: 250px;
+
+}
+.stores:hover{
+ transform: translateY(-10px);
+}
+.story1{
+ background-image: url(story1.jpg);
+}.story2 {
+ background-image: url(story2.jpg);
+ color: #fff;
+}.story3 {
+ background-image: url(story3.jpg);
+ color: rgb(6, 6, 47);
+}.story4 {
+ color: #fff;
+ background-image: url(story4.jpg);
+}
+
+.content{
+ padding: 0px 24px ;
+ text-align: justify;
+ font-size: 20px;
+ border: rgb(5, 5, 46) 10px solid;
+
+}
+h3{
+ font-size: 50px;
+ font-family: Georgia, 'Times New Roman', Times, serif;
+ text-align: center;
+}
+hr{
+ clear: both;
+ border: 2px rgb(6, 6, 54) solid;
+ height: 1px;
+}
+img{
+
+ width: 70%;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ border: 1px rgb(3, 3, 41) solid;
+ border-radius: 50px;
+
+}
+.LEARN{
+ color: rgb(166, 12, 12);
+ font-size: large;
+}
+.footer-content
+{
+ width: 100%;
+ text-align: center;
+ background: #111046;
+ padding: 20px 0px;
+ font-weight: bold;
+ color: #fff;
+ margin: 10px;
+}
+
+h6{
+ font-size: 20px;
+ margin: 10px;
+}
+.scial{
+ height: 15%;
+ display: flex;
+ cursor: pointer;
+}
+.scial2{
+ width: 70px;
+ height: 70px;
+ list-style: none;
+}
+.email{
+ color: #052afa;
+}