I made website tutoria

here the index.html code

I’m Ahmad. I’m a Web Developer apparently and a student under the best programming teacher

Don’t follow me, thats stalking My Work

How I can help you

ok ok ok ok ok ok ok ok 0ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok

Some of my best pictures

More on my insta

Common Questions

What is your name?

Ahmad

Is grass green?

Go check

Contact me

*cool number*

here is the styles.css code

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=SN+Pro:ital,wght@0,200..900;1,200..900&display=swap');
 
:root {
  --base-color:      #ffffff;
  --text-color:      #000000;
  --primary-color:   #ffc06e;
  --secondary-color: #8D8DFF;
  --color-1:         #F9F6F3;
  --color-2:         #F3F7F9;
  --color-3:         #F6F3F9;
}
 
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
html {
  font-family: Poppins, 'Segoe UI', Tahoma;
  color: var(--text-color);
}
 
body {
  padding: 1em;
  background-color: var(--base-color);
}
 
 
h1, h2, h3{
  font-family: Merriweather, Popins, 'Segoe';
}
 
nav {
  margin: 1em auto 3em auto;
  width: min(1000px, 100%);
}
 
nav ul {
  display: flex;
  align-items: center;
  list-style-type: none;
  gap: 2em;
}
 
 
 
nav li:first-child{
  margin-right: auto;
  font-family: Merriweather, Poppins;
  font-weight: bold;
 
}
 
 
 
nav a{
  text-decoration: none;
  color: var(--text-color);
 
 
}
nav a :hover{
  text-decoration: underline;
}
 
header, section {
  margin:2em auto;
  width: min(75em, 100%);
  background-color: var(--color-1);
  padding: min(2em, 15%);
  border-radius: 1em;
 
}
 
 
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 3em;
}
 
header img{
  max-width: 100%;
  border-radius: 1em;
  object-fit: cover;
  object-position: bottom;
}
 
 
.text-container{
  flex: 0 1 34em;
}
 
h1 {
  font-size: 2.5rem;
}
 
 
.text-container p{
  margin: .75em 0 1em 0;
  font-size: 1.25rem;
 
}
.cta-button {
  display: inline-block;
  text-decoration: none;
  color: white;
  background-color: var(--primary-color);
  padding: .75em 1.25em;
  border-radius: .5em;
  font-weight: 600;
}
 
 
 
.secondary {
  background-color: var(--secondary-color);
}
 
 
section {
  padding: 3em min(2em, 15%);
  background-color: var(--color-2);
  text-align: center;
 
}
 
 
h2 {
  font-size: 2rem;
}
 
section p {
  font-size: 1.25rem;
}
 
 
section#my-work {
  background-color: var(--color-3);
}
 
.grid-container {
 
  margin-top: 3em;
  margin-bottom: 3em;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
  "img-1 img-1 img-2 img-3"
  "img-1 img-1 img-4 img-5";
  gap: 1em;
}
 
 
 
.grid-container img {
  height: 100%;
  width: 100%;
  border-radius: .5em;
  transition: 100ms ease;
}
 
 
.grid-container img:hover {
  scale: 1.05;
}

here is picture