adding first lab

README.md

@@ -1,2 +1,6 @@
 # web-programming
 web labs
+lab 1: 
+create simple landing page using semantic tags, matching design in figma, following naming convention, supporting basic cross-browsers, also responsiveness is not required.
+
+my design template : https://www.google.com/url?q=https://www.google.com/url?q%3Dhttps://www.figma.com/file/fJKhikm2WvdbmetEvibfhN/LabWork1-V8%26amp;sa%3DD%26amp;source%3Deditors%26amp;ust%3D1661962313764538%26amp;usg%3DAOvVaw1dYgsRLGJS6YU9cdYX5KJH&sa=D&source=docs&ust=1661962313829046&usg=AOvVaw0DWKdmC7buM-yG4Mosv3qg

css/clients.css

@@ -0,0 +1,61 @@
+.clients__text{
+    padding-top: 58px;
+    text-align: center;
+}
+
+.clients__title{
+    font-family: 'DM Serif Display';
+    font-weight: 400;
+    font-size: 48px;
+    line-height: 140%;
+    color: #402B2B;
+    margin: 13px 0px 50px 0px;
+}
+
+.grid{
+    display: grid;
+    grid-template-columns: auto auto auto;
+    column-gap: 20px;
+    margin: 0px 0px 184px 152px;
+}
+
+.bg__white{
+    width: 420px;
+    height: 360px;
+    background: #FFFFFF;
+    box-shadow: 0px 20px 40px rgba(238, 77, 71, 0.1);
+    border-radius: 10px;
+}
+
+.grid__text{
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 30px;
+    color: #402B2B;
+    padding-top: 60px;
+    text-align: left;
+    width: 320px;
+}
+
+.grid__name{
+    font-family: 'Roboto';
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 30px;
+    color: #402B2B;
+    margin-left: 20px;
+}
+
+.box-content{
+    margin-left: 48px;
+}
+
+.data{
+    display: flex;
+    padding-top: 60px;
+}
+
+.data_2{
+    display: flex;
+    padding-top: 32px;
+}

css/footer.css

@@ -0,0 +1,20 @@
+.footer__background{
+    width: 1600px;
+    height: 205px;
+    background: #F16353;
+}
+
+.footer__text{
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 30px;
+    color: #F8F9FA;
+}
+
+.footer__content{
+    display: flex;
+    padding-top: 90px;
+    text-align: center;
+    justify-content: space-around;
+}
+

css/global.css

@@ -0,0 +1,32 @@
+body {
+    background: #FEF8F5;
+    font-family: "Rubik";
+    color: #ffffff;
+    margin: 0px;
+}
+
+li {
+    display: block;
+}
+
+a {
+    text-decoration: none;
+    color: white;
+}
+
+.main__title{
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 40px;
+    letter-spacing: 0.1em;
+    color:#EE4D47;
+}
+
+.main__paragraph{
+    font-weight: 300;
+    font-size: 18px;
+    line-height: 40px;
+    color: #402B2B;
+    width: 470px;
+    margin-top: 40px; 
+}

css/intro.css

@@ -0,0 +1,93 @@
+.intro__image{
+    display: flex;
+    justify-content: center;
+    padding-right: 152px;
+    padding-left: 163px;
+    margin-top: -40px;
+}
+
+.intro__content{
+    position: absolute;
+    top: 0px;
+    justify-content: center;
+    margin-left: 150px;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+}  
+
+.header__logo {
+    display: flex;
+    align-items: center;
+    margin-right: 292px;
+}
+
+.header__nav ul {
+    display: flex;
+}
+
+.header__nav-iteam {
+    margin-right: 94px;
+    align-items: center;
+    text-align: center;
+    font-weight: 700;
+    font-size: 16px;
+    font-style: bold;
+}
+
+.header__contact-us {
+    background: #EE4D47;
+    width: 158px;
+    height: 60px;
+    border-radius: 5px;
+    color: #FFFF;
+    font-weight: 700;
+    font-size: 16px;
+    align-content: center;
+    border: 0;
+    line-height: 19px;
+    letter-spacing: 0.05em;
+}
+
+.intro__inner{
+    padding-top: 75px;
+}
+
+.intro__text{
+    font-family: 'DM Serif Display';
+    font-weight: 400;
+    font-size: 100px;
+    line-height: 100%;
+    width: 741px;
+    height: 300px;
+    margin-bottom: 60px;
+    margin-top: 0px;
+}
+
+.intro__get-started{
+    width: 220px;
+    height: 60px;
+    background: #EE4D47;
+    border-radius: 5px;
+    color: #FFFF;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+    letter-spacing: 0.05em;
+    border: none;
+}
+
+.intro__get-started a span{
+    padding: 0 55px 0 0;
+    background: url(../images/arrow.svg) right no-repeat;
+}
+
+.intro__car-image{
+    position: relative;
+    left: -200px;
+    top: -245px;
+}

css/main__content.css

@@ -0,0 +1,44 @@
+.main__about-us{
+    display: flex;
+}
+
+.main__text-about{
+    padding-left: 251px;
+}
+
+.main__image-man{
+    margin-right: 152px;
+}
+
+.main__graphic{
+    padding-top: 70px;
+}
+
+.container {
+    position: relative;
+    text-align: center;
+  }
+
+.centered-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 36px;
+    color: #402B2B;
+    width: 460px;
+    }
+
+.main__how-to-apply{
+    display: flex;
+}
+
+.main__image-girl{
+    margin: 29px 58px 0px 134px;
+}
+
+.main__text-apply{
+    margin-top: 130px;
+}

css/styles.css

@@ -0,0 +1,8 @@
+/* Global styles */
+@import url(../css/global.css);
+
+/* Styles divided into section */
+@import url(../css/intro.css);
+@import url(../css/main__content.css);
+@import url(../css/clients.css);
+@import url(../css/footer.css);